section_how_process20%

Qurence · Dec 2, 2024 · 35d373e · 35d373e
1 parent b5e0def
commit 35d373e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 17 deletions.
diff --git a/project4/css/main.css b/project4/css/main.css
@@ -137,7 +137,7 @@ body {
     background-size: cover;
     background-position: center;
     margin-top: -180px;
-    z-index: -1;
+    /* z-index: -1; */
 }
 
 
@@ -251,15 +251,17 @@ body {
     height: 300vh;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 100px;
+    gap: 0 100px;
+    /* line-gap-override: 100px; */
+    row-gap: 10px;
     padding: 16px;
     margin: 0 auto;
-    margin-top: 55px;
+    margin-top: 20px;
 }
 
 .item {
     width: 350px;
-    height: 350px;
+    height: 100px;
 }
 
 
@@ -297,6 +299,7 @@ body {
     height: 850px;
     margin-top: -650px;
     right: 0;
+    z-index: -1;
 }
 
 .radial-blur {
@@ -316,4 +319,57 @@ body {
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, rgba(13, 23, 33, 0), rgba(13, 23, 33, 1) 70%);
+}
+
+/* ________________Section_How________________ */
+
+.section__how {
+    width: 50vw;
+    height: 50vh;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    margin: 0 auto;
+    /* background-color: #000; */
+    /* background-color: #000; */
+    width: 50%;
+    display: flex;
+}
+
+.section__how_h {
+    text-align: center;
+    font-family: AALumus-font;
+    font-size: 60px;
+    font-weight: 100;
+}
+
+.section__left {
+    width: 55%;
+}
+.section__right {
+    width: 35%;
+}
+
+.section__left_up .fade{
+    width: 80%;
+    height: 120px;
+    margin-left: 20px;
+    margin-top: 12%;
+    border-radius: 65px;
+    background: linear-gradient(#fff, #000);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.blue__text {
+    width: 99.6%;
+    height: 99.7%;
+    background-color: #2E4862;
+    text-align: start;
+    align-content: center;
+    border-radius: 65px;
+}
+.section__left__down {
+    display: flex;
 }
diff --git a/project4/index.html b/project4/index.html
@@ -118,22 +118,28 @@ <h1 class="section1__right__text_h">Великий новорічний квес
         <div class="item-tickets" style="background-image: url(./Sources/tickets.png);"></div>
     </div>
 
+    <h1 class="section__how_h">Як потрапити?</h1>
     <section class="section__how">
-        <h1 class="section__how_h"></h1>
         <div class="section__left">
-            <div class="blue__text"></div>
-            <div class="section__left__left">
-                <div class="left__mark__text"> 📅 Дата:</div>
-                <div class="left__mark__text">⏰ Час</div>
-                <div class="left__mark__text">📍 Місце:</div>
-                <div class="left__mark__text">💰Вартість</div>
+            <div class="section__left_up">
+                <div class="fade">
+                    <div class="blue__text">Зареєструйтесь заздалегідь, щоб отримати свій квиток на платформі 9 ¾ та приєднатися до магічної події року!</div>
+                </div>
             </div>
-            <div class="section__left__right">
-                <div class="right__text">19 або 26 грудня 2024 </div>
-                <div class="right__text">Час для 1-4 класів: 10:00-13:00
-                    Час для 5-9 класів: 15:00-18:00</div>
-                <div class="right__text">Міжнародний ліцей "Дискавері Скул" -  вулиця Героїв Дніпра, 33</div>
-                <div class="right__text">300 грн</div>
+            <div class="section__left__down">
+                <div class="section__left__left">
+                    <div class="left__mark__text"> 📅 Дата:</div>
+                    <div class="left__mark__text">⏰ Час</div>
+                    <div class="left__mark__text">📍 Місце:</div>
+                    <div class="left__mark__text">💰Вартість</div>
+                </div>
+                <div class="section__left__right">
+                    <div class="right__text">19 або 26 грудня 2024 </div>
+                    <div class="right__text">Час для 1-4 класів: 10:00-13:00
+                        Час для 5-9 класів: 15:00-18:00</div>
+                    <div class="right__text">Міжнародний ліцей "Дискавері Скул" -  вулиця Героїв Дніпра, 33</div>
+                    <div class="right__text">300 грн</div>
+                </div>
             </div>
         </div>
         <div class="section__right">