From 1a8ee91e3e99a8b7292b36faf410b8372ef97e92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= <fyb@duck.com>
Date: Fri, 15 Jul 2022 22:35:14 +0300
Subject: [PATCH] AAAAAyes

---
 index.html                         |  22 +++--
 resources/css/mixins.scss          |   6 ++
 resources/css/partials/footer.scss |  24 ++++-
 resources/css/urls.scss            |   2 +
 resources/css/variables.scss       |   4 +-
 resources/css/views/index.scss     | 106 ++++++++++++++++++++--
 resources/scripts/index.js         |  26 +++++-
 resources/styles/main.css          | 140 +++++++++++++++++++++++++++--
 8 files changed, 303 insertions(+), 27 deletions(-)
 create mode 100644 resources/css/urls.scss

diff --git a/index.html b/index.html
index da09dd7..ce99747 100644
--- a/index.html
+++ b/index.html
@@ -52,25 +52,30 @@
     </nav>
     <div id="container">
         <div id="content">
-            <div class="showcase"></div>
+            <div class="showcase content-spacing">
+                <h1 style="color: white; font: 500 45px Montserrat, sans-serif;">Güvenilir alışverişin<br>merkezine<br>hoşgeldiniz! </h1>
+            </div>
             <div id="brands" class="table content-spacing">
                 <div class="table-item square">
                     <img src="resources/img/ugurgaleri-utek.png">
                     <div class="vertical-separator"></div>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequuntur debitis deleniti dolore dolorum eligendi expedita harum impedit inventore itaque iusto neque odio odit quia recusandae, repudiandae saepe voluptas voluptates. Accusantium atque cum, debitis, delectus dignissimos ea error fuga fugit labore maiores nam nulla numquam soluta, suscipit vel veritatis voluptatibus!</p>
+                    <div class="horizontal-separator"></div>
+                    <p>Şirketimiz 4 Nisan 2001 tarihinde Karacabey, Bursa'da ikinci el ticari araç ve ağır vasıta satışına başlamıştır. Köklü galericilik deneyimini, satış politikalarını ve zamana ayak uyduran yenilikçi bakış açısını bünyesinde harmanlayan, sektöre yön veren ve yapmış olduğu işler ile sektördeki varlığını kanıtlamış bir firmadır.</p>
                 </div>
                 <div class="table-item reverse">
                     <img src="resources/img/UKT/UKT.png">
                     <div class="vertical-separator"></div>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aut, consectetur consequuntur culpa dolorum ducimus eaque eligendi enim eveniet fugiat illum laborum maiores mollitia obcaecati odio perspiciatis, quae tempora! Ex nemo nulla similique sint!</p>
+                    <div class="horizontal-separator"></div>
+                    <p>Müşteri gereksinimlerine istinaden 21 Eylül 2012 tarihinde sıfır araç satışı yapmak için kurulmuştur. Firma Uğur Galeri yerleşkesi içerisinde distribütörlük/bayilik anlaşması yapmış olduğu ağır vasıta sektörünün treyler grubunda öncü firmalar ile çalışmakta olup müşterilerin ihtiyaçlarına en hızlı, en doğru ve en kullanışlı biçimde cevap verebilecek niteliktedir. Bünyesinde <!--TODO-->Otokar, Krone ve Makinsan firmaları yer almaktadır.</p>
                 </div>
                 <div class="table-item">
                     <img src="resources/img/galericilerden.com/galericilerden.jpg">
                     <div class="vertical-separator"></div>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, dolor dolorem earum enim est et libero minima ratione, recusandae repellat temporibus tenetur totam unde voluptatem voluptatum? Asperiores atque consectetur distinctio eum fugit nisi non officiis, praesentium recusandae tempora veniam voluptate.</p>
