<body>
<header>
<div class="container">
<h3>Section Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque asperiores voluptatum eveniet, nemo, dolorem possimus aperiam porro illo reprehenderit, tempore id consequatur impedit necessitatibus doloribus nam voluptatem. Vel cupiditate veritatis neque sed nihil et impedit. </p>
</div>
</header>
<!-- series of spans that fade in to next section -->
<span></span>
<span></span>
<span></span>
<span></span>
<section id="section1">
<div class="container">
<h3>Section Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate beatae officia officiis alias totam maiores magni recusandae omnis autem possimus aliquid asperiores, nostrum neque culpa et, soluta, ratione quasi voluptatibus illum vero quas eum! Animi praesentium voluptatem temporibus. Error qui sapiente nobis excepturi quae provident.</p>
</div>
</section>
<!-- this section is slanted using the 'skew' attribute -->
<section id="section2">
<div class="container">
<h3>Section Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate beatae officia officiis alias totam maiores magni recusandae omnis autem possimus aliquid asperiores, nostrum neque culpa et, soluta, ratione quasi voluptatibus illum vero quas eum! Animi praesentium voluptatem temporibus. Error qui sapiente nobis excepturi quae provident.</p>
</div>
</section>
<section id="section3">
<div class="container">
<h3>Section Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate beatae officia officiis alias totam maiores magni recusandae omnis autem possimus aliquid asperiores, nostrum neque culpa et, soluta, ratione quasi voluptatibus illum vero quas eum! Animi praesentium voluptatem temporibus. Error qui sapiente nobis excepturi quae provident.</p>
</div>
</section>
<!-- Chevron pattern SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.74 55.15">
<defs>
<style>
.cls-1 {
fill: #d1d5db;
}
.cls-2 {
fill: #374151;
}
.cls-3 {
fill: #111827;
}
</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<polygon class="cls-1" points="360.74 16.47 368.74 0.47 376.74 16.47 368.74 33.47 360.74 16.47"/>
<g>
<polygon class="cls-1" points="0 16 8 0 16 16 8 33 0 16"/>
<polygon class="cls-1" points="16.48 16.15 24.48 0.15 32.48 16.15 24.48 33.15 16.48 16.15"/>
<polygon class="cls-1" points="32.48 16.15 40.48 0.15 48.48 16.15 40.48 33.15 32.48 16.15"/>
<polygon class="cls-1" points="49.48 16.15 57.48 0.15 65.48 16.15 57.48 33.15 49.48 16.15"/>
<polygon class="cls-1" points="66 16 74 0 82 16 74 33 66 16"/>
<polygon class="cls-1" points="82.48 16.15 90.48 0.15 98.48 16.15 90.48 33.15 82.48 16.15"/>
<polygon class="cls-1" points="98.48 16.15 106.48 0.15 114.48 16.15 106.48 33.15 98.48 16.15"/>
<polygon class="cls-1" points="115 16 123 0 131 16 123 33 115 16"/>
<polygon class="cls-1" points="131.48 16.15 139.48 0.15 147.48 16.15 139.48 33.15 131.48 16.15"/>
<polygon class="cls-1" points="147.48 16.15 155.48 0.15 163.48 16.15 155.48 33.15 147.48 16.15"/>
<polygon class="cls-1" points="164.48 16.15 172.48 0.15 180.48 16.15 172.48 33.15 164.48 16.15"/>
<polygon class="cls-1" points="180.48 16.15 188.48 0.15 196.48 16.15 188.48 33.15 180.48 16.15"/>
<polygon class="cls-1" points="197 16 205 0 213 16 205 33 197 16"/>
<polygon class="cls-1" points="213.48 16.15 221.48 0.15 229.48 16.15 221.48 33.15 213.48 16.15"/>
<polygon class="cls-1" points="230 16 238 0 246 16 238 33 230 16"/>
<polygon class="cls-1" points="246.48 16.15 254.48 0.15 262.48 16.15 254.48 33.15 246.48 16.15"/>
<polygon class="cls-1" points="263 16 271 0 279 16 271 33 263 16"/>
<polygon class="cls-1" points="279.48 16.15 287.48 0.15 295.48 16.15 287.48 33.15 279.48 16.15"/>
<polygon class="cls-1" points="296 16 304 0 312 16 304 33 296 16"/>
<polygon class="cls-1" points="312.48 16.15 320.48 0.15 328.48 16.15 320.48 33.15 312.48 16.15"/>
<polygon class="cls-1" points="329 16 337 0 345 16 337 33 329 16"/>
<polygon class="cls-1" points="345.48 16.15 353.48 0.15 361.48 16.15 353.48 33.15 345.48 16.15"/>
</g>
<g>
<polygon class="cls-2" points="8.32 28.29 16.32 12.29 24.32 28.29 16.32 45.29 8.32 28.29"/>
<polygon class="cls-2" points="24.79 28.44 32.79 12.44 40.79 28.44 32.79 45.44 24.79 28.44"/>
<polygon class="cls-2" points="40.79 28.44 48.79 12.44 56.79 28.44 48.79 45.44 40.79 28.44"/>
<polygon class="cls-2" points="57.79 28.44 65.79 12.44 73.79 28.44 65.79 45.44 57.79 28.44"/>
<polygon class="cls-2" points="74.32 28.29 82.32 12.29 90.32 28.29 82.32 45.29 74.32 28.29"/>
<polygon class="cls-2" points="90.79 28.44 98.79 12.44 106.79 28.44 98.79 45.44 90.79 28.44"/>
<polygon class="cls-2" points="106.79 28.44 114.79 12.44 122.79 28.44 114.79 45.44 106.79 28.44"/>
<polygon class="cls-2" points="123.32 28.29 131.32 12.29 139.32 28.29 131.32 45.29 123.32 28.29"/>
<polygon class="cls-2" points="139.79 28.44 147.79 12.44 155.79 28.44 147.79 45.44 139.79 28.44"/>
<polygon class="cls-2" points="155.79 28.44 163.79 12.44 171.79 28.44 163.79 45.44 155.79 28.44"/>
<polygon class="cls-2" points="172.79 28.44 180.79 12.44 188.79 28.44 180.79 45.44 172.79 28.44"/>
<polygon class="cls-2" points="188.79 28.44 196.79 12.44 204.79 28.44 196.79 45.44 188.79 28.44"/>
<polygon class="cls-2" points="205.32 28.29 213.32 12.29 221.32 28.29 213.32 45.29 205.32 28.29"/>
<polygon class="cls-2" points="221.79 28.44 229.79 12.44 237.79 28.44 229.79 45.44 221.79 28.44"/>
<polygon class="cls-2" points="238.32 28.29 246.32 12.29 254.32 28.29 246.32 45.29 238.32 28.29"/>
<polygon class="cls-2" points="254.79 28.44 262.79 12.44 270.79 28.44 262.79 45.44 254.79 28.44"/>
<polygon class="cls-2" points="271.32 28.29 279.32 12.29 287.32 28.29 279.32 45.29 271.32 28.29"/>
<polygon class="cls-2" points="287.79 28.44 295.79 12.44 303.79 28.44 295.79 45.44 287.79 28.44"/>
<polygon class="cls-2" points="304.32 28.29 312.32 12.29 320.32 28.29 312.32 45.29 304.32 28.29"/>
<polygon class="cls-2" points="320.79 28.44 328.79 12.44 336.79 28.44 328.79 45.44 320.79 28.44"/>
<polygon class="cls-2" points="337.32 28.29 345.32 12.29 353.32 28.29 345.32 45.29 337.32 28.29"/>
<polygon class="cls-2" points="353.79 28.44 361.79 12.44 369.79 28.44 361.79 45.44 353.79 28.44"/>
</g>
<g>
<polygon class="cls-3" points="0 38 8 22 16 38 8 55 0 38"/>
<polygon class="cls-3" points="16.48 38.15 24.48 22.15 32.48 38.15 24.48 55.15 16.48 38.15"/>
<polygon class="cls-3" points="32.48 38.15 40.48 22.15 48.48 38.15 40.48 55.15 32.48 38.15"/>
<polygon class="cls-3" points="49.48 38.15 57.48 22.15 65.48 38.15 57.48 55.15 49.48 38.15"/>
<polygon class="cls-3" points="66 38 74 22 82 38 74 55 66 38"/>
<polygon class="cls-3" points="82.48 38.15 90.48 22.15 98.48 38.15 90.48 55.15 82.48 38.15"/>
<polygon class="cls-3" points="98.48 38.15 106.48 22.15 114.48 38.15 106.48 55.15 98.48 38.15"/>
<polygon class="cls-3" points="115 38 123 22 131 38 123 55 115 38"/>
<polygon class="cls-3" points="131.48 38.15 139.48 22.15 147.48 38.15 139.48 55.15 131.48 38.15"/>
<polygon class="cls-3" points="147.48 38.15 155.48 22.15 163.48 38.15 155.48 55.15 147.48 38.15"/>
<polygon class="cls-3" points="164.48 38.15 172.48 22.15 180.48 38.15 172.48 55.15 164.48 38.15"/>
<polygon class="cls-3" points="180.48 38.15 188.48 22.15 196.48 38.15 188.48 55.15 180.48 38.15"/>
<polygon class="cls-3" points="197 38 205 22 213 38 205 55 197 38"/>
<polygon class="cls-3" points="213.48 38.15 221.48 22.15 229.48 38.15 221.48 55.15 213.48 38.15"/>
<polygon class="cls-3" points="230 38 238 22 246 38 238 55 230 38"/>
<polygon class="cls-3" points="246.48 38.15 254.48 22.15 262.48 38.15 254.48 55.15 246.48 38.15"/>
<polygon class="cls-3" points="263 38 271 22 279 38 271 55 263 38"/>
<polygon class="cls-3" points="279.48 38.15 287.48 22.15 295.48 38.15 287.48 55.15 279.48 38.15"/>
<polygon class="cls-3" points="296 38 304 22 312 38 304 55 296 38"/>
<polygon class="cls-3" points="312.48 38.15 320.48 22.15 328.48 38.15 320.48 55.15 312.48 38.15"/>
<polygon class="cls-3" points="329 38 337 22 345 38 337 55 329 38"/>
<polygon class="cls-3" points="345.48 38.15 353.48 22.15 361.48 38.15 353.48 55.15 345.48 38.15"/>
</g>
<polygon class="cls-3" points="361.74 37.47 369.74 21.47 377.74 37.47 369.74 54.47 361.74 37.47"/>
</g>
</g>
</svg>
<section id="section4">
<div class="container">
<h3>Section Heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate beatae officia officiis alias totam maiores magni recusandae omnis autem possimus aliquid asperiores, nostrum neque culpa et, soluta, ratione quasi voluptatibus illum vero quas eum! Animi praesentium voluptatem temporibus. Error qui sapiente nobis excepturi quae provident.</p>
</div>
</section>
<!-- Wavy SVG applied to footer-bg -->
<div class="footer-bg"></div>
<footer>
<small>This is some footer text. </small>
</footer>
</body>* {
margin: 0;
}
body {
display: flex;
flex-direction: column;
width: 100%;
overflow: auto;
}
h3 {
margin-bottom: 2rem;
}
header {
line-height: 1.75;
height: 100%;
background-color: #DC2626;
color: #f8f8f8;
}
.container {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.5;
margin: 0 auto;
padding: 5%;
}
/* Series of <span>'s with colors that fade out */
span {
height: 18px;
width: 100%;
}
span:nth-of-type(1) {
background-color: #F87171;
box-shadow: 0 0 12px 2px #F87171; /* adds blur to smooth color transitions */
margin-top: -2px; /* layers it on top of the previous <span> */
}
span:nth-of-type(2) {
opacity: .8;
background-color: #FECACA;
box-shadow: 0 0 12px 2px #FECACA;
margin-top: -2px;
}
span:nth-of-type(3) {
opacity: .6;
background-color: #FEF2F2;
box-shadow: inset 0 0 12px 2px #FEF2F2;
margin-top: -2px;
}
section {
overflow: hidden;
height: 100%;
}
#section1 {
background-color: #fff;
}
#section2 {
background-color: #F59E0B;
padding: 5%;
transform: skew(0, -2deg); /* makes the section slanted/skewed */
}
#section2 h3, #section2 p {
transform: skew(0, 2deg); /* eliminates skew on container's text elements */
}
#section3 {
background-color: #1F2937;
height: 100%;
color: #f2f2f2;
margin-top: -5%;
padding-top: 8%;
padding-bottom: 8%;
overflow: hidden;
}
svg {
overflow: hidden;
margin-top: -4rem;
margin-left: -1rem;
z-index: 1000;
}
#section4 {
background-color: #F9FAFB;
margin-top: -10%;
padding-top: 10%;
padding-bottom: 12%;
}
/* Wavy background for footer */
.footer-bg {
background-color: #7F1D1D;
position: relative;
margin-top: -18%;
overflow: hidden;
z-index: 100;
height: 300px;
clip-path: polygon(0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%, 100% 100%, 0% 100%);
}
footer {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.5;
height: 200px;
margin-top: -5px;
background-color: #7F1D1D;
color: #fff;
}
@media screen and (max-width: 1024px) {
.container {
width: 90vw;
padding: 5% 5px;
}
header, section {
height: 100%;
}
header .container {
float: none;
text-align: center;
padding: 5% 5px;
}
#section2 {
padding: 0 5px;
}
#section3 {
margin-top: -8%;
padding-bottom: 20%;
}
#section4 {
padding-bottom: 20%;
}
.footer-bg {
height: 200px;
margin-top: -30%;
}
}
@media screen and (max-width: 400px) {
.footer-bg {
margin-top: -35%;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.