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

Many many updates & I'm too lazy to comment

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-06-30 19:42:02 +03:00
parent 4f37bf7e3a
commit 994311ae38
7 changed files with 172 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
aydinlatma.html
View File

@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<header id="header"> <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"> <nav class="navbar">
<a class="nav-item" href="index.html">Ana sayfa</a> <a class="nav-item" href="index.html">Ana sayfa</a>
<a class="nav-item" href="hakkimizda.html">Hakkımızda</a> <a class="nav-item" href="hakkimizda.html">Hakkımızda</a>

70
index.html
View File

@@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<header id="header"> <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"> <nav class="navbar">
<a class="nav-item" href="index.html">Ana sayfa</a> <a class="nav-item" href="index.html">Ana sayfa</a>
<a class="nav-item" href="hakkimizda.html">Hakkımızda</a> <a class="nav-item" href="hakkimizda.html">Hakkımızda</a>
@@ -25,7 +25,7 @@
<img src="resources/img/showcase.jpg"> <img src="resources/img/showcase.jpg">
<h1>Biz bir şeyler satıyoruz.</h1> <h1>Biz bir şeyler satıyoruz.</h1>
</div> </div>
<div id="brands" class="group"> <!--<div id="brands" class="group">
<div class="group-item"> <div class="group-item">
<img src="resources/img/ugurgaleri-yazıtek.png"> <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> <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"> <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> <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>-->
<div id="social"> <div id="social">
</div> </div>
</div> </div>
<footer id="footer"> <footer id="footer">
<div class="footer-column"> <img id="small-logo" src="resources/img/ugurgaleri-utek.png" alt="Uğur Galeri U logosu">
<h2>Uğur Galeri</h2> <div class="footer-columns">
<hr> <div class="footer-column">
<a class="nav-item" href="index.html">Ana sayfa</a> <h1>Uğur Galeri</h1>
<a class="nav-item" href="https://ugurgaleri1.sahibinden.com/">Araçlarımız</a> <ul>
<a class="nav-item" href="hakkimizda.html">Hakkımızda</a> <li><a href="index.html">Ana sayfa</a></li>
<a class="nav-item" href="iletisim.html">İletişim</a> <li><a href="https://ugurgaleri1.sahibinden.com">Araçlarımız</a></li>
</div> <li><a href="hakkimizda.html">Hakkımızda</a></li>
<div class="footer-column"> <li><a href="iletisim.html">İletişim</a></li>
<h2>Kurumsal</h2> </ul>
<hr> </div>
<a>Misyonumuz</a> <div class="footer-column">
<a>Vizyonumuz</a> <h1>Kurumsal</h1>
<a>Yönetim</a> <ul>
<a href="aydinlatma.html">KVKK Aydınlatma Metni</a> <li><a>Misyonumuz</a></li>
<a href="kamera.html">KVKK Kamera Kullanımı</a> <li><a>Vizyonumuz</a></li>
</div> <li><a>Yönetim</a></li>
<div class="footer-column"> <li><a href="aydinlatma.html">KVKK Aydınlatma Metni</a></li>
<h2>Sosyal Medyada Biz</h2> <li><a href="kamera.html">Kamera Kullanımı</a></li>
<hr> </ul>
<a class="footer-social" href="https://www.arabam.com/galeri/yavuz-ugur-galeri"> </div>
<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>
</div> </div>
</footer> </footer>
<footer id="footer-stateless" class="content_spacing">
<p>&copy; Uğur Galeri 2022</p>
<p class="smaller">Dizayn & Uygulama: <a href="https://fybx.dev">fybx.dev</a></p>
</footer>
</div> </div>
</body> </body>
</html> </html>

17
resources/css/main.scss
View File

