New Destinations
+So what are you waiting for? Start exploring our site today
+ and get ready for the adventure of a lifetime!
+
diff --git a/assets/styles/components/call-to-action.scss b/assets/styles/components/call-to-action.scss new file mode 100644 index 00000000..e4afd8c1 --- /dev/null +++ b/assets/styles/components/call-to-action.scss @@ -0,0 +1,143 @@ +.cta { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + padding: 0px 80px 80px; + gap: 24px; + + width: 100vw; + height: 221px; + + background: slot(page, background); + + &__inner { + display: flex; + flex-direction: row; + width: 88.889vw; + justify-content: space-evenly; + align-items: flex-start; + gap: 24px; + padding: 0px 32px; + + } + + &__content { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + flex-wrap: wrap; + flex: 1.962; + + @media only screen and (max-width: 600px) and (min-width: 300px) { + margin-left: 3rem; + } + + @media screen and (max-width: 325px) { + margin-left: 6rem; + + } + + + &-left { + display: flex; + flex-direction: column; + gap: 24px; + padding: 0px; + + + } + + &-heading { + @include typography("heading lg"); + color: $color-neutrals-900; + width: 532px; + height: 50px; + } + + &-paragraph { + @include typography("text lg"); + color: $color-neutrals-900; + align-self: stretch; + + @media screen and (max-width: 521px) { + max-width: 375px; + + } + + @media screen and (max-width: 325px) { + max-width: 362px; + + } + } + + + &-btn { + box-sizing: border-box; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 12px 15px; + width: 120px; + height: 44px; + background-color: transparent; + border-radius: 8px; + + + border: 1px solid $color-neutrals-300; + cursor: pointer; + + &:hover { + border: 1px solid $color-neutrals-400; + } + + &:active { + border: 1px solid $color-neutrals-500; + transform: translateY(0.5px); + } + + } + + &-label { + display: flex; + flex-direction: row; + align-items: center; + padding: 0px 8px; + gap: 8px; + width: 93px; + height: 20px; + + @include typography("label md"); + color: $color-neutrals-700; + + &:hover { + color: $color-neutrals-900; + } + + &:focus { + color: $color-neutrals-700; + } + } + + &-icon { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0px; + + width: 20px; + height: 20px; + + + } + + } + + @media screen and (max-width: 521px) { + margin-bottom: 5rem; + } +} \ No newline at end of file diff --git a/assets/styles/components/listing.scss b/assets/styles/components/listing.scss new file mode 100644 index 00000000..79bc1106 --- /dev/null +++ b/assets/styles/components/listing.scss @@ -0,0 +1,142 @@ +.listing { + + + display: flex; + width: 100vw; + min-height: 29vh; + justify-content: center; + align-items: center; + padding: 0 80px 80px; + + + + + &__inner { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 24px; + + } + + + + &__item { + display: block; + justify-content: center; + align-items: center; + + + } + +} + + +.card { + display: flex; + position: relative; + + max-width: 389px; + height: auto; + + @media screen and (max-width: 425px) { + max-width: 348px; + } + + + &__media { + + object-fit: cover; + aspect-ratio: 159.1/200; + position: relative; + overflow: hidden; + margin: 0; + border-radius: 8px; + + + + &-image { + display: block; + min-width: 100%; + min-height: 100%; + transition: transform 0.3s; + + } + + } + + &__body { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 48px 24px 24px; + gap: 12px; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); + + position: absolute; + height: 197px; + width: 100%; + border-radius: 8px; + bottom: 0px; + color: slot(page, background); + + + + &-label { + @include typography('label sm'); + color: token(color,secondary,700); + background: $color-secondary-100; + padding: 4px; + border-radius: 4px; + + } + + &-label2 { + @include typography('label sm'); + background: $color-primary-100 ; + color: $color-primary-700; + border-radius: 4px; + padding: 4px; + + } + + &-label3 { + @include typography('label sm'); + color: $color-neutrals-700; + background: $color-neutrals-100; + padding: 4px; + border-radius: 4px; + } + + &-title { + @include typography('heading sm'); + + } + + + &-location::before { + content: url("../icons/map-pin.svg"); + display: inline-block; + vertical-align: middle; + margin-right: 5px; + font-size: 1.2rem; + } + + &-location { + @include typography('label sm'); + display: flex; + align-items: center; + } + + + + + } + + &:hover img { + transform: scale(1.25); + } +} \ No newline at end of file diff --git a/assets/styles/global.scss b/assets/styles/global.scss index 4796dff1..b0b3f44c 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -80,3 +80,9 @@ body { height: auto; margin-bottom: 1.5em; } + +.spacer { + width: 100%; + height: 0; + padding-bottom: 5em; +} diff --git a/assets/styles/index.scss b/assets/styles/index.scss index 4a20f6b2..0fbed26e 100644 --- a/assets/styles/index.scss +++ b/assets/styles/index.scss @@ -5,5 +5,7 @@ @import "global"; @import "components/info-box.scss"; +@import "components/listing.scss"; +@import "components/call-to-action.scss"; diff --git a/index.html b/index.html index c344cc04..7951ba42 100644 --- a/index.html +++ b/index.html @@ -1,94 +1,140 @@ -
- - -
- Welcome!
- It's great to see you, future front-end developer at Primate.
-
- We've created this exercise to put your front-end skills to the test, but to also give you a taster of what kind of stuff you will be working on in your first weeks at the company. -
-+ +
+ + +
+ Welcome!
+ It's great to see you, future front-end developer at Primate.
+
+ We've created this exercise to put your front-end skills to the test, but to also give you a taster of what + kind of stuff you will be working on in your first weeks at the company. +
+There are two main things we'd like you to do: -
-- You can find the design mock-up file here, and the main design reference file here. -
-- Keep in mind that we only want the two components mentioned above, and not the whole page. -
-- Here's a screengrab of the scope of this exercise: -
-
-
- We quite like the HTML structure for the cards below so don't alter it too much unless you have to, but do what you think is the best for the CTA.
-
- Good luck and have fun!
-
+ You can find the design mock-up file here, + and the main design reference file here. +
++ Keep in mind that we only want the two components mentioned + above, and not the whole page. +
++ Here's a screengrab of the scope of this exercise: +
+
+
+ We quite like the HTML structure for the cards below so don't alter it too much unless you have to, but do
+ what you think is the best for the CTA.
+
+ Good luck and have fun!
+
New Destinations
+So what are you waiting for? Start exploring our site today
+ and get ready for the adventure of a lifetime!
+