welcome to tutorialfamily

blog section free source code

Html blog section

html blog is use for display blog post of website.

html blog


         		
  <!-- ======================== Start Blog ============================ -->
        <section class="section bg blog" id="blog">
            <div class="container">   
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="text-center common-title">
                            <h2>Our <span class="comman-color">Blog</span></h2>
                            <p class="text-muted mx-auto common-desc mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum lacus risus, sit amet vulputate nisl egestas ac.</p>
                        </div>
                    </div>
                </div>                 
                <div class="row mt-5">
                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                        <div class="bg-white mt-3 b-element rounded">
                            <div class="blog-img common-img">
                                <img src="https://tutorialfamily.com/wp-content/uploads/2019/12/seo-feature.jpg" alt="free blog section source code" class="img-fluid rounded">
								<div class="blog-date rounded">
									<h3 class="font-weight-bold mb-0">09</h3>
									<p class="mb-0">Dec</p>
								</div>
								<a href="#" class="comman-back-color common-transition" title="View Now"><i class="fa fa-search common-transition" aria-hidden="true"></i></a>							   
                            </div>
                            <div class="blog-data p-3">
                                <div class="blog-title">
                                    <h5 class="mb-3"><a href="#" class="text-dark common-transition">Digital Marketing</a></h5>
                                </div>
                                <div class="blog-description">
                                    <p class="text-muted blog-comment mb-0">Leave a comment / <a href="#" class="text-custom comman-color">by Admin</a></p>
                                    <p class="mt-3 blog-desc text-muted">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                                    <p class="read mb-0"><a href="#" class="text-muted common-hover common-transition">Read More...</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                        <div class="bg-white mt-3 rounded">
                            <div class="blog-img common-img">
                                <img src="https://tutorialfamily.com/wp-content/uploads/2019/12/seo-feature.jpg" alt="blog section code" class="img-fluid rounded">
							    <div class="blog-date rounded">
									<h3 class="font-weight-bold mb-0">09</h3>
									<p class="mb-0">Dec</p>
								</div>
								<a href="#" class="comman-back-color common-transition" title="View Now"><i class="fa fa-search common-transition" aria-hidden="true"></i></a>							   
                            </div>
                            <div class="blog-data p-3">
                                <div class="blog-title">
                                    <h5 class="mb-3"><a href="#" class="text-dark common-transition">Mobile app design</a></h5>
                                </div>
                                <div class="blog-description">
                                    <p class="text-muted blog-comment mb-0">Leave a comment / <a href="#" class="text-custom comman-color">by Admin</a></p>
                                    <p class="mt-3 blog-desc text-muted">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                                    <p class="read mb-0"><a href="#" class="text-muted common-hover common-transition">Read More...</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
					<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                        <div class="bg-white mt-3 rounded">
                            <div class="blog-img common-img">
                                <img src="https://tutorialfamily.com/wp-content/uploads/2019/12/seo-feature.jpg" alt="blog code" class="img-fluid rounded">
								<div class="blog-date rounded">
									<h3 class="font-weight-bold mb-0">09</h3>
									<p class="mb-0">Dec</p>
								</div>
								<a href="#" class="comman-back-color common-transition" title="View Now"><i class="fa fa-search common-transition" aria-hidden="true"></i></a>							   
                            </div>
                            <div class="blog-data p-3">
                                <div class="blog-title">
                                    <h5 class="mb-3"><a href="#" class="text-dark common-transition">Graphics design</a></h5>
                                </div>
                                <div class="blog-description">
                                    <p class="text-muted blog-comment mb-0">Leave a comment / <a href="#" class="text-custom comman-color">by Admin</a></p>
                                    <p class="mt-3 blog-desc text-muted">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident</p>
                                    <p class="read mb-0"><a href="#" class="text-muted common-hover common-transition">Read More...</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </div>
            </div>
        </section>
        <!-- ======================== End Blog ============================ -->							


css


         
/* blog */
body a {
    text-decoration: none;
    transition: all 0.5s ease 0s;
}
a:hover {
    text-decoration: none;
}
/*==========================  START BLOG ============================*/

.blog .blog-data p.blog-comment {
    font-size: 15px;
}
.blog .blog-data p.blog-desc {
    font-size: 14px;
}
.blog .blog-data p.read {
    font-size: 15px;
}
.blog .blog-comment a {
    font-style: italic;
    font-size: 13px;
	font-weight: 500;
}
.blog .blog-img{
	position: relative;
}
.blog .blog-comment a:hover {
    color: #343a40;
}
.blog .blog-title h5{
	font-size: 18px;
}
.blog .blog-img::before {
    content: '';
    position: absolute;
    background-color: rgba(10, 17, 40, 0.8);
    top: 0;
    left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.blog .blog-img:hover a{
	opacity: 1;
}
.blog .blog-img a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 20px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    color: #fff;
    padding: 10px 16px;
	opacity: 0;
}
.blog .blog-img a:hover{
	background-color: #fff;
}
.blog .blog-img a:hover i{
	color: #000;
}
.blog .blog-img img {
    width: 100%;
}
.blog .blog-date {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: #fff;
    padding: 6px;
}

/*==========================  END BLOG ============================*/										


output

Our Content