Luo Wang - Test Task Submission

assets/styles/components/callToAction.scss

@@ -0,0 +1,78 @@
+.callToAction {
+    @include responsive-grid();
+    margin-bottom: 3rem;
+
+    &__inner {
+      grid-column: slot(grid, wide);
+      display: flex;
+      flex-flow: row wrap;
+      width: 100%;
+      grid-gap: 1rem;
+
+      @include screen(tablet) {
+        max-width: 50rem;
+        justify-content: space-between;
+      }
+
+      @include screen(desktop) {
+        max-width: 76rem;
+        justify-content: space-between;
+      }
+
+    }
+
+    &__content {
+        &-intro {
+            @include typography('heading lg');
+        }
+
+        &-paragraph {
+            margin-top: 1.5em;
+            @include typography('text lg');
+            color: token(color, neutrals, '900');
+        }
+    }
+
+    &__button {
+        .icon-button {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 12px 16px;
+        border-radius: 8px;
+        margin: auto;
+        border: 1px solid token(color, neutrals, '300');
+        width: 120px;
+        height: 44px;
+
+        &:hover {
+            cursor:pointer;
+            border: 1px solid token(color, neutrals, '400');
+        }
+
+        &:active {
+            cursor:pointer;
+            border: 1px solid token(color, neutrals, '600');
+        }
+
+        background: token(color, base, 'white');
+        @include typography('label md');
+
+
+
+
+        &::after {
+            content: "";
+            display: inline-block;
+            width: 8px;
+            height: 14px;
+            margin-left: 1rem;
+            line-height: 100%;
+            background-image: url("/assets/icons/arrow.svg");
+          }
+        }
+
+
+    }
+  }

assets/styles/components/listing.scss

@@ -0,0 +1,117 @@
+.listing {
+  @include responsive-grid();
+
+
+  &__inner {
+    grid-column: slot(grid, wide);
+    grid-gap: 1.5rem;
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+
+    @include screen(tablet) {
+      flex-flow: row wrap;
+      max-width: 52rem;
+    }
+
+    @include screen(desktop) {
+      flex-flow: row wrap;
+      max-width: 80rem;
+    }
+
+
+  }
+}
+
+.card {
+    position: relative;
+    overflow: hidden;
+    max-width: 389px;
+    height: 480px;
+    border-radius: 8px;
+
+    @include screen(tablet) {
+      margin-bottom: 5rem;
+    }
+
+    @include screen(desktop) {
+      margin-bottom: 5rem;
+    }
+
+    &__media {
+        position: relative;
+        z-index: 1;
+        object-fit: cover;
+        transition: transform 0.3s;
+    }
+
+    &__body {
+      position: absolute;
+      z-index: 2;
+      top: 283.25px;
+      padding: 36px 24px;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+
+      &-label {
+        display: inline-block;
+        padding: 4px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 125%;
+        // @include typography('label xs'); -- dose not work
+      }
+
+      &-title {
+        margin-top: 12px;
+        @include typography('heading sm');
+        color: token(color, base, 'white');
+      }
+
+      &-location {
+        margin-top: 12px;
+        @include typography('label sm');
+        color: token(color, base, 'white');
+
+        &::before {
+          content: "";
+          display: inline-block;
+          width: 11.2px;
+          height: 13.6px;
+          margin-right: 6.4px;
+          background-image: url("/assets/icons/map-pin.svg");
+        }
+      }
+  }
+
+  &:nth-child(1) {
+    .card__body-label {
+      /* Set the color for the first card */
+      background: token(color, secondary, '100');
+      color: token(color, secondary, '700');
+    }
+
+  }
+  &:nth-child(2) {
+    .card__body-label {
+      /* Set the color for the second card */
+      background: token(color, primary, '100');
+      color: token(color, primary, '700');
+    }
+
+  }
+  &:nth-child(3) {
+    .card__body-label {
+      /* Set the color for the third card */
+      background: token(color, neutrals, '100');
+      color: token(color, neutrals, '700');
+    }
+
+    margin-bottom: 1.5rem;
+  }
+}
+
+/* Image Zoom in */
+.card:hover .card__media {
+  transform: scale(1.1);
+}

assets/styles/index.scss

@@ -6,4 +6,8 @@
 
 @import "components/info-box.scss";
 
+@import "components/listing.scss";
+
+@import "components/callToAction.scss"
+
 

index.html

@@ -47,6 +47,29 @@
         </div>
       </div>
 
+      <div class="component callToAction">
+        <div class="callToAction__inner">
+
+          <div class="callToAction__content">
+            <p class="callToAction__content-intro">
+              New Destinations
+            </p>
+            <p class="callToAction__content-paragraph">
+              So what are you waiting for? Start exploring our site today 
+              <br/>
+              and get ready for the adventure of a lifetime!
+            </p>
+          </div>
+
+          <div class="callToAction__button">
+            <button class="icon-button">
+              See All
+            </button>
+          </div>
+
+        </div>
+      </div>
+
       <div class="component listing">
         <div class="listing__inner">