Netflix Background

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="bg">
   
        <img class="bg-img" src="background.jpg" alt="">
        <div class="shade"></div>

        <div class="content">

            <h2 class="title">Unlimited movies, TV shows and more </h2>
            <p class="desc1">Watch anywhere. Cancel anytime.</p>
            <p class="desc2">Ready to watch? Enter your email to create or restart your membership.</p>
            <input type="text" placeholder="Email address">
            <button class="btn">Get Started  > </button>

        </div>
   
   
    </div>



</body>
</html>

//CSS File

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body{

    margin: 0px;
    font-family: "Inter", sans-serif;

}

.bg{
    position: relative;
    height: 100vh;
    width: 100vw;

}

.bg-img{
   
    width: 100%;
    height: 100%;

}

.shade{
    background-color: rgba(0, 0, 0, 0.609);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%) ;
   
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}

.content{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-40%);
   

}

.title{

   
    color: white;
    font-size: 48px;
    font-weight: 1000;
    width: 1000px;


}
.desc1{
    color: white;
    text-align: center;
    font-size: 24px;

}

.desc2{

    color: white;
    color: white;
    text-align: center;
    font-size: 20px;


}

input{
    padding: 18px 34px;
    position: absolute;
    top: 110%;
    left: 35%;
    transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, 0.17);
    border: 1px solid white;
    border-radius: 4px;



}

.btn{

    color: white;
    background-color: hsl(357,92%,47%);
    padding: 12px 28px;
    border: none;
    border-radius: 4px;
    font-size: 24px;
    font-weight: 550;
    position: absolute;
    top: 110%;
    left: 58%;
    transform: translate(-50%,-50%);



}

// Output :-


Comments

Post a Comment

Popular posts from this blog

Rolling Dice

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < audio id = "diceaudio" src = "dice.mp3" ></ audio >         < h1 class = "heading" >Roll The Dice To Get Random Number</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, eligendi.</ p >         < div id = "dice" >6</ div >         < div class = "button" onclick = " roll ()" >Roll The Dice</ div >     </ div >     ...
Read more

DOM || ( Summing Pool Form )

Image
<! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     <!-- <button class="button" id="btn" onclick="create()">Click to create heading</button>     <div id="demo"></div> -->     < div class = "container" >         < div class = "icon" >🏊‍♂️</ div >         < h1 class = "heading" >Under 18 Swimming Champaionship</ h1 >         < p class = "desc" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, praesentium.</ p >         < div class = "flex" >       ...
Read more

Basics Of Java Script Till DOM Beggining

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "style.css" >     < title >Document</ title > </ head > < body >     < div class = "container" >         < h1 id = "title" >Welcome to css</ h1 >         < button id = "btn" class = "btn" onclick = " feedback ()" >Give Feedback</ button >         < input id = "inp1" type = "text" placeholder = "Enter Name" >         < input id = "inp2" type = "text" placeholder = "Enter Number" >     </ div >     < script src = "app.js" >         </ script >     </ body > </ html ...
Read more