How To Create A Blog Section Using HTML and CSS

byPosted at
How To Create A Blog Section Using HTML and CSS
Blog Section HTML and CSS

Learn how to make a Blog Section for your website using HTML And CSS. Easy way to create Blog Section only using HTML and CSS. I also provide you HTML and CSS Code which helps you to understand this Tutorial.

How to make a Blog Section using HTML and CSS

  1. 00:00 - 01:00 min : Intro
  2. 01:00 - 11.00 min: Create Blog Section for your website Using HTML and CSS


Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices. 


<html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<title>Side Login and Registration Form Bar</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

➤Blog Section HTML Code have given below.


  
  <!--doctype html-->
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>Blog Section</title>

<!--Stylesheet----------------------------------->
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<!--fav-icon------------------------------------->
<link rel="shortcut icon" href="images/fav-icon.svg"/>

<!--poppins-font-family-------------------------->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

</head>

<body>


    <!--blog-section============================================================================-->
    <section id="blog">

        <!--blog-heading--------------->
        <div class="blog-heading">
          <span>My Recent Posts</span>
          <h3>My Blog</h3>
        </div>
  
  
        <!--container---------------->
        <div class="blog-container">
  
          <!--box-1------------->
          <div class="blog-box">
  
            <!--img---->
            <div class="blog-img">
              <img alt="blog" src="images/blog-1.jpeg">
            </div>
            <!--text--->
            <div class="blog-text">
              <span>18 July 2021 / Web Design</span>
              <a href="#" class="blog-title">What Has Happened to All of the Web Design Ideas?</a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate facilis modi veritatis adipisci omnis perferendis deleniti tempore quasi? Explicabo recusandae soluta vel cum perspiciatis consequuntur dolorum distinctio minima voluptate quae?</p>
              <a href="#">Read More</a>
            </div>
  
          </div>
  
  
  
  
          <!--box-2------------->
          <div class="blog-box">
  
            <!--img---->
            <div class="blog-img">
              <img alt="blog" src="images/blog-2.jpeg">
            </div>
            <!--text--->
            <div class="blog-text">
              <span>18 July 2021 / Web Design</span>
              <a href="#" class="blog-title">What Has Happened to All of the Web Design Ideas?</a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate facilis modi veritatis adipisci omnis perferendis deleniti tempore quasi? Explicabo recusandae soluta vel cum perspiciatis consequuntur dolorum distinctio minima voluptate quae?</p>
              <a href="#">Read More</a>
            </div>
  
          </div>
  
  
  
  
          <!--box-3------------->
          <div class="blog-box">
  
            <!--img---->
            <div class="blog-img">
              <img alt="blog" src="images/blog-3.jpeg">
            </div>
            <!--text--->
            <div class="blog-text">
              <span>18 July 2021 / Web Design</span>
              <a href="#" class="blog-title">What Has Happened to All of the Web Design Ideas?</a>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate facilis modi veritatis adipisci omnis perferendis deleniti tempore quasi? Explicabo recusandae soluta vel cum perspiciatis consequuntur dolorum distinctio minima voluptate quae?</p>
              <a href="#">Read More</a>
            </div>
  
          </div>
  
        </div>
  
      </section>

      
</body>

</html>

➤Blog Section CSS Code is have given below.

	*{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

body{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    background-color: rgba(255, 255, 255, 0.15);
}

/*--blog--------------------------*/
#blog{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.blog-heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.blog-heading span{
    color: #f33c3c;
}
.blog-heading h3{
    font-size: 2.4rem;
    color: #2b2b2b;
    font-weight: 600;
}
.blog-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0px;
    flex-wrap: wrap;
}

.blog-box{
    width:350px;
    background-color: #ffffff;
    border: 1px solid #ececec;
    margin: 20px 20px;

}
.blog-img{
    width:100%;
    height: auto;
}
.blog-img img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.blog-text{
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.blog-text span{
    color: #f33c3c;
    font-size: 0.9rem;
}
.blog-text .blog-title{
    font-size: 1.3rem;
    font-weight: 500;
    color: #272727;
}
.blog-text p{
    color: #9b9b9b;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 20px 0px;
}
.blog-text a{
    color: #0f0f0f;
}
.blog-text a:hover{
    color: #c74242;
    transition: all ease 0.3s;
}


@media(max-width:1250px){

    .blog-box{
        width: 300px;
    }
} 
@media(max-width:1100px){
    .blog-box{
        width:70%;
    }
}

@media(max-width:550px){
   
    .blog-box{
        margin: 20px 10px;
        width: 100%;
    }
    #blog{
        padding:20px;
    }
}





How To Dowload Files
Share
1 comment Labels,

Comments

  1. lalitejaasenNovember 7, 2022 at 10:03 AM

    In slots, like in video poker, the upper the wager — the more you can to|you possibly can} win. And, at the identical time, the smaller the wager...the smaller the wins. The technique for how to to|tips on how to} improve your possibilities to win a spin on penny slots lies behind making bets would possibly be} bigger than $0.01 end result of|as a result of} these bets normally don't unlock bonus rounds. This excessive volatility slot machine doesn't have many bonus 바카라 게임 games or features . The solely 'special feature' you get, is a round of eight free spins that prompts when a trident image lands next to Poseidon. The RTP is not the amount of money you will get again whenever you wager on real money slots and it doesn't point out whether or not you could have} fewer possibilities to hit a bonus round or not.

    ReplyDelete

Archive

Contact Form

Send