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");
+}
+

templates/head_includes/fonts_include.html

@@ -0,0 +1,19 @@
+{% load static %}
+<link rel="stylesheet" href="{% static "fonts/Raleway-Black.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-BlackItalic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-Bold.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-BoldItalic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-ExtraBold.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-ExtraBoldItalic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-ExtraLight.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-ExtraLightItalic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-Italic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-Light.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-LightItalic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-Medium.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-MediumItalic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-Regular.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-SemiBold.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-SemiBoldItalic.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-Thin.ttf" %}">
+<link rel="stylesheet" href="{% static "fonts/Raleway-ThinItalic.ttf" %}">

templates/pages/p_main.html

@@ -1 +1,14 @@
-{% extends 'tb_base.html' %}
+{% extends 'tb_base.html' %}
+{% block CONTENT %}
+
+    <div class="container_sections_buttons">
+        <div class="cut-width container_content_sections_buttons">
+            {% for section in sections %}
+                <a href="{% url 'section_page' section.url %}" class="section_btn close standart_txt" data-url="{% url 'section_page' section.url %}">
+                    <div class="txt_section standart_txt">{{ section.name }}</div>
+                </a>
+            {% endfor %}
+        </div>
+    </div>
+
+{% endblock %}

templates/tb_base.html

@@ -5,13 +5,16 @@
     <head>
         <meta charset="UTF-8">
         <title>AerBim</title>
+        {% include 'head_includes/fonts_include.html' %}
+        <link rel="stylesheet" href="{% static "fonts/fonts.css" %}">
         <link rel="stylesheet" href="{% static "aerbimCSS.css" %}">
         <script src="{% static "jquery_v3_6_4.js" %}"></script>
         <script src="{% static "aerbimJS.js" %}"></script>
+
     </head>
     <body>
         {% include "blocks/static/header.html" %}
-        <div class="cut-width content">
+        <div class="content">
             {% block CONTENT %}
 
             {% endblock %}