Perform to move main developing to git

templates/index.html

@@ -4,19 +4,19 @@
 
 {% block styles %}
     <style>
+
     main {
-        width: 90%;
-
-        margin-left: 8%;
-
-        font-size: 30px;
-        font-weight: 900;
+        width: 100%;
+        margin-left: 6em;
     }
 
     main > h1{
-        margin-top: 7%;
-        margin-left: 10%;
+        margin-top: 2em;
         width: 60%;
+        color: var(--brand-color);
+        font-weight: bolder;
+        line-height: 1.3;
+        font-size: 58px;
     }
 
     #intro-wrapper {
@@ -33,80 +33,80 @@
         width: 40%;
     }
 
-    .buttons {
-        /* вот тут был display: inline */
+    .buttons{
         display: flex;
-        flex-direction: row ;
-        width: 40%;
-        height: 10%;
-        margin-left: 5%;
-        margin-top: 5%;
-
+        align-items: center;
+        margin-top: 5em;
     }
 
-    .buttons > a {
-        color: #eee;
-        background: var(--brand-color);
+    #button-to{
+        margin: 16em;
+    }
 
-        padding: 3% 5%;
-        margin-left: 5%;
+    .buttons > a{
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        font-size: 20px;
+        color: #eee;
 
         text-decoration: none;
-        font-size: 20px;
-
-        border-radius: 12px;
-
-    }
-
-    .slogo {
-        box-sizing: border-box;
-        display: flex;
-        margin-left: 10%;
-
-        margin-bottom: 10%;
-
-        width: 35%;
-        height: 10%;
-    }
-
-    .slogo > h3 {
-
-         background: rgba(175, 162, 255, 0.06);
-         backdrop-filter: blur(5px);
-         color: var(--brand-color);
-         font-weight: 800;
-         font-size: 20px;
-         line-height: 27px;
-
-         border-radius: 24px;
-
-         padding: 5% 8%;
-         font-style: normal;
-
-
-    }
-
-    #slogo-cube, #slogo-arc {
-        z-index: -1;
         position: absolute;
+        width: 273px;
+        height: 70px;
+        background: #231765;
+        border-radius: 12px;
+    }
+    /*SLOG*/
+
+    .slog{
+        box-sizing: border-box;
+        width: 45%;
+
+        display: flex;
+        flex-direction: row;
+
+        justify-content: center;
+        align-items: center;
+        padding: 40px;
+        gap: 10px;
+
+        background: rgba(175, 162, 255, 0.06);
+        backdrop-filter: blur(5px);
+        border-radius: 24px;
+    }
+    .slog > h2{
+
+        font-style: normal;
+        font-weight: 800;
+        font-size: 20px;
+        line-height: 27px;
+        display: flex;
+        align-items: center;
+
+        color: #231765;
+
     }
 
-    #slogo-cube {
-        width: 59px;
-        height: 66px;
-        left: 15%;
-        top: 539px;
 
-        transform: rotate(18.48deg);
-    }
 
-    #slogo-arc {
-        width: 53px;
-        height: 49px;
-        left: 47%;
-        top: 423px;
 
-        transform: rotate(5.86deg);
+    @media screen and (max-width: 900px) {
+        #intro-wrapper {
+            display: none;
+        }
+
+        .buttons {
+            /* вот тут был display: inline */
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: left;
+            height: 10%;
+            margin-top: 5%;
+        }
     }
 
     </style>
@@ -119,18 +119,18 @@
     </div>
 
     <h1>Создай объявление и получи ремонт с гарантией качества</h1>
+<div class="slog">
+<h2>Здесь вы найдете проверенного исполнителя или заказчика под любую вашу задачу и профиль</h2>
+</div>
 
-    <div class="slogo">
-        <img id="slogo-cube" src="{% static 'images/cube.png' %}" alt="">
-        <h3>Здесь вы найдёте проверенного исполнителя или заказчика под любую вашу задачу и профиль</h3>
-        <img id="slogo-arc" src="{% static 'images/arc.png' %}" alt="">
+<div class="buttons">
+        <a id="button-on" href="{% url 'index' %}">Создать заказ</a>
+        <a id="button-to" href="{% url 'index' %}">Стать исполнителем</a>
     </div>
 
-    <div class="buttons">
-        <a href="{% url 'index' %}">Создать заказ</a>
-        <a href="{% url 'index' %}">Стать исполнителем</a>
-    </div>
 
-    <a href="{% url 'user-agreement' %}">Пользовательское соглашение</a>
+
+
+    <a href="{% url 'user-agreement' %}"></a>
 
 {% endblock %}