diff --git a/src/components/atoms/IconArrow.svelte b/src/components/atoms/IconArrow.svelte new file mode 100644 index 0000000..8664b3a --- /dev/null +++ b/src/components/atoms/IconArrow.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/src/components/organisms/Newsletter.svelte b/src/components/organisms/Newsletter.svelte new file mode 100644 index 0000000..3e2f435 --- /dev/null +++ b/src/components/organisms/Newsletter.svelte @@ -0,0 +1,33 @@ + + +
+
+ + +
+
\ No newline at end of file diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 84c7f10..efb655c 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -57,6 +57,9 @@ seo_description instagram footer_links + newsletter_url + newsletter_text + newsletter_subtitle } # Count diff --git a/src/routes/index.svelte b/src/routes/index.svelte index abaa54a..570b754 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -5,6 +5,7 @@ import Locations from '$components/organisms/Locations.svelte' import Metas from '$components/Metas.svelte' import PhotoCard from '$components/molecules/PhotoCard.svelte' + import Newsletter from '$components/organisms/Newsletter.svelte' export let photos: any @@ -34,10 +35,12 @@ -

Discover {count.photos} homes from {count.locations} cities of {count.countries} countries

+ + + diff --git a/src/style/_typography.scss b/src/style/_typography.scss index 6544e95..55ed608 100644 --- a/src/style/_typography.scss +++ b/src/style/_typography.scss @@ -1,6 +1,7 @@ // TYPOGRAPHY // Titles +// Huge .title-huge { font-size: clamp(200px, 38vw, 700px); font-family: $font-serif; @@ -8,18 +9,31 @@ letter-spacing: -0.04em; } +// Small +.title-small { + color: $color-secondary; + font-size: rem(28px); + font-weight: 400; + line-height: 1.4; + font-family: $font-serif; +} + // Texts +.text-large { + font-size: rem(32px); + font-family: $font-sans; + font-weight: 400; + line-height: 1.5; +} .text-medium { font-size: rem(28px); font-family: $font-sans; font-weight: 300; line-height: 1.5; } - -.text-large { - font-size: rem(32px); - font-family: $font-sans; +.text-small { + font-size: rem(22px); font-weight: 400; line-height: 1.5; } diff --git a/src/style/_variables.scss b/src/style/_variables.scss index 047a79c..8afe8aa 100644 --- a/src/style/_variables.scss +++ b/src/style/_variables.scss @@ -8,6 +8,7 @@ $color-secondary-bright: #FF0536; $color-text: #333; $color-tertiary: #FFE0C5; $color-lightpurple: #8B50B2; +$color-lilas-bright: #C78FEC; $color-gray: #666; $color-lightgray: #999; $color-shadow-brown: #7A5D44; @@ -42,7 +43,7 @@ $base-width: 1600 !default; // Grid $cols-m: 12 !default; -$cols-d: 32 !default; +$cols-d: 24 !default; /* Directories diff --git a/src/style/atoms/_arrow.scss b/src/style/atoms/_arrow.scss new file mode 100644 index 0000000..54b1d16 --- /dev/null +++ b/src/style/atoms/_arrow.scss @@ -0,0 +1,9 @@ +.arrow { + display: block; + + &--white { + path { + fill: #fff; + } + } +} \ No newline at end of file diff --git a/src/style/organisms/_newsletter.scss b/src/style/organisms/_newsletter.scss new file mode 100644 index 0000000..b64b84d --- /dev/null +++ b/src/style/organisms/_newsletter.scss @@ -0,0 +1,92 @@ +.newsletter { + margin-bottom: 88px; + + &__wrapper { + --columns: 20; + background-color: $color-primary-dark; + grid-column: 3 / span var(--columns); + padding: 80px 0; + + @include bp (sd) { + --columns: 18; + grid-column: 4 / span var(--columns); + } + } + + // About + &__about { + grid-column: 3 / span 6; + margin: auto 0; + + // Text + p { + margin: 16px 0; + } + + // Past issues + a { + text-decoration: none; + color: $color-lilas-bright; + font-size: rem(14px); + + span { + margin-left: 12px; + border-bottom: 1px solid $color-lilas-bright; + } + } + } + // Signup + &__signup { + grid-column: 11 / span 6; + margin: auto 0; + justify-content: center; + + span { + font-size: rem(16px); + line-height: 1.2; + font-weight: 300; + color: rgba($color-tertiary, 0.6); + } + } + + // Form + &__email { + position: relative; + box-shadow: inset 0 0 0 2px $color-secondary; + border-radius: 100vh; + padding: 0 30px; + margin-bottom: 8px; + display: flex; + height: 64px; + max-width: 400px; + + input { + background: none; + font-family: $font-sans; + font-weight: 400; + font-size: rem(18px); + border: none; + color: #fff; + + &::placeholder { + color: #fff; + opacity: 1; + } + } + button { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + margin-left: 32px; + background-color: $color-secondary; + height: 32px; + width: 32px; + flex-shrink: 0; + border-radius: 100vh; + } + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 654d00e..1071e56 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -25,6 +25,7 @@ // Atoms @import "atoms/button"; @import "atoms/badge"; +@import "atoms/arrow"; // Molecules @import "molecules/photo-card"; @@ -32,6 +33,7 @@ // Organisms @import "organisms/locations"; +@import "organisms/newsletter"; // Pages diff --git a/static/images/icons/form.svg b/static/images/icons/form.svg new file mode 100644 index 0000000..c36e29c --- /dev/null +++ b/static/images/icons/form.svg @@ -0,0 +1,7 @@ + + + + + + +