@@ -13,6 +13,14 @@ html, body {
.content_spacing { .content_spacing {
padding: 0 variables.$px_contentPadding; 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 { #header {
@@ -35,8 +43,8 @@ html, body {
#content { #content {
background: whitesmoke; background: whitesmoke;
grid-column-start: 1; grid-column: 1;
grid-row-start: 1; grid-row: 1;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@@ -44,3 +52,8 @@ html, body {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
#footer-stateless {
grid-column: 1;
grid-row: 3;
}

16
resources/css/mixins.scss
View File

@@ -6,6 +6,12 @@
} }
} }
@mixin footer_overflow2 {
@media screen and (max-width: variables.$footer_overflow2) {
@content;
}
}
@mixin header_overflow { @mixin header_overflow {
@media screen and (max-width: variables.$header_overflow) { @media screen and (max-width: variables.$header_overflow) {
@content; @content;
@@ -18,8 +24,14 @@
} }
} }
@mixin footer_overflow2 { @mixin mx_content_fix {
@media screen and (max-width: variables.$footer_overflow2) { @media screen and (max-width: variables.$content_fix) {
@content;
}
}
@mixin mx_content_fix2 {
@media screen and (max-width: variables.$content_fix2) {
@content; @content;
} }
} }

127
resources/css/partials/footer.scss
View File

@@ -2,95 +2,66 @@
@use "../mixins.scss"; @use "../mixins.scss";
#footer { #footer {
background: variables.$clr_footer;
margin: 0;
display: flex; display: flex;
justify-content: flex-start; justify-content: space-between;
flex-direction: row; background-color: variables.$clr_footerBackground;
align-items: flex-start; font: 16px "Montserrat", sans-serif;
padding: variables.$px_headerPadding; padding: 50px variables.$px_contentPadding;
.footer-column { #small-logo {
color: variables.$clr_footer_sleep; height: 50px;
width: auto;
}
.footer-columns {
display: flex; display: flex;
flex-direction: column;
margin: 0 20px 0 0;
h2 { .footer-column {
font: variables.$sz_l_footer_h "Montserrat", sans-serif; margin: variables.$px_contentPadding / 10;
font-weight: 600;
color: white;
margin-bottom: 0;
@include mixins.footer_overflow { h1 {
font-size: variables.$sz_m_footer_h; margin: 0 0 16px 0;
font: 700 18px "Montserrat", sans-serif;
color: variables.$clr_footerSleepHigh;
} }
@include mixins.footer_overflow2 { a {
font-size: variables.$sz_s_footer_h; text-decoration: none;
} color: variables.$clr_footerSleepLow;
}
hr { &:hover {
margin: 0 0 10px 0; font-size: 17px;
border: 1px dotted white; color: variables.$clr_footerActive;
} }
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;
} }
@include mixins.footer_overflow { ul {
font-size: variables.$sz_m_footer_p; 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;
}
}

15
resources/css/variables.scss
View File

@@ -1,15 +1,15 @@
$mobileS: 360px;
$header_overflow: 1200px; $header_overflow: 1200px;
$header_overflow2: 850px; $header_overflow2: 850px;
$content_fix: 850px; $content_fix: 850px;
$content_fix2: 600px;
$footer_overflow2: 880px; $footer_overflow2: 880px;
$footer_overflow: 1110px; $footer_overflow: 1110px;
$main: 1700px;
$fourK: 2560px;
$px_headerPadding: 150px; $px_headerPadding: 150px;
$px_headerPadding2: 50px; $px_headerPadding2: 50px;
$px_contentPadding: 200px; $px_contentPadding: 200px;
$px_contentPadding2: 100px;
$px_contentPadding3: 20px;
$sz_l_footer_h: 22px; $sz_l_footer_h: 22px;
$sz_m_footer_h: 18px; $sz_m_footer_h: 18px;
@@ -20,14 +20,17 @@ $sz_s_footer_p: 8px;
$clr_dark: #01003B; $clr_dark: #01003B;
$clr_brand: #1d60b5;
$clr_logo: #FDFFFF; $clr_logo: #FDFFFF;
$clr_header: #FDFFFF; $clr_header: #FDFFFF;
$clr_nav_sleep: #706fff; $clr_nav_sleep: #706fff;
$clr_nav_active: #01003B; $clr_nav_active: #01003B;
$clr_footer: #000000; $clr_footerBackground: #000000;
$clr_footer_sleep: #DFE8E8; $clr_footerSleepLow: #abb3b3;
$clr_footer_active: #F5FFFF; $clr_footerSleepHigh: #f5ffff;
$clr_footerActive: #b3d1ff;
$clr_sides: #364040; $clr_sides: #364040;

132
resources/styles/main.css
View File

@@ -97,93 +97,58 @@
} }
#footer { #footer {
background: #000000;
margin: 0;
display: flex; display: flex;
justify-content: flex-start; justify-content: space-between;
flex-direction: row; background-color: #000000;
align-items: flex-start; font: 16px "Montserrat", sans-serif;
padding: 150px; padding: 50px 200px;
} }
#footer .footer-column { #footer #small-logo {
color: #DFE8E8; height: 50px;
width: auto;
}
#footer .footer-columns {
display: flex; display: flex;
flex-direction: column;
margin: 0 20px 0 0;
} }
#footer .footer-column h2 { #footer .footer-columns .footer-column {
font: 22px "Montserrat", sans-serif; margin: 20px;
font-weight: 600;
color: white;
margin-bottom: 0;
} }
@media screen and (max-width: 1110px) { #footer .footer-columns .footer-column h1 {
#footer .footer-column h2 { margin: 0 0 16px 0;
font-size: 18px; font: 700 18px "Montserrat", sans-serif;
} color: #f5ffff;
} }
@media screen and (max-width: 880px) { #footer .footer-columns .footer-column a {
#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;
text-decoration: none; text-decoration: none;
margin: 0 0 5px 0; color: #abb3b3;
font: 16px "Montserrat", sans-serif;
font-weight: 500;
} }
#footer .footer-column a:hover { #footer .footer-columns .footer-column a:hover {
color: #F5FFFF; font-size: 17px;
color: #b3d1ff;
} }
@media screen and (max-width: 1110px) { #footer .footer-columns .footer-column ul {
#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;
margin: 0; margin: 0;
padding: 0;
list-style-type: none;
} }
@media screen and (max-width: 1110px) {
#footer .footer-column p { #footer-stateless {
font-size: 12px; display: flex;
} justify-content: space-between;
background-color: #1d60b5;
color: white;
font: 14px "Montserrat", sans-serif;
} }
@media screen and (max-width: 880px) { #footer-stateless a {
#footer .footer-column p { color: white;
font-size: 8px; text-decoration: none;
}
} }
#footer .footer-column:last-of-type { #footer-stateless a:hover {
margin: 0; font-style: italic;
}
#footer-stateless .smaller {
font-weight: 200;
font-size: 12px;
} }
html, body { html, body {
@@ -195,6 +160,16 @@ html, body {
.content_spacing { .content_spacing {
padding: 0 200px; 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 { #header {
height: 10vh; height: 10vh;
@@ -216,8 +191,8 @@ html, body {
#content { #content {
background: whitesmoke; background: whitesmoke;
grid-column-start: 1; grid-column: 1;
grid-row-start: 1; grid-row: 1;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@@ -226,4 +201,9 @@ html, body {
grid-row: 2; grid-row: 2;
} }
#footer-stateless {
grid-column: 1;
grid-row: 3;
}
/*# sourceMappingURL=main.css.map */ /*# sourceMappingURL=main.css.map */