From 427f2f6f5345d4e41ef35431186d096c88510646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= <fyb@duck.com>
Date: Sun, 3 Jul 2022 19:02:57 +0300
Subject: [PATCH] Brand section styling

---
 index.html                     | 38 ++++++++++----------
 resources/css/views/index.scss | 66 +++++++++++++++++++++-------------
 resources/styles/main.css      | 56 +++++++++++++++++------------
 3 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/index.html b/index.html
index 86870b1..420414b 100644
--- a/index.html
+++ b/index.html
@@ -22,32 +22,30 @@
     <div id="container">
         <div id="content">
             <div class="showcase">
-                <img src="resources/img/showcase.jpg">
                 <h1>Biz bir şeyler satıyoruz.</h1>
             </div>
-            <!--<div id="brands" class="group">
-                <div class="group-item">
-                    <img src="resources/img/ugurgaleri-yazıtek.png">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
+            <div id="brands" class="table content_spacing">
+                <div class="table-item">
+                    <img src="resources/img/ugurgaleri-utek.png">
+                    <div class="vertical-separator"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
-                <div class="group-item">
-                    <figure>
-                        <img src="resources/img/ukt.png" alt="Uğur Koçak Treyler logosu">
-                        <hr>
-                        <img class="side" src="resources/img/makinsan.png" alt="Makinsan logosu">
-                        <img class="side" src="resources/img/krone.jpg" alt="Krone logosu">
-                    </figure>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
+                <div class="table-item reverse">
+                    <img src="resources/img/ugurgaleri-utek.png">
+                    <div class="vertical-separator"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
-                <div class="group-item">
-                    <img src="resources/img/ugurgaleri-yazıtek.png">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
+                <div class="table-item">
+                    <img src="resources/img/ugurgaleri-utek.png">
+                    <div class="vertical-separator"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
-                <div class="group-item">
-                    <img src="resources/img/ugurgaleri-yazıtek.png">
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
+                <div class="table-item reverse">
+                    <img src="resources/img/ugurgaleri-utek.png">
+                    <div class="vertical-separator"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
-            </div>-->
+            </div>
             <div id="social">
             </div>
         </div>
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index b85ef20..345927f 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -1,10 +1,15 @@
 @use "../variables.scss";
 @use "../mixins.scss";
 
+$table-item_img_width: 100px;
+$table-item_margin_between_items: 10px;
+$table-item_margin_img_to_paragraph: 10px;
+
 .showcase {
-  position: relative;
-  background-image: none;
-  background-color: black;
+  display: flex;
+  height: 100vh;
+  background-image: url("../../resources/img/showcase.jpg");
+  backdrop-filter: brightness(0%);
 
   img {
     width: 100%;
@@ -13,38 +18,49 @@
   }
 
   h1 {
-    position: absolute;
-    top: 30%;
-    left: 50%;
-    transform: translate(-50%, -30%);
-
+    text-align: center;
     font: 800 128px "Montserrat", sans-serif;
     color: #FFFFFF;
   }
 }
 
-.group {
-  background-color: #FFFFFF;
-  padding: 10px variables.$px_contentPadding;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.group-item {
+.table {
   display: flex;
   flex-direction: column;
-  img {
-    max-width: 300px;
-    height: auto;
+
+  .table-item {
+    margin-top: $table-item_margin_between_items;
+    display: inline-flex;
+    flex-direction: row;
+
+    img {
+      margin-right: $table-item_margin_img_to_paragraph;
+      height: $table-item_img_width;
+      width: $table-item_img_width;
+    }
   }
 
-  p {
-    font: 400 22px "Montserrat", sans-serif;
+  .reverse {
+    flex-direction: row-reverse;
+
+    img {
+      margin-right: 0;
+      margin-left: $table-item_margin_img_to_paragraph;
+    }
+
+    p {
+      text-align: right;
+    }
+
+    .vertical-separator {
+      margin-right: 0;
+      margin-left: $table-item_margin_img_to_paragraph;
+    }
   }
 
-  .side {
-
+  .vertical-separator {
+    height: $table-item_img_width + 20px;
+    border: solid 1px variables.$clr_brand;
+    margin-right: $table-item_margin_img_to_paragraph;
   }
 }
\ No newline at end of file
diff --git a/resources/styles/main.css b/resources/styles/main.css
index 302f5a5..7205aad 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -2,9 +2,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
 .showcase {
-  position: relative;
-  background-image: none;
-  background-color: black;
+  display: flex;
+  height: 100vh;
+  background-image: url("../../resources/img/showcase.jpg");
+  backdrop-filter: brightness(0%);
 }
 .showcase img {
   width: 100%;
@@ -12,34 +13,45 @@
   filter: brightness(50%);
 }
 .showcase h1 {
-  position: absolute;
-  top: 30%;
-  left: 50%;
-  transform: translate(-50%, -30%);
+  text-align: center;
   font: 800 128px "Montserrat", sans-serif;
   color: #FFFFFF;
 }
 
-.group {
-  background-color: #FFFFFF;
-  padding: 10px 200px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.group-item {
+.table {
   display: flex;
   flex-direction: column;
 }
-.group-item img {
-  max-width: 300px;
-  height: auto;
+.table .table-item {
+  margin-top: 10px;
+  display: inline-flex;
+  flex-direction: row;
 }
-.group-item p {
-  font: 400 22px "Montserrat", sans-serif;
+.table .table-item img {
+  margin-right: 10px;
+  height: 100px;
+  width: 100px;
 }
+.table .reverse {
+  flex-direction: row-reverse;
+}
+.table .reverse img {
+  margin-right: 0;
+  margin-left: 10px;
+}
+.table .reverse p {
+  text-align: right;
+}
+.table .reverse .vertical-separator {
+  margin-right: 0;
+  margin-left: 10px;
+}
+.table .vertical-separator {
+  height: 120px;
+  border: solid 1px #1d60b5;
+  margin-right: 10px;
+}
+
 #header {
   background: #FDFFFF;
   padding: 0 150px;