0.0.3

static/aerbimCSS.css

@@ -1,6 +1,24 @@
+
 body,html{
     margin: 0;
     background: #ffffff;
+    font-family:
+        -apple-system,
+        'Raleway-Black' ,
+        'Raleway-BlackItalic',
+        'Raleway-Bold' ,
+        'Raleway-BoldItalic' ,
+        'Raleway-ExtraBold' ,
+        'Raleway-ExtraBoldItalic' ,
+        'Raleway-ExtraLight' ,
+        'Raleway-ExtraLightItalic' ,
+        'Raleway-Medium' ,
+        'Raleway-MediumItalic' ,
+        'Raleway-SemiBold' ,
+        'Raleway-SemiBoldItalic' ,
+        'Raleway-Thin' ,
+        'Raleway-ThinItalic' ,
+        'sans-serif';
 }
 
 .header{
@@ -17,6 +35,10 @@ body,html{
     margin: auto;
 }
 
+.content{
+    width: 100%;
+    margin-top: 55px;
+}
 
 
 /*header*/
@@ -41,6 +63,7 @@ body,html{
 .standart_txt{
     color: #ffffff;
     /*font-family: Spline Sans;*/
+    font-family: -apple-system, 'Raleway-Regular', sans-serif;
     font-size: 16px;
     font-weight: 500;
     line-height: normal;
@@ -75,4 +98,65 @@ body,html{
     background: none;
     border: none;
     outline: none;
+}
+
+
+
+/*sections*/
+
+.container_sections_buttons{
+    height: 55px;
+    background: #10212B;
+    position: sticky;
+    top: 60px;
+}
+
+.container_content_sections_buttons{
+    width: 100%;
+    display: flex;
+    height: 55px;
+}
+
+.section_btn{
+    display: block;
+    text-decoration: none;
+    transition: 300ms;
+}
+.section_btn.close{
+    background: #10212B;
+    height: 55px;
+    transition: 300ms;
+}
+.section_btn.open{
+    height: 45px;
+    background: #ffffff;
+    position: relative;
+    bottom: -10px;
+    border-radius: 5px 5px 0 0;
+    transition: 300ms;
+}
+.section_btn.open > .txt_section{
+    color: #10212B;
+    padding: 15px 30px 15px 30px;
+    transition: 300ms;
+}
+.section_btn.close > .txt_section{
+    color: #ffffff;
+    padding: 18px 30px 18px 30px;
+    transition: 300ms;
+}
+
+.section_btn:hover > .txt_section{
+    padding: 15px 30px 15px 30px;
+    transition: 300ms;
+}
+
+.section_btn:hover {
+    height: 45px;
+    position: relative;
+    bottom: -10px;
+}
+
+.txt_section{
+    padding: 18px 30px 18px 30px;
 }

static/aerbimJS.js

@@ -24,7 +24,7 @@ function sendWidthAjax () {
 
 function renderContent () {
     let data = sendWidthAjax()
-    let section_button = document.querySelector(".section_button")
+    let section_button = document.querySelector(".section_btn")
     data['section_url'] = section_button.dataset['url']
     $.ajax({
         headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },

static/fonts/fonts.css

@@ -0,0 +1,57 @@
+@font-face {
+    font-family: "Raleway-Black";
+    src: url("/static/fonts/Raleway-Black.ttf");
+}
+@font-face {
+    font-family: "Raleway-BlackItalic";
+    src: url("/static/fonts/Raleway-BlackItalic.ttf");
+}
+@font-face {
+    font-family: "Raleway-Bold";
+    src: url("/static/fonts/Raleway-Bold.ttf");
+}
+@font-face {
+    font-family: "Raleway-BoldItalic";
+    src: url("/static/fonts/Raleway-BoldItalic.ttf");
+}
+@font-face {
+    font-family: "Raleway-ExtraBold";
+    src: url("/static/fonts/Raleway-ExtraBold.ttf");
+}
+@font-face {
+    font-family: "Raleway-ExtraBoldItalic";
+    src: url("/static/fonts/Raleway-ExtraBoldItalic.ttf");
+}
+@font-face {
+    font-family: "Raleway-ExtraLight";
+    src: url("/static/fonts/Raleway-ExtraLight.ttf");
+}
+@font-face {
+    font-family: "Raleway-ExtraLightItalic";
+    src: url("/static/fonts/Raleway-ExtraLightItalic.ttf");
+}
+@font-face {
+    font-family: "Raleway-Medium";
+    src: url("/static/fonts/Raleway-Medium.ttf");
+}
+@font-face {
+    font-family: "Raleway-MediumItalic";
+    src: url("/static/fonts/Raleway-MediumItalic.ttf");
+}
+@font-face {
+    font-family: "Raleway-SemiBold";
+    src: url("/static/fonts/Raleway-SemiBold.ttf");
+}
+@font-face {
+    font-family: "Raleway-SemiBoldItalic";
+    src: url("/static/fonts/Raleway-SemiBoldItalic.ttf");
+}
+@font-face {
+    font-family: "Raleway-Thin";
+    src: url("/static/fonts/Raleway-Thin.ttf");
+}
+@font-face {
+    font-family: "Raleway-ThinItalic";
+    src: url("/static/fonts/Raleway-ThinItalic.ttf");
+}
+