From 880744f82a7dd22f9b0f9db2b1b63925633954f0 Mon Sep 17 00:00:00 2001 From: chusarublessing Date: Sat, 27 May 2023 14:43:40 +0200 Subject: [PATCH 1/3] Completed Task --- assets/styles/components/header.scss | 48 +++++++++++++ assets/styles/components/listing.scss | 99 +++++++++++++++++++++++++++ assets/styles/index.scss | 2 + index.html | 13 +++- 4 files changed, 161 insertions(+), 1 deletion(-) create mode 100644 assets/styles/components/header.scss create mode 100644 assets/styles/components/listing.scss diff --git a/assets/styles/components/header.scss b/assets/styles/components/header.scss new file mode 100644 index 00000000..1829aaa0 --- /dev/null +++ b/assets/styles/components/header.scss @@ -0,0 +1,48 @@ +.header-container { + display: flex; + padding: 2rem; + + .header-text { + flex-basis: 50%; + + h1 { + font-size: 2rem; + font-weight: bold; + } + + p { + width: 50%; + margin-top: .8rem; + line-height: 1.5; + } + } + + .header-cta { + flex-basis: 50%; + display: flex; + justify-content: flex-end; + align-items: start; + a { + padding: .5rem 1rem; + border: 1px solid #666; + border-radius: 5px; + text-decoration: none; + color: #000; + display: inline-block; + font-weight: 800; + } + } +} + +@media(max-width: 998px){ + .header-container{ + display: block; + + .header-cta{ + display: block; + margin-top: 2rem; + } + } + + +} \ 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..831e7427 --- /dev/null +++ b/assets/styles/components/listing.scss @@ -0,0 +1,99 @@ +.listing { + margin: 2rem 0; + + &__inner { + + margin-bottom: 300px; + display: flex; + flex-basis: calc((100%)/3); + gap: 1rem; + justify-content: space-evenly; + padding: 0 2rem; + + .card { + width: 100%; + height: 500px; + position: relative; + border-radius: 8px; + + &__media { + border-radius: 8px; + height: 100%; + width: 100%; + + &-image { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; + + } + } + + &__body { + position: absolute; + bottom: 0; + padding: 1rem; + background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); + border-radius: 0 0 8px 8px; + width: 100%; + + &-label{ + font-weight: bold; + padding: .3rem .5rem; + border-radius: 5px; + width: fit-content; + margin-bottom: .8rem; + left: 5px; + } + + &-label:first-child{ + background-color: #ECE9FE; + color: #8653E2; + } + + &-label:nth-child(2){ + background-color: #D1E9FF; + color: #2264D6; + } + + &-label:last-child{ + background-color: #F4F4F4; + color: #67676D; + } + + + &-title{ + font-weight: 600; + line-height: 1.3; + color: #fff; + font-size: 1.3rem; + margin-bottom: .5rem; + } + + &-location{ + color: #fff; + } + + &-location::before{ + content: url('../icons/map-pin.svg'); + margin-right: 10px; + } + } + } + + } +} + + +@media(max-width : 998px){ + + .listing { + &__inner{ + flex-direction: column; + flex-basis: 50%; + } + + + } +} \ No newline at end of file diff --git a/assets/styles/index.scss b/assets/styles/index.scss index 4a20f6b2..e43b3060 100644 --- a/assets/styles/index.scss +++ b/assets/styles/index.scss @@ -5,5 +5,7 @@ @import "global"; @import "components/info-box.scss"; +@import "components/header.scss"; +@import "components/listing.scss"; diff --git a/index.html b/index.html index c344cc04..a0beffdc 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-
+ + +
+
+

New Destinations

+

So what are you waiting for? Start exploring our site today and get ready for the adventure of a lifetime!

+
+
+ See All   > +
+
From aa173d1029e22d2c8cb8c1681ec782dad856f096 Mon Sep 17 00:00:00 2001 From: chusarublessing Date: Thu, 1 Jun 2023 22:38:42 +0200 Subject: [PATCH 2/3] Updated changes --- assets/styles/components/header.scss | 86 ++++++++----- assets/styles/components/listing.scss | 166 ++++++++++++++------------ 2 files changed, 143 insertions(+), 109 deletions(-) diff --git a/assets/styles/components/header.scss b/assets/styles/components/header.scss index 1829aaa0..cbce5439 100644 --- a/assets/styles/components/header.scss +++ b/assets/styles/components/header.scss @@ -1,40 +1,61 @@ .header-container { display: flex; - padding: 2rem; - - .header-text { - flex-basis: 50%; + justify-content: space-evenly; + padding: 1rem ; +} - h1 { - font-size: 2rem; - font-weight: bold; - } +.header-text { + max-width: 40rem; + h1 { + font-size: 2rem; + font-weight: bold; + } - p { - width: 50%; - margin-top: .8rem; - line-height: 1.5; - } + p { + width: 75%; + margin-top: .8rem; + line-height: 1.5; } +} - .header-cta { - flex-basis: 50%; - display: flex; - justify-content: flex-end; - align-items: start; - a { - padding: .5rem 1rem; - border: 1px solid #666; - border-radius: 5px; - text-decoration: none; - color: #000; - display: inline-block; - font-weight: 800; - } +.header-cta { + flex-basis: 36rem; + padding-right: 1.2rem; + display: flex; + justify-content: flex-end; + align-items: start; + a { + padding: .5rem 1rem; + border: 1px solid #666; + border-radius: .3rem; + text-decoration: none; + color: #000; + display: inline-block; + font-weight: 800; } + + a::after { + content: ""; + margin-left: .6rem; + background-image: url("../icons/arrow-icon.svg"); + display: inline-block; + height: 1rem; + width: 1rem; + background-size: 1rem 1rem; + } + + a:hover{ + box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem; + } + + .header-cta::before{ + content: url('../icons/arrow-icon.svg'); + margin-right: .75rem; + } } -@media(max-width: 998px){ + +@media(max-width: 800px){ .header-container{ display: block; @@ -42,7 +63,12 @@ display: block; margin-top: 2rem; } - } + .header-text{ + p{ + width: 100%; + } + } + } +} -} \ No newline at end of file diff --git a/assets/styles/components/listing.scss b/assets/styles/components/listing.scss index 831e7427..d4f6a873 100644 --- a/assets/styles/components/listing.scss +++ b/assets/styles/components/listing.scss @@ -1,99 +1,107 @@ .listing { - margin: 2rem 0; + margin: 1rem 0; &__inner { - - margin-bottom: 300px; - display: flex; - flex-basis: calc((100%)/3); + margin-bottom: 18rem; + display: grid; gap: 1rem; - justify-content: space-evenly; + grid-template-columns: repeat(3,1fr); + justify-content: center; padding: 0 2rem; + } +} + +.card { + height: 31rem; + position: relative; + border-radius: .5rem; + + &__media { + border-radius: .5rem; + height: 100%; + width: 100%; + overflow: hidden; - .card { + &-image { width: 100%; - height: 500px; - position: relative; - border-radius: 8px; - - &__media { - border-radius: 8px; - height: 100%; - width: 100%; - - &-image { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 8px; - - } - } + height: 100%; + object-fit: cover; + border-radius: .5rem; + transition: all .2s ease-in-out; + background-size: cover; + } + + &-image:hover { + transform: scale(1.1); + } + } + + &__body { + position: absolute; + bottom: 0; + padding: 1rem; + background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); + border-radius: 0 0 .5rem .5rem; + width: 100%; + + &-label{ + font-weight: bold; + padding: .3rem .5rem; + border-radius: 5px; + width: fit-content; + margin-bottom: .8rem; + left: .3rem; + } - &__body { - position: absolute; - bottom: 0; - padding: 1rem; - background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); - border-radius: 0 0 8px 8px; - width: 100%; - - &-label{ - font-weight: bold; - padding: .3rem .5rem; - border-radius: 5px; - width: fit-content; - margin-bottom: .8rem; - left: 5px; - } - - &-label:first-child{ - background-color: #ECE9FE; - color: #8653E2; - } - - &-label:nth-child(2){ - background-color: #D1E9FF; - color: #2264D6; - } - - &-label:last-child{ - background-color: #F4F4F4; - color: #67676D; - } - - - &-title{ - font-weight: 600; - line-height: 1.3; - color: #fff; - font-size: 1.3rem; - margin-bottom: .5rem; - } - - &-location{ - color: #fff; - } - - &-location::before{ - content: url('../icons/map-pin.svg'); - margin-right: 10px; - } + &-label:first-child{ + background-color: #ECE9FE; } + + &-title{ + font-weight: 600; + line-height: 1.3; + color: #fff; + font-size: 1.3rem; + margin-bottom: .5rem; + } + + &-location{ + color: #fff; } + &-location::before{ + content: url('../icons/map-pin.svg'); + margin-right: .6rem; + } } } -@media(max-width : 998px){ - +@media(max-width : 800px){ .listing { &__inner{ - flex-direction: column; - flex-basis: 50%; - } + grid-template-columns: repeat(2,1fr); + } + } +} +@media(max-width : 500px){ + .listing { + &__inner{ + grid-template-columns: repeat(1,1fr); + } } -} \ No newline at end of file +} + + +$text-colors: #9568e6, #2768d7, #3F3F46; +$label-colors: #ECE9FE, #D1E9FF, #F4F4F4; + +@for $i from 1 through 3 { + .listing__item:nth-of-type(#{$i}) .card__body-label { + color: nth($text-colors, $i); + background-color: nth($label-colors, $i); + } +} + From 00185e0013d134d1b673d2969adbe15f89b28584 Mon Sep 17 00:00:00 2001 From: chusarublessing Date: Thu, 1 Jun 2023 22:43:09 +0200 Subject: [PATCH 3/3] Updated changes --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index a0beffdc..b0a9c55a 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,8 @@
- +
+ -->
@@ -53,14 +55,12 @@

New Destinations

So what are you waiting for? Start exploring our site today and get ready for the adventure of a lifetime!

- See All   > + See All
-
-
Placeholder image