How to create price panel using html and css. Price panel important of show price values and different.This method very help to easy to create price panel. Go to see how to create three type of price value packs.
below see the code:
Code for Html:
<div class="prc">
<div class="prc-hdr" package="Sliver Package">
<div class="prc-hdr-dlr" >300</div>
<div class="prc-enq"></div>
</div>
<div class="prc-slogan" slogan="Great Value!"></div>
<ul class="prc-ftr">
<li>Unlimited Internet</li>
<li>Free SMS</li>
<li>3GB Data For One Day</li>
</ul>
</div>
<div class="prc center">
<div class="prc-hdr" package="Gold Package">
<div class="prc-hdr-dlr">550</div>
<div class="prc-enq"></div>
</div>
<div class="prc-slogan" slogan="Best All Round"></div>
<ul class="prc-ftr">
<li>Unlimited Internet</li>
<li>Free SMS</li>
<li>5GB Data For One Day</li>
</ul>
</div>
<div class="prc">
<div class="prc-hdr" package="Diamond Package">
<div class="prc-hdr-dlr">1000</div>
<div class="prc-enq"></div>
</div>
<div class="prc-slogan" slogan="You Get Everything"></div>
<ul class="prc-ftr">
<li>Unlimited Internet</li>
<li>Free SMS</li>
<li>10GB Data For One Day</li>
</ul>
</div>
Code for Css:
$blue: #446cb3;
$orange: #f89406;
$panelBG: #f2f2f2;
$text: #666;
* {
box-sizing:border-box;
}
html, body {
width:100%;
min-height: 100%;
padding:20px;
display: flex;
justify-content: center;
font:16px lato;
line-height:1em;
}
.prc {
margin:0 5px;
background:$panelBG;
width:300px;
display: inline-block;
overflow: hidden;
border-radius:15px;
.prc-slogan {
width:100%;
display: block;
position: relative;
height:0;
overflow: hidden;
transition:.3s cubic-bezier(0, 0, 0.38, 1.4);
background:$blue;
// Great Value
&::after {
content:attr(slogan);
width:100%;
background:darken($blue,5%);
padding:.7em 0;
display: inline-block;
margin-top:-100px;
text-align:center;
color:white;
position: absolute;
bottom:0;
}
}
.prc-hdr {
background:$blue;
position: relative;
z-index: 2;
color:white;
text-align:center;
padding:.5em;
&:before {
content:attr(package);
background:rgba(0,0,0,.1);
width:100%;
top:0;
left:0;
padding:.5em 0;
display: inline-block;
border-radius: 10px 10px 0 0 ;
}
.prc-hdr-dlr {
font-size:3em;
line-height:1em;
margin:.5em 0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition:.2s ease-out;
&:before {
content:"$";
font-size:.7em;
line-height:1em;
}
}
.prc-enq {
background:$orange;
font-weight:700;
margin:10px 0;
cursor:pointer;
overflow:hidden;
position: relative;
height:2em; // height is 1em (text height) + .5 padding
z-index: 5;
&:before {
content:"Let's Start Here";
position: absolute;
z-index: 2;
height:100%;
width:100%;
left:0;
top:0;
transition:.2s ease-out;
display: flex;
justify-content: center;
align-items: center;
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top:100%;
left:0;
content:"Click Me";
background:lighten($orange,5%);
z-index:1;
transition:.2s ease-out;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.prc-ftr {
color:$text;
li {
width:100%;
padding:1em 1em;
border-bottom:1px solid darken($panelBG,10%);
box-shadow:0 1px 0 rgba(255,255,255,.5);
icon {
font:1em fontawesome;
margin-right:10px;
text-align: center;
width:30px;
display: inline-block;;
}
}
}
// Hover on entire price panel
&:hover {
.prc-hdr-dlr {
font-size:3.8em;
}
.prc-enq {
&:before {
top:-100%;
}
&:after {
top:0;
}
}
.prc-hdr {
&:after {
}
}
.prc-slogan {
height:2.4em;
}
}
// Hover over the actual enquiry button
.prc-enq:hover {
&:after {
background:darken($orange,5%);
}
}
}
$red : #d91e18;
$green : #26a65b;
.prc:nth-child(2) {
.prc-hdr {
background:$red;
}
.prc-slogan, .prc-slogan:after {
background:darken($red,10%);
}
}
.prc:nth-child(3) {
.prc-hdr {
background:$green;
}
.prc-slogan, .prc-slogan:after {
background:darken($green,10%);
}
}
0 Comments