AAAAAyes

2022-07-15 22:35:14 +03:00
parent 99b0cabc89
commit 1a8ee91e3e
8 changed files with 303 additions and 27 deletions
--- 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>
--- 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;
+  }
 }
--- 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;
  }
 }
--- a/resources/css/urls.scss
+++ 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");
--- 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;
--- 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;
+    }
  }
 }
--- 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);
-})
+})
+
+slideshow();
--- 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;