Membuat Pricing Table Atau Menu Harga Dengan CSS - hay kali ini juragan coding akan berbagi tutorial mengenai CSS, dan kali ini juragan coding akan berbagi tutorial mengenai membuat menu harga tampilan seperti yang terlihat di menu hosting ya sobat
TUTORIAL
<body>
<div class="wrapper">
<!-- PRICING-TABLE CONTAINER -->
<div class="pricing-table group">
<h1 class="heading">
Pricing overview
</h1>
<!-- PERSONAL -->
<div class="block personal fl">
<h2 class="title">personal</h2>
<!-- CONTENT -->
<div class="content">
<p class="price">
<sup>$</sup>
<span>29</span>
<sub>/mo.</sub>
</p>
<p class="hint">Perfect for freelancers</p>
</div>
<!-- /CONTENT -->
<!-- FEATURES -->
<ul class="features">
<li><span class="fontawesome-cog"></span>1 WordPress Install</li>
<li><span class="fontawesome-star"></span>25,000 visits/mo.</li>
<li><span class="fontawesome-dashboard"></span>Unlimited Data Transfer</li>
<li><span class="fontawesome-cloud"></span>10GB Local Storage</li>
</ul>
<!-- /FEATURES -->
<!-- PT-FOOTER -->
<div class="pt-footer">
<p>Host My Website</p>
</div>
<!-- /PT-FOOTER -->
</div>
<!-- /PERSONAL -->
<!-- PROFESSIONAL -->
<div class="block professional fl">
<h2 class="title">Professional</h2>
<!-- CONTENT -->
<div class="content">
<p class="price">
<sup>$</sup>
<span>99</span>
<sub>/mo.</sub>
</p>
<p class="hint">Suitable for startups</p>
</div>
<!-- /CONTENT -->
<!-- FEATURES -->
<ul class="features">
<li><span class="fontawesome-cog"></span>10 WordPress Install</li>
<li><span class="fontawesome-star"></span>100,000 visits/mo.</li>
<li><span class="fontawesome-dashboard"></span>Unlimited Data Transfer</li>
<li><span class="fontawesome-cloud"></span>20GB Local Storage</li>
</ul>
<!-- /FEATURES -->
<!-- PT-FOOTER -->
<div class="pt-footer">
<p>Host My Website</p>
</div>
<!-- /PT-FOOTER -->
</div>
<!-- /PROFESSIONAL -->
<!-- BUSINESS -->
<div class="block business fl">
<h2 class="title">Business</h2>
<!-- CONTENT -->
<div class="content">
<p class="price">
<sup>$</sup>
<span>249</span>
<sub>/mo.</sub>
</p>
<p class="hint">For established business</p>
</div>
<!-- /CONTENT -->
<!-- FEATURES -->
<ul class="features">
<li><span class="fontawesome-cog"></span>25 WordPress Install</li>
<li><span class="fontawesome-star"></span>400,000 visits/mo.</li>
<li><span class="fontawesome-dashboard"></span>Unlimited Data Transfer</li>
<li><span class="fontawesome-cloud"></span>30GB Local Storage</li>
</ul>
<!-- /FEATURES -->
<!-- PT-FOOTER -->
<div class="pt-footer">
<p>Host My Website</p>
</div>
<!-- /PT-FOOTER -->
</div>
<!-- /BUSINESS -->
</div>
<!-- /PRICING-TABLE -->
</div>
</body>Setelah itu copykan file css di bawah ini di bagian projects html kamu
/*
Inspired by the dribble shot http://dribbble.com/shots/1285240-Freebie-Flat-Pricing-Table?list=tags&tag=pricing_table
*/
/*--------- Font ------------*/
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*------ utiltity classes -----*/
.fl{ float:left; }
.fr{ float: right; }
/*its also known as clearfix*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /*For IE 6/7 (trigger hasLayout) */
}
body {
background: #F2F2F2;
font-family: 'Droid Sans', sans-serif;
line-height: 1;
font-size: 16px;
}
.wrapper {
}
.pricing-table {
width: 80%;
margin: 50px auto;
text-align: center;
padding: 10px;
padding-right: 0;
}
.pricing-table .heading{
color: #9C9E9F;
text-transform: uppercase;
font-size: 1.3rem;
margin-bottom: 4rem;
}
.block{
width: 30%;
margin: 0 15px;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* border: 1px solid red;*/
}
/*Shared properties*/
.title,.pt-footer{
color: #FEFEFE;
text-transform: capitalize;
line-height: 2.5;
position: relative;
}
.content{
position: relative;
color: #FEFEFE;
padding: 20px 0 10px 0;
}
/*arrow creation*/
.content:after, .content:before,.pt-footer:before,.pt-footer:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.pt-footer:after,.pt-footer:before{
top:0;
}
.content:after,.pt-footer:after {
border-color: rgba(136, 183, 213, 0);
border-width: 5px;
margin-left: -5px;
}
/*/arrow creation*/
.price{
position: relative;
display: inline-block;
margin-bottom: 0.625rem;
}
.price span{
font-size: 6rem;
letter-spacing: 8px;
font-weight: bold;
}
.price sup{
font-size: 1.5rem;
position: absolute;
top: 12px;
left: -12px;
}
.hint{
font-style: italic;
font-size: 0.9rem;
}
.features{
list-style-type: none;
background: #FFFFFF;
text-align: left;
color: #9C9C9C;
padding:30px 22%;
font-size: 0.9rem;
}
.features li{
padding:15px 0;
width: 100%;
}
.features li span{
padding-right: 0.4rem;
}
.pt-footer{
font-size: 0.95rem;
text-transform: capitalize;
}
/*PERSONAL*/
.personal .title{
background: #78CFBF;
}
.personal .content,.personal .pt-footer{
background: #82DACA;
}
.personal .content:after{
border-top-color: #82DACA;
}
.personal .pt-footer:after{
border-top-color: #FFFFFF;
}
/*PROFESSIONAL*/
.professional .title{
background: #3EC6E0;
}
.professional .content,.professional .pt-footer{
background: #53CFE9;
}
.professional .content:after{
border-top-color: #53CFE9;
}
.professional .pt-footer:after{
border-top-color: #FFFFFF;
}
/*BUSINESS*/
.business .title{
background: #E3536C;
}
.business .content,.business .pt-footer{
background: #EB6379;
}
.business .content:after{
border-top-color: #EB6379;
}
.business .pt-footer:after {
border-top-color: #FFFFFF;
}Nah gimana mudah bukan, mungkin sekian tutor dari juragancoding mengenai membuat pricing table menu dengan css semoga bermanfaat
