test

Ma maison...
@import url('https://fonts.googleapis.com/css?family=Courgette|Roboto'); $ff-serif: 'Courgette', serif; $ff-sans-serif: 'Roboto', sans-serif; $color-accent: #A9DFBF; $assets: ( 1: '1506260408121-e353d10b87c7', 2: '1506744038136-46273834b3fb', 3: '1523712999610-f77fbcfc3843', 4: '1501785888041-af3ef285b470' ); @function image($key) { $id: map-get($assets, $key); @return url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/photo-' + $id + '.jpg'); } // Global styles * { box-sizing: border-box; } p { font-family: $ff-sans-serif; font-size: 1.25rem; line-height: 1.5; } blockquote { position: relative; padding-left: 1.5rem; font-family: $ff-serif; font-size: 2rem; line-height: 1.25; letter-spacing: -0.05rem; &:before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background-color: $color-accent; border-radius: 60px; } } // Fixed background image element figure { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; } // Hero section .hero { position: relative; width: 100vw; height: 100vh; @each $asset in $assets { $i: index($assets, $asset); &:nth-child(#{$i}) figure { background-image: image($i); } } } .hero-inner { position: absolute; overflow: hidden; width: 100%; height: 100%; clip: rect(0, auto, auto, 0); @supports (-webkit-overflow-scrolling: touch) { clip: unset; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } .hero__title { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; padding: 0 1rem; width: 100%; height: 100%; color: white; font-family: $ff-serif; font-size: 8vw; letter-spacing: -0.125rem; text-align: center; @media (min-width: 1200px) { font-size: 6rem; } } // Content section .content { position: relative; margin: 0 auto 8rem; padding: 2rem; &:before { content: ''; display: block; position: absolute; top: -100px; left: 0; width: 100%; height: 100px; background-color: white; z-index: 99; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } } .content__inner { margin: 0 auto; max-width: 700px; > * + * { margin-top: 1.5rem; } > blockquote { margin: 3rem 0; } } .content__title { font-family: $ff-serif; font-size: 3rem; line-height: 1.25; letter-spacing: -0.125rem; text-align: center; @media (min-width: 600px) { font-size: 4rem; } } .content__author { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4rem; width: 100%; font-family: $ff-serif; font-size: 1.5rem; letter-spacing: -0.125rem; text-align: center; &:before, &:after { content: ''; flex: 1; height: 2px; background-color: $color-accent; } &:before { margin-right: 1rem; } &:after { margin-left: 1rem; } }