No comment :D
This commit is contained in:
Ferit Yiğit BALABAN
@@ -20,7 +20,7 @@
|
||||
<a class="menu"><img alt="Menu" src="resources/img/menu-white.png"></a>
|
||||
</header>
|
||||
<div id="container">
|
||||
<div id="content" class="content_spacing">
|
||||
<div id="content" class="content-spacing">
|
||||
<h1>Kişisel Verilerin Korunması Kanunu Aydınlatma Metni</h1>
|
||||
<p>Bu politika Veri Sorumlusu sıfatıyla Uğur Koçak Otomotiv Ltd. Şti. / Uğur Koçak Treyler Ltd. Şti.’nin
|
||||
tedarikçi, ziyaretçi, müşteri ile web sitesi (<a
|
||||
|
||||
17
index.html
17
index.html
@@ -10,7 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<img id="logo" src="resources/img/ugurgaleri-yazıtek.png" alt="Uğur Galeri logosu">
|
||||
<img id="logo" src="resources/img/Uğur%20Galeri/header-lessshadow.png" alt="Uğur Galeri logosu">
|
||||
<nav class="navbar">
|
||||
<a class="nav-item" href="index.html">Ana sayfa</a>
|
||||
<a class="nav-item" href="hakkimizda.html">Hakkımızda</a>
|
||||
@@ -22,10 +22,10 @@
|
||||
</header>
|
||||
<div id="container">
|
||||
<div id="content">
|
||||
<div class="showcase content_spacing">
|
||||
<div class="showcase content-spacing">
|
||||
<h1>Biz bir şeyler satıyoruz.</h1>
|
||||
</div>
|
||||
<div id="brands" class="table content_spacing">
|
||||
<div id="brands" class="table content-spacing">
|
||||
<div class="table-item square">
|
||||
<img src="resources/img/ugurgaleri-utek.png">
|
||||
<div class="vertical-separator"></div>
|
||||
@@ -47,8 +47,13 @@
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="social">
|
||||
<p></p>
|
||||
<div id="social" class="social content-spacing">
|
||||
<p>Sosyal medyada<br>bizi takip<br>edin.</p>
|
||||
<nav>
|
||||
<a class="social-button"><img src="resources/img/Social/facebook/white/PNG/f_logo_RGB-White_1024.png"></a>
|
||||
<a class="social-button"><img src="resources/img/Social/instagram/02%20White%20Glyph/Instagram_Glyph_White.svg"></a>
|
||||
<a class="social-button"><img src="resources/img/Social/sahibinden/S-beyaz.png"></a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<footer id="footer">
|
||||
@@ -75,7 +80,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<footer id="footer-stateless" class="content_spacing">
|
||||
<footer id="footer-stateless" class="content-spacing ignore-vertical">
|
||||
<p>© Uğur Galeri 2022</p>
|
||||
<p class="smaller">Dizayn & Uygulama: <a href="https://fybx.dev">fybx.dev</a></p>
|
||||
</footer>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<a class="menu"><img alt="Menu" src="resources/img/menu-white.png"></a>
|
||||
</header>
|
||||
<div id="container">
|
||||
<div id="content" class="content_spacing">
|
||||
<div id="content" class="content-spacing">
|
||||
<h1>Aydınlatma Metni</h1>
|
||||
<h3>Uğur Koçak Otomotiv Ltd. Şti. / Uğur Koçak Treyler Ltd. Şti. Uğur Galeri Yerleşkesi içerisinde Yer Alan
|
||||
Güvenlik Kameraları Hakkında Aydınlatma Metni</h3>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
@use "views/aydinlatma.scss";
|
||||
@use "partials/header.scss";
|
||||
@use "partials/footer.scss";
|
||||
@use "sass:math";
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
@@ -11,18 +12,24 @@ html, body {
|
||||
background-color: variables.$clr_sides;
|
||||
}
|
||||
|
||||
.content_spacing {
|
||||
padding: 0 variables.$px_contentPadding;
|
||||
.content-spacing {
|
||||
padding: math.div(variables.$px_horizontalPadding, 2) variables.$px_horizontalPadding;
|
||||
|
||||
@include mixins.mx_content_fix {
|
||||
padding: 0 variables.$px_contentPadding2;
|
||||
@include mixins.mx_index_brands_fix {
|
||||
padding: math.div(variables.$px_horizontalPadding2, 2) variables.$px_horizontalPadding2;
|
||||
}
|
||||
|
||||
@include mixins.mx_content_fix2 {
|
||||
padding: 0 variables.$px_contentPadding3;
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
padding: math.div(variables.$px_horizontalPadding3, 2) variables.$px_horizontalPadding3;
|
||||
}
|
||||
}
|
||||
|
||||
.ignore-vertical {
|
||||
// ignores vertical padding applied by .content-spacing
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
// Layout, details and children is set in partials/header.scss
|
||||
height: 10vh;
|
||||
|
||||
@@ -24,14 +24,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_content_fix {
|
||||
@media screen and (max-width: variables.$content_fix) {
|
||||
@mixin mx_index_brands_fix {
|
||||
@media screen and (max-width: variables.$index_brands_fix) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_content_fix2 {
|
||||
@media screen and (max-width: variables.$content_fix2) {
|
||||
@mixin mx_index_brands_fix2 {
|
||||
@media screen and (max-width: variables.$index_brands_fix2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
justify-content: space-between;
|
||||
background-color: variables.$clr_footerBackground;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
padding: 50px variables.$px_contentPadding;
|
||||
padding: 50px 200px;
|
||||
|
||||
#small-logo {
|
||||
height: 50px;
|
||||
@@ -17,7 +17,7 @@
|
||||
display: flex;
|
||||
|
||||
.footer-column {
|
||||
margin: variables.$px_contentPadding / 10;
|
||||
margin: 0 20px 20px 20px;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
$header_overflow: 1200px;
|
||||
$header_overflow2: 850px;
|
||||
$content_fix: 850px;
|
||||
$content_fix2: 600px;
|
||||
$index_brands_fix: 1100px;
|
||||
$index_brands_fix2: 850px;
|
||||
$footer_overflow2: 880px;
|
||||
$footer_overflow: 1110px;
|
||||
|
||||
$px_headerPadding: 150px;
|
||||
$px_headerPadding2: 50px;
|
||||
$px_contentPadding: 200px;
|
||||
$px_contentPadding2: 100px;
|
||||
$px_contentPadding3: 20px;
|
||||
$px_horizontalPadding: 200px;
|
||||
$px_horizontalPadding2: 100px;
|
||||
$px_horizontalPadding3: 20px;
|
||||
|
||||
$sz_l_footer_h: 22px;
|
||||
$sz_m_footer_h: 18px;
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
@use "../variables.scss";
|
||||
@use "../mixins.scss";
|
||||
@use "sass:math";
|
||||
|
||||
$table-item_img_width: 100px;
|
||||
$table-item_margin_between_items: 10px;
|
||||
$table-item_margin_img_to_paragraph: 100px;
|
||||
|
||||
$social-button_img_width: 24px;
|
||||
$social-button_inner_margin: 10px;
|
||||
|
||||
.showcase {
|
||||
display: flex;
|
||||
@@ -35,18 +38,56 @@ $table-item_margin_img_to_paragraph: 100px;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: $table-item_margin_img_to_paragraph;
|
||||
margin-right: math.div(variables.$px_horizontalPadding, 10);
|
||||
height: auto;
|
||||
width: $table-item_img_width;
|
||||
|
||||
@include mixins.mx_index_brands_fix {
|
||||
margin-right: math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
margin-right: math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
@include mixins.mx_index_brands_fix {
|
||||
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.reverse {
|
||||
// reverse is a property given to .table-item elements
|
||||
// it contains styling for img, p and .vertical-separator elements contained under
|
||||
// a .table-item element
|
||||
flex-direction: row-reverse;
|
||||
|
||||
img {
|
||||
margin-right: 0;
|
||||
margin-left: $table-item_margin_img_to_paragraph;
|
||||
margin-left: math.div(variables.$px_horizontalPadding, 10);;
|
||||
|
||||
@include mixins.mx_index_brands_fix {
|
||||
margin-left: math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
margin-left: math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -55,14 +96,16 @@ $table-item_margin_img_to_paragraph: 100px;
|
||||
|
||||
.vertical-separator {
|
||||
margin-right: 0;
|
||||
margin-left: $table-item_margin_img_to_paragraph;
|
||||
}
|
||||
}
|
||||
margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;
|
||||
|
||||
.vertical-separator {
|
||||
height: $table-item_img_width + 20px;
|
||||
border: solid 1px variables.$clr_brand;
|
||||
margin-right: $table-item_margin_img_to_paragraph;
|
||||
@include mixins.mx_index_brands_fix {
|
||||
margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
|
||||
@include mixins.mx_index_brands_fix2 {
|
||||
margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.square {
|
||||
@@ -72,44 +115,16 @@ $table-item_margin_img_to_paragraph: 100px;
|
||||
}
|
||||
|
||||
.table-item-animation {
|
||||
animation: slide-in-left 3000ms;
|
||||
}
|
||||
|
||||
.table-item-animation-reverse {
|
||||
animation: slide-in-right 3000ms;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
margin-left: 10%;
|
||||
width: 105%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-reverse {
|
||||
from {
|
||||
margin-right: 10%;
|
||||
width: 105%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
.table-item-animation-reverse {
|
||||
animation: slide-in-left 3000ms;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(-5%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -121,15 +136,48 @@ $table-item_margin_img_to_paragraph: 100px;
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
margin-left: 100%;
|
||||
width: 300%;
|
||||
transform: translateX(+5%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: variables.$clr_brand;
|
||||
color: white;
|
||||
|
||||
p {
|
||||
font: 700 $social-button_img_width "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
.social-button {
|
||||
display: inline-block;
|
||||
height: $social-button_img_width + (2 * $social-button_inner_margin);
|
||||
width: auto;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
|
||||
img {
|
||||
margin: 10px;
|
||||
height: $social-button_img_width;
|
||||
width: $social-button_img_width;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
|
||||
img {
|
||||
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,65 +29,84 @@
|
||||
align-items: center;
|
||||
}
|
||||
.table .table-item img {
|
||||
margin-right: 100px;
|
||||
margin-right: 20px;
|
||||
height: auto;
|
||||
width: 100px;
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
.table .table-item img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.table .table-item img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.table .table-item:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
.table .vertical-separator {
|
||||
height: 120px;
|
||||
border: solid 1px #1d60b5;
|
||||
margin-right: 180px;
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
.table .vertical-separator {
|
||||
margin-right: 90px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.table .vertical-separator {
|
||||
margin-right: 90px;
|
||||
}
|
||||
}
|
||||
.table .reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.table .reverse img {
|
||||
margin-right: 0;
|
||||
margin-left: 100px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
.table .reverse img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.table .reverse img {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.table .reverse p {
|
||||
text-align: right;
|
||||
}
|
||||
.table .reverse .vertical-separator {
|
||||
margin-right: 0;
|
||||
margin-left: 100px;
|
||||
margin-left: 180px;
|
||||
}
|
||||
.table .vertical-separator {
|
||||
height: 120px;
|
||||
border: solid 1px #1d60b5;
|
||||
margin-right: 100px;
|
||||
@media screen and (max-width: 1100px) {
|
||||
.table .reverse .vertical-separator {
|
||||
margin-left: 90px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.table .reverse .vertical-separator {
|
||||
margin-left: 90px;
|
||||
}
|
||||
}
|
||||
.table .square img {
|
||||
height: 100px;
|
||||
}
|
||||
.table .table-item-animation {
|
||||
animation: slide-in-left 3000ms;
|
||||
}
|
||||
.table .table-item-animation-reverse {
|
||||
animation: slide-in-right 3000ms;
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
margin-left: 10%;
|
||||
width: 105%;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fade-in-reverse {
|
||||
from {
|
||||
margin-right: 10%;
|
||||
width: 105%;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
.table .table-item-animation-reverse {
|
||||
animation: slide-in-left 3000ms;
|
||||
}
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(-5%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
@@ -97,17 +116,45 @@
|
||||
}
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
margin-left: 100%;
|
||||
width: 300%;
|
||||
transform: translateX(5%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #1d60b5;
|
||||
color: white;
|
||||
}
|
||||
.social p {
|
||||
font: 700 24px "Montserrat", sans-serif;
|
||||
}
|
||||
.social .social-button {
|
||||
display: inline-block;
|
||||
height: 44px;
|
||||
width: auto;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.social .social-button img {
|
||||
margin: 10px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.social .social-button:hover {
|
||||
background-color: white;
|
||||
}
|
||||
.social .social-button:hover img {
|
||||
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
|
||||
}
|
||||
|
||||
#header {
|
||||
background: #FDFFFF;
|
||||
padding: 0 150px;
|
||||
@@ -190,7 +237,7 @@
|
||||
display: flex;
|
||||
}
|
||||
#footer .footer-columns .footer-column {
|
||||
margin: 20px;
|
||||
margin: 0 20px 20px 20px;
|
||||
}
|
||||
#footer .footer-columns .footer-column h1 {
|
||||
margin: 0 0 16px 0;
|
||||
@@ -236,18 +283,23 @@ html, body {
|
||||
background-color: #364040;
|
||||
}
|
||||
|
||||
.content_spacing {
|
||||
padding: 0 200px;
|
||||
.content-spacing {
|
||||
padding: 100px 200px;
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
.content-spacing {
|
||||
padding: 50px 100px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.content_spacing {
|
||||
padding: 0 100px;
|
||||
.content-spacing {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.content_spacing {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.ignore-vertical {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#header {
|
||||
|
||||
Reference in New Issue
Block a user