Learn CSS by creating Netflix Logo

Learning CSS by creating projects is the best way of leaning any language. This article will teach you some topics of CSS by creating Netflix logo.

Now create file called index.html and style.css. In the index.html file create the start template :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix Logo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

In style.css file create the starter style:

body{
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: azure;
}

In index.html file add the add a

tag having class name “netflix-log” like below:

Now add the following styles to style.css file:

.netflix-logo {
height: 15rem;
width: 3rem;
border-left: 3rem solid #e50914;
border-right: 3rem solid #e50914;
}

Add the following code to your style.css file:

.netflix-logo:before {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: #e50914;
}

Add this style to the existing .netflix-logo:before:

transform: skewX(21.5deg);

Add this final line to your .netflix-logo:before class in your style.css file:

box-shadow: 0 0 30px black;

If you view your index.html file in a browser. you should see the completed Netflix Logo:

Let’s connect:

You can get the source code from here. And also for detailed article you can visit here

Blog

Learn CSS by creating Netflix Logo

Shani Sharma

Join Our Newsletter. No Spam, Only the good stuff.

Related