Our Service Template With HTML & CSS Code

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> <div class="display4"> <div class="d4contant"> <h2>OUR SERVICE</h2> <h5>Four Best Feature For Your Kids</h5> <h4>__________________</h4> </div> </div> <div class="d4maincontaint"> <div class="d4containt1"> <div class="d4logo"> <i class="bx bxs-left-down-arrow-circle logo1"></i> </div> <div class="d4c1"> <h4>GRAPHIC DESIGN</h4> <p>scalable vector icons that can instantly be customized — size, color.</p> </div> </div> <div class="d4containt2"> <div class="d4logo2"> <i class="bx bxs-pencil logo2"></i> </div> <div class="d4c2"> <h4>CSS</h4> <p>scalable vector icons that can instantly be customized — size, color</p> </div> </div> <div class="d4containt3"> <div class="d4logo3"> <i class="bx bx-desktop logo3"></i> </div> <div class="d4maincontaint1"> <div class="d4containt1"> <div class="d4logo"> <i class="bx bxs-microphone logo1"></i> </div> <div class="d4c1"> <h4>WEB</h4> <p>scalable vector icons that can instantly be customized — size, color.</p> </div> </div> <div class="d4containt2"> <div class="d4logo2"> <i class="bx bx-accessibility logo2"></i> </div> <div class="d4c2"> <h4>Accessibility</h4> <p>scalable vector icons that can instantly be customized — size, color</p> </div> </div> <div class="d4containt3"> <div class="d4logo3"> <i class="bx bx-show logo3"></i> </div> <div class="d4c3"> <h4>Perfect</h4> <p>scalable vector icons that can instantly be customized — size, color</p> </div> </div> </div> <h4>Desktop</h4> <p>scalable vector icons that can instantly be customized — size, color</p> </div> </div> </div> <div class="d4maincontaint1"> <div class="d4containt1"> <div class="d4logo"> <i class="bx bxs-microphone logo1"></i> </div> <div class="d4c1"> <h4>WEB</h4> <p>scalable vector icons that can instantly be customized — size, color.</p> </div> </div> <div class="d4containt2"> <div class="d4logo2"> <i class="bx bx-accessibility logo2"></i> </div> <div class="d4c2"> <h4>Accessibility</h4> <p>scalable vector icons that can instantly be customized — size, color</p> </div> </div> <div class="d4containt3"> <div class="d4logo3"> <i class="bx bx-show logo3"></i> </div> <div class="d4c3"> <h4>Perfect</h4> <p>scalable vector icons that can instantly be customized — size, color</p> </div> </div> </div> </p> </p>

CSS

*{ margin: 0%; padding: 0%; } .navbar{ width: 100%; height: 60px; background-color:whitesmoke; 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; } .display4{ width: 100%; height: auto; } .display4 h2{ text-align: center; color: black; font-family:'Poppins', sans-serif ; padding-top: 30px; } .display4 h5{ text-align: center; color: black; padding-top: 5px; font-size: large; font-family: 'Zen Kaku Gothic Antique', sans-serif; } .display4 h4{ color: orangered; text-align: center; } .d4maincontaint{ width: 100%; display: flex; margin-top: 30px; } .d4containt1{ width:30%; height: auto; display: flex; } .d4logo{ width: 30%; float: left; margin-top: 20px; padding-left: 70px; } .logo1{ font-size: 50px; text-align:center; color: red; border: solid red; border-spacing: 0px; opacity: 0.7; padding-bottom: 10px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } .d4c1{ width: 70%; float: left; text-align: left; } .d4c1 h4{ text-align: left; font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; padding-top: 10px; } .d4c1 p{ font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; font-weight: 400; } /* ======================= */ .d4containt2{ width:30%; height: auto; display: flex; } .d4logo2{ width: 30%; float: left; margin-top: 20px; padding-left: 70px; } .logo2{ font-size: 50px; text-align:center; color: red; border: solid red; border-spacing: 0px; opacity: 0.7; padding-bottom: 10px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } .d4c2{ width: 70%; float: left; text-align: left; } .d4c2 h4{ text-align: left; font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; padding-top: 10px; } .d4c2 p{ font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; font-weight: 400; } /* =============================== */ .d4containt3{ width:30%; height: auto; display: flex; } .d4logo3{ width: 30%; float: left; margin-top: 20px; padding-left: 70px; } .logo3{ font-size: 50px; text-align:center; color: red; border: solid red; border-spacing: 0px; opacity: 0.7; padding-bottom: 10px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } .d4c3{ width: 70%; float: left; text-align: left; } .d4c3 h4{ text-align: left; font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; padding-top: 10px; } .d4c3 p{ font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; font-weight: 400; } /* ======================================= */ .d4maincontaint1{ width: 100%; display: flex; margin-top: 30px; } .d4containt1{ width:30%; height: auto; display: flex; } .d4logo{ width: 30%; float: left; margin-top: 20px; padding-left: 70px; } .logo1{ font-size: 50px; text-align:center; color: red; border: solid red; border-spacing: 0px; opacity: 0.7; padding-bottom: 10px; padding-top: 10px; padding-right: 10px; padding-left: 10px; } .d4c1{ width: 70%; float: left; text-align: left; } .d4c1 h4{ text-align: left; font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; padding-top: 10px; } .d4c1 p{ font-family: 'Zen Kaku Gothic Antique', sans-serif; padding-right: 10px; color: black; font-weight: 400; }

OUR SERVICES Template

Features of The Our Service Template

HTML

CSS