add & styling welcome section

goldipl · Jun 10, 2024 · d57fd7a · d57fd7a
1 parent 8386e00
commit d57fd7a
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 65 deletions.
diff --git a/index.html b/index.html
@@ -573,6 +573,22 @@ <h3>werikon</h3>
                 <div class="swiper-button-prev garden-time-swiper-prev"></div>
             </div>
         </section>
+        <!-- Welcome Section -->
+         <section id="welcome">
+            <h2>Witaj w internetowym sklepie meblowym FURNIPOL!</h2>
+            <div class="welcome-text">
+                <div class="welcome-text__col">
+                    <p>
+                        Twój dom, twoje marzenia. Nasz meblowy sklep to miejsce, gdzie wnętrza nabierają życia. Oferujemy nie tylko meble, ale również wspólne urządzanie i realizację Twoich wizji. Nasze zalety są wielorakie - od bogatego wyboru designów po konkurencyjne ceny. Kupując u nas, inwestujesz w jakość! Oferujemy narożniki z funkcją spania, stylowe łóżka, eleganckie meble do salonu oraz inne meble, które pozwolą na aranżację każdego pomieszczenia w Twoim domu. Nasz asortyment jest starannie
+                    </p>
+                </div>
+                <div class="welcome-text__col">
+                    <p>
+                        dobrany, aby sprostać oczekiwaniom nawet najbardziej wymagających klientów. Niezależnie od tego, czy preferujesz nowoczesne czy klasyczne wzory, mamy coś dla Ciebie. Pozwól Furnipol wprowadzić magię i elegancję do Twojego wnętrza. Prze-kształć swoje pomieszczenie w wymarzone miejsce dzięki naszym pięknym i przede wszystkim ponadczasowym meblom!
+                    </p>
+                </div>
+            </div>
+         </section>
     </main>
     <!-- FOOTER -->
     <footer class="footer-2-0">

diff --git a/sass/home/_welcome_section.scss b/sass/home/_welcome_section.scss
@@ -0,0 +1,36 @@
+.main-2-0 {
+  #welcome {
+    width: 100%;
+    margin: 0 auto;
+    max-width: 1380px;
+    margin-bottom: 55px;
+    .welcome-text {
+      display: flex;
+      flex-direction: row;
+      &__col {
+        display: flex;
+        flex-direction: column;
+        width: 50%;
+        p {
+          font-size: 16px;
+          font-weight: 300;
+          line-height: 26px;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 760px) {
+  .main-2-0 {
+    #welcome {
+      .welcome-text {
+        flex-direction: column;
+        &__col {
+          width: 100%;
+        }
+      }
+    }
+  }
+}