Styles: add styles and animations to '.contact-page__details' class a…

…t 'ContactPage.scss'
ITurres · Feb 7, 2024 · 3c4eb44 · 3c4eb44
1 parent b5a0bfa
commit 3c4eb44
Showing 1 changed file with 58 additions and 4 deletions.
diff --git a/src/styles/pages/ContactPage.scss b/src/styles/pages/ContactPage.scss
@@ -2,6 +2,7 @@
 @use '../mixins' as mixins;
 
 $color1: colors.$color1;
+$dark: colors.$dark;
 
 @forward '../animations/blend-in-out.scss';
 
@@ -16,6 +17,10 @@ body:has(.drone) {
     center,
     no-repeat
   );
+
+  @media screen and (min-width: 768px) {
+    height: 100vh;
+  }
 }
 
 .contact-page {
@@ -25,10 +30,59 @@ body:has(.drone) {
   padding: 3rem 1rem;
   width: 100%;
 
+  &__details {
+    position: fixed;
+    bottom: 1rem;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.2rem;
+    width: fit-content;
+    margin: 0 auto;
+    background-color: rgba($dark, 0.7);
+    padding: 0.4rem 0.8rem;
+    border-radius: 0.5rem;
+    transform: perspective(500px) rotateX(55deg);
+
+    span {
+      font-size: 1rem;
+    }
+
+    .details-icon {
+      position: absolute;
+      font-size: 3rem;
+      animation: slideIn 2s ease-in-out infinite;
+
+      @keyframes slideIn {
+        0% {
+          bottom: 40rem;
+          opacity: 0;
+        }
+
+        50% {
+          opacity: 1;
+        }
+
+        100% {
+          bottom: 2rem;
+          opacity: 0.3;
+        }
+      }
+    }
+
+    span,
+    .details-icon {
+      font-weight: 600;
+      color: $color1;
+    }
+  }
+
   @include mixins.component-code-snippet(
     'const Contact = () => {',
-    colors.$color1,
-    colors.$color1,
+    $color1,
+    $color1,
     -2
   );
 
@@ -38,8 +92,8 @@ body:has(.drone) {
 
     @include mixins.component-code-snippet(
       'const Contact = () => {',
-      colors.$color1,
-      colors.$color1,
+      $color1,
+      $color1,
       4
     );
   }