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

No comment

Browse Source
This commit is contained in:
Ferit Yiğit BALABAN
2022-07-14 15:20:11 +03:00
parent becf9e6f8f
commit 99b0cabc89
8 changed files with 74 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -12,7 +12,19 @@
</head> </head>
<body> <body>
<header id="header"> <header id="header">
<img id="logo" src="resources/img/Uğur%20Galeri/header-lessshadow.png" alt="Uğur Galeri logosu"> <div id="logo" class="bounce-animation">
<span style="--i: 1;">U</span>
<span style="--i: 2;">Ğ</span>
<span style="--i: 3;">U</span>
<span style="--i: 4;">R</span>
<span style="--i: 4;">&nbsp;</span>
<span style="--i: 5;">G</span>
<span style="--i: 6;">A</span>
<span style="--i: 7;">L</span>
<span style="--i: 8;">E</span>
<span style="--i: 9;">R</span>
<span style="--i: 10;">İ</span>
</div>
<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>
@@ -40,9 +52,7 @@
</nav> </nav>
<div id="container"> <div id="container">
<div id="content"> <div id="content">
<div class="showcase content-spacing"> <div class="showcase"></div>
<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"> <div class="table-item square">
<img src="resources/img/ugurgaleri-utek.png"> <img src="resources/img/ugurgaleri-utek.png">

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

@@ -28,6 +28,8 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
} }
#logo { #logo {
display: flex;
align-items: center;
height: 56px; height: 56px;
@include mixins.header_overflow2 { @include mixins.header_overflow2 {
@@ -35,6 +37,29 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
} }
} }
.bounce-animation {
span {
font: 600 56px 'Oswald', sans-serif;
display: inline-block;
color: variables.$clr_brand;
animation: bounce 2500ms infinite;
animation-delay: calc(.1s * var(--i));
@include mixins.header_overflow2 {
font-size: 36px;
}
}
}
@keyframes bounce {
0%,40%,100% {
transform: translateY(0)
}
20% {
transform: translateY(-5px)
}
}
.navbar { .navbar {
display: flex; display: flex;

3
resources/css/variables.scss
View File

@@ -36,4 +36,5 @@ $clr_sides: #364040;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

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

@@ -11,20 +11,11 @@ $social-button_inner_margin: 10px;
.showcase { .showcase {
display: flex; display: flex;
height: 100vh; height: 100vh;
background-image: url("../../resources/img/showcase.jpg"); background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
backdrop-filter: brightness(0%); backdrop-filter: brightness(0%);
img {
width: 100%;
height: auto;
filter: brightness(50%);
}
h1 {
text-align: center;
font: 800 128px "Montserrat", sans-serif;
color: #FFFFFF;
}
} }
.table { .table {

BIN
resources/img/index/g.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

BIN
resources/img/index/y.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

2
resources/scripts/index.js
View File

@@ -9,6 +9,8 @@ const observer = new IntersectionObserver(entries => {
}); });
}); });
let targets = document.querySelectorAll('.table-item'); let targets = document.querySelectorAll('.table-item');
targets.forEach(target => { targets.forEach(target => {
observer.observe(target); observer.observe(target);

38
resources/styles/main.css
View File

@@ -1,22 +1,16 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
.showcase { .showcase {
display: flex; display: flex;
height: 100vh; height: 100vh;
background-image: url("../../resources/img/showcase.jpg"); background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
backdrop-filter: brightness(0%); backdrop-filter: brightness(0%);
} }
.showcase img {
width: 100%;
height: auto;
filter: brightness(50%);
}
.showcase h1 {
text-align: center;
font: 800 128px "Montserrat", sans-serif;
color: #FFFFFF;
}
.table { .table {
display: flex; display: flex;
@@ -174,6 +168,8 @@
} }
} }
#header #logo { #header #logo {
display: flex;
align-items: center;
height: 56px; height: 56px;
} }
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
@@ -181,6 +177,26 @@
height: 36px; height: 36px;
} }
} }
#header .bounce-animation span {
font: 600 56px "Oswald", sans-serif;
display: inline-block;
color: #1d60b5;
animation: bounce 2500ms infinite;
animation-delay: calc(0.1s * var(--i));
}
@media screen and (max-width: 850px) {
#header .bounce-animation span {
font-size: 36px;
}
}
@keyframes bounce {
0%, 40%, 100% {
transform: translateY(0);
}
20% {
transform: translateY(-5px);
}
}
#header .navbar { #header .navbar {
display: flex; display: flex;
} }