Here is how you can make a Netflix logo using css and html in just a few minutes. The css Netflix logo shown in this post is taken from here.
First you have to create two new files called index.html and index.css, you can create the index files using any code editor of your choice that you want. For this example I just used the notepad.
Contents
Create the Basic html Document format
After creating the index.html file you have to first enter the basic html format, which you can copy from below –
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Netflix Logo</title> </head> </body> </html>
Enter the Basic CSS Stylings
Once you are done with the html, you can now enter the basic css styling in index.css.
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #000000;
}
Create Html Containers
After creating both the basic html and css styling and format you have to now create four divs which will be later styled and make them look like the Netflix logo.
<div class="wrapper"> <div class="container"> <div class="logo"></div> <div class="boxes"></div> </div>
Style the Netflix Logo
First we will be styling the wrapper and the container.
.wrapper {
width: 320px;
height: 400px;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.container {
height: 320px;
width: 320px;
position: relative;
}
After this the main logo div.
.logo {
position: absolute;
background-color: #b20510;
height: 230px;
width: 55px;
left: 65px;
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;
left: 62px;
bottom: -31px;
-webkit-transform: rotate(-28deg);
-ms-transform: rotate(-28deg);
transform: rotate(-28deg);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
Once that’s done we will finish the styling with box div.
.boxes {
background-color: black;
height: 60px;
width: 100%;
position: absolute;
}
.boxes:before {
position: absolute;
content: "";
background-color: black;
height: 40px;
width: 220px;
border-radius: 50%;
bottom: -260px;
margin: auto;
left: 0;
right: 0;
}
And that’s it, now save your logo , link your index.html with index.css and run it in any web browser.
The output will look like the image shown below.
