fyb/ugurgaleri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6 from fybx/dev

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-26 01:54:32 +03:00
committed by GitHub
parent 2e4a75470f c717a90825
commit 1b9a2550b2
12 changed files with 219 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
aydinlatma.html
View File

@@ -31,8 +31,8 @@
<a class="nav-item" href="iletisim.html">İletişim</a>
</nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle">
<input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>

20
hakkimizda.html
View File

@@ -31,8 +31,8 @@
<a class="nav-item" href="iletisim.html">İletişim</a>
</nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle">
<input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
@@ -55,8 +55,20 @@
<section id="hikaye" class="content-spacing">
<h1>Kuruluş Hikâyemiz</h1>
</section>
<section id="misyon" class="content-spacing"></section>
<section id="vizyon" class="content-spacing"></section>
<section id="misyon" class="content-spacing">
<h1>Misyonumuz</h1>
<p>Alanında deneyimli, güler yüzlü personelimiz ve sektördeki köklü geçmişimizin getirdiği bilgi birikimi ile müşterilerimizin ihtiyaçları doğrultusunda en doğru araca ulaşmalarını sağlıyoruz. Müşterilerimiz ile ilişkilerimizi kısa süreli görmüyor, süreç boyunca ve sonrasında doğru ve eksiksiz iletişimi sağlayarak sorunlarınıza çözüm üretiyoruz.</p>
</section>
<section id="vizyon" class="content-spacing">
<h1>Vizyonumuz</h1>
<p>Profesyonel altyapısı, köklü geçmişi ve geniş bilgi birikimi ile Uğur Galeri ve Uğur Koçak Treyler olarak kurulduğumuz bölgede büyük başarılara imza atmış bulunmaktayız.</p>
<p>Hedeflerimiz;</p>
<ul>
<li>Ağır vasıta ve ikinci el ticari araç pazarında alım satımını ve distribütörlüğünü yaptığımız markaların ulusal ölçekte önde gelen temsilcilerinden birisi olmak.</li>
<li>Hizmet verdiğimiz sektörde müşterilerimizin her birinin çalışmaktan güven duyduğu ve memnun kaldığı bir şirket konumuna yükselmek.</li>
<li>Ulusal pazarda ve ticari sektörde standartları ve doğruları belirlemek.</li>
</ul>
</section>
<section id="yonetim" class="content-spacing"></section>
</main>
<button id="scroll-to-top" onclick="scrollToTop()"><img src="resources/img/scroll-to-top.svg" alt="Scroll to top"></button>

4
iletisim.html
View File

@@ -31,8 +31,8 @@
<a class="nav-item" href="#">İletişim</a>
</nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle">
<input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>

22
index.html
View File

@@ -32,8 +32,8 @@
<a class="nav-item" href="iletisim.html">İletişim</a>
</nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle">
<input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
@@ -52,23 +52,23 @@
<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>
<!-- TODO <section class="araclar">
<a href="https://ugurgaleri1.sahibinden.com/">Araçlarımızı incelemek için tıklayınız.</a>
</section>-->
<div id="brands" class="table content-spacing">
<div class="table-item square">
<img src="resources/img/ugurgaleri-utek.png" alt="Uğur Galeri U logosu">
<div class="vertical-separator"></div>
<div class="horizontal-separator"></div>
<hr>
<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. <a href="iletisim.html#information">Satın alma için tıklayınız.</a></p>
</div>
<div class="table-item reverse">
<img src="resources/img/UKT/UKT.png" alt="Uğur Koçak Treyler logosu">
<div class="vertical-separator"></div>
<div class="horizontal-separator"></div>
<hr>
<p>Uğur Koçak Treyler, müşteri gereksinimlerine istinaden 21 Eylül 2012 tarihinde <b>sıfır araç</b> 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.<br>Satış yelpazesinde <b><i>Krone, Makinsan ve Otokar</i></b> firmaları yer almaktadır. <a href="iletisim.html#information">Satın alma için tıklayınız.</a></p>
</div>
<div class="table-item">
<img src="resources/img/galericilerden.com/galericilerden.jpg" alt="galericilerden.com logosu">
<div class="vertical-separator"></div>
<div class="horizontal-separator"></div>
<hr>
<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>
@@ -98,9 +98,9 @@
<div class="footer-column">
<h1>Kurumsal</h1>
<ul>
<li><a>Misyonumuz</a></li>
<li><a>Vizyonumuz</a></li>
<li><a>Yönetim</a></li>
<li><a href="hakkimizda.html#misyon">Misyonumuz</a></li>
<li><a href="hakkimizda.html#vizyon">Vizyonumuz</a></li>
<li><a href="hakkimizda.html#yonetim">Yönetim</a></li>
<li><a href="aydinlatma.html">KVKK Aydınlatma Metni</a></li>
<li><a href="kamera.html">Kamera Kullanımı</a></li>
</ul>

