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

Rescale fonts and rework hr in brands

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-23 00:42:38 +03:00
parent f9094a4ad6
commit 4483b14c87
2 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

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

51
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 {