No comment

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;
 

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');
+@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');

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 {

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);

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;
 }