Ticker

6/recent/ticker-posts

How to make Netflix Logo using HTML and CSS?

becodewala February 06, 2023


 How to make Netflix Logo using HTML and CSS? | This is the right place where you can get many frontend projects. If you want to make frontend projects, follow Becodewala. Here I will teach you how to make Netflix logo using HTML and CSS.

@becodewala

YouTube video link -----👉👉👉Netflix logo


HTML 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css">
    <title>CSS</title>
  </head>
  <body>
  <div class="load">
    <div class="lod1"></div>
    <div class="lod2"></div>
    <div class="lod3"></div>
  </div>
  </body>
</html>

CSS
* {
    box-sizing: border-box;
  }
  body {
    background-color: rgb(18, 13, 56);
  }
  .load {
    display: flex;
    position: absolute;
    bottom: 50%;
    left: 50%;
  }
  .lod1, .lod2, .lod3 {
    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color:rgb(237, 242, 199);
    margin: 0 5px;
    animation-name: load;
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .lod2{
    animation-delay: 0.2s;
  }
  .lod3{
    animation-delay: 0.4s;
  }
 
  @keyframes load {
    to {
      opacity: 0.2;
      transform: translateY(-20px);
    }
  }


Netflix logo using html and CSS



becodewala

Posted by becodewala

Post a Comment

0 Comments