Free Classic Pricing templates that win a clients

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="display10"> <div class="d10contant"> <h2>SELECT YOUR PRICE/ PRICING</h2> <h5>Lorem Provide Best Service Consectetur Adipiscing Elit</h5> <h4>__________________</h4> </div> <div class="maincard"> <div class="card1"> <div class="c1title1"> <h2>basic</h2> </div> <div class="c1title2"> <h3>$120/3 Month</h3> </div> <div class="c1title3"> <h4>250 Mb Storage</h4> <h4>100 Email Accounts</h4> <h4>5 My Sql Database</h4> <h4>100 Email Forwards</h4> <h4>24/7 support</h4> <button class="btn5">ORDER NOW</button> </div> </div> <div class="card2"> <div class="c2title1"> <h2>Business</h2> </div> <div class="c2title2"> <h3>$200/6 Month</h3> </div> <div class="c2title3"> <h4>250 Mb Storage</h4> <h4>100 Email Accounts</h4> <h4>5 My Sql Database</h4> <h4>100 Email Forwards</h4> <h4>24/7 support</h4> <button class="btn5">ORDER NOW</button> </div> </div> <div class="card3"> <div class="c3title1"> <h2>Premium</h2> </div> <div class="c3title2"> <h3>$350/3 Month</h3> </div> <div class="c3title3"> <h4>250 Mb Storage</h4> <h4>100 Email Accounts</h4> <h4>5 My Sql Database</h4> <h4>100 Email Forwards</h4> <h4>24/7 support</h4> <button class="btn5">ORDER NOW</button> </div> </div> <div class="card4"> <div class="c4title1"> <h2>Ultimate</h2> </div> <div class="c4title2"> <h3>$120/3 Month</h3> </div> <div class="c4title3"> <h4>250 Mb Storage</h4> <h4>100 Email Accounts</h4> <h4>5 My Sql Database</h4> <h4>100 Email Forwards</h4> <h4>24/7 support</h4> <button class="btn5">ORDER NOW</button> </div> </div> </div> </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: #3a3a58; 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; } .display10{ width: 100%; padding-top: 82px; height: auto; } .d10contant{ width: 100%; height: auto; text-align: center; font-family: 'Zen Kaku Gothic Antique', sans-serif; } .d10contant h2{ font-family: 'Poppins', sans-serif; } .d10contant h5{ font-family: 'Zen Kaku Gothic Antique', sans-serif; } .d10contant h4{ color: orangered; } .maincard{ width: 100%; height: auto; display: flex; float: left; margin-top: 40px; padding-bottom: 74px; } .card1{ width: 20%; height: 400px; border: solid rgb(245, 238, 238); margin-left: 85px; font-family: 'Zen Kaku Gothic Antique', sans-serif; opacity: 0.8; background-color: aliceblue; } .c1title1 h2{ padding-top:20px; text-align: center; font-size:35px; } .c1title1{ width: 100%; height: 95px; text-align: center; } .c1title2{ width: 100%; height: 30px; background-color: rgb(9, 9, 46); color: white; text-align: center; padding-top: 5px; } .c1title3{ width: 100%; height: auto; color: black; text-align: center; } .c1title3 h4{ color: black; padding-top: 10px; } .btn5{ float: right; margin-right: 100px; width: 140px; height: 40px; border-radius: 10px; background-color: transparent; color: black; margin-top: 20PX; margin-left: 50px; } .card2{ width: 20%; height: 400px; border: solid rgb(245, 238, 238); margin-left: 20px; font-family: 'Zen Kaku Gothic Antique', sans-serif; opacity: 0.8; background-color: aliceblue; } .c2title1 h2{ padding-top:20px; text-align: center; font-size:35px; } .c2title1{ width: 100%; height: 100px; background-color: red; color: white; text-align: center; } .c2title2{ width: 100%; height: 30px; background-color: rgb(9, 9, 46); color: white; text-align: center; padding-top: 5px; } .c2title3{ width: 100%; height: auto; color: black; } .c2title3 h4{ color: black; text-align: center; padding-top: 10px; } .card3{ width: 20%; height: 400px; border: solid rgb(245, 238, 238); margin-left: 20px; font-family: 'Zen Kaku Gothic Antique', sans-serif; opacity: 0.8; background-color: aliceblue; } .c3title1 h2{ padding-top:20px; text-align: center; font-size:35px; } .c3title1{ width: 100%; height: 100px; text-align:center; } .c3title2{ width: 100%; height: 30px; background-color: rgb(9, 9, 46); color: white; text-align: center; padding-top: 5px; } .c3title3{ width: 100%; height: auto; color: black; text-align:center; } .c3title3 h4{ color: black; padding-top: 10px; text-align:center; } .card4{ width: 20%; height: 400px; border: solid rgb(245, 238, 238); margin-left: 20px; font-family: 'Zen Kaku Gothic Antique', sans-serif; opacity: 0.8; background-color: aliceblue; } .c4title1{ width: 100%; height: 100px; text-align:center; } .c4title1 h2{ padding-top:20px; text-align: center; font-size:35px; } .c4title2{ width: 100%; height: 30px; background-color: rgb(9, 9, 46); color: white; text-align: center; padding-top: 5px; } .c4title3{ width: 100%; height: auto; color: black; text-align:center; } .c4title3 h4{ color: black; padding-top: 10px; text-align:center; } .c1title1:hover{ background-color: red; color: white; } .c3title1:hover{ background-color: red; color: white; } .c4title1:hover{ background-color: red; color: white; } .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%; 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: 100%; height: 250px; } .d11c1title1{ font-family: 'Zen Kaku Gothic Antique', sans-serif; word-spacing: normal; padding-top: 20px; } .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{ width: 100%; height: 250px; } .d11c2title2{ font-family: 'Zen Kaku Gothic Antique', sans-serif; word-spacing: normal; padding-top: 20px; } .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{ width: 100%; height: 250px; } .d11c3title3{ font-family: 'Zen Kaku Gothic Antique', sans-serif; word-spacing: normal; padding-top: 20px; } .d11c3title3 p{ font-weight: 600; padding-top: 10px; } .btn5{ /* float: right; */ /* margin-right:128px; */ width: 130px; height: 40px; border-radius: 10px; background-color: transparent; color: black; font-family: 'Zen Kaku Gothic Antique', sans-serif; font-weight: 800; text-align: center; } .btn5:hover{ background-color: red; color: white; opacity: 0.7 ; }

pricing page templates

Features of The pricing page

HTML

CSS