<section>
<h1>Section 1</h1>
</section>
<section>
<div class="container">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat. Mauris vitae ultricies leo integer malesuada. Nisi porta lorem mollis aliquam ut porttitor leo a. Interdum velit laoreet id donec ultrices tincidunt arcu non.</p>
<ul class="social">
<li>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-tumblr-square" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</section>
<section>
<div class="container">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat. Mauris vitae ultricies leo integer malesuada. Nisi porta lorem mollis aliquam ut porttitor leo a. Interdum velit laoreet id donec ultrices tincidunt arcu non. At tellus at urna condimentum mattis pellentesque id nibh tortor. Enim sit amet venenatis urna cursus eget nunc scelerisque. Tellus orci ac auctor augue mauris augue neque. Dictum at tempor commodo ullamcorper a lacus. Venenatis cras sed felis eget velit. Vestibulum morbi blandit cursus risus at ultrices mi tempus. Odio euismod lacinia at quis risus sed. Eget est lorem ipsum dolor sit amet.</p>
</div>
</section>
<section>
<div class="container">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat. Mauris vitae ultricies leo integer malesuada. Nisi porta lorem mollis aliquam ut porttitor leo a. Interdum velit laoreet id donec ultrices tincidunt arcu non. At tellus at urna condimentum mattis pellentesque id nibh tortor. Enim sit amet venenatis urna cursus eget nunc scelerisque. Tellus orci ac auctor augue mauris augue neque. Dictum at tempor commodo ullamcorper a lacus. Venenatis cras sed felis eget velit. Vestibulum morbi blandit cursus risus at ultrices mi tempus. Odio euismod lacinia at quis risus sed. Eget est lorem ipsum dolor sit amet.</p>
<p>Enim sed faucibus turpis in eu mi bibendum. Etiam tempor orci eu lobortis. Pretium aenean pharetra magna ac placerat vestibulum lectus. Senectus et netus et malesuada fames. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Turpis cursus in hac habitasse platea dictumst. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Condimentum lacinia quis vel eros donec. Dignissim enim sit amet venenatis urna cursus eget. Suspendisse in est ante in nibh mauris. Orci nulla pellentesque dignissim enim. Posuere morbi leo urna molestie at. Proin sed libero enim sed faucibus turpis in. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Fringilla urna porttitor rhoncus dolor purus. Nisi scelerisque eu ultrices vitae. At lectus urna duis convallis convallis tellus id interdum.</p>
</div>
</section>
<footer>
Footer
</footer>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, sans-serif;
font-size: 16pt;
}
section:first-child {
min-height: 500px;
background-image: url("https://assets.codepen.io/4787486/colin-firth.webp");
/* background-image: url(https://picsum.photos/id/122/700/1100); */
background-color: #5b7ba8;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
h1 {
position: absolute;
top: 30vmin;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
font-variation-settings: "wght" 550, "wdth" 150;
color: rgba(254 228 183 / 1);
text-align: center;
text-stroke: 1px white;
mix-blend-mode: difference;
z-index: 1;
}
section {
position: relative;
background: #fee4b7;
}
section:not(:first-child) {
margin-top: -5rem;
padding-block: 3rem 8rem;
transform: skewY(2deg);
}
section:nth-child(odd):not(:first-child) {
background: #fff7e8;
transform: skewY(-2deg);
border-top: 2px solid #3b2601;
}
section:first-child {
display: grid;
place-items: center;
font-size: calc(1rem + 6vw);
}
section:last-child {
}
section:nth-child(odd):not(:first-child) .container:nth-child(odd) p,
section:nth-child(odd):not(:first-child) .container:nth-child(odd) h2 {
transform: skewY(2deg);
}
section:nth-child(even):not(:first-child) .container:nth-child(even) p {
transform: skewY(2deg);
}
.container {
width: min(40ch, calc(100% - 64px));
margin-inline: auto;
}
.container p,
.container h2,
.social {
line-height: 1.6;
color: #3b2601;
margin-bottom: 1.5rem;
transform: skewY(-2deg);
}
h2 {
font-size: 2rem;
font-variation-settings: "wght" 450, "wdth" 150;
}
p {
font-size: 1.4rem;
font-variation-settings: "wght" 280, "wdth" 110;
}
.social {
display: flex;
justify-content: space-between;
width: 8rem;
}
ul {
list-style: none;
}
li {
display: inline;
}
a {
color: #f85441;
transition: color 0.2s ease;
}
a:hover {
color: #9b1505;
cursor: pointer;
}
a i {
transform: scale(1);
transition: transform 0.2s ease;
}
a:hover i {
transform: scale(1.5);
}
footer {
display: grid;
place-items: center;
position: absolute;
width: 100%;
height: 120px;
margin-top: -2rem;
background: #fff7e8;
border-top: 3px solid #3b2601;
font-size: 1.5rem;
color: #3b2601;
z-index: 100;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.