CSS for MKBHD website


NOTE: This was not an actual project given by MKBHD



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>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<p>visit LearnCodeonline.in</p>

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;
 color: #fffbf1



About the author

By hiteshchoudharylco

Most common tags

%d bloggers like this: