Many many updates & I'm too lazy to comment
This commit is contained in:
Ferit Yiğit BALABAN
@@ -9,7 +9,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<img id="logo" src="resources/img/ugurgaleri-yazıtek.png">
|
||||
<img id="logo" src="resources/img/ugurgaleri-yazıtek.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>
|
||||
|
||||
70
index.html
70
index.html
@@ -9,7 +9,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<img id="logo" src="resources/img/ugurgaleri-yazıtek.png">
|
||||
<img id="logo" src="resources/img/ugurgaleri-yazıtek.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>
|
||||
@@ -25,7 +25,7 @@
|
||||
<img src="resources/img/showcase.jpg">
|
||||
<h1>Biz bir şeyler satıyoruz.</h1>
|
||||
</div>
|
||||
<div id="brands" class="group">
|
||||
<!--<div id="brands" class="group">
|
||||
<div class="group-item">
|
||||
<img src="resources/img/ugurgaleri-yazıtek.png">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
|
||||
@@ -47,52 +47,38 @@
|
||||
<img src="resources/img/ugurgaleri-yazıtek.png">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem dolore iusto nisi sit voluptate voluptatibus! Corporis deserunt dolores et vel voluptatum! Amet animi assumenda at atque cum cupiditate debitis esse ex exercitationem ipsam ipsum iure libero mollitia nesciunt nostrum odio optio perferendis quam quis repellat sed sint vel vero, voluptatem voluptates! At, aut beatae debitis distinctio doloribus enim eveniet ex exercitationem iusto magnam minus molestias nostrum odio quas vel? At natus officia sint unde voluptates? Aliquid ducimus nesciunt odit quia ratione velit! Consequatur cumque, deleniti enim et explicabo inventore minima quaerat quidem quod sed. Aperiam dolor eum odit sed!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
<div id="social">
|
||||
</div>
|
||||
</div>
|
||||
<footer id="footer">
|
||||
<div class="footer-column">
|
||||
<h2>Uğur Galeri</h2>
|
||||
<hr>
|
||||
<a class="nav-item" href="index.html">Ana sayfa</a>
|
||||
<a class="nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a>
|
||||
<a class="nav-item" href="hakkimizda.html">Hakkımızda</a>
|
||||
<a class="nav-item" href="iletisim.html">İletişim</a>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h2>Kurumsal</h2>
|
||||
<hr>
|
||||
<a>Misyonumuz</a>
|
||||
<a>Vizyonumuz</a>
|
||||
<a>Yönetim</a>
|
||||
<a href="aydinlatma.html">KVKK Aydınlatma Metni</a>
|
||||
<a href="kamera.html">KVKK Kamera Kullanımı</a>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h2>Sosyal Medyada Biz</h2>
|
||||
<hr>
|
||||
<a class="footer-social" href="https://www.arabam.com/galeri/yavuz-ugur-galeri">
|
||||
<img src="resources/img/arabam.jpg" alt="arabam.com logosu">
|
||||
</a>
|
||||
<a class="footer-social" href="https://ugurgaleri1.sahibinden.com/">
|
||||
<img src="resources/img/sahibinden.png" alt="sahibinden.com logosu">
|
||||
</a>
|
||||
<a class="footer-social" href="https://www.facebook.com/ugurgalerikaracabey/">
|
||||
<img src="resources/img/facebook.svg" alt="facebook.com logosu">
|
||||
</a>
|
||||
<a class="footer-social" href="https://www.instagram.com/ugurgaleri/">
|
||||
<img src="resources/img/instagram.png" alt="instagram.com logosu">
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h2>İletişim</h2>
|
||||
<hr>
|
||||
<a href="tel:+902246718380">Sabit Hat: 0224 671 83 80</a>
|
||||
<a href="tel:+905325668216">Cep Telefonu: 0532 566 82 16</a>
|
||||
<a href="https://goo.gl/maps/oy2ZXFKB9nWmn7498">Sırabademler Mah., Kümeevler, 16100 Karacabey/BURSA</a>
|
||||
<img id="small-logo" src="resources/img/ugurgaleri-utek.png" alt="Uğur Galeri U logosu">
|
||||
<div class="footer-columns">
|
||||
<div class="footer-column">
|
||||
<h1>Uğur Galeri</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Ana sayfa</a></li>
|
||||
<li><a href="https://ugurgaleri1.sahibinden.com">Araçlarımız</a></li>
|
||||
<li><a href="hakkimizda.html">Hakkımızda</a></li>
|
||||
<li><a href="iletisim.html">İletişim</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<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="aydinlatma.html">KVKK Aydınlatma Metni</a></li>
|
||||
<li><a href="kamera.html">Kamera Kullanımı</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<footer id="footer-stateless" class="content_spacing">
|
||||
<p>© Uğur Galeri 2022</p>
|
||||
<p class="smaller">Dizayn & Uygulama: <a href="https://fybx.dev">fybx.dev</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,6 +13,14 @@ html, body {
|
||||
|
||||
.content_spacing {
|
||||
padding: 0 variables.$px_contentPadding;
|
||||
|
||||
@include mixins.mx_content_fix {
|
||||
padding: 0 variables.$px_contentPadding2;
|
||||
}
|
||||
|
||||
@include mixins.mx_content_fix2 {
|
||||
padding: 0 variables.$px_contentPadding3;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
@@ -35,12 +43,17 @@ html, body {
|
||||
|
||||
#content {
|
||||
background: whitesmoke;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
#footer {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
@@ -6,6 +6,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin footer_overflow2 {
|
||||
@media screen and (max-width: variables.$footer_overflow2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin header_overflow {
|
||||
@media screen and (max-width: variables.$header_overflow) {
|
||||
@content;
|
||||
@@ -18,8 +24,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin footer_overflow2 {
|
||||
@media screen and (max-width: variables.$footer_overflow2) {
|
||||
@mixin mx_content_fix {
|
||||
@media screen and (max-width: variables.$content_fix) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mx_content_fix2 {
|
||||
@media screen and (max-width: variables.$content_fix2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -2,95 +2,66 @@
|
||||
@use "../mixins.scss";
|
||||
|
||||
#footer {
|
||||
background: variables.$clr_footer;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: variables.$px_headerPadding;
|
||||
justify-content: space-between;
|
||||
background-color: variables.$clr_footerBackground;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
padding: 50px variables.$px_contentPadding;
|
||||
|
||||
.footer-column {
|
||||
color: variables.$clr_footer_sleep;
|
||||
#small-logo {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 20px 0 0;
|
||||
|
||||
h2 {
|
||||
font: variables.$sz_l_footer_h "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 0;
|
||||
.footer-column {
|
||||
margin: variables.$px_contentPadding / 10;
|
||||
|
||||
@include mixins.footer_overflow {
|
||||
font-size: variables.$sz_m_footer_h;
|
||||
h1 {
|
||||
margin: 0 0 16px 0;
|
||||
font: 700 18px "Montserrat", sans-serif;
|
||||
color: variables.$clr_footerSleepHigh;
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow2 {
|
||||
font-size: variables.$sz_s_footer_h;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: variables.$clr_footerSleepLow;
|
||||
|
||||
hr {
|
||||
margin: 0 0 10px 0;
|
||||
border: 1px dotted white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
margin: 0 0 5px 0;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: variables.$clr_footer_active;
|
||||
&:hover {
|
||||
font-size: 17px;
|
||||
color: variables.$clr_footerActive;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow {
|
||||
font-size: variables.$sz_m_footer_p;
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow2 {
|
||||
font-size: variables.$sz_s_footer_p;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: variables.$clr_footer_active;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
|
||||
@include mixins.footer_overflow {
|
||||
font-size: variables.$sz_m_footer_p;
|
||||
}
|
||||
|
||||
@include mixins.footer_overflow2 {
|
||||
font-size: variables.$sz_s_footer_p;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: variables.$clr_brand;
|
||||
color: white;
|
||||
font: 14px "Montserrat", sans-serif;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.smaller {
|
||||
font-weight: 200;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
$mobileS: 360px;
|
||||
$header_overflow: 1200px;
|
||||
$header_overflow2: 850px;
|
||||
$content_fix: 850px;
|
||||
$content_fix2: 600px;
|
||||
$footer_overflow2: 880px;
|
||||
$footer_overflow: 1110px;
|
||||
$main: 1700px;
|
||||
$fourK: 2560px;
|
||||
|
||||
$px_headerPadding: 150px;
|
||||
$px_headerPadding2: 50px;
|
||||
$px_contentPadding: 200px;
|
||||
$px_contentPadding2: 100px;
|
||||
$px_contentPadding3: 20px;
|
||||
|
||||
$sz_l_footer_h: 22px;
|
||||
$sz_m_footer_h: 18px;
|
||||
@@ -20,14 +20,17 @@ $sz_s_footer_p: 8px;
|
||||
|
||||
$clr_dark: #01003B;
|
||||
|
||||
$clr_brand: #1d60b5;
|
||||
|
||||
$clr_logo: #FDFFFF;
|
||||
$clr_header: #FDFFFF;
|
||||
$clr_nav_sleep: #706fff;
|
||||
$clr_nav_active: #01003B;
|
||||
|
||||
$clr_footer: #000000;
|
||||
$clr_footer_sleep: #DFE8E8;
|
||||
$clr_footer_active: #F5FFFF;
|
||||
$clr_footerBackground: #000000;
|
||||
$clr_footerSleepLow: #abb3b3;
|
||||
$clr_footerSleepHigh: #f5ffff;
|
||||
$clr_footerActive: #b3d1ff;
|
||||
|
||||
$clr_sides: #364040;
|
||||
|
||||
|
||||
@@ -97,93 +97,58 @@
|
||||
}
|
||||
|
||||
#footer {
|
||||
background: #000000;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 150px;
|
||||
justify-content: space-between;
|
||||
background-color: #000000;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
padding: 50px 200px;
|
||||
}
|
||||
#footer .footer-column {
|
||||
color: #DFE8E8;
|
||||
#footer #small-logo {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
#footer .footer-columns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
#footer .footer-column h2 {
|
||||
font: 22px "Montserrat", sans-serif;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 0;
|
||||
#footer .footer-columns .footer-column {
|
||||
margin: 20px;
|
||||
}
|
||||
@media screen and (max-width: 1110px) {
|
||||
#footer .footer-column h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
#footer .footer-columns .footer-column h1 {
|
||||
margin: 0 0 16px 0;
|
||||
font: 700 18px "Montserrat", sans-serif;
|
||||
color: #f5ffff;
|
||||
}
|
||||
@media screen and (max-width: 880px) {
|
||||
#footer .footer-column h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
#footer .footer-column hr {
|
||||
margin: 0 0 10px 0;
|
||||
border: 1px dotted white;
|
||||
}
|
||||
#footer .footer-column a {
|
||||
color: inherit;
|
||||
#footer .footer-columns .footer-column a {
|
||||
text-decoration: none;
|
||||
margin: 0 0 5px 0;
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
color: #abb3b3;
|
||||
}
|
||||
#footer .footer-column a:hover {
|
||||
color: #F5FFFF;
|
||||
#footer .footer-columns .footer-column a:hover {
|
||||
font-size: 17px;
|
||||
color: #b3d1ff;
|
||||
}
|
||||
@media screen and (max-width: 1110px) {
|
||||
#footer .footer-column a {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 880px) {
|
||||
#footer .footer-column a {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
#footer .footer-column .footer-social {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#footer .footer-column .footer-social img {
|
||||
border-radius: 10px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
#footer .footer-column .footer-social:hover {
|
||||
background: #F5FFFF;
|
||||
color: black;
|
||||
}
|
||||
#footer .footer-column p {
|
||||
font: 16px "Montserrat", sans-serif;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
#footer .footer-columns .footer-column ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
@media screen and (max-width: 1110px) {
|
||||
#footer .footer-column p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #1d60b5;
|
||||
color: white;
|
||||
font: 14px "Montserrat", sans-serif;
|
||||
}
|
||||
@media screen and (max-width: 880px) {
|
||||
#footer .footer-column p {
|
||||
font-size: 8px;
|
||||
}
|
||||
#footer-stateless a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
#footer .footer-column:last-of-type {
|
||||
margin: 0;
|
||||
#footer-stateless a:hover {
|
||||
font-style: italic;
|
||||
}
|
||||
#footer-stateless .smaller {
|
||||
font-weight: 200;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@@ -195,6 +160,16 @@ html, body {
|
||||
.content_spacing {
|
||||
padding: 0 200px;
|
||||
}
|
||||
@media screen and (max-width: 850px) {
|
||||
.content_spacing {
|
||||
padding: 0 100px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.content_spacing {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 10vh;
|
||||
@@ -216,8 +191,8 @@ html, body {
|
||||
|
||||
#content {
|
||||
background: whitesmoke;
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
@@ -226,4 +201,9 @@ html, body {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#footer-stateless {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
||||
Reference in New Issue
Block a user