4
kamera.html
View File

@@ -30,8 +30,8 @@
<a class="nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
<a class="nav-item" href="iletisim.html">İletişim</a>
</nav>
<input type="checkbox" id="toggle" class="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label" class="dropdown-toggle">
<input type="checkbox" id="toggle" onchange="toggleDropdown()" autocomplete="off">
<label for="toggle" id="toggle-label">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>

18
resources/css/mixins.scss
View File

@@ -71,4 +71,22 @@
@media screen and (max-width: overflow.$kamera_sec_links-to-documents2) {
@content;
}
}
@mixin mx_iletisim_sec_information {
@media screen and (max-width: overflow.$iletisim_sec_information) {
@content;
}
}
@mixin mx_iletisim_sec_information2 {
@media screen and (max-width: overflow.$iletisim_sec_information2) {
@content;
}
}
@mixin mx_iletisim_sec_information3 {
@media screen and (max-width: overflow.$iletisim_sec_information3) {
@content;
}
}

6
resources/css/overflow.scss
View File

@@ -1,2 +1,6 @@
$kamera_sec_links-to-documents: 1215px;
$kamera_sec_links-to-documents2: 610px;
$kamera_sec_links-to-documents2: 610px;
$iletisim_sec_information: 1235px;
$iletisim_sec_information2: 1170px;
$iletisim_sec_information3: 490px;

50
resources/css/partials/header.scss
View File

@@ -2,15 +2,15 @@
@use "../mixins.scss";
@use "sass:math";
$dropdown-toggle_l_width_no_unit: 36;
$dropdown-toggle_s_width_no_unit: 28;
$toggle-label_l_width_no_unit: 36;
$toggle-label_s_width_no_unit: 28;
$dropdown-toggle_l_width: $dropdown-toggle_l_width_no_unit * 1px;
$dropdown-toggle_l_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_l_width_no_unit, 2))) * 1px;
$dropdown-toggle_l_second_bar: math.div($dropdown-toggle_l_width - 4, 2);
$dropdown-toggle_s_width: $dropdown-toggle_s_width_no_unit * 1px;
$dropdown-toggle_s_cross_width: math.floor(math.sqrt(2 * math.pow($dropdown-toggle_s_width_no_unit, 2))) * 1px;
$dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
$toggle-label_l_width: $toggle-label_l_width_no_unit * 1px;
$toggle-label_l_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_l_width_no_unit, 2))) * 1px;
$toggle-label_l_second_bar: math.div($toggle-label_l_width - 4, 2);
$toggle-label_s_width: $toggle-label_s_width_no_unit * 1px;
$toggle-label_s_cross_width: math.floor(math.sqrt(2 * math.pow($toggle-label_s_width_no_unit, 2))) * 1px;
$toggle-label_s_second_bar: math.div($toggle-label_s_width - 4, 2);
#header {
@@ -92,16 +92,16 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
display: none;
}
.dropdown-toggle {
#toggle-label {
margin: 0;
width: $dropdown-toggle_l_width;
height: $dropdown-toggle_l_width;
width: $toggle-label_l_width;
height: $toggle-label_l_width;
position: relative;
cursor: pointer;
.bar {
padding: 0;
width: $dropdown-toggle_l_width;
width: $toggle-label_l_width;
height: 4px;
background-color: variables.$clr_brand;
display: block;
@@ -119,11 +119,11 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
}
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_width;
height: $dropdown-toggle_s_width;
width: $toggle-label_s_width;
height: $toggle-label_s_width;
.bar {
width: $dropdown-toggle_s_width;
width: $toggle-label_s_width;
}
}
}
@@ -134,10 +134,10 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
.bar2,
.bar3 {
top: $dropdown-toggle_l_second_bar;
top: $toggle-label_l_second_bar;
@include mixins.header_overflow2 {
top: $dropdown-toggle_s_second_bar;
top: $toggle-label_s_second_bar;
}
}
@@ -149,35 +149,35 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
bottom: 0;
}
.toggle:checked + label > .dropdown-toggle > .bar1{
#toggle:checked + #toggle-label > .bar1{
transform: rotate(45deg);
height: 3px;
width: $dropdown-toggle_l_cross_width;
width: $toggle-label_l_cross_width;
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_cross_width;
width: $toggle-label_s_cross_width;
}
}
.toggle:checked + label > .dropdown-toggle > .bar3{
#toggle:checked + #toggle-label > .bar3{
transform: rotate(45deg);
height: 3px;
background-color: transparent;
}
.toggle:checked + label > .dropdown-toggle > .bar2{
#toggle:checked + #toggle-label > .bar2{
transform: rotate(-45deg);
height: 3px;
background-color: transparent;
}
.toggle:checked + label > .dropdown-toggle > .bar4{
#toggle:checked + #toggle-label > .bar4{
transform: rotate(-45deg);
height: 3px;
width: $dropdown-toggle_l_cross_width;
width: $toggle-label_l_cross_width;
@include mixins.header_overflow2 {
width: $dropdown-toggle_s_cross_width;
width: $toggle-label_s_cross_width;
}
}

