Flat Pricing Table

Developer
Andy Tran
Size
4,542 Kb
Views
95,128
  1. Flat Pricing Table Previews
  2. Flat Pricing Table HTML Codes
  3. Flat Pricing Table CSS Codes
  4. Flat Pricing Table JS Codes

How do I make an flat pricing table?

A simple flat pricing table with jQuery that enables the content to slide down onClick.. What is a flat pricing table? How do you make a flat pricing table? This script and codes were developed by Andy Tran on 12 June 2022, Sunday.

Flat Pricing Table Previews
IQ Test

Flat Pricing Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Pricing Table</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'>
<link rel='stylesheet prefetch' href='http://daneden.github.io/animate.css/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='pricing animated swing'> <div class='thumbnail animated pulse infinite'> <div class='fa fa-paper-plane'></div> </div> <div class='title'> Paper Package </div> <div class='content'> <div class='sub-title'> $69 <i>per year</i> </div> <ul> <li> <div class='fa fa-check'></div> Complete Access To All Themes </li> <li> <div class='fa fa-check'></div> Perpetual Theme Updates </li> <li> <div class='fa fa-check'></div> Premium Technical Support </li> <li> <div class='fa fa-close'></div> Complete Access To All Plugins </li> <li> <div class='fa fa-close'></div> Layered Photoshop Files </li> <li> <div class='fa fa-close'></div> No Yearly Fees </li> </ul> <a href='https://www.elegantthemes.com/cgi-bin/members/register.cgi?sub=16'> Sign Up </a> </div> <div class='clickMe'> Click </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flat Pricing Table - Script Codes CSS Codes

body { background: #DF4F32 url("http://33.media.tumblr.com/53b1b2ec56944c977cdd7ee10a9b4ba4/tumblr_n8zm0yzydj1st5lhmo1_1280.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: "Roboto"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body::before { content: ''; position: fixed; z-index: -1; top: 0; left: 0; background: #DF4F32; /* IE Fallback */ background: rgba(44, 62, 80, 0.9); width: 100%; height: 100%;
}
.pricing { position: absolute; background: #3498db; width: 280px; top: 50%; left: 50%; margin: -117px 0 0 -140px; padding: 40px 0 20px; color: #fff; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.pricing .thumbnail { background: #fff; /* IE Fall */ background: rgba(255, 255, 255, 0.2); display: block; width: 90px; height: 90px; margin: 0 auto; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; font-size: 36px; line-height: 90px; text-align: center;
}
.pricing .title { cursor: pointer; background: #2980b9; margin: 40px 0 0; padding: 10px; font-size: 18px; text-align: center; text-transform: uppercase; font-weight: 700;
}
.pricing .content { display: none;
}
.pricing .content .sub-title { background: #eee; padding: 10px; color: #666; font-size: 14px; font-weight: 700; text-align: center;
}
.pricing .content ul { list-style: none; background: #fff; margin: 0; padding: 0; color: #666; font-size: 14px;
}
.pricing .content ul li { padding: 10px 20px;
}
.pricing .content ul li:nth-child(2n) { background: #f3f3f3;
}
.pricing .content ul li .fa { width: 16px; margin-right: 10px; text-align: center;
}
.pricing .content ul li .fa-check { color: #2ecc71;
}
.pricing .content ul li .fa-close { color: #e74c3c;
}
.pricing .content a { display: block; background: #2980b9; max-width: 80px; margin: 0 auto; margin-top: 20px; padding: 10px 15px; color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-decoration: none; -webkit-transition: 0.2s linear; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear;
}
.pricing .content a:hover { background: #34495e; /* IE Fallback */ background: rgba(52, 73, 94, 0.7);
}
.clickMe { background: #fff; /* IE Fallback */ background: rgba(255, 255, 255, 0.8); position: absolute; top: 180px; left: -60px; padding: 5px 7px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #3498db; font-size: 10px; text-transform: uppercase; font-weight: 800;
}
.clickMe:before { content: ''; position: absolute; top: 6px; right: -5px; width: 0px; height: 0px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5 solid #fff; /* IE Fallback */ border-left: 5px solid rgba(255, 255, 255, 0.8);
}

Flat Pricing Table - Script Codes JS Codes

$( ".title" ).click(function() { $(".content").slideToggle();
});
Flat Pricing Table - Script Codes
Flat Pricing Table - Script Codes
Home Page Home
Developer Andy Tran
Username andytran
Uploaded June 12, 2022
Rating 4.5
Size 4,542 Kb
Views 95,128
Do you need developer help for Flat 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!

Andy Tran (andytran) Script Codes
Name
Code Module - Slide In Banner
Flat Login Form
Information Card Slider
Material Playing Cards
Sign Up Form
Day 21 - Interactive Dribbble Invite Modal
Tabs Modal
Flat Login Form
Flat Login Form 3.0
Progress Bar
Create amazing web 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!