Press "Enter" to skip to content

Creating a header from a youtube still

While watching Kurzgesagt – In a Nutshell on Youtube, the following screen came up and I liked it so I decided to recreate it in HTML and CSS.

What is natural?
screenshot of Kurzgesagt – In a Nutshell channel on youtube.

what is natural?

The Header

The colors are picked using the Colorzilla Chrome Extension, animations are eyeballed so not exactly the same. All in all, it’s a nice header, it’s responsive, only the animations need some more work to be the same as in the youtube video but they’re good enough for now.

Here is the code:

HTML

<header class="wrapper">
   <div class="outer">
     <div class="inner">
     </div>
   </div>
   <h1 class="banner">what is natural?</h1>
</header>

CSS

.wrapper {
height: 60vh;
width: 100%;
background:#7A1ED6;
position: relative;
/* Center the outer div */
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}

.outer {
height: 80%;
width: 85%;
background: #8C21E0;
opacity: 0.95;
/* Center the inner div */
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

/* Animation */
transform: skewX(6deg) skewY(4deg);
animation: outerAnimation 3s infinite alternate;
}

@keyframes outerAnimation {

0% {
transform:skewX(6deg) skewY(4deg);
}

100% {
transform: skewX(-2deg) skewY(0deg);
}
}

.inner {
height: 75%;
width: 80%;
background: #992DD8;
opacity: 0.95;

/*Animation */
transform: skewX(-7deg) skewY(3deg);
animation: innerAnimation 5s infinite alternate;
}

@keyframes innerAnimation {

0% {
transform: skewX(-7deg) skewY(3deg);
}

100% {
transform: skewX(-2deg) skewY(-4deg);
}

}

h1 {
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
font-size: 2.4rem;
text-transform: uppercase;
}

h1.banner {
/* Wrapper is parent div */
position: absolute;
top: 50%;
left: 50%;
color: #FEFEFF;
transform: translate(-50%, -50%);
}

h1.banner::before {
content: "";
display: block;
margin: 0 auto;
width: 60%;
padding-top: 0.5rem;
border-top: 8px solid #B143E3;
}

h1.banner:after {
content: "";
display: block;
margin: 0 auto;
width: 60%;
padding-top: 0.5rem;
border-bottom: 8px solid #B143E3;
}

Here is the link to the video.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *