Create homepage

Photo-card layout, button, typography
2021-09-27 23:23:16 +02:00
parent 9b50723183
commit bd89e28e15
10 changed files with 269 additions and 9 deletions
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -0,0 +1,132 @@
+// Homepage
+.homepage {
+
+    // Intro Section
+    &__intro {
+        background-color: $color-tertiary;
+        color: $color-text;
+        text-align: center;
+        overflow: hidden;
+        padding-bottom: clamp(100px, 27vw, 600px);
+
+        // Title
+        h1 {
+            color: $color-secondary;
+            line-height: 1;
+            margin-top: -100px;
+        }
+        // Text
+        p {
+            max-width: 524px;
+            margin: 0 auto 32px;
+        }
+        // Button
+        .button {
+            box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
+            margin-bottom: 40px;
+        }
+    }
+
+    // Photos Collage
+    &__photos {
+        position: relative;
+        max-width: 2000px;
+        height: clamp(500px, 45vw, 900px);
+        margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0;
+    }
+    &__collage {
+        display: grid;
+        grid-template-columns: repeat(32, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        margin: 0 -140px;
+
+        .photo-card {
+            position: relative;
+            display: block;
+            grid-column-end: span 8;
+            height: clamp(133px, 18vw, 400px);
+            margin-left: auto;
+            margin-right: auto;
+            transform: rotate(var(--rotation)) translateZ(0);
+
+            // First row
+            &:nth-child(1) {
+                --rotation: -10.5deg;
+                z-index: 11;
+                grid-column-start: 2;
+                grid-row: 1;
+                top: clamp(24px, 8vw, 128px);
+            }
+            &:nth-child(2) {
+                --rotation: 3deg;
+                z-index: 7;
+                grid-column-start: 7;
+                grid-row: 1;
+                margin-left: 0;
+                top: clamp(16px, 3vw, 48px);
+            }
+            &:nth-child(3) {
+                z-index: 6;
+                grid-column-start: 13;
+                grid-row: 1;
+            }
+            &:nth-child(4) {
+                --rotation: -3deg;
+                z-index: 2;
+                grid-column-start: 19;
+                grid-row: 1;
+                top: clamp(16px, 3vw, 48px);
+            }
+            &:nth-child(5) {
+                --rotation: 10.5deg;
+                z-index: 1;
+                grid-column-start: 24;
+                grid-row: 1;
+                top: clamp(24px, 8vw, 128px);
+            }
+
+            // Second row
+            &:nth-child(6) {
+                --rotation: -5.5deg;
+                z-index: 10;
+                grid-column-start: 1;
+                grid-row: 2;
+                top: clamp(24px, 5.5vw, 132px);
+            }
+            &:nth-child(7) {
+                --rotation: -8deg;
+                grid-column-start: 5;
+                z-index: 9;
+                grid-row: 2;
+            }
+            &:nth-child(8) {
+                --rotation: 8deg;
+                z-index: 5;
+                grid-column-start: 11;
+                grid-row: 2;
+                top: calc(-1 * clamp(20px, 3vw, 48px));
+            }
+            &:nth-child(9) {
+                --rotation: 2deg;
+                z-index: 4;
+                grid-column-start: 15;
+                grid-row: 2;
+                top: calc(-1 * clamp(20px, 3vw, 48px));
+            }
+            &:nth-child(10) {
+                --rotation: 8deg;
+                z-index: 3;
+                grid-column-start: 21;
+                grid-row: 2;
+            }
+            &:nth-child(11) {
+                --rotation: 5.5deg;
+                z-index: 2;
+                grid-column-start: 25;
+                grid-row: 2;
+                top: clamp(24px, 5.5vw, 132px);
+                margin-right: 0;
+            }
+        }
+    }
+}