Style iletisim.html

This commit is contained in:
Ferit Yiğit BALABAN
2022-07-19 23:27:15 +03:00
parent 0f4ee7576d
commit 13b720a6c4
2 changed files with 108 additions and 1 deletions

View File

@@ -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">

View File

@@ -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;
}
}