+                    <div class="horizontal-separator"></div>
+                    <p>2018 yılında interaktif satışın müşterilerin talepleri doğrultusunda mevcut ürünlerin tanıtımı ve pazarlanması amacıyla Uğur Galeri bünyesinde e-ticaret alışveriş sitesi olarak kurulmuştur. Hedefimiz, galeri sahiplerinin güvenilir bir platformda araçlarını detaylı biçimde sunabilmeleri; müşterilerin de ihtiyaçlarına göre güvenilir ve uygun şekilde ulaşmalarını sağlamaktır.</p>
                 </div>
             </div>
-            <div id="social" class="social content-spacing">
+            <div id="social" class="social content-spacing ignore-vertical">
                 <p>Sosyal medyada<br>bizi takip<br>edin.</p>
                 <nav>
                     <a class="social-button" href="https://www.facebook.com/ugurgaleri/"><img src="resources/img/Social/facebook/white/PNG/f_logo_RGB-White_1024.png" alt="Facebook logo"></a>
@@ -79,15 +84,16 @@
                 </nav>
             </div>
         </div>
-        <footer id="footer">
-            <img id="small-logo" src="resources/img/ugurgaleri-utek.png" alt="Uğur Galeri U logosu">
+        <footer id="footer" class="content-spacing">
+            <img id="small-logo" src="resources/img/Uğur%20Galeri/footer-white.png" alt="Uğur Galeri U logosu">
             <div class="footer-columns">
                 <div class="footer-column">
                     <h1>Uğur Galeri</h1>
                     <ul>
                         <li><a href="index.html">Ana sayfa</a></li>
-                        <li><a href="https://ugurgaleri1.sahibinden.com">Araçlarımız</a></li>
                         <li><a href="hakkimizda.html">Hakkımızda</a></li>
+                        <li><a href="#brands">Markalarımız</a></li>
+                        <li><a href="https://ugurgaleri1.sahibinden.com">Araçlarımız</a></li>
                         <li><a href="iletisim.html">İletişim</a></li>
                     </ul>
                 </div>
diff --git a/resources/css/mixins.scss b/resources/css/mixins.scss
index b7ad176..8a82d56 100644
--- a/resources/css/mixins.scss
+++ b/resources/css/mixins.scss
@@ -34,4 +34,10 @@
   @media screen and (max-width: variables.$index_brands_fix2) {
     @content;
   }
+}
+
+@mixin mx_mobile {
+  @media screen and (max-width: 400px) {
+    @content;
+  }
 }
\ No newline at end of file
diff --git a/resources/css/partials/footer.scss b/resources/css/partials/footer.scss
index d4289be..4a52ee1 100644
--- a/resources/css/partials/footer.scss
+++ b/resources/css/partials/footer.scss
@@ -6,7 +6,8 @@
   justify-content: space-between;
   background-color: variables.$clr_footerBackground;
   font: 16px "Montserrat", sans-serif;
-  padding: 50px 200px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 
   #small-logo {
     height: 50px;
@@ -23,6 +24,10 @@
         margin: 0 0 16px 0;
         font: 700 18px "Montserrat", sans-serif;
         color: variables.$clr_footerSleepHigh;
+
+        @include mixins.mx_mobile {
+          font-size: 14px;
+        }
       }
 
       a {
@@ -32,6 +37,10 @@
         &:hover {
           font-size: 17px;
           color: variables.$clr_footerActive;
+
+          @include mixins.mx_mobile {
+            font-size: 13px;
+          }
         }
       }
 
@@ -42,11 +51,16 @@
       }
     }
   }
+
+  @include mixins.mx_mobile {
+    font-size: 12px;
+  }
 }
 
 #footer-stateless {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   background-color: variables.$clr_brand;
   color: white;
   font: 14px "Montserrat", sans-serif;
@@ -63,5 +77,13 @@
   .smaller {
     font-weight: 200;
     font-size: 12px;
+
+    @include mixins.mx_mobile {
+      font-size: 8px;
+    }
+  }
+
+  @include mixins.mx_mobile {
+    font-size: 10px;
   }
 }
