+
-
+
Biz bir şeyler satıyoruz.
-
diff --git a/resources/css/partials/header.scss b/resources/css/partials/header.scss
index 498a236..4033435 100644
--- a/resources/css/partials/header.scss
+++ b/resources/css/partials/header.scss
@@ -28,6 +28,8 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
}
#logo {
+ display: flex;
+ align-items: center;
height: 56px;
@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 {
display: flex;
diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index 5ce4de0..175226d 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -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@600&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
\ No newline at end of file
+@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');
\ No newline at end of file
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index d8bbf17..d6e9535 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -11,20 +11,11 @@ $social-button_inner_margin: 10px;
.showcase {
display: flex;
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%);
-
- img {
- width: 100%;
- height: auto;
- filter: brightness(50%);
- }
-
- h1 {
- text-align: center;
- font: 800 128px "Montserrat", sans-serif;
- color: #FFFFFF;
- }
}
.table {
diff --git a/resources/img/index/g.jpg b/resources/img/index/g.jpg
new file mode 100644
index 0000000..6e5e998
Binary files /dev/null and b/resources/img/index/g.jpg differ
diff --git a/resources/img/index/y.jpg b/resources/img/index/y.jpg
new file mode 100644
index 0000000..b60a946
Binary files /dev/null and b/resources/img/index/y.jpg differ
diff --git a/resources/scripts/index.js b/resources/scripts/index.js
index cfb5c31..d028e37 100644
--- a/resources/scripts/index.js
+++ b/resources/scripts/index.js
@@ -9,6 +9,8 @@ const observer = new IntersectionObserver(entries => {
});
});
+
+
let targets = document.querySelectorAll('.table-item');
targets.forEach(target => {
observer.observe(target);
diff --git a/resources/styles/main.css b/resources/styles/main.css
index 3162013..2120550 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -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@600&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 {
display: flex;
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%);
}
-.showcase img {
- width: 100%;
- height: auto;
- filter: brightness(50%);
-}
-.showcase h1 {
- text-align: center;
- font: 800 128px "Montserrat", sans-serif;
- color: #FFFFFF;
-}
.table {
display: flex;
@@ -174,6 +168,8 @@
}
}
#header #logo {
+ display: flex;
+ align-items: center;
height: 56px;
}
@media screen and (max-width: 850px) {
@@ -181,6 +177,26 @@
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 {
display: flex;
}