New Destinations
+ + See All + + +So what are you waiting for? Start exploring our site today
and get ready for the adventure of a lifetime!
From a0dca17de4c4964e7995a9e9bf1c384fbd93424f Mon Sep 17 00:00:00 2001 From: Eliot Rhys <32644073+eliotrhys@users.noreply.github.com> Date: Sun, 21 May 2023 04:49:35 +0100 Subject: [PATCH 1/3] first pass --- assets/styles/components/card.scss | 115 +++ assets/styles/components/cta.scss | 65 ++ assets/styles/global.scss | 18 + assets/styles/index.scss | 2 + index.html | 108 +- pnpm-lock.yaml | 1496 +++++++++++++++++++--------- 6 files changed, 1282 insertions(+), 522 deletions(-) create mode 100644 assets/styles/components/card.scss create mode 100644 assets/styles/components/cta.scss diff --git a/assets/styles/components/card.scss b/assets/styles/components/card.scss new file mode 100644 index 00000000..6f8ac233 --- /dev/null +++ b/assets/styles/components/card.scss @@ -0,0 +1,115 @@ +.listing { + + padding-left: 1rem; + padding-right: 1rem; + + &__inner { + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-gap: 1rem; + + @include screen(tablet) { + grid-template-columns: repeat(3, 1fr); + } + } + + &__item { + + text-decoration: none; + + .card { + &__body { + position: relative; + z-index: 10; + padding: 2rem; + + &-label { + display: inline-block; + border-radius: 4px; + font-weight: 600; + font-size: 12px; + padding: 0.5rem 1rem 0.5rem 1rem; + margin-bottom: 1rem; + + &.white { + color: #3F3F46; + background-color: #F4F4F4; + } + + &.blue { + color: #175CD3; + background-color: #D1E9FF; + } + + &.purple { + color: #6927DA; + background-color: #ECE9FE; + } + + } + + &-title { + font-weight: 700; + font-size: 24px; + line-height: 125%; + // @include typography(header); + color: #FFFFFF; + margin-bottom: 0.7rem; + } + + &-location { + font-weight: 600; + font-size: 14px; + color: #FFFFFF; + display: flex; + align-items: center; + + .icon { + height: 20px; + margin-right: 0.3rem; + } + } + } + + &__media { + height: 480px; + border-radius: 8px; + display: flex; + align-items: end; + position: relative; + overflow: hidden; + + &:hover { + .card__media-bg { + transform: scale(1.1); + } + } + + &-bg { + transition: 0.4s ease; + position: absolute; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + height: 100%; + width: 100%; + top: 0px; + left: 0px; + + &::after { + content: ""; + background: rgb(0,0,0); + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + height: 50%; + width: 100%; + position: absolute; + bottom: 0px; + left: 0px; + } + } + } + } + } +} \ No newline at end of file diff --git a/assets/styles/components/cta.scss b/assets/styles/components/cta.scss new file mode 100644 index 00000000..01a9c56b --- /dev/null +++ b/assets/styles/components/cta.scss @@ -0,0 +1,65 @@ +.cta { + + width: 100%; + padding-left: 1rem; + padding-right: 1rem; + margin-bottom: 0px; + + @include screen(tablet) { + margin-bottom: 4rem; + } + + .header-container { + display: flex; + align-items: center; + justify-content: space-between; + @include responsive-slot('margin-bottom', component, spacing); + } + + .title { + color: #18181B; + font-weight: 700; + font-size: 22px; + + @include screen(tablet) { + font-size: 40px; + } + } + + .text { + font-weight: 400; + line-height: 160%; + letter-spacing: 0.02em; + color: #18181B; + font-size: 16px; + + @include screen(tablet) { + font-size: 18px; + } + } + + .button { + display: flex; + justify-content: center; + align-items: center; + padding: 12px 16px; + border: 1px solid #D1D1D6; + border-radius: 8px; + text-decoration: none !important; + font-weight: 600; + font-size: 16px; + color: #3F3F46; + transition: ease 0.3s ease; + + &:hover { + background-color: black; + color: white; + border-color: black; + } + + .icon { + height: 15px; + } + } + +} \ No newline at end of file diff --git a/assets/styles/global.scss b/assets/styles/global.scss index 4796dff1..25fbb39a 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -47,6 +47,7 @@ body { } .component { + max-width: 1280px; width: 100%; margin: 0 auto; @@ -66,6 +67,7 @@ body { line-height: 1.4; } } + .main-content-link { color: slot(page, accent); } @@ -73,6 +75,7 @@ body { .main-content-strong { font-weight: bold; } + .main-content-image { display: block; width: 100%; @@ -80,3 +83,18 @@ body { height: auto; margin-bottom: 1.5em; } + +.page-container { + min-height: 100vh; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding-top: 1rem; + padding-bottom: 1rem; + + @include screen(desktop) { + padding-top: 0rem; + padding-bottom: 0rem; + } +} \ No newline at end of file diff --git a/assets/styles/index.scss b/assets/styles/index.scss index 4a20f6b2..98a194db 100644 --- a/assets/styles/index.scss +++ b/assets/styles/index.scss @@ -6,4 +6,6 @@ @import "components/info-box.scss"; +@import "components/card.scss"; +@import "components/cta.scss"; \ No newline at end of file diff --git a/index.html b/index.html index c344cc04..744ec422 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,14 @@
-So what are you waiting for? Start exploring our site today
and get ready for the adventure of a lifetime!