38
resources/css/views/hakkimizda.scss
View File

@@ -1,32 +1,34 @@
@use "../variables.scss";
@use "../mixins.scss";
#video, #misyon, #vizyon, #hikaye, #yonetim {
text-align: center;
h1 {
margin: 0 0 1em 0;
font: 600 2.5vw "Montserrat", sans-serif;
color: black;
}
p {
font: 500 1.25vw "Montserrat", sans-serif;
}
ul {
list-style-position: inside;
font-size: 1vw;
}
}
#video {
display: flex;
flex-direction: column;
align-items: center;
color: white;
background: variables.$clr_brand_gradient;
video {
width: 100% !important;
height: auto !important;
}
h1 {
margin: 0 0 1em 0;
font: 600 2.5vw "Montserrat", sans-serif;
color: white;
}
}
#hikaye {
}
#misyon, #vizyon {
}
#yonetim {
}

67
resources/css/views/iletisim.scss
View File

@@ -1,18 +1,10 @@
@use "../variables.scss";
@use "../variables";
@use "../mixins";
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;
@@ -28,28 +20,70 @@ a {
font: 500 24px "Montserrat", sans-serif;
.contact, .location {
width: 100%;
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
width: 50%;
h1 {
font: 600 48px "Montserrat", sans-serif;
@include mixins.mx_iletisim_sec_information {
font-size: 40px;
}
@include mixins.mx_iletisim_sec_information2 {
font-size: 48px;
}
@include mixins.mx_iletisim_sec_information3 {
font-size: 36px;
}
}
h2 {
font: 600 40px "Montserrat", sans-serif;
margin: 0.5em 0 0 0;
@include mixins.mx_iletisim_sec_information {
font-size: 32px;
}
@include mixins.mx_iletisim_sec_information2 {
font-size: 40px;
}
@include mixins.mx_iletisim_sec_information3 {
font-size: 28px;
}
}
h3 {
font: 600 32px "Montserrat", sans-serif;
margin: 0.5em 0 0.25em 0;
@include mixins.mx_iletisim_sec_information {
font-size: 24px;
}
@include mixins.mx_iletisim_sec_information2 {
font-size: 32px;
}
@include mixins.mx_iletisim_sec_information3 {
font-size: 18px;
}
}
}
.contact {
margin: 0 50px 0 0;
margin: 0 2vw 0 0;
@include mixins.mx_iletisim_sec_information2 {
margin: 0 0 2vh 0;
}
}
.click-call, .click-pm{
@@ -67,6 +101,15 @@ a {
//noinspection CssInvalidPropertyValue
width: -webkit-fill-available;
border: solid 1px black;
}
@include mixins.mx_iletisim_sec_information2 {
flex-direction: column;
align-items: center;
font-size: 24px;
}
@include mixins.mx_iletisim_sec_information3 {
font-size: 16px;
}
}

105
resources/css/views/index.scss
View File

@@ -38,6 +38,11 @@ $social-button_inner_margin: 10px;
}
}
.araclar {
text-align: center;
font: 600 32px "Montserrat", sans-serif;
}
.table {
display: flex;
flex-direction: column;
@@ -46,7 +51,6 @@ $social-button_inner_margin: 10px;
margin-top: $table-item_margin_between_items;
display: inline-flex;
flex-direction: row;
align-items: center;
p {
font: x-large sans-serif;
@@ -56,11 +60,16 @@ $social-button_inner_margin: 10px;
}
@include mixins.mx_index_brands_fix2 {
font-size: xx-small;
font-size: 18px;
}
@include mixins.mx_mobile {
font-size: 16px;
}
}
img {
align-self: center;
margin-right: math.div(variables.$px_horizontalPadding, 10);
width: $table-item_img_width_l;
@@ -80,34 +89,25 @@ $social-button_inner_margin: 10px;
}
}
.vertical-separator {
// vertical-separator makes an empty div behave as a separator which aligned vertically
height: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin-right: 9 * math.div(variables.$px_horizontalPadding, 10);
hr {
min-height: 100%;
max-height: 100vh;
width: 5px;
background: variables.$clr_brand;
margin-right: 9 * math.div(variables.$px_horizontalPadding, 10) - 5;
@include mixins.mx_index_brands_fix {
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10) - 5;
}
@include mixins.mx_index_brands_fix2 {
margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10) - 5;
}
@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;
width: $table-item_img_width + 20px;
border: solid 1px variables.$clr_brand;
margin: 0 0 18px 0;
}
}
@@ -117,6 +117,7 @@ $social-button_inner_margin: 10px;
@include mixins.mx_mobile {
flex-direction: column;
align-items: center;
}
}
@@ -139,7 +140,7 @@ $social-button_inner_margin: 10px;
}
}
.vertical-separator {
hr {
margin-right: 0;
margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;
@@ -150,6 +151,10 @@ $social-button_inner_margin: 10px;
@include mixins.mx_index_brands_fix2 {
margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
}
@include mixins.mx_mobile {
margin: 0 0 18px 0;
}
}
@include mixins.mx_mobile {
@@ -227,34 +232,38 @@ $social-button_inner_margin: 10px;
margin: 30px 0;
}
.social-button {
display: inline-block;
height: $social-button_img_width + (2 * $social-button_inner_margin);
width: auto;
border: 2px solid white;
border-radius: 50%;
margin: 0 10px 0 0;
nav {
display: flex;
img {
margin: 10px;
height: $social-button_img_width;
width: $social-button_img_width;
}
&:hover {
background-color: white;
.social-button {
display: inline-block;
height: $social-button_img_width + (2 * $social-button_inner_margin);
width: auto;
border: 2px solid white;
border-radius: 50%;
margin: 0 10px 0 0;
img {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
margin: 10px;
height: $social-button_img_width;
width: $social-button_img_width;
}
}
&:last-of-type {
margin: 0;
}
&:hover {
background-color: white;
@include mixins.mx_mobile {
margin: 0 0 30px 0;
img {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
}
}
&:last-of-type {
margin: 0;
}
@include mixins.mx_mobile {
margin: 0 0 30px 0;
}
}
}
@@ -266,5 +275,11 @@ $social-button_inner_margin: 10px;
font-weight: 600;
text-align: center;
}
nav {
.social-button {
margin-right: 10px;
}
}
}
}

3
resources/scripts/main.js
View File

@@ -47,10 +47,13 @@ function hideNavitems() {
async function toggleDropdown() {
if (dropdown.classList.contains('hidden')) {
showDropdown();
await sleep(550);
document.getElementById("container").style.display = "none";
await sleep(200);
showNavitems();
}
else {
document.getElementById("container").style.display = "grid";
dropdown.classList.add('dropdown_close_animation');
await sleep(550);
dropdown.classList.remove('dropdown_close_animation');