Create Newsletter component

2021-09-28 22:51:06 +02:00
parent 15461588ec
commit 1409dc0894
10 changed files with 178 additions and 6 deletions
--- a/src/style/organisms/_newsletter.scss
+++ 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;
+        }
+    }
+}