<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Price Thermometer</title>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Abel' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Price Thermometer by <span>Travis Loncar</span></p>
<h1>Price Thermometer</h1>
<div class="pricing-box">
<div class="pricing-thermo">
<!-- Thermometer -->
<div class="pricing-total">
</div>
<!-- Price -->
<div class="pricing-number">
Starting at $500
</div>
</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/tbloncar/css-price-thermometer-bouAh */
body {
background: #CCC;
}
p {
font-family: 'Abel', sans-serif;
display: block;
padding: 10px;
}
span {
color: rgba(255,51,0,0.85);
}
h1 {
font-family: 'Abel', sans-serif;
text-align: center;
margin: 50px;
color: #222;
}
.pricing-thermo {
background: #EEE;
width: 50%;
height: 60px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
-o-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin: 50px auto;
padding: 3px;
}
.pricing-total {
height: 100%;
background: rgba(255,51,0,0.85);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
width: 15%;
margin-right: 10px;
float: left;
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.pricing-number {
font-family: 'Arial', sans-serif;
color: rgba(0,0,0,0.6);
height: 30px;
width: 130px;
padding: 7px 0 0 0;
text-align: center;
background: #FFF;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
margin-top: 12px;
float: left;
display: none;
font-size: 14px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
-o-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
}
.pricing-box:hover .pricing-number {
display: block;
}
.pricing-box:hover .pricing-total {
width: 60%;
}