<header>
<h1>This is the Header</h1>
</header>
<main>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum possimus quam optio qui laboriosam officiis doloremque ipsum, eaque, repellat eligendi, id ut. Optio voluptatibus quaerat exercitationem, ipsa doloribus voluptas sunt?
</p>
<p>
Similique voluptates nesciunt quae architecto. Sed suscipit eius ipsum nostrum sint non unde dolorum ab eaque sunt numquam iste, nesciunt quos dolores laudantium corporis, placeat officiis aspernatur alias. Praesentium, quibusdam?
</p>
<p>
Aliquid fugit dolor reiciendis rem aut debitis incidunt? Blanditiis, eum inventore facilis quasi perspiciatis eligendi beatae qui sapiente quo voluptas, non magni excepturi nesciunt officiis numquam accusamus maiores amet soluta!
</p>
<p>
Ad nulla vero hic officia, expedita repudiandae totam rerum eligendi dolore quas ipsum! Repudiandae doloremque, iure quos impedit facere error reprehenderit numquam deleniti nam! Dolore aut numquam labore quia dolorum.
</p>
<p>
Quasi suscipit vero tenetur hic beatae fuga architecto blanditiis atque! Accusantium, eveniet porro! Esse amet aspernatur maiores, in quaerat vitae? Et officiis, voluptates ut magni qui dolorum in ipsum dolore.
</p>
<p>
Aperiam soluta quos illo veniam praesentium rem rerum cupiditate similique assumenda sit vitae animi dolorum iure a, consectetur cum optio, tenetur id reiciendis quod hic, accusamus ullam! Eligendi, unde ipsa.
</p>
</main>
<footer>
<h2>This is the Footer</h2>
</footer>
:root {
--maskWidth: 62.5em; /* 1000px */
--maskHeight: 3.125em; /* 50px */
}
header {
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 50'%3E%3Cswitch%3E%3Cg%3E%3Cpath d='M0 0v14.3c14.4-.4 28.2 3.9 38.8 9.2C56.9 34 86.3 46.8 124.4 48.3h.1c1.8.1 3.7.1 5.6.1H137.9c.9 0 1.9-.1 2.8-.1h.7c.6 0 1.3-.1 1.9-.1h.6c21.6-1.3 45.5-6.4 71.3-17.2 48.3-20.3 85.5-26.1 114.2-26.1 27 0 46.5 5 60.8 7.8 61.2 12 126.2 35.1 186.5 35.3 29.4.1 57.7-5.3 83.8-20 14.4-8.2 32-11.2 51.2-11.1 61.7.3 141.1 32.6 192.8 32.3 1.1 0 2.2 0 3.3-.1 18.6-.6 41-9.8 60-24.4 10.2-7.2 21.4-10.1 32.3-10.4V0H0z'/%3E%3C/g%3E%3C/switch%3E%3C/svg%3E"),
linear-gradient(
black,
black calc(100% - var(--maskHeight) + 0.5px),
transparent calc(100% - var(--maskHeight) + 0.5px),
transparent
);
mask-size: var(--maskWidth) var(--maskHeight), 100%;
mask-position: bottom center;
mask-repeat: repeat-x;
}
footer {
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_1' x='0' y='0' style='enable-background:new 0 0 1000 50' version='1.1' viewBox='0 0 1000 50'%3E%3Cswitch%3E%3Cg%3E%3Cpath d='M1000 50V35.7c-14.4.4-28.2-3.9-38.8-9.2C943.1 16 913.7 3.2 875.6 1.7h-.1c-1.8-.1-3.7-.1-5.6-.1H862.1c-.9 0-1.9.1-2.8.1h-.7c-.6 0-1.3.1-1.9.1h-.6c-21.6 1.3-45.5 6.4-71.3 17.2-48.3 20.3-85.5 26.1-114.2 26.1-27 0-46.5-5-60.8-7.8C548.6 25.3 483.6 2.2 423.3 2c-29.4-.1-57.7 5.3-83.8 20-14.4 8.2-32 11.2-51.2 11.1C226.6 32.9 147.2.5 95.5.8c-1.1 0-2.2 0-3.3.1-18.6.6-41 9.8-60 24.4C22.1 32.5 10.9 35.4 0 35.7V50h1000z'/%3E%3C/g%3E%3C/switch%3E%3C/svg%3E"),
linear-gradient(
transparent 0%,
transparent var(--maskHeight),
black var(--maskHeight),
black 100%
);
mask-size: var(--maskWidth) var(--maskHeight), 100%;
mask-position: top center;
mask-repeat: repeat-x;
}
html {
color: #777;
font-family: arial, sans-serif;
}
body {
margin: 0;
}
header,
footer {
display: grid;
height: 20em;
overflow: hidden;
place-items: center;
position: relative;
}
header::before,
footer::before {
background-color: #26004d;
background-image:
radial-gradient(at 87% 88%, hsla(62, 94%, 50%, 1) 0, hsla(62, 94%, 50%, 0) 50%),
radial-gradient(at 28% 4%, hsla(118, 95%, 61%, 1) 0, hsla(118, 95%, 61%, 0) 50%),
radial-gradient(at 50% 6%, hsla(59, 89%, 56%, 1) 0, hsla(59, 89%, 56%, 0) 50%),
radial-gradient(at 23% 61%, hsla(25, 93%, 67%, 1) 0, hsla(25, 93%, 67%, 0) 50%),
radial-gradient(at 34% 23%, hsla(157, 89%, 54%, 1) 0, hsla(157, 89%, 54%, 0) 50%),
radial-gradient(at 95% 78%, hsla(46, 86%, 57%, 1) 0, hsla(46, 86%, 57%, 0) 50%),
radial-gradient(at 71% 7%, hsla(187, 88%, 56%, 1) 0, hsla(187, 88%, 56%, 0) 50%);
content: '';
height: 35em;
left: 0;
position: absolute;
right: 0;
top: 0;
}
h1,
h2 {
color: white;
font-size: 350%;
margin: 0;
position: relative;
}
main {
width: 50%;
margin: 5em auto;
}
p {
font-size: 1.125em;
line-height: 1.5;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.