diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c3d4535
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,21 @@
+{
+ "files.exclude": {
+ "**/.git": true,
+ "**/.svn": true,
+ "**/.hg": true,
+ "**/CVS": true,
+ "**/.DS_Store": true,
+ "**/Thumbs.db": true,
+ "**/__pycache__": true,
+ "**/.vscode": true,
+ "**/*.map": true,
+ "static/css/base.css": true,
+ "static/css/home.css": true,
+ "static/css/navbar.css": true
+ },
+ "hide-files.files": [
+ "static/css/base.css",
+ "static/css/home.css",
+ "static/css/navbar.css"
+ ]
+}
\ No newline at end of file
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..a6275c1
--- /dev/null
+++ b/app.py
@@ -0,0 +1,24 @@
+import os
+import flask
+import logging
+
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = flask.Flask(__name__)
+
+log = logging.getLogger('werkzeug')
+log.disabled = True
+
+@app.context_processor
+def inject_variables():
+ return {
+ 'contact_email': os.getenv('CONTACT_EMAIL')
+ }
+
+@app.route('/')
+def index():
+ return flask.render_template('index.html')
+
+app.run(debug=True, use_evalex=False, port=2323)
diff --git a/static/css/_vars.sass b/static/css/_vars.sass
new file mode 100644
index 0000000..ed0f32f
--- /dev/null
+++ b/static/css/_vars.sass
@@ -0,0 +1,13 @@
+$text: #f3f3f3
+$background: #03060d
+$secondary: #253038
+$border: #161d2bb0
+
+$primary: #922646
+$primary-light: #f45a88
+$accent: #28aaf0
+
+$edge: 5px
+
+$main-width: 800px
+$more-width: 1000px
diff --git a/static/css/base.css b/static/css/base.css
new file mode 100644
index 0000000..1e784a7
--- /dev/null
+++ b/static/css/base.css
@@ -0,0 +1,57 @@
+@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap");
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ background-color: #03060d;
+}
+
+nav, main, footer {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+*, *::before, *::after {
+ box-sizing: border-box;
+ border: none;
+ color: #f3f3f3;
+ font-family: "Inter", sans-serif;
+}
+
+a {
+ text-decoration: none;
+}
+
+h1, h1 *, h2, h2 *, h3, h3 * {
+ font-weight: 700;
+ line-height: 4.8rem;
+ font-family: "Syne", sans-serif;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+}
+
+p {
+ line-height: 18px;
+ line-height: 32px;
+}
+
+:focus:not(:focus-visible) {
+ outline: none;
+}
+
+mark {
+ color: #f3f3f3;
+ background: #f45a88;
+ padding: 5px 7px;
+ border-radius: 5px;
+}
+
+@media (max-width: 900px) {
+ body {
+ margin: 0 2rem;
+ }
+}/*# sourceMappingURL=base.css.map */
\ No newline at end of file
diff --git a/static/css/base.css.map b/static/css/base.css.map
new file mode 100644
index 0000000..7ad2052
--- /dev/null
+++ b/static/css/base.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AACQ,kFAAA;AAER;EACI,uBAAA;ACDJ;;ADGA;EACI,yBENS;ADMb;;ADEA;EACI,gBECS;EFAT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEhBG;EFiBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,mBAAA;EACA,+BAAA;ACGR;;ADDA;EACI,cAAA;EACA,eAAA;ACIJ;;ADFA;EACI,iBAAA;EACA,iBAAA;ACKJ;;ADHA;EACI,aAAA;ACMJ;;ADJA;EACI,cExCG;EFyCH,mBEnCY;EFoCZ,gBAAA;EACA,kBAAA;ACOJ;;ADLA;EACI;IACI,cAAA;ECQN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')\n\nhtml\n scroll-behavior: smooth\n\nbody\n background-color: $background\n\nnav, main, footer\n max-width: $main-width\n margin: 0 auto\n\n*, *::before, *::after\n box-sizing: border-box\n border: none\n color: $text\n font-family: 'Inter', sans-serif\n\na\n text-decoration: none\n\nh1, h2, h3\n &, *\n font-weight: 700\n line-height: 4.8rem\n font-family: 'Syne', sans-serif\n\nimg\n display: block\n max-width: 100%\n\np\n line-height: 18px\n line-height: 32px\n\n:focus:not(:focus-visible)\n outline: none\n\nmark\n color: $text\n background: $primary-light\n padding: 5px 7px\n border-radius: 5px\n\n@media (max-width: 900px)\n body\n margin: 0 2rem\n\n","@import url(\"https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap\");\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n background-color: #03060d;\n}\n\nnav, main, footer {\n max-width: 800px;\n margin: 0 auto;\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n border: none;\n color: #f3f3f3;\n font-family: \"Inter\", sans-serif;\n}\n\na {\n text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n font-weight: 700;\n line-height: 4.8rem;\n font-family: \"Syne\", sans-serif;\n}\n\nimg {\n display: block;\n max-width: 100%;\n}\n\np {\n line-height: 18px;\n line-height: 32px;\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n\nmark {\n color: #f3f3f3;\n background: #f45a88;\n padding: 5px 7px;\n border-radius: 5px;\n}\n\n@media (max-width: 900px) {\n body {\n margin: 0 2rem;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
diff --git a/static/css/base.sass b/static/css/base.sass
new file mode 100644
index 0000000..1b92906
--- /dev/null
+++ b/static/css/base.sass
@@ -0,0 +1,49 @@
+@import '_vars'
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')
+
+html
+ scroll-behavior: smooth
+
+body
+ background-color: $background
+
+nav, main, footer
+ max-width: $main-width
+ margin: 0 auto
+
+*, *::before, *::after
+ box-sizing: border-box
+ border: none
+ color: $text
+ font-family: 'Inter', sans-serif
+
+a
+ text-decoration: none
+
+h1, h2, h3
+ &, *
+ font-weight: 700
+ line-height: 4.8rem
+ font-family: 'Syne', sans-serif
+
+img
+ display: block
+ max-width: 100%
+
+p
+ line-height: 18px
+ line-height: 32px
+
+:focus:not(:focus-visible)
+ outline: none
+
+mark
+ color: $text
+ background: $primary-light
+ padding: 5px 7px
+ border-radius: 5px
+
+@media (max-width: 900px)
+ body
+ margin: 0 2rem
+
diff --git a/static/css/footer.css b/static/css/footer.css
new file mode 100644
index 0000000..d38cd14
--- /dev/null
+++ b/static/css/footer.css
@@ -0,0 +1,58 @@
+footer {
+ padding-top: 4rem;
+ margin: 4rem auto;
+ max-width: 800px;
+}
+footer.wide {
+ max-width: 1000px;
+}
+footer div.rows {
+ display: grid;
+ grid-auto-flow: column;
+ margin-bottom: 2rem;
+}
+footer div.rows div.row {
+ margin-right: 1.5rem;
+ margin-bottom: 0.5rem;
+}
+footer div.rows div.row:last-child {
+ margin-right: 0;
+ margin-bottom: 0;
+}
+footer div.rows div.row h2 {
+ opacity: 1;
+ font-size: 1rem;
+ font-weight: 500;
+ margin: 1rem 0;
+ line-height: normal;
+}
+footer div.rows div.row a {
+ width: -moz-fit-content;
+ width: fit-content;
+ font-size: 14px;
+ opacity: 0.6;
+ display: block;
+ text-decoration: none;
+ margin-bottom: 1rem;
+}
+footer div.rows div.row a:hover {
+ opacity: 0.8;
+}
+footer p {
+ opacity: 0.7;
+}
+
+@media (max-width: 1000px) {
+ footer div.rows {
+ grid-auto-flow: row;
+ grid-template-columns: repeat(2, 1fr);
+ }
+ footer div.rows div.row {
+ margin-bottom: 1rem;
+ }
+}
+@media (max-width: 600px) {
+ footer div.rows {
+ grid-template-columns: 1fr;
+ }
+}/*# sourceMappingURL=footer.css.map */
\ No newline at end of file
diff --git a/static/css/footer.css.map b/static/css/footer.css.map
new file mode 100644
index 0000000..2579417
--- /dev/null
+++ b/static/css/footer.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["footer.sass","_vars.sass","footer.css"],"names":[],"mappings":"AAEA;EACI,iBAAA;EACA,iBAAA;EACA,gBCMS;ACPb;AFGI;EACI,iBCIK;ACLb;AFGI;EACI,aAAA;EACA,sBAAA;EAEA,mBAAA;AEFR;AFIQ;EACI,oBAAA;EACA,qBAAA;AEFZ;AFIY;EACI,eAAA;EACA,gBAAA;AEFhB;AFIY;EACI,UAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;AEFhB;AFIY;EACI,uBAAA;EAAA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,mBAAA;AEFhB;AFIgB;EACI,YAAA;AEFpB;AFII;EACI,YAAA;AEFR;;AFIA;EAEQ;IACI,mBAAA;IACA,qCAAA;EEFV;EFIU;IACI,mBAAA;EEFd;AACF;AFGA;EAEQ;IACI,0BAAA;EEFV;AACF","file":"footer.css","sourcesContent":["@import '_vars'\n\nfooter\n padding-top: 4rem\n margin: 4rem auto\n max-width: $main-width\n\n &.wide\n max-width: $more-width\n\n div.rows\n display: grid\n grid-auto-flow: column\n // justify-content: space-between\n margin-bottom: 2rem\n\n div.row\n margin-right: 1.5rem\n margin-bottom: 0.5rem\n\n &:last-child\n margin-right: 0\n margin-bottom: 0\n\n h2\n opacity: 1\n font-size: 1rem\n font-weight: 500\n margin: 1rem 0\n line-height: normal\n\n a\n width: fit-content\n font-size: 14px\n opacity: 0.6\n display: block\n text-decoration: none\n margin-bottom: 1rem\n\n &:hover\n opacity: 0.8\n\n p\n opacity: 0.7\n\n@media (max-width: 1000px)\n footer\n div.rows\n grid-auto-flow: row\n grid-template-columns: repeat(2, 1fr)\n\n div.row\n margin-bottom: 1rem\n\n@media (max-width: 600px)\n footer\n div.rows\n grid-template-columns: 1fr\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","footer {\n padding-top: 4rem;\n margin: 4rem auto;\n max-width: 800px;\n}\nfooter.wide {\n max-width: 1000px;\n}\nfooter div.rows {\n display: grid;\n grid-auto-flow: column;\n margin-bottom: 2rem;\n}\nfooter div.rows div.row {\n margin-right: 1.5rem;\n margin-bottom: 0.5rem;\n}\nfooter div.rows div.row:last-child {\n margin-right: 0;\n margin-bottom: 0;\n}\nfooter div.rows div.row h2 {\n opacity: 1;\n font-size: 1rem;\n font-weight: 500;\n margin: 1rem 0;\n line-height: normal;\n}\nfooter div.rows div.row a {\n width: fit-content;\n font-size: 14px;\n opacity: 0.6;\n display: block;\n text-decoration: none;\n margin-bottom: 1rem;\n}\nfooter div.rows div.row a:hover {\n opacity: 0.8;\n}\nfooter p {\n opacity: 0.7;\n}\n\n@media (max-width: 1000px) {\n footer div.rows {\n grid-auto-flow: row;\n grid-template-columns: repeat(2, 1fr);\n }\n footer div.rows div.row {\n margin-bottom: 1rem;\n }\n}\n@media (max-width: 600px) {\n footer div.rows {\n grid-template-columns: 1fr;\n }\n}"]}
\ No newline at end of file
diff --git a/static/css/footer.sass b/static/css/footer.sass
new file mode 100644
index 0000000..9c5ea23
--- /dev/null
+++ b/static/css/footer.sass
@@ -0,0 +1,58 @@
+@import '_vars'
+
+footer
+ padding-top: 4rem
+ margin: 4rem auto
+ max-width: $main-width
+
+ &.wide
+ max-width: $more-width
+
+ div.rows
+ display: grid
+ grid-auto-flow: column
+ // justify-content: space-between
+ margin-bottom: 2rem
+
+ div.row
+ margin-right: 1.5rem
+ margin-bottom: 0.5rem
+
+ &:last-child
+ margin-right: 0
+ margin-bottom: 0
+
+ h2
+ opacity: 1
+ font-size: 1rem
+ font-weight: 500
+ margin: 1rem 0
+ line-height: normal
+
+ a
+ width: fit-content
+ font-size: 14px
+ opacity: 0.6
+ display: block
+ text-decoration: none
+ margin-bottom: 1rem
+
+ &:hover
+ opacity: 0.8
+
+ p
+ opacity: 0.7
+
+@media (max-width: 1000px)
+ footer
+ div.rows
+ grid-auto-flow: row
+ grid-template-columns: repeat(2, 1fr)
+
+ div.row
+ margin-bottom: 1rem
+
+@media (max-width: 600px)
+ footer
+ div.rows
+ grid-template-columns: 1fr
diff --git a/static/css/home.css b/static/css/home.css
new file mode 100644
index 0000000..9fd6a66
--- /dev/null
+++ b/static/css/home.css
@@ -0,0 +1,14 @@
+header {
+ max-width: 800px;
+ margin: 0 auto;
+ font-size: 40px;
+}
+
+@media (max-width: 800px) {
+ header {
+ font-size: 26px;
+ }
+ header h1 {
+ line-height: 3rem;
+ }
+}/*# sourceMappingURL=home.css.map */
\ No newline at end of file
diff --git a/static/css/home.css.map b/static/css/home.css.map
new file mode 100644
index 0000000..d98ac12
--- /dev/null
+++ b/static/css/home.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["home.sass","_vars.sass","home.css"],"names":[],"mappings":"AAEA;EACI,gBCQS;EDPT,cAAA;EACA,eAAA;AEDJ;;AFGA;EACI;IACI,eAAA;EEAN;EFEM;IACI,iBAAA;EEAV;AACF","file":"home.css","sourcesContent":["@import '_vars'\n\nheader\n max-width: $main-width\n margin: 0 auto\n font-size: 40px\n\n@media (max-width: 800px)\n header\n font-size: 26px\n \n h1\n line-height: 3rem\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","header {\n max-width: 800px;\n margin: 0 auto;\n font-size: 40px;\n}\n\n@media (max-width: 800px) {\n header {\n font-size: 26px;\n }\n header h1 {\n line-height: 3rem;\n }\n}"]}
\ No newline at end of file
diff --git a/static/css/home.sass b/static/css/home.sass
new file mode 100644
index 0000000..2ad88fb
--- /dev/null
+++ b/static/css/home.sass
@@ -0,0 +1,13 @@
+@import '_vars'
+
+header
+ max-width: $main-width
+ margin: 0 auto
+ font-size: 40px
+
+@media (max-width: 800px)
+ header
+ font-size: 26px
+
+ h1
+ line-height: 3rem
diff --git a/static/css/navbar.css b/static/css/navbar.css
new file mode 100644
index 0000000..3f45339
--- /dev/null
+++ b/static/css/navbar.css
@@ -0,0 +1,93 @@
+nav {
+ display: flex;
+ align-items: center;
+ position: relative;
+}
+nav > .logo {
+ display: inline-block;
+ stroke: #f45a88;
+ min-height: 40px;
+ min-width: 40px;
+ height: 40px;
+ width: 40px;
+ margin-right: 8px;
+ transition: stroke 0.2s;
+}
+nav > h1 {
+ font-weight: 500;
+ font-size: 20px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+nav > h1 mark {
+ font-size: 1rem;
+ position: relative;
+ top: -3px;
+}
+nav > span {
+ flex-grow: 1;
+}
+nav #menu {
+ display: none;
+ cursor: pointer;
+}
+
+.link-menu > a {
+ font-size: 14px;
+ font-weight: 600;
+ margin-left: 2rem;
+ text-decoration: none;
+ transition: color 0.1s;
+}
+.link-menu > a:hover {
+ color: #f45a88;
+}
+
+@media (max-width: 800px) {
+ .link-menu {
+ transform: scale(0.8) translateX(1rem);
+ opacity: 0;
+ z-index: 100;
+ width: 200px;
+ position: absolute;
+ top: 5rem;
+ right: 2rem;
+ background: #253038;
+ padding: 1rem 0;
+ border-radius: 5px;
+ -webkit-backdrop-filter: blur(4px);
+ backdrop-filter: blur(4px);
+ border: 1px solid rgba(22, 29, 43, 0.6901960784);
+ transition: transform 0.2s, opacity 0.2s;
+ }
+ .link-menu.open {
+ opacity: 1;
+ transform: inherit;
+ }
+ .link-menu a {
+ font-size: 20px;
+ display: block;
+ line-height: 3rem;
+ }
+ nav .logo {
+ stroke: #f45a88;
+ }
+ nav #menu {
+ display: block;
+ min-height: 32px;
+ min-width: 32px;
+ height: 32px;
+ width: 32px;
+ cursor: pointer;
+ transition: 0.5s;
+ }
+ nav #menu.active {
+ transform: rotate(90deg);
+ }
+}
+@media (max-width: 400px) {
+ nav h1 {
+ display: none;
+ }
+}/*# sourceMappingURL=navbar.css.map */
\ No newline at end of file
diff --git a/static/css/navbar.css.map b/static/css/navbar.css.map
new file mode 100644
index 0000000..68c3653
--- /dev/null
+++ b/static/css/navbar.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["navbar.sass","navbar.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;ACDJ;ADGI;EACI,qBAAA;EACA,eEHQ;EFIR,gBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EAEA,iBAAA;EACA,uBAAA;ACFR;ADII;EACI,gBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACFR;ADIQ;EACI,eAAA;EACA,kBAAA;EACA,SAAA;ACFZ;ADKI;EACI,YAAA;ACHR;ADMI;EACI,aAAA;EACA,eAAA;ACJR;;ADOI;EACI,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;ACJR;ADMQ;EACI,cExCI;ADoChB;;ADMA;EACI;IACI,sCAAA;IACA,UAAA;IAEA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,mBExDI;IFyDJ,eAAA;IACA,kBEnDD;IFoDC,kCAAA;YAAA,0BAAA;IACA,gDAAA;IAEA,wCAAA;ECLN;EDOM;IACI,UAAA;IACA,kBAAA;ECLV;EDOM;IACI,eAAA;IACA,cAAA;IACA,iBAAA;ECLV;EDQM;IACI,eEvEI;EDiEd;EDQM;IACI,cAAA;IACA,gBAAA;IACA,eAAA;IACA,YAAA;IACA,WAAA;IACA,eAAA;IACA,gBAAA;ECNV;EDQU;IACI,wBAAA;ECNd;AACF;ADOA;EAEQ;IACI,aAAA;ECNV;AACF","file":"navbar.css","sourcesContent":["@import '_vars'\n\nnav\n display: flex\n align-items: center\n position: relative\n\n >.logo\n display: inline-block\n stroke: $primary-light\n min-height: 40px\n min-width: 40px\n height: 40px\n width: 40px\n\n margin-right: 8px\n transition: stroke 0.2s\n\n >h1\n font-weight: 500\n font-size: 20px\n user-select: none\n\n mark\n font-size: 1rem\n position: relative\n top: -3px\n\n\n >span\n flex-grow: 1\n\n\n #menu\n display: none\n cursor: pointer\n\n.link-menu\n >a\n font-size: 14px\n font-weight: 600\n margin-left: 2rem\n text-decoration: none\n transition: color 0.1s\n\n &:hover\n color: $primary-light\n\n@media (max-width: 800px)\n .link-menu\n transform: scale(0.8) translateX(1rem)\n opacity: 0\n\n z-index: 100\n width: 200px\n position: absolute\n top: 5rem\n right: 2rem\n background: $secondary\n padding: 1rem 0\n border-radius: $edge\n backdrop-filter: blur(4px)\n border: 1px solid $border\n\n transition: transform 0.2s, opacity 0.2s\n\n &.open\n opacity: 1\n transform: inherit\n\n a\n font-size: 20px\n display: block\n line-height: 3rem\n\n nav\n .logo\n stroke: $primary-light\n\n #menu\n display: block\n min-height: 32px\n min-width: 32px\n height: 32px\n width: 32px\n cursor: pointer\n transition: 0.5s\n\n &.active\n transform: rotate(90deg)\n\n@media (max-width: 400px)\n nav\n h1\n display: none","nav {\n display: flex;\n align-items: center;\n position: relative;\n}\nnav > .logo {\n display: inline-block;\n stroke: #f45a88;\n min-height: 40px;\n min-width: 40px;\n height: 40px;\n width: 40px;\n margin-right: 8px;\n transition: stroke 0.2s;\n}\nnav > h1 {\n font-weight: 500;\n font-size: 20px;\n user-select: none;\n}\nnav > h1 mark {\n font-size: 1rem;\n position: relative;\n top: -3px;\n}\nnav > span {\n flex-grow: 1;\n}\nnav #menu {\n display: none;\n cursor: pointer;\n}\n\n.link-menu > a {\n font-size: 14px;\n font-weight: 600;\n margin-left: 2rem;\n text-decoration: none;\n transition: color 0.1s;\n}\n.link-menu > a:hover {\n color: #f45a88;\n}\n\n@media (max-width: 800px) {\n .link-menu {\n transform: scale(0.8) translateX(1rem);\n opacity: 0;\n z-index: 100;\n width: 200px;\n position: absolute;\n top: 5rem;\n right: 2rem;\n background: #253038;\n padding: 1rem 0;\n border-radius: 5px;\n backdrop-filter: blur(4px);\n border: 1px solid rgba(22, 29, 43, 0.6901960784);\n transition: transform 0.2s, opacity 0.2s;\n }\n .link-menu.open {\n opacity: 1;\n transform: inherit;\n }\n .link-menu a {\n font-size: 20px;\n display: block;\n line-height: 3rem;\n }\n nav .logo {\n stroke: #f45a88;\n }\n nav #menu {\n display: block;\n min-height: 32px;\n min-width: 32px;\n height: 32px;\n width: 32px;\n cursor: pointer;\n transition: 0.5s;\n }\n nav #menu.active {\n transform: rotate(90deg);\n }\n}\n@media (max-width: 400px) {\n nav h1 {\n display: none;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
diff --git a/static/css/navbar.sass b/static/css/navbar.sass
new file mode 100644
index 0000000..ba007d0
--- /dev/null
+++ b/static/css/navbar.sass
@@ -0,0 +1,95 @@
+@import '_vars'
+
+nav
+ display: flex
+ align-items: center
+ position: relative
+
+ >.logo
+ display: inline-block
+ stroke: $primary-light
+ min-height: 40px
+ min-width: 40px
+ height: 40px
+ width: 40px
+
+ margin-right: 8px
+ transition: stroke 0.2s
+
+ >h1
+ font-weight: 500
+ font-size: 20px
+ user-select: none
+
+ mark
+ font-size: 1rem
+ position: relative
+ top: -3px
+
+
+ >span
+ flex-grow: 1
+
+
+ #menu
+ display: none
+ cursor: pointer
+
+.link-menu
+ >a
+ font-size: 14px
+ font-weight: 600
+ margin-left: 2rem
+ text-decoration: none
+ transition: color 0.1s
+
+ &:hover
+ color: $primary-light
+
+@media (max-width: 800px)
+ .link-menu
+ transform: scale(0.8) translateX(1rem)
+ opacity: 0
+
+ z-index: 100
+ width: 200px
+ position: absolute
+ top: 5rem
+ right: 2rem
+ background: $secondary
+ padding: 1rem 0
+ border-radius: $edge
+ backdrop-filter: blur(4px)
+ border: 1px solid $border
+
+ transition: transform 0.2s, opacity 0.2s
+
+ &.open
+ opacity: 1
+ transform: inherit
+
+ a
+ font-size: 20px
+ display: block
+ line-height: 3rem
+
+ nav
+ .logo
+ stroke: $primary-light
+
+ #menu
+ display: block
+ min-height: 32px
+ min-width: 32px
+ height: 32px
+ width: 32px
+ cursor: pointer
+ transition: 0.5s
+
+ &.active
+ transform: rotate(90deg)
+
+@media (max-width: 400px)
+ nav
+ h1
+ display: none
\ No newline at end of file
diff --git a/static/img/fav.ico b/static/img/fav.ico
new file mode 100644
index 0000000..242e8fd
Binary files /dev/null and b/static/img/fav.ico differ
diff --git a/static/img/icon.png b/static/img/icon.png
new file mode 100644
index 0000000..09f7060
Binary files /dev/null and b/static/img/icon.png differ
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..d8feb1b
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,9 @@
+{% include 'parts/begin.html' %}
+
+
+
+ Free Generative AI for everyone
+
+
+
+{% include 'parts/end.html' %}