Hey everyone. Welcome to today’s tutorial. Today’s tutorial is going to be a fun one. In today’s tutorial, we will create the Netflix logo design. To create this design, we use HTML and Pure CSS.
Though this tutorial has no practical application practising CSS art is a great way to learn new CSS properties. In this tutorial, you will learn how to use ‘before’ and ‘after’ pseudo-elements. Let us get started with the tutorial.
Video Tutorial:
If you prefer to learn by coding along to a video tutorial rather than reading this blog post, you can check out the video here down below. Also subscribe to my youtube channel, where I post new tutorials related to web development regularly.
Project Folder Structure:
Before we start the actual coding, let us take a look at the project folder structure. We create a project folder called – ‘Netflix Logo’. Inside this folder, we have three files – index.html, style.css and script.js. These files are the HTML document, the stylesheet and the script file respectively.
HTML:
We begin with the HTML code. First, copy the code below and paste it into an HTML document. The HTML code consists of a div with the class name – ‘container’. Inside this div, we have two divs with class names – ‘logo’ and ‘boxes’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Netflix Logo</title>
<!-- Stylesheet -->
<link rel="Stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="logo"></div>
<div class="boxes"></div>
</div>
</body>
</html>
CSS:
We now use CSS to style, shape and position these elements to make them look like the Netflix logo. For this copy, the code provided to you below and paste it into your stylesheet.
We use the ‘before’ and ‘after’ pseudo-elements of ‘logo’ and ‘boxes’ to create additional shapes without creating any other HTML elements.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #000000;
}
.container {
height: 350px;
width: 350px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.logo {
position: absolute;
background-color: #b20510;
height: 230px;
width: 55px;
left: 80px;
top: 60px;
}
.logo:before {
content: "";
position: absolute;
background-color: #b20510;
height: 230px;
width: 55px;
left: 130px;
}
.logo:after {
content: "";
position: absolute;
background-color: #e30913;
height: 300px;
width: 55px;
transform: rotate(-28deg);
left: 62px;
bottom: -31px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.boxes {
background-color: #000000;
height: 60px;
width: 100%;
position: absolute;
}
.boxes:before {
position: absolute;
content: "";
background-color: #000000;
height: 40px;
width: 220px;
bottom: -260px;
margin: auto;
left: 0;
right: 0;
border-radius: 50%;
}
Our Netflix logo design is now ready. That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the download button below. Also, you can drop your queries, suggestions and feedback in the comments below.
Happy Coding!
