Desktop version finish

Phurba-Sherpa · Apr 7, 2024 · c5a8813 · c5a8813
1 parent d091049
commit c5a8813
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 3 deletions.
diff --git a/css/style.css b/css/style.css
@@ -299,9 +299,9 @@ img {
   cursor: pointer;
   padding: 2px;
   display: inline-block;
-  transition: all .2s; }
+  transition: all .2s;
+  border: none; }
   .btn--inline {
-    border: none;
     background-color: transparent;
     color: var(--color-primary);
     font-size: inherit;
@@ -316,6 +316,37 @@ img {
     .btn--inline:focus {
       outline: none;
       animation: pulsate 1s infinite; }
+  .btn--solid {
+    font-size: 1.5rem;
+    text-transform: uppercase;
+    border-radius: 100px;
+    background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary));
+    color: var(--color-grey-light-1);
+    overflow: hidden;
+    position: relative; }
+    .btn--solid > * {
+      width: 100%;
+      height: 100%;
+      transition: all .2s;
+      display: inline-block; }
+  .btn__visible {
+    padding: 2rem 7.5rem;
+    transform: translateY(0); }
+  .btn__invisible {
+    position: absolute;
+    left: 0;
+    top: -100%;
+    padding: 2rem 0; }
+  .btn:hover {
+    background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary));
+    color: var(--color-grey-light-1); }
+  .btn--solid:hover .btn__invisible {
+    top: 2px; }
+  .btn--solid:hover .btn__visible {
+    transform: translateY(100%); }
+  .btn:focus {
+    outline: none;
+    animation: pulsate 1s infinite; }
 
 @keyframes pulsate {
   0% {
@@ -417,3 +448,15 @@ img {
     font-family: sans-serif;
     line-height: 1;
     z-index: 1; }
+
+/* =====================
+    cta
+========================*/
+.cta {
+  padding: 3.5rem 0;
+  text-align: center; }
+  .cta__book-now {
+    text-transform: uppercase;
+    font-size: 2rem;
+    font-weight: 300;
+    margin-bottom: 2.5rem; }
diff --git a/index.html b/index.html
@@ -189,6 +189,15 @@ <h1 class="overview__heading">Hotel Las Palmas</h1>
                         </button>
                     </div>
                 </div>
+
+                <div class="cta">
+                    <h2 class="cta__book-now">Good news! We have 4 free rooms for your selected dates!</h2>
+
+                    <button class="btn btn--solid">
+                        <span class="btn__visible">Book now</span>
+                        <span class="btn__invisible">Only 4 rooms left</span>
+                    </button>
+                </div>
             </main>
         </div>
     </div>

diff --git a/sass/_components.scss b/sass/_components.scss
@@ -276,8 +276,8 @@
     padding: 2px;
     display: inline-block;
     transition: all .2s;
+    border: none;
     &--inline {
-        border: none;
         background-color: transparent;
         color: var(--color-primary);
         font-size: inherit;
@@ -301,6 +301,56 @@
             animation: pulsate 1s infinite;
         }
     }
+
+    &--solid {
+        font-size: 1.5rem;
+        text-transform: uppercase;
+        border-radius: 100px;
+        background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary));
+        color: var(--color-grey-light-1);
+        overflow: hidden;
+        position: relative;
+
+        & > * {
+            width: 100%;
+            height: 100%;
+            transition: all .2s;
+            display: inline-block;
+
+
+        }
+    }
+
+
+
+    &__visible {
+        padding: 2rem 7.5rem;
+        transform: translateY(0);
+    }
+    &__invisible {
+        position: absolute;
+         left: 0;
+         top: -100%;
+         padding: 2rem 0;
+    }
+
+    &:hover {
+        background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary));
+        color: var(--color-grey-light-1);
+    }
+
+    &--solid:hover &__invisible {
+        top: 2px;
+    }
+
+    &--solid:hover &__visible {
+        transform: translateY(100%);
+    }
+
+    &:focus {
+        outline: none;
+        animation: pulsate 1s infinite;
+    }
 }
 
 @keyframes pulsate {
@@ -446,3 +496,19 @@
         z-index: 1;
     }
 }
+
+/* =====================
+    cta
+========================*/
+
+.cta {
+    padding: 3.5rem 0;
+    text-align: center;
+    &__book-now {
+        text-transform: uppercase;
+        font-size: 2rem;
+        font-weight: 300;
+        margin-bottom: 2.5rem;
+
+    }
+}