Hey, hope you are doing well!
We can only learn CSS by practicing. CSS is something that you should regularly practice as a Web Developer. So, to learn CSS in advanced way, we will make different company logos. So, let’s get started with our first one.
Netflix Logo
Netflix Logo using pure CSS
Step 1: HTML
<div class="netflix"></div>
In HTML, we only have a div with class “netflix”. Now, let us style it with CSS.
Step 2: CSS
The basic page styling:
body {
display: grid;
place-items: center;
background: black;
min-height: 100vh;
}
Styling the main logo:
.netflix {
height: 15rem;
width: 3rem;
border-left: 3rem solid #e50914;
border-right: 3rem solid #e50914;
position: relative;
}
.netflix:before {
display: block;
content: "";
width: 100%;
height: 100%;
background: #e50914;
transform: skewX(21.5deg);
box-shadow: 0 0 30px black;
}
.netflix:after {
content: "";
width: 15rem;
height: 2rem;
background: black;
border-radius: 50%;
display: block;
position: absolute;
left: -200%;
top: 98%;
}
You can refer to the below Codepen for preview:
So, this is it. Thanks for Reading 😊
Don’t forget to like and follow for more…
Instagram: coding_dev_
Support: coding_dev_
Top comments (0)