Price
How do I make an price?
Elegant Pricing Tables. What is a price? How do you make a price? This script and codes were developed by Catcod on 28 September 2022, Wednesday.
Price Previews
Price - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Price</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head> <meta charset="UTF-8" /> <title>Document</title> <link href='https://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>
<body>
<div style="padding-top: 50px;padding-bottom: 50px;"> <div class="sprice"> <div class="sprice-title g-grey"> starter </div><!-- sprice --> <div class="sprice-circle s-grey"> <span>$</span>10 </div> <div class="sprice-cat">10GB Storage</div><!--sprice-cat--> <div class="sprice-cat">100GB Brandwidth</div><!--sprice-cat--> <div class="sprice-cat">20 Email Accounts</div><!--sprice-cat--> <div class="sprice-cat">5 Databases</div><!--sprice-cat--> <div class="sprice-cat">5 Domain</div><!--sprice-cat--> <div class="sprice-cat end">Free backup</div><!--sprice-cat--> <div><input type="button" value="SIGN UP" class="sprice-button b-grey"></div> </div><!-- sprice --> <div class="sprice"> <div class="sprice-title g-blue"> business </div><!-- sprice --> <div class="sprice-circle s-blue"> <span>$</span>16 </div> <div class="sprice-cat">25GB Storage</div><!--sprice-cat--> <div class="sprice-cat">300GB Brandwidth</div><!--sprice-cat--> <div class="sprice-cat">20 Email Accounts</div><!--sprice-cat--> <div class="sprice-cat">10 Domain</div><!--sprice-cat--> <div class="sprice-cat">12 Databases</div><!--sprice-cat--> <div class="sprice-cat end">Free backup</div><!--sprice-cat--> <div><input type="button" value="SIGN UP" class="sprice-button b-blue"></div> </div><!-- sprice --> <div class="sprice"> <div class="sprice-title g-green"> premium </div><!-- sprice --> <div class="sprice-circle s-green"> <span>$</span>35 </div> <div class="sprice-cat">100GB Storage</div><!--sprice-cat--> <div class="sprice-cat">500GB Brandwidth</div><!--sprice-cat--> <div class="sprice-cat">100 Email Accounts</div><!--sprice-cat--> <div class="sprice-cat">20 Domain</div><!--sprice-cat--> <div class="sprice-cat">30 Databases</div><!--sprice-cat--> <div class="sprice-cat end">Free backup</div><!--sprice-cat--> <div><input type="button" value="SIGN UP" class="sprice-button b-green"></div> </div><!-- sprice --> <div class="sprice"> <div class="sprice-title g-orange"> ultimate </div><!-- sprice --> <div class="sprice-circle s-orange"> <span>$</span>60 </div> <div class="sprice-cat">1TB Storage</div><!--sprice-cat--> <div class="sprice-cat">Unlimited Bandwidth</div><!--sprice-cat--> <div class="sprice-cat">500 Email Accounts</div><!--sprice-cat--> <div class="sprice-cat">Unlimited Domains</div><!--sprice-cat--> <div class="sprice-cat">Unlimited Databases</div><!--sprice-cat--> <div class="sprice-cat end">Free backup</div><!--sprice-cat--> <div><input type="button" value="SIGN UP" class="sprice-button b-orange"> </div> </div><!-- sprice --> </div> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Price - Script Codes CSS Codes
body { background: url(https://wallpaperscraft.com/image/light_shadow_blur_background_46792_1920x1200.jpg) no-repeat; background-position: 50%; width: 1000px; margin: auto; position: relative;
}
/* SPRICE
============================================================*/
.sprice { width: 230px; text-align: center; display: inline-block; vertical-align: top; background-color: #fff; border-radius: 6px; min-height: 100px; margin: 0 4px; font-family: "PT Sans Caption";
}
.sprice-title { border-top-left-radius: 5px; border-top-right-radius: 5px; padding-top: 15px; padding-bottom: 13px; text-transform: uppercase; color: #fff; font-size: 26px; font-family: "PT Sans Caption";
}
.sprice-circle { font-size: 60px; height: 108px; margin: 20px 0; border: 1px solid; display: inline-block; border-radius:50%; padding: 35px 30px 5px 30px; transition: all .4s;
}
.sprice-circle span { vertical-align: top; font-size: 28px; position: relative; top: 10px;
}.sprice-cat { border-top:1px solid #dedede; font-size: 13px; color: #999a95; background-color: #f9f9f9; padding: 10px 0;
}
.sprice-cat:nth-child(2n) { background-color: #f3f3f3;
}
.end { border-bottom:1px solid #dedede;
}
input.sprice-button { cursor: pointer; position: relative; margin: 10px 0; border: none; outline: none; color: #fff; font-size: 14px; border-radius: 5px; padding: 13px 35px 10px; transition: all .1s;
}
input.sprice-button:active { top:2px; box-shadow:none;
}
/* grey */
.g-grey { background: #646c77; background: linear-gradient(to bottom, #646c77 0%,#424b54 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646c77', endColorstr='#424b54',GradientType=0 );
}
.s-grey { color: #656d7a;
}
.b-grey { background: #646c77; background: linear-gradient(to bottom, #646c77 0%,#424b54 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646c77', endColorstr='#424b54',GradientType=0 ); box-shadow: 0 2px 0px #222222;
}
/* blue */
.g-blue { background: #5d9cec; background: linear-gradient(to bottom, #5d9cec 0%,#4b89dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d9cec', endColorstr='#4b89dc',GradientType=0 );
}
.s-blue { color: #5f9ced;
}
.b-blue { box-shadow: 0 2px 0px #2f69b2; background: #5d9cec; background: linear-gradient(to bottom, #5d9cec 0%,#4b89dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d9cec', endColorstr='#4b89dc',GradientType=0 );
}
/* green */
.g-green { background: #48cfae; background: linear-gradient(to bottom, #48cfae 0%,#36bc9b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48cfae', endColorstr='#36bc9b',GradientType=0 );
}
.s-green { color: #48cdae;
}
.b-green { box-shadow: 0 2px 0px #168f70; background: #48cfae; background: linear-gradient(to bottom, #48cfae 0%,#36bc9b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48cfae', endColorstr='#36bc9b',GradientType=0 );
}
/* orange */
.g-orange { background: #ff8e24; background: linear-gradient(to bottom, #ff8e24 0%,#ff7b0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8e24', endColorstr='#ff7b0e',GradientType=0 );
}
.s-orange { color: #ff8e24;
}
.b-orange { box-shadow: 0 2px 0px #bd5b00; background: #ff8e24; background: linear-gradient(to bottom, #ff8e24 0%,#ff7b0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8e24', endColorstr='#ff7b0e',GradientType=0 );
}
/* END COLOR */Price - Script Codes JS Codes
// https://codepen.io/catcode/
$(document).ready(function(){ $('.sprice:nth-child(1)').hover(function(){ $('.s-grey').css('background-color','#656d7a'); $('.s-grey').css('color','#fff'); }, function(){ $('.s-grey').css('background-color','#fff'); $('.s-grey').css('color','#646c77'); }); $('.sprice:nth-child(2)').hover(function(){ $('.s-blue').css('background-color','#5f9ced'); $('.s-blue').css('color','#fff'); }, function(){ $('.s-blue').css('background-color','#fff'); $('.s-blue').css('color','#5f9ced'); }); $('.sprice:nth-child(3)').hover(function(){ $('.s-green').css('background-color','#48cdae'); $('.s-green').css('color','#fff'); }, function(){ $('.s-green').css('background-color','#fff'); $('.s-green').css('color','#48cdae'); }); $('.sprice:nth-child(4)').hover(function(){ $('.s-orange').css('background-color','#ff8e24'); $('.s-orange').css('color','#fff'); }, function(){ $('.s-orange').css('background-color','#fff'); $('.s-orange').css('color','#ff8e24'); }); });
| Developer | Catcod |
| Username | catcode |
| Uploaded | September 28, 2022 |
| Rating | 3.5 |
| Size | 3,194 Kb |
| Views | 16,192 |
Do you need developer help for Price?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Catcod (catcode) Script Codes
| Name | Size |
| IE 9 CSS border radius gradient | 2,778 Kb |
| A Pen by catcod | 2,571 Kb |
| Price | 2,623 Kb |
| Svg Preloader | 1,774 Kb |
| Swipe Preloader | 3,122 Kb |
Create amazing SEO content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Mario | Takaneichinose | 3,902 Kb |
| Apex Calculator | Michaelwnelson | 2,370 Kb |
| A form arranged using automatic placement. | Vikasford | 2,103 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
| Rainbow Preloader with Offset-Path | Rachelmcgrane | 2,721 Kb |
| No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
| Box Shadow Effects | Retrofuturistic | 2,143 Kb |
| Twitch JSON API | Jvhti | 2,808 Kb |
| Simple checkbox style | Vncnz | 2,628 Kb |
| About Mazano | Kiti | 2,585 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!