Skip to main content

Netflix Logo with CSS

 Netflix Logo With CSS



Hello Folks! today I'am going to share with you a "Netflix" logo design with CSS
code is easy and simple even 10y/o child could try.


 





Let's see our Source Code:


If you know Html and CSS very well then this post is just a piece of cake with you
not and hard and fast coding is applied just span tag i choose and design it accordingly.

Index.html

 <div class="container">
    <span></span>
    <span></span>
    <span></span>
  </div> 

Style.CSS


 body{
background:#26242e;
}
.container{
  position:absolute;
  top:30%;
  left:50%;
  display:flex;
  width:120px;
  height:200px;
  overflow:hidden;
}
span{
  position:absolute;
  width:40px;
  height:200px;
  background:#d81f26
}
span:nth-child(1){
  right:0;
}
span:nth-child(2){
  left:40px;
  z-index:1;
  transform:skew(22deg);
  box-shadow:0 0 15px #000;
} 

Explanation of Code:

.Container:

In ".container" we just center our <div> and adjust its position,height and width.

Span:

In "span" we adjust height & width of letter 'N' to look like Netflix logo and in the end we just add box-shadow to enhance clarity.

Output




I hope you guys like it, if this post was helpful to you so let us know in the comment section.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Login & Signup forms using Html & CSS

  Login /Signup Form  Using Html & CSS Hello hope you all are fine :-), today I'm going to make Login and signup form by using html & css it is very easy to create just like a piece of cake! Login Form Index.Html <!DOCTYPE   html > <html   lang = "en" >      <head>      <meta   charset = "UTF-8" >      <meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      <title> Join-Us </title>          <link   rel = "stylesheet"   href = "join-us.css" >     </head> <body>    <div   class = "form" >      <h1> Login  <span><hr   style = "  border: 0;       height: 1px;          ...
Post a Comment
Read more

Best Ui Dark Calculator using Html,Css and Javascript

   How to Create a  Calculator  Introduction Calculator is one of the basic projects of JavaScript or any other languages a newbie programmer should probably know how to create it.The best thing of this is that the coding is short and easy to understand . It is a basic project that perform arithmetical operations. All you have to do is to create a button for each number, arithmetic operations. symbols and then add a text-box or input-field. Here is the Output of Dark Calculator : Output: Source Code : Index.html: Here is the html coding :) <!DOCTYPE html> <html  lang =" en "> <head> <meta  charset =" UTF-8 "> <meta  name =" viewport "  content =" width=device-width, initial-scale=1.0 "> <title> Dark Calculator </title> <link  rel =" stylesheet "  href =" styel.css "> </head> <body> <div  class =" main "> <div> <input  id =" result ...
Post a Comment
Read more