Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        header{
            width: 100%;
            height: 40px;
            background-color:yellow;
            color: red;
            font-size: xx-large;
            font-weight: 700;
            text-align: center;
        }
        nav{
            width: 100%;
            height: 30px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: center;
          

        }
        nav ul{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;

        }
        nav ul li{
            text-decoration: none;
            list-style-type:none ;
        }
        style>
h1{
    color: aqua;
    background-color: yellow;
    font-size: 50px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
*{
    margin: 0;
    padding: 0;
}
.nav{
    display: flex;
    width: 100%;
    height: 50px;
    background-color: green;
    justify-content: space-around;
    align-items: center;

}
/* .nav>div:nth-child(1){
    margin-left: 10px;
}
.nav>div:last-child{
    margin-left: 150px;
} */

.nav > div{
    height: 25px;
    width: 75px;
    background-color: aqua;
    text-align: center;
}
.nav .green{
    background-color: green;
}
main{
    border: 2px solid black;
    width: 100%;
    height: 700px;
    display: flex;

}
.items{
    width: 25%;
    height: 700px;
    border: 2px solid black;
}
.promo{
    width: 25%;
    height: 700px;
    border: 2px solid black;
}
.content{
    width: 50%;
    height: 700px;
    border: 2px solid black;
}
.items ul li{
    margin: 27px;
}
h2{
    text-align: center;

}
.container{
    width: 100%;
    height: 550px;
    display: flex;
    flex-wrap: wrap;
    background-color: aqua;
    justify-content: space-around;

}
.box{
    


    width: 150px;
    height: 150px;
    background-color: chartreuse;
    margin: 20px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

    </style>

</head>
<body>
    <header>
        Mycloth
    </header>
    <nav>
        <ul>
            <li>Home</li>
            <li>About us</li>
            <li>Investors</li>
            <li>Relations</li>
            <li>Our Story</li>
            <li>More info</li>
        </ul>



    </nav>
      
<main>

    <div class="items">
    
        <h2 >Offers</h2>
        <ul>
            <li> Get up to 10% discount</li>
            <li> Apply coupon:Fest</li>
            <li>get up to 20% off on ready made cloth </li>
            <li>sale starts on 29dec </li>
            <li>get 5% discount using cards </li>
        </ul>
    
    </div>
    
    
    <div class="content">
        <h2>Our Products</h2>
        <div class="container">
    
             <div class="box">
                <h5>Sports dresses</h5>
                <img src="dress.jfif" alt="" width="100px" height="90px">
                <button>Buy Now</button>
             </div>
             <div class="box">
                <h5>Sports dresses</h5>
                <img src="dress.jfif" alt="" width="100px" height="90px">
                <button>Buy Now</button>
             </div>

             <div class="box">
                <h5>Sports dresses</h5>
                <img src="dress.jfif" alt="" width="100px" height="90px">
                <button>Buy Now</button>
             </div>
        

        </div>
    
    
    </div>
    <div class="promo">
        <h2>Promotions</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur est aliquid velit adipisci ipsam explicabo! Velit eos nostrum sapiente odio vitae nesciunt laborum dolorum incidunt facilis alias sint placeat corrupti ducimus tempora minima, animi totam nihil ea unde dignissimos adipisci commodi molestiae modi rem. Expedita saepe accusantium voluptate labore amet vitae, iusto ullam recusandae soluta nemo delectus eligendi vero ea a praesentium pariatur. Aperiam sed atque mollitia deleniti architecto odit possimus? Odio facilis corporis inventore unde possimus quis id, saepe doloribus dolores veniam illo, ea hic adipisci quibusdam quas eligendi ratione, eaque natus voluptate. Odit laborum nesciunt repudiandae accusamus. Temporibus nisi quas deserunt, optio adipisci facilis voluptatem quam eaque repellat exercitationem reiciendis, doloribus sit dolores blanditiis quae eum dolorem quibusdam vero voluptas molestias accusantium recusandae maxime aspernatur. Ipsa deleniti, quasi laboriosam optio voluptatem nihil accusamus iusto a corporis dignissimos facere vero voluptates rerum tempore porro! Beatae saepe adipisci praesentium commodi, officia dolore repellendus illo sint ab, id esse tempore tempora a facere, veritatis recusandae mollitia aspernatur unde? Maxime similique a voluptates facere, quos, molestias vitae tempore nihil eius saepe eos, assumenda accusamus libero numquam facilis in fuga quam ipsa sapiente esse! Veritatis nisi perferendis, libero sequi doloremque suscipit deleniti dolor.</p>
    
    </div>
    
    
    
    
    
    </main>



</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter