Best Blog Template for Website in 2022 ( Must Try)

HTML

<div class="navbar"> <div class="navimg"></div> <div class="navmenu"> <ul class="ulmenu"> <li class="limenu">HOME</li> <li class="limenu">ABOUT US</li> <li class="limenu">PORTFOLIO</li> <li class="limenu">TEAM</li> <li class="limenu">SERVICE</li> <li class="limenu">BLOG</li> <li class="limenu">CONTANT US</li> </ul> </div> <div class="display11"> <div class="d11contant"> <h2>OUR BLOG</h2> <h5>Latest News & Event Of Our Schools</h5> <h4>__________________</h4> </div> <div class="d11maincard"> <div class="d11card1"> <div class="d11c1img"> <img src=" https://template.hasthemes.com/vocation/vocation/img/blog/1.jpg "> </div> <div class="d11c1title1"> <h3>From Now we are certified web</h3> <span> <i class="bx bxs-calendar"></i> December 20, 2016 </span> <p>The students learn different skills like rhythm, flexibility, and coordination. Lorem ipsum dolor sit amet. The perfect class for … </p> <button class="btn5">read more</button> </div> </div> <div class="d11card2"> <div class="d11c2img"> <img src=" https://template.hasthemes.com/vocation/vocation/img/blog/2.jpg "> </div> <div class="d11c2title2"> <h3>Answers to your Questions about</h3> <span> <i class="bx bxs-calendar"></i> December 20, 2016 </span> <p>The students learn different skills like rhythm, flexibility, and coordination. Lorem ipsum dolor sit amet. The perfect class for … </p> <button class="btn5">read more</button> </div> </div> <div class="d11card3"> <div class="d11c3img"> <img src=" https://template.hasthemes.com/vocation/vocation/img/blog/3.jpg "> </div> <div class="d11c3title3"> <h3>Share the Love for WordPress</h3> <span> <i class="bx bxs-calendar"></i> December 20, 2016 </span> <p>The students learn different skills like rhythm, flexibility, and coordination. Lorem ipsum dolor sit amet. The perfect class for … </p> <button class="btn5">read more</button> </div> </div> </div> </div> </p> </p>

CSS

*{ margin: 0%; padding: 0%; } .navbar { width: 100%; height: 60px; background-color: #ee5663; display: flex; position: fixed; } .navimg{ width: 40%; } .navimg img{ width: 150px; height: 50px; padding-left: 60px; padding-top: 5px; } .navmenu{ width: 60%; } .ulmenu{ list-style: none; display: flex; padding-top: 20px; font-family: 'Poppins', sans-serif; font-weight: 600; } .limenu{ padding-left: 40px; color: #fff; } .display11{ width: 100%; height: auto; } .d11contant{ width: 100%; height: auto; text-align: center; font-family: 'Zen Kaku Gothic Antique', sans-serif; } .d11contant h2{ font-family: 'Poppins', sans-serif; } .d11contant h5{ font-family: 'Zen Kaku Gothic Antique', sans-serif; } .d11contant h4{ color: orangered; } .d11maincard{ width: 100%; padding-bottom: 54px; height: auto; display: flex; float: left; margin-top: 40px; margin-left: 70px; } .d11card1{ width: 28%; height: 500px; border: solid rgb(245, 238, 238); background-color: aliceblue; } .d11c1img{ width: 96%; height: 250px; margin-top: 13px; margin-left: 21px; } .d11c1title1{ font-family: 'Zen Kaku Gothic Antique', sans-serif; word-spacing: normal; /* padding-top: 20px; */ padding: 31px; } .d11c1title1 p{ font-weight: 600; padding-top: 10px; } span{ font-weight: 600; padding-top: 20px; } .d11card2{ width: 28%; height: 500px; border: solid rgb(245, 238, 238); margin-left: 20px; background-color: aliceblue; } .d11c2img{ padding-top: 13px; width: 100%; height: 250px; padding-left: 26px; } .d11c2title2{ font-family: 'Zen Kaku Gothic Antique', sans-serif; word-spacing: normal; /* padding-top: 20px; */ padding: 26px; } .d11c2title2 p{ font-weight: 600; padding-top: 10px; } .d11card3{ width: 28%; height: 500px; border: solid rgb(245, 238, 238); margin-left: 20px; background-color: aliceblue; } .d11c3img{ padding-top: 17px; width: 100%; height: 250px; padding-left: 27px; } .d11c3title3{ font-family: 'Zen Kaku Gothic Antique', sans-serif; word-spacing: normal; /* padding-top: 20px; */ padding: 25px; } .d11c3title3 p{ font-weight: 600; padding-top: 10px; } .btn5{ /* float: right; */ margin-right: 134px; width: 130px; height: 40px; border-radius: 10px; background-color: transparent; color: aliceblue; font-family: 'Zen Kaku Gothic Antique', sans-serif; font-weight: 800; background: black; column-count: center; font-size: 17px; } .btn5:hover{ background-color: red; color: white; opacity: 0.7 ; }

Blog Page Template

Features of The Template

HTML

CSS