\ No newline at end of file
diff --git a/resources/css/urls.scss b/resources/css/urls.scss
new file mode 100644
index 0000000..fdec645
--- /dev/null
+++ b/resources/css/urls.scss
@@ -0,0 +1,2 @@
+$index_showcase_bg_day: url("../img/index/g.jpg");
+$index_showcase_bg_night: url("../img/index/y.jpg");
\ No newline at end of file
diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index 175226d..ba50057 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -2,8 +2,8 @@ $header_overflow: 1200px;
 $header_overflow2: 850px;
 $index_brands_fix: 1100px;
 $index_brands_fix2: 850px;
-$footer_overflow2: 880px;
-$footer_overflow: 1110px;
+$footer_overflow: 1200px;
+$footer_overflow2: 850px;
 
 $px_headerPadding: 150px;
 $px_headerPadding2: 50px;
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index d6e9535..b4825ec 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -1,8 +1,11 @@
 @use "../variables.scss";
 @use "../mixins.scss";
+@use "../urls.scss";
 @use "sass:math";
 
+$table-item_img_width_l: 150px;
 $table-item_img_width: 100px;
+$table-item_img_width_s: 60px;
 $table-item_margin_between_items: 10px;
 
 $social-button_img_width: 32px;
@@ -10,12 +13,29 @@ $social-button_inner_margin: 10px;
 
 .showcase {
   display: flex;
-  height: 100vh;
-  background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
+  height: 90vh;
+  background-image: urls.$index_showcase_bg_day;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  backdrop-filter: brightness(0%);
+
+  @include mixins.header_overflow2 {
+    height: 95vh;
+  }
+}
+
+.showcase-animation {
+  animation: slideshow-appear 1000ms;
+}
+
+@keyframes slideshow-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 .table {
@@ -28,23 +48,45 @@ $social-button_inner_margin: 10px;
     flex-direction: row;
     align-items: center;
 
+    p {
+      font: x-large sans-serif;
+
+      @include mixins.mx_index_brands_fix {
+        font-size: large;
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        font-size: xx-small;
+      }
+    }
+
     img {
       margin-right: math.div(variables.$px_horizontalPadding, 10);
-      height: auto;
-      width: $table-item_img_width;
+      width: $table-item_img_width_l;
 
       @include mixins.mx_index_brands_fix {
         margin-right: math.div(variables.$px_horizontalPadding2, 10);
+        width: $table-item_img_width;
       }
 
       @include mixins.mx_index_brands_fix2 {
         margin-right: math.div(variables.$px_horizontalPadding2, 10);
+        width: $table-item_img_width_s;
+      }
+
+      @include mixins.mx_mobile {
+        margin: 0 0 2px 0;
+        width: $table-item_img_width;
       }
     }
 
     &:first-of-type {
       margin-top: 0;
     }
+
+    @include mixins.mx_mobile {
+      flex-direction: column;
+    }
   }
 
   .vertical-separator {
@@ -60,6 +102,22 @@ $social-button_inner_margin: 10px;
     @include mixins.mx_index_brands_fix2 {
       margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
     }
+
+    @include mixins.mx_mobile {
+      display: none;
+    }
+  }
+
+  .horizontal-separator {
+    // horizontal-separator makes an empty div behave as a separator which aligned horizontally
+    display: none;
+    width: $table-item_img_width + 20px;
+    border: solid 1px variables.$clr_brand;
+    margin: 0 0 18px 0;
+
+    @include mixins.mx_mobile {
+      display: block;
+    }
   }
 
   .reverse {
@@ -83,6 +141,10 @@ $social-button_inner_margin: 10px;
 
     p {
       text-align: right;
+
+      @include mixins.mx_mobile {
+        text-align: left;
+      }
     }
 
     .vertical-separator {
@@ -97,11 +159,28 @@ $social-button_inner_margin: 10px;
         margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
       }
     }
