DEV Community

Cover image for Learn CSS by creating Netflix Logo
Shani Sharma
Shani Sharma

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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:

Image description

Let’s connect:

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

Top comments (0)