Flat Pricing Table

Developer
Srijon Sarker
Size
3,011 Kb
Views
10,120
  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 Pricing Table. A fork From Pen from @andytran http://codepen.io/andytran/pen/LJFeg. What is a flat pricing table? How do you make a flat pricing table? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

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='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.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("https://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 Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3
Size 3,011 Kb
Views 10,120
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!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Statics UI
Material Design Square Card Components
Visual Card
Material Login Form
Facebook like button Emoji Reaction
3D Buttons iii
Material Calendar Concept
Image Hover ii
Flat Pricing Table
Lead Gen Button
Create amazing video scripts 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!