CSS for MKBHD website

NOTE: This was not an actual project given by MKBHD

 

Hi,

In this video, I have tried to create an animated logo for MKBHD. Surely this was done in a hurry, otherwise, I would have given more thought in designing an actual image and then adding such animations to it.

Goal of this video is that you can repeat every line of code after me.

Here is the code for index file

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<linkrel="stylesheet"href="style.css">
<title>MKBHD</title>
</head>
<body>
<ahref="http://mkbhd.com">MKBHD</a>
<p>visit LearnCodeonline.in</p>
</body>
</html>


and here is for style css

@keyframes movethis {
 0 {
 transform: translateX(-50%) translateY(-50%) rotate(0deg);
 }
 100% {
 transform: translateX(-50%) translateY(-50%) rotate(45deg);
 }
}

body {
 background-color: #2e2e2e;
 font-family: Helvetica, sans-serif;
}

a {
 color: #fffbf1;
 font-size: 80px;
 text-decoration: none;
 letter-spacing: -2px;
 position: absolute;
 top: 40%;
 left: 40%;
 text-shadow: 0 20px 25px #2e2e2e;
}
a:after {
 content: "";
 padding: 0.8em 0.4em;
 border: 15px solid #c0392b;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 display: block;
 transform: translateX(-50%) translateY(-50%);
 z-index: -1;
 animation: 5s infinite alternate ease-in-out movethis;
}
p{
 color: #fffbf1
}

 

 

Send a Message