+
+    @include mixins.mx_mobile {
+      flex-direction: column;
+    }
   }
 
   .square {
     img {
-      height: $table-item_img_width;
+      height: $table-item_img_width_l;
+      width: auto;
+
+      @include mixins.mx_index_brands_fix {
+        height: $table-item_img_width;
+      }
+
+      @include mixins.mx_index_brands_fix2 {
+        height: $table-item_img_width_s;
+      }
+
+      @include mixins.mx_mobile {
+        height: $table-item_img_width;
+      }
     }
   }
 
@@ -148,6 +227,7 @@ $social-button_inner_margin: 10px;
 
   p {
     font: 700 $social-button_img_width "Montserrat", sans-serif;
+    margin: 30px 0;
   }
 
   .social-button {
@@ -175,5 +255,19 @@ $social-button_inner_margin: 10px;
     &:last-of-type {
       margin: 0;
     }
+
+    @include mixins.mx_mobile {
+      margin: 0 0 30px 0;
+    }
+  }
+
+  @include mixins.mx_mobile {
+    flex-direction: column;
+
+    p {
+      font-size: 20px;
+      font-weight: 600;
+      text-align: center;
+    }
   }
 }
\ No newline at end of file
diff --git a/resources/scripts/index.js b/resources/scripts/index.js
index d028e37..5270036 100644
--- a/resources/scripts/index.js
+++ b/resources/scripts/index.js
@@ -1,3 +1,23 @@
+const doSlideshow = true;
+const slideTime = 7500; // milliseconds
+const animTime = 1000; // milliseconds
+
+async function slideshow() {
+    let showcase = document.getElementsByClassName("showcase")[0];
+    while(doSlideshow) {
+        showcase.style.backgroundImage = "url(resources/img/index/g.jpg)";
+        showcase.classList.add("showcase-animation");
+        await sleep(animTime);
+        showcase.classList.remove("showcase-animation");
+        await sleep(slideTime);
+        showcase.style.backgroundImage = "url(resources/img/index/y.jpg)";
+        showcase.classList.add("showcase-animation");
+        await sleep(animTime);
+        showcase.classList.remove("showcase-animation");
+        await sleep(slideTime);
+    }
+}
+
 const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
@@ -9,9 +29,9 @@ const observer = new IntersectionObserver(entries => {
     });
 });
 
-
-
 let targets = document.querySelectorAll('.table-item');
 targets.forEach(target => {
     observer.observe(target);
-})
\ No newline at end of file
+})
+
+slideshow();
\ No newline at end of file
diff --git a/resources/styles/main.css b/resources/styles/main.css
index 2120550..85037e6 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -4,14 +4,30 @@
 @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
 .showcase {
   display: flex;
-  height: 100vh;
-  background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
+  height: 90vh;
+  background-image: url("../img/index/g.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
-  backdrop-filter: brightness(0%);
+}
+@media screen and (max-width: 850px) {
+  .showcase {
+    height: 95vh;
+  }
 }
 
+.showcase-animation {
+  animation: slideshow-appear 1000ms;
+}
+
+@keyframes slideshow-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .table {
   display: flex;
   flex-direction: column;
@@ -22,24 +38,49 @@
   flex-direction: row;
   align-items: center;
 }
+.table .table-item p {
+  font: x-large sans-serif;
+}
+@media screen and (max-width: 1100px) {
+  .table .table-item p {
+    font-size: large;
+  }
+}
+@media screen and (max-width: 850px) {
+  .table .table-item p {
+    font-size: xx-small;
+  }
+}
 .table .table-item img {
   margin-right: 20px;
-  height: auto;
-  width: 100px;
+  width: 150px;
 }
 @media screen and (max-width: 1100px) {
   .table .table-item img {
     margin-right: 10px;
+    width: 100px;
   }
 }
 @media screen and (max-width: 850px) {
   .table .table-item img {
     margin-right: 10px;
+    width: 60px;
+  }
+}
+@media screen and (max-width: 400px) {
+  .table .table-item img {
+    margin: 0 0 2px 0;
+    width: 100px;
   }
 }
 .table .table-item:first-of-type {
   margin-top: 0;
 }
+@media screen and (max-width: 400px) {
+  .table .table-item {
+    flex-direction: column;
+  }
+}
 .table .vertical-separator {
   height: 120px;
   border: solid 1px #1d60b5;
@@ -55,6 +96,22 @@
     margin-right: 18px;
   }
 }
