Netflix 'n' With Html And Css

In this article, i will be talking about how to create the Netflix "N" logo above. Netflix is a streaming service that allows you stream or watch movies, tv-shows, animations, documentaries and a lot more on your device, as long as it is connected to the internet. Visit Website.

The following steps will help guide you;

Step one

Create a directory or folder on your desktop and call it whatever you like. For this tutorial we'll call the folder /netflix .
Open the folder with your editor for writing code , in this tutorial we will be using visual studio code.
In your editor,open the folder and create an index.html file and a style.css file.

Step two

-In your index.html , file on in your vscode editor or any editor, create a div with class of container inside the body tag.

Inside the container div , create another div with the class of netflix.

Step three

Write the following code in your css file.

    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}
.netflix{
    width: 4rem;
    height: 20rem;
    background: #b1060f;
    position: relative;
}
.netflix::after{
    content:'';
    background: #e50913;
    width: 4rem;
    height: 20rem;
    position: absolute;
    left: 3.8rem;
    transform: skew(20deg);
    box-shadow: 0 0 5vh 0.5vh black;
}
.netflix::before{
    content:'';
    background: #b1060f;
    width: 4rem;
    height: 20rem;
    position: absolute;
    left: 120px;
}

The css ::before and ::after selectors are used to add extra contents before and after the contents of the selected element.

Html

<body>
    <div class="container">
      <div class="netflix"></div>
    </div>
</body>

Make sure your css file is linked to your html file using the link tag. How to link css to html. After checking that your css file is linked, open the file with whichever browser you are using. You can download the vscode live server extension, it acts as a server for your work.

Images of my code in the editor