Pricing Plan test
How do I make an pricing plan test?
Simple Jquery code to toggle selections on/off. . What is a pricing plan test? How do you make a pricing plan test? This script and codes were developed by David Rodriguez on 24 November 2022, Thursday.
Pricing Plan test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Plan test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div class="plan">
<h1>Pro Plan</h1>
<h3>!</h3>
<h2>Manage Unlimited Projects</h2>
<p>Includes 100 GB for file storage</p>
<h4>$150</h4>
</div>
<div class="plan"><h1>Basic Plan</h1>
<h3>&</h3>
<h2>Manage up to 80 projects</h2>
<p>Includes 30 GB for file storage</p>
<h4>$90</h4>
</div>
<div class="plan"><h1>Simple Plan</h1>
<h3>$</h3>
<h2>Manage up to 15 projects</h2>
<p>Includes 4 GB for file storage</p>
<h4>$30</h4>
</div>
</div> <!--closes wrapper--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Pricing Plan test - Script Codes CSS Codes
body { margin: 50px 0px 0px 50px; background-color: #a0a0a0; font-family: arial,helvetica,sans-serif;
}
#wrapper { position: relative; margin-left: auto; margin-right: auto; overflow:hidden;
}
h1{ font-size:30px; margin-bottom:15px; margin-top:20px; color:#333; text-shadow: 0px 1px 1px #ccc; font-family:"american typewriter", courier; text-transform:uppercase;
}
h2{ font-size:18px; margin-bottom:7px; margin-top:10px; color:#ddd;
}
h3{ font-size:50px; background:#333; color:white; padding:10px; border:solid 3px #222; -webkit-border-radius: 20px;
border-radius: 10px; width:50px; margin-left:auto; margin-right:auto;
}
h4{ font-family:bodoni,georgia,times; font-size:30px; color:#ddd; text-shadow: 0px 2px 2px #222; margin-top:10px;
}
p{ font-size:14px;
}
.plan{ text-align:center; width:240px; min-height:300px;
-webkit-border-radius: 20px;
border-radius: 20px; float:left; padding:10px; margin-right:20px; background:#666;
border:solid 4px #222; margin-bottom:20px;
}
.active-plan{
background:#ddd;
border:solid 4px black;
}
.active-plan h3{
background:black;
border:solid 2px white;
}
.active-plan h2{
color:black;
}
.active-plan h4{
color:black;
}
Pricing Plan test - Script Codes JS Codes
$(document).ready(function()
{ $(".plan").click(function(){ $(this).toggleClass('active-plan'); $(this).siblings().removeClass('active-plan'); });
});
Developer | David Rodriguez |
Username | rodesco |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 2,279 Kb |
Views | 12,144 |
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!
Name | Size |
Dropdown Menu | 1,604 Kb |
FitText.js Demo | 2,874 Kb |
Responsiveness tester | 1,700 Kb |
Very Simple Responsive Navigation Toggle | 2,517 Kb |
Clear Fix Class Example 2 | 2,092 Kb |
Simple Contact Form | 1,905 Kb |
Box-sizing class example | 1,675 Kb |
Flexible Embedded Media | 1,629 Kb |
Anchor Tags | 15,759 Kb |
Overflow Example | 1,929 Kb |
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!
Name | Username | Size |
Simple personal profile | Miroot | 2,856 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Font stack | Adrianjacob | 1,868 Kb |
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!