From 13b720a6c46f51cc520012e1e06bc3faef5fabaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= <fyb@duck.com>
Date: Tue, 19 Jul 2022 23:27:15 +0300
Subject: [PATCH] Style iletisim.html

---
 iletisim.html                     | 37 +++++++++++++++-
 resources/css/views/iletisim.scss | 72 +++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 1 deletion(-)

diff --git a/iletisim.html b/iletisim.html
index 7b66ae9..69633be 100644
--- a/iletisim.html
+++ b/iletisim.html
@@ -47,9 +47,44 @@
 </nav>
 <div id="container">
     <main id="content">
-        <section class="map">
+        <section id="map">
             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3624.9179908499027!2d28.35519250061192!3d40.18279534131245!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14b5e12278d07515%3A0x93d0109b872a638f!2sUgur%20Galeri!5e0!3m2!1str!2str!4v1658087461242!5m2!1str!2str" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
         </section>
+        <section id="information" class="content-spacing">
+            <article class="contact">
+                <h1>İletişim Bilgileri</h1>
+                <hr class="horizontal-separator">
+                <h2>Satış:</h2>
+                <h3>Furkan KOÇAK</h3>
+                <span class="click-call"><img src="resources/img/iletisim/phone.svg" alt="Telefon simgesi">Telefon: <a href="tel:+905325752544" title="Aramak için tıklayın">0532 575 2544</a></span>
+                <span class="click-pm"><img src="resources/img/iletisim/whatsapp.svg" alt="Whatsapp logosu"><a href="https://api.whatsapp.com/send/?phone=905325752544&text&app_absent=0">WhatsApp'tan mesaj yollayın</a></span>
+
+                <h3>Ahmet GİRGİN</h3>
+                <span class="click-call"><img src="resources/img/iletisim/phone.svg" alt="Telefon simgesi">Telefon: <a href="tel:+905325668216" title="Aramak için tıklayın">0532 566 8216</a></span>
+                <span class="click-pm"><img src="resources/img/iletisim/whatsapp.svg" alt="Whatsapp logosu"><a href="https://api.whatsapp.com/send/?phone=905325668216&text&app_absent=0">WhatsApp'tan mesaj yollayın</a></span>
+
+                <h3>Mustafa BALABAN</h3>
+                <span class="click-call"><img src="resources/img/iletisim/phone.svg" alt="Telefon simgesi">Telefon: <a href="tel:+905301154854" title="Aramak için tıklayın">0530 115 4854</a></span>
+                <span class="click-pm"><img src="resources/img/iletisim/whatsapp.svg" alt="Whatsapp logosu"><a href="https://api.whatsapp.com/send/?phone=905301154854&text&app_absent=0">WhatsApp'tan mesaj yollayın</a></span>
+            </article>
+            <article class="location">
+                <h1>Uğur Galeri</h1>
+                <hr class="horizontal-separator">
+                <h2>İrtibat</h2>
+                <span class="click-call"><img src="resources/img/iletisim/phone.svg" alt="Telefon simgesi">Cep telefonu: <a href="tel:+905373218487" title="Aramak için tıklayın">0537 321 8487</a></span>
+                <span class="click-call"><img src="resources/img/iletisim/landline.svg" alt="Sabit hat simgesi">Sabit hat: <a href="tel:+902246718380" title="Aramak için tıklayın">0224 671 83 80</a></span>
+                <span class="click-call"><img src="resources/img/iletisim/landline.svg" alt="Sabit hat simgesi">Sabit hat: <a href="tel:+902246718308" title="Aramak için tıklayın">0224 671 83 08</a></span>
+                <h2>Adres</h2>
+                <a class="no-decoration" href="#map"><p>Bursa Karacabey Yolu Kümeevler Mahallesi No:10<br>Karacabey/BURSA</p></a>
+                <h2>E-posta</h2>
+                <a href="mailto:iletisim@ugurgaleri.net" title="E-posta yollamak için tıklayın">iletisim@ugurgaleri.net</a>
+                <a href="mailto:iletisim@ugurkocaktreyler.com.tr" title="E-posta yollamak için tıklayın">iletisim@ugurkocaktreyler.com.tr</a>
+                <h2>Çalışma Saatlerimiz</h2>
+                <p><b>Hafta içi:</b> 08.00 - 19.00
+                <br><b>Cumartesi:</b> 08.00 - 18.00
+                <br><b>Pazar:</b> 12.00 - 17.00</p>
+            </article>
+        </section>
     </main>
     <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">
diff --git a/resources/css/views/iletisim.scss b/resources/css/views/iletisim.scss
index e69de29..694dd74 100644
--- a/resources/css/views/iletisim.scss
+++ b/resources/css/views/iletisim.scss
@@ -0,0 +1,72 @@
+@use "../variables.scss";
+
+h1 {
+  margin: 0;
+}
+
+a {
+  text-decoration: none;
+  color: variables.$clr_nav_sleep;
+
+  &:hover {
+    color: variables.$clr_nav_active;
+  }
+}
+
+#map {
+  width: calc(100vw - (100vw - 100%));
+  height: auto;
+
+  iframe {
+    width: 100%;
+  }
+}
+
+#information {
+  display: flex;
+  flex-direction: row;
+  font: 500 24px "Montserrat", sans-serif;
+
+  .contact, .location {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 50%;
+
+    h1 {
+      font: 600 48px "Montserrat", sans-serif;
+    }
+
+    h2 {
+      font: 600 40px "Montserrat", sans-serif;
+      margin: 0.5em 0 0 0;
+    }
+
+    h3 {
+      font: 600 32px "Montserrat", sans-serif;
+      margin: 0.5em 0 0.25em 0;
+    }
+  }
+
+  .contact {
+    margin: 0 50px 0 0;
+  }
+
+  .click-call, .click-pm{
+    margin: 0 0 0 1em;
+    img {
+      width: 1em;
+      height: 1em;
+      margin: 0 1em 0 0;
+    }
+  }
+
+  .horizontal-separator {
+    width: 100%;
+    width: -moz-available;
+    //noinspection CssInvalidPropertyValue
+    width: -webkit-fill-available;
+    border: solid 1px black;
+
+  }
+}
\ No newline at end of file