+@media screen and (max-width: 400px) {
+  .table .vertical-separator {
+    display: none;
+  }
+}
+.table .horizontal-separator {
+  display: none;
+  width: 120px;
+  border: solid 1px #1d60b5;
+  margin: 0 0 18px 0;
+}
+@media screen and (max-width: 400px) {
+  .table .horizontal-separator {
+    display: block;
+  }
+}
 .table .reverse {
   flex-direction: row-reverse;
 }
@@ -75,6 +132,11 @@
 .table .reverse p {
   text-align: right;
 }
+@media screen and (max-width: 400px) {
+  .table .reverse p {
+    text-align: left;
+  }
+}
 .table .reverse .vertical-separator {
   margin-right: 0;
   margin-left: 180px;
@@ -89,8 +151,29 @@
     margin-left: 18px;
   }
 }
+@media screen and (max-width: 400px) {
+  .table .reverse {
+    flex-direction: column;
+  }
+}
 .table .square img {
-  height: 100px;
+  height: 150px;
+  width: auto;
+}
+@media screen and (max-width: 1100px) {
+  .table .square img {
+    height: 100px;
+  }
+}
+@media screen and (max-width: 850px) {
+  .table .square img {
+    height: 60px;
+  }
+}
+@media screen and (max-width: 400px) {
+  .table .square img {
+    height: 100px;
+  }
 }
 .table .table-item-animation {
   animation: slide-in-right 3000ms;
@@ -129,6 +212,7 @@
 }
 .social p {
   font: 700 32px "Montserrat", sans-serif;
+  margin: 30px 0;
 }
 .social .social-button {
   display: inline-block;
@@ -152,6 +236,21 @@
 .social .social-button:last-of-type {
   margin: 0;
 }
+@media screen and (max-width: 400px) {
+  .social .social-button {
+    margin: 0 0 30px 0;
+  }
+}
+@media screen and (max-width: 400px) {
+  .social {
+    flex-direction: column;
+  }
+  .social p {
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+  }
+}
 
 #header {
   background: #FDFFFF;
@@ -316,7 +415,8 @@
   justify-content: space-between;
   background-color: #000000;
   font: 16px "Montserrat", sans-serif;
-  padding: 50px 200px;
+  padding-top: 50px;
+  padding-bottom: 50px;
 }
 #footer #small-logo {
   height: 50px;
@@ -333,6 +433,11 @@
   font: 700 18px "Montserrat", sans-serif;
   color: #f5ffff;
 }
+@media screen and (max-width: 400px) {
+  #footer .footer-columns .footer-column h1 {
+    font-size: 14px;
+  }
+}
 #footer .footer-columns .footer-column a {
   text-decoration: none;
   color: #abb3b3;
@@ -341,15 +446,26 @@
   font-size: 17px;
   color: #b3d1ff;
 }
+@media screen and (max-width: 400px) {
+  #footer .footer-columns .footer-column a:hover {
+    font-size: 13px;
+  }
+}
 #footer .footer-columns .footer-column ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
+@media screen and (max-width: 400px) {
+  #footer {
+    font-size: 12px;
+  }
+}
 
 #footer-stateless {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   background-color: #1d60b5;
   color: white;
   font: 14px "Montserrat", sans-serif;
@@ -365,6 +481,16 @@
   font-weight: 200;
   font-size: 12px;
 }
+@media screen and (max-width: 400px) {
+  #footer-stateless .smaller {
+    font-size: 8px;
+  }
+}
+@media screen and (max-width: 400px) {
+  #footer-stateless {
+    font-size: 10px;
+  }
+}
 
 html, body {
   margin: 0;