#7 - Pricing Table

Developer
Bojan Krsmanovic
Size
4,080 Kb
Views
18,216
  1. #7 - Pricing Table Previews
  2. #7 - Pricing Table HTML Codes
  3. #7 - Pricing Table CSS Codes

How do I make an #7 - pricing table?

Normal pricing table inspired by codedrops.. What is a #7 - pricing table? How do you make a #7 - pricing table? This script and codes were developed by Bojan Krsmanovic on 07 December 2022, Wednesday.

#7 - Pricing Table Previews
IQ Test

#7 - Pricing Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#7 - Pricing Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper cf"> <div class="plan"> <span class="i-bike icons"></span> <h3>Beginner</h3> <span class="price"><span>$</span>9 <p>/ month</p></span> <ul class="info"> <li>1 GB of space</li> <li>Unlimited traffic</li> <li>Forum access</li> <li>Support at $25/hour</li> </ul> <a href="#" class="hvr-grow">Choose plan</a> </div> <div class="plan"> <span class="i-buss icons"></span> <h3>Advanced</h3> <span class="price"><span>$</span>259 <p>/ year</p></span> <ul class="info"> <li>5 GB of space</li> <li>Unlimited traffic</li> <li>Forum access</li> <li>Support at $5/hour</li> </ul> <a href="#" class="hvr-grow">Choose plan</a> </div> <div class="plan"> <span class="i-train icons"></span> <h3>Professional</h3> <span class="price"><span>$</span>699 <p>/ year</p></span> <ul class="info"> <li>20 GB of space</li> <li>Unlimited traffic</li> <li>Forum access</li> <li>Free support</li> </ul> <a href="#" class="hvr-grow">Choose plan</a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

#7 - Pricing Table - Script Codes CSS Codes

*, *:before, *:after { margin: 0; box-sizing: border-box; font-family: 'Lato', serif;
}
.cf:before, .cf:after { content: '.'; display: block; height: 0; visibility: hidden;
}
.cf:after { clear: both;
}
html { background-color: #31353c;
}
.wrapper { position: relative; margin: 100px auto; text-align: center; width: 846px;
}
.wrapper .plan { border: 2px solid #3f4443; float: left; padding: 30px; transition: all 0.2s; width: 250px;
}
.wrapper .plan:first-child { border-right-color: #31353c;
}
.wrapper .plan:last-child { border-left-color: #31353c;
}
.wrapper .plan:nth-child(2) { padding: 28px 30px; border: 4px solid #a0c34d;
}
.wrapper .plan .i-bike, .wrapper .plan .i-buss, .wrapper .plan .i-train { background: url(https://raw.githubusercontent.com/bkrsmanovic/pricing_tables/master/images/bike2.png); display: block; height: 24px; margin: 10px auto; width: 24px;
}
.wrapper .plan .i-buss { background: url(https://github.com/bkrsmanovic/pricing_tables/blob/master/images/buss2.png?raw=true);
}
.wrapper .plan .i-train { background: url(https://github.com/bkrsmanovic/pricing_tables/blob/master/images/train2.png?raw=true);
}
.wrapper .plan h3 { color: #fff; margin: 25px auto;
}
.wrapper .plan .price { color: #83a349; font-size: 20px; font-weight: 900; margin: 10px auto; position: relative;
}
.wrapper .plan .price span { font-size: 10px; line-height: 20px; left: -6px; top: -1px; font-weight: 700; position: absolute;
}
.wrapper .plan .price p { color: #4e534d; display: inline; font-size: 12px; font-weight: 100;
}
.wrapper .plan ul { margin: 25px auto 70px; color: #5c605f; list-style: none; padding: 0; font-size: 16px;
}
.wrapper .plan ul li { padding: 5px 0;
}
.wrapper .plan a { background: #96bb4d; border-radius: 100px; color: #fff; font-weight: bold; font-size: 14px; margin-bottom: 5px; padding: 12px 40px; text-decoration: none; transition: all 0.3s;
}
.wrapper .hvr-grow { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;
}
.wrapper .hvr-grow:hover, .wrapper .hvr-grow:focus, .wrapper .hvr-grow:active { transform: scale(1.1);
}
@media screen and (min-width: 421px) and (max-width: 845px) { .wrapper { width: 100%; margin: 10px auto; } .wrapper .plan { float: none; width: 400px; padding: 30px 50px; margin: 20px auto; } .wrapper .plan:first-child { border-right-color: #3f4443; } .wrapper .plan:last-child { border-left-color: #3f4443; } .wrapper .plan:nth-child { padding: 30px; } .wrapper .plan .icons { display: none; } .wrapper .plan h3 { font-size: 36px; } .wrapper .plan ul { font-size: 20px; } .wrapper .plan .price { font-size: 30px; } .wrapper .plan .price span { font-size: 15px; left: -8px; top: 3px; } .wrapper .plan .price p { font-size: 20px; } .wrapper .plan a { display: block; font-size: 20px; padding: 12px 15px; margin-bottom: 20px; }
}
@media all and (max-width: 420px) { .wrapper { width: 100%; margin: 10px auto; } .plan { float: none !important; margin: 20px auto; } .plan:first-child { border-right-color: #3f4443 !important; } .plan:last-child { border-left-color: #3f4443 !important; }
}
#7 - Pricing Table - Script Codes
#7 - Pricing Table - Script Codes
Home Page Home
Developer Bojan Krsmanovic
Username bojankrsmanovic
Uploaded December 07, 2022
Rating 3
Size 4,080 Kb
Views 18,216
Do you need developer help for #7 - Pricing Table?

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!

Bojan Krsmanovic (bojankrsmanovic) Script Codes
Name
Mixins
Create amazing love letters 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!