Zomato Logo And Button Sticky on Top

 <!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>

    <nav class="header">
        <img class="logo" src="logo.png" alt="">
        <button class="btn">Order Now</button>

    </nav>  

    <div class="card">

        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>

        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>

        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>

        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>


        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>

        <div class="box">
            <img class="box-img" src="https://source.unsplash.com/1600x1000/?burger" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, cumque!</p>

        </div>






    </div>




</body>
</html>


//css file

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;





}




.header{
    display: flex;
    justify-content: space-between;
    /* margin: 20px 20px 20px 20px; */
    margin: 0px auto;
    align-items: center;
    background-color: white;
    position: sticky;
    top: 0;
    width: 1680px;




}

.logo{
    width: 150px;







}


.btn{
    background-color: white;
    border: 1px solid rgb(125, 123, 123);
    border-radius: 20px;
    padding: 16px 32px;
    font-size: 17px;


}

.box{
    width: 300px;
    border-radius: 10px;
    border: 1px solid black;
    padding: 5px;
    margin: 10px auto;
    flex-grow: 1;






}

.box-img{
   
    width: 100%;
    border-radius: 10px;







}

.card{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;






}


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