TTT Plans Pricing Table

Developer
Soufiane Abid
Size
3,101 Kb
Views
22,264
  1. TTT Plans Pricing Table Previews
  2. TTT Plans Pricing Table HTML Codes
  3. TTT Plans Pricing Table CSS Codes
  4. TTT Plans Pricing Table JS Codes

How do I make an ttt plans pricing table?

TTT Plans Pricing Table PSD And HTML5 / CSS3 Free :). What is a ttt plans pricing table? How do you make a ttt plans pricing table? This script and codes were developed by Soufiane Abid on 12 October 2022, Wednesday.

TTT Plans Pricing Table Previews
IQ Test

TTT Plans Pricing Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TTT Plans Pricing Table</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=PT+Sans.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <section class="plans"> <div class="Beginner"> <ul> <h4 class="plan">Beginner</h4> <i class="fa fa-bicycle fa-4x wizz"></i> <li>$9/<span>month</span></li> <li>1 GB of space</li> <li>Unlimited traffic</li> <li>Forum access</li> <li>Support at $25/hour</li> </ul> <button class="add wizz"> <div class="fa fa-cart-plus none"></div> Add to cart </button> </div> <div class="Advanced"> <ul> <h4 class="plan">Advanced</h4> <i class="fa fa-motorcycle fa-4x wizz"></i> <li>$99/<span>month</span></li> <li>1 GB of space</li> <li>Unlimited traffic</li> <li>Forum access</li> <li>Support at $25/hour</li> </ul> <button class="add wizz"> <div class="fa fa-cart-plus none"></div> Add to cart </button> </div> <div class="Professional"> <ul> <h4 class="plan">Professional</h4> <i class="fa fa-automobile fa-4x wizz"></i> <li>$999/<span>month</span></li> <li>1 GB of space</li> <li>Unlimited traffic</li> <li>Forum access</li> <li>Support at $25/hour</li> </ul> <button class="add wizz"> <div class="fa fa-cart-plus none"></div> Add to cart </button> </div> </section> <footer> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a>. </footer> </div> <script src="js/index.js"></script>
</body>
</html>

TTT Plans Pricing Table - Script Codes CSS Codes

*{ box-sizing: border-box; padding: 0
}
/* Container and body */
.container{ width: 1200px; margin: auto;
}
body{ background-color: #1c2950;
}
/* Container and body */
/* this is three Div */
.plans{ display: flex; justify-content: center; color: #9ad6f9; margin-top: 20px;
}
.Beginner, .Advanced, .Professional{ border: 6px solid #9ad6f9; width: 250px; height: 500px; margin:20px; text-align: center;
}
.plan{ text-align: center; font-size: 30px; font-family: 'PT Sans', sans-serif; margin: auto; padding: 15px;
}
[class^="fa"]{ text-align: center; padding: 5px;
}
ul li{ list-style: none; text-align: center; font-family: 'PT Sans', sans-serif; font-size: 15px; padding: 10px;
}
ul li span{ font-style: italic; font-size: 15px;
}
li:first-of-type{ font-size: 50px; font-style: italic;
}
/* this is three Div */
/*start Button*/
.add{ background: none; border: none; padding: 15px; min-width: 200px; margin-bottom: 15px; text-transform: uppercase;
font-family: 'PT Sans', sans-serif; font-size: larger; -webkit-transition: border 0.1s; transition: border 0.1s;
}
/* End button*/
/* Width Div Advanced*/
.Advanced{ width: 400px;
}
/*Width Button Div Advanced */
.Advanced .add{ min-width: 300px
}
/* start Animation */
/* start Animation */
/* Buzz */
@-webkit-keyframes wizz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); }
}
@keyframes wizz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); }
}
.wizz { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;
}
.wizz:hover { -webkit-animation-name: wizz; animation-name: wizz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.wizz:active{ -webkit-animation-play-state: paused; animation-play-state: paused;
}
.wizz:focus{ border: 4px solid #9ad6f9;
}
/* end Animation */
/*start footer*/
footer{ color: #FFF; text-align: center; font-size: 10px; padding-top: 200px;
}
footer a{ text-decoration: none; color: #9ad6f9;
}
/*end footer*/

TTT Plans Pricing Table - Script Codes JS Codes

/*
Sorry! Font Original Is MyriadPro-Cond :D
Download PSD and HTML/CSS
https://www.behance.net/gallery/32735275/TTT-Plans-Pricing-Table
*/
TTT Plans Pricing Table - Script Codes
TTT Plans Pricing Table - Script Codes
Home Page Home
Developer Soufiane Abid
Username SoufianeAbid
Uploaded October 12, 2022
Rating 3
Size 3,101 Kb
Views 22,264
Do you need developer help for TTT Plans 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!

Soufiane Abid (SoufianeAbid) Script Codes
Name
Jump loading
ScrollTop
Flat accordion
One click to copy
A Pen by Soufiane Abid
Small UnderLine
Responsive pricing table CSS3
Timeline CSS
Translucent borders
Push Over Menu
Create amazing blog posts 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!