diff --git a/static/custom.css b/static/custom.css
index e69de29..403d381 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -0,0 +1,187 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;400;600&display=swap');
+:root {
+ --font: 'Onest', sans-serif;
+ --bg-color: #15171f;
+ --font-color: #dadada;
+ --font-size: 17px;
+}
+
+@font-face {
+ src: url("./fonts/Onest-Bold.ttf");
+ font-family: "Onest";
+ font-weight: 600;
+}
+
+@font-face {
+ src: url("./fonts/Onest-Medium.ttf");
+ font-family: "Onest";
+ font-weight: 400;
+}
+
+@font-face {
+ src: url("./fonts/Onest-Regular.ttf");
+ font-family: "Onest";
+ font-weight: 200;
+}
+
+
+body {
+ padding: 0;
+ margin: 0;
+ background-color: var(--bg-color);
+ font-family: var(--font);
+ color: var(--font-color);
+ font-size: var(--font-size);
+ font-weight: 200;
+}
+
+button, a {
+ outline: 0;
+ border: 0;
+ text-decoration: none;
+ background: 0;
+ font-family: var(--font);
+ color: var(--font-color);
+ font-size: var(--font-size);
+}
+
+nav {
+ /* ground-color: #0d0e13; */
+
+
+}
+
+nav .container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ border-bottom: 1px solid #9f9f9f;
+}
+
+.container {
+ max-width: 1300px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.nav-avatar {
+ display: flex;
+ align-items: center;
+
+}
+
+.nav-avatar img {
+ width: 60px;
+ border-radius: 1rem;
+}
+
+.nav-name {
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.nav-toggle-button {
+ display: none;
+ cursor: pointer;
+}
+
+.nav-list {
+ list-style: none;
+ display: flex;
+ gap: 10px 40px;
+}
+
+.nav-button {
+ transition: .12s ease-in-out;
+}
+
+.nav-button:hover {
+ color: #c7c7c7;
+}
+
+.mc {
+ margin-top: 50px;
+}
+/* РАЗМЕТКА */
+.mc h1, .mc h2, .mc h3, .mc h4, .mc h5 {
+ color: #fff;
+}
+
+.mc a {
+ color: #fff;
+ font-weight: 400;
+}
+
+.mc a:hover {
+ text-decoration: underline;
+}
+
+.mc code {
+ color: #fff;
+ background-color: #0d0e13;
+ border-radius: 0.1rem;
+}
+
+.mc table {
+ display: block;
+ width: 100%;
+ flex-direction: column;
+ text-align: left;
+ border-collapse: collapse;
+ white-space: nowrap;
+ margin-bottom: 15px;
+}
+
+.mc table * {
+
+}
+
+
+
+
+.mc table td, table th {
+ padding: 15px;
+ border-bottom: 1px solid #d6d6d6;
+}
+
+
+
+
+@media (max-width: 520px) {
+ .nav-toggle-button {
+ display: block;
+ font-size: 25px;
+ }
+
+ .nav-toggle {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height .5s;
+ }
+
+ .nav-toggle.active {
+ max-height: 200px;
+ }
+
+ nav .container {
+ flex-direction: column;
+ }
+ .nav-toggle .nav-list {
+ flex-direction: column;
+ padding: 0;
+ gap: 15px 0;
+ }
+ .nav-toggle {
+ width: 100%;
+ }
+
+
+ .nav-main {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+}
diff --git a/static/fonts/Onest-Bold.ttf b/static/fonts/Onest-Bold.ttf
new file mode 100644
index 0000000..13f721c
Binary files /dev/null and b/static/fonts/Onest-Bold.ttf differ
diff --git a/static/fonts/Onest-Medium.ttf b/static/fonts/Onest-Medium.ttf
new file mode 100644
index 0000000..77cb143
Binary files /dev/null and b/static/fonts/Onest-Medium.ttf differ
diff --git a/static/fonts/Onest-Regular.ttf b/static/fonts/Onest-Regular.ttf
new file mode 100644
index 0000000..23570c7
Binary files /dev/null and b/static/fonts/Onest-Regular.ttf differ
diff --git a/static/javascript/navbar.js b/static/javascript/navbar.js
new file mode 100644
index 0000000..ee05ab1
--- /dev/null
+++ b/static/javascript/navbar.js
@@ -0,0 +1,15 @@
+let navOpen = false
+function getNavbar() {
+ let navbar = document.getElementById("nav-toggle")
+
+ switch (navOpen) {
+ case false:
+ navbar.classList.add("active")
+ navOpen = true;
+ break;
+ case true:
+ navbar.classList.remove("active")
+ navOpen = false;
+ break;
+ }
+}
\ No newline at end of file
diff --git a/template.html b/template.html
index 72ad7b1..19fad78 100644
--- a/template.html
+++ b/template.html
@@ -5,13 +5,37 @@
+
+
Arbuz?
-
- {{%CONTENT%}}
-
+
+
+
+
+ {{%CONTENT%}}
+
+
+