Blog website using html and css

63

<!-- html code--> <!DOCTYPE html> <html> <head> <title>Hello, World!</title> <link rel="stylesheet" href="styles.css" /> </head> <body> 
  <div class="container">
    
    <header class="header">
      
      <h1 class="header_title">Mohit Blogs</h1>
      
      <p class="header_desc">
        utilize this space to incorporate a captivating subheading crafted by chatGpt;
        adding depth and intrigue your blog.
      </p>
    </header>


    <main class="main_container">
     
     <div class="card">
        
        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
      
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div>
      
     <div class="card">
    
        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div>
      
     <div class="card">

        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div>
  
     <div class="card">
       
        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div>
  
     <div class="card">
        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
    
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div>
  
     <div class="card">
        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
      
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div>
    
     <div class="card">
        
        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
      
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div> 
     
     <div class="card">
        <a href="#" class="card_image">
          <img 
           src="https://assets.onecompiler.app/4355eh3uc/435rjgeqx/gulab-jamun.jpg"
           class="image"
           />
        </a>
      
       
      <div class="card_content">
      <a href="#">
        <h1 class="card_title">
            New Gadget revealed
        </h1>
        </a>
    
        <p class="card_desc">
          check out the latest tech product hitting the 
          Market, from smartphone to smartwatch
        </p>
    
      </div>
   
      <div class="card_footer">
        
        <div class="card_footer_left">
          
           <div>
             <img
               src="https://api.dicebear.com/7.x/notionists/svg?seed=John?size=64"
               class="avtar_image"
               />
           </div>
           
           <div class="avtar_desc">
             
             <span id="name">john doe</span>
           
             <span>27 Sept 2021</span>
           </div>
       
        </div>
        
        <div class="card_footer_right">
          <span>Technology</span>
        </div>
     
      </div>
     
     </div>
     
   
    </main>
 
 
  </div>
</body> </html> <!--css code--> *{ margin:0px; padding:0px; box-sizing:border-box; } .container{ height:100%; width:800px; padding:1rem 1rem; } .header_title{ text-align:center; font-size:1.3rem; font-weight:800; margin:1rem auto; } .header_desc{ text-align:center; width:90%; font-size:0.8rem; color:grey; margin-bottom:1rem ; } a{ text-decoration:none; } .main_container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,250px)); gap:1rem; justify-content:center; } .card{ display:flex; flex-direction:column; gap:0.7rem; border:0.5px solid black; border-radius:5px; } .card:hover .image{ transform:scale(1.2); } .card_image{ position:relative; height:8rem; overflow:hidden; object-fit:cover; object-position:center; } .image{ height:100%; width:100%; position:absolute; transition:all 1s linear 0.3s; }

.card_content{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:1rem;
margin:0rem 1rem;
}
.card_title{
color:black;
font-size:1rem;
font-weight:800;
}
.card_title:hover{
color:blue;
}
.card_desc{
font-size:0.8rem;
color:grey;
}
.card_footer{
display:flex;
justify-content:space-between;
align-items:center;
gap:1.5rem;
margin:1rem ;
}
.card_footer_left{
display:flex;
gap:0.7rem;
}
.card_footer_right{
font-size:0.8rem;
border:0.5px solid black;
color:grey;
}
.avtar_image{
width:2rem;
height:2rem;
border:0.5px solid black;
border-radius:20px;
background-color:grey;
}
.avtar_desc{
font-size:0.8rem;
color:grey;
display:flex;
flex-direction:column;
}
#name{
color:blue;
}