Reciepe website - Posts

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" /> </head> <body>

<div class="webpage">

  <header>
  <div class="navigationbar">
    <nav>
      <ul id="navlist">
        <li>
          <p id="name">mohit da dhaba</p>
        </li>
        <li>
          <div id="navcontent">
            <a href="#">Home</a>
            <a href="#">Contact us</a>
            <a href="#">About us</a>
          </div> 
        </li>
      </ul>
    </nav>
 </div>
</header>

 <main>
   <div class="contentbox">
     <section>
       <div class="items">
       
         <div id="leftbox">
           <h3>gulab jamun</h3>
           <div>
           <h3>ingredients </h3>
           <ul>
             <li>milk </li>
             <li>bread</li>
             <li>sugar</li>
             <li>cherry</li>
           </ul>
           </div>
           <div>
           <h3>reciepe</h3>
           <ol>
             <li>first add milk</li>
             <li>add sugar</li>
             <li>make them round</li>
             <li>just dip in sugar syrup</li>
           </ol>
           </div>
         </div>
         <div id="rightbox">
           <img src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"/>
          
            <div id="overlay">
              <span>click here to buy</span>
            </div>
        </div>
       </div>
      </section>
       
      <section>
        <div class="items">
        <div id="leftbox">

           <h3>Barfi mithai</h3>
           <div>
           <h3>ingredients </h3>
           <ul>
             <li>milk </li>
             <li>bread</li>
             <li>sugar</li>
             <li>cherry</li>
           </ul>
           </div>
           <div>
           <h3>reciepe</h3>
           <ol>
             <li>first add milk</li>
             <li>add sugar</li>
             <li>make them round</li>
             <li>just dip in sugar syrup</li>
           </ol>
           </div>
         </div>
         <div id="rightbox">
           <img src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/singhara-barfi-or-singhada-burfi%C2%A0or-halwa-made-using-water-chestnut-flour-fasting-or-upwas.jpg"/>
          
            <div id="overlay">
             <span>click here to buy</span>
            </div>
       </div>
       </div>
      </section>
   </div>
 </main>

 <footer>
   <div class="footerbox">
     <p>copyright &copy reserved mohit pvt ltd.</p>
   </div>
 </footer>

</div> </body> </html>  *{ margin: 0px; padding: 0px; box-sizing: border-box; } .webpage{ width:100vw; height:100vh; overflow-x:none; background-color:beige; } .navigationbar{ background-color: #00DBDE; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); height:3rem; align-content:center; } #navlist{ display: flex; justify-content:space-around; list-style:none; font-style: italic; font-weight:900; color:white; } #navlist #name{ font-weight:1000; font-size:1rem; } #navcontent{ display: flex; gap:0.9rem;

}
a{
text-decoration:none;
color:white;
}
.contentbox{
height:100%;
width:85%;
background-color:white;
margin: auto;
box-shadow:2px 2px 10px black;
display:flex;
Flex-direction:column;
gap:50px;
padding:20px;
}
#rightbox img{
height:250px;
width:150px;
border-radius:20px;
box-shadow: 5px 5px 10px grey;

}
#rightbox:hover{
transform:scale(1.1);
}
#rightbox{
position: relative;
transition:all 0.7s linear 0s;
}
#rightbox #overlay{
position:absolute;
top: 0;
left: 0;
background-color:grey;
height:100%;
width:100%;
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
opacity:0;

}
#rightbox #overlay:hover{
opacity: 1;
transition:all 0.7s linear 0s;
}
#rightbox #overlay span{
color:white;
font-style:italic;
}
.items{
display:flex;
justify-content:space-around;
gap:20px;
}
#leftbox{
display:flex;
Flex-direction:column;
align-items:center;
gap:8px;
font-style: italic;
}
.footerbox{
background-color: #00DBDE;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
width:100%;
height:3rem;
display: flex;
justify-content:center;
align-items: center;
font-style: italic;
font-weight:900;
}
.footerbox p{
color: white;
}