Pricing Table Tickets/Passes Flip
How do I make an pricing table tickets/passes flip?
Concept for Pricing tables for subscriptions branded as tickets or passes, Click on Become a Member. . What is a pricing table tickets/passes flip? How do you make a pricing table tickets/passes flip? This script and codes were developed by Hans Engebretsen on 09 August 2022, Tuesday.
Pricing Table Tickets/Passes Flip - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pricing Table Tickets/Passes Flip</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Kreon:300,400,700);
.price-table:after { content: ""; display: block; position: absolute; bottom: -16px; left: 0; background: -webkit-linear-gradient(-135deg, white 50%, transparent 50%) 0 50%, -webkit-linear-gradient(-45deg, white 50%, transparent 50%) 0 50%, transparent; background-repeat: repeat-x; background-size: 16px 16px, 16px 16px, cover, cover; height: 16px; width: 100%;
}
.head { position: relative;
}
.head:after, .head:before { content: ""; display: block; width: 13px; height: 13px; background-color: #5d5d5d; position: absolute; right: -22px; border-radius: 50%; z-index: 2000; bottom: -7px;
}
.head:after { left: -22px;
}
button { display: inline-block; padding: 8px 12px; border-radius: 0; border: 2px solid #c5c5c5; background: none; text-align: center; font-size: 1.35em; transition: all 200ms;
}
button:hover { border-radius: 3px; background-color: #c5c5c5; color: white;
}
* { box-sizing: border-box;
}
body { font-family: 'Kreon', serif; background-color: #5d5d5d; color: #c5c5c5;
}
.bold { font-weight: 700;
}
.page-container { width: 880px; position: relative; padding-top: 10px; padding-bottom: 30px; margin: 0 auto; overflow: hidden;
}
.add-films h1 { font-style: italic; color: #e6e6e6;
}
.add-films .price-table { padding-bottom: 18px; text-align: right;
}
.add-films .dollar { line-height: 2.5;
}
.add-films .year { vertical-align: middle; padding: 0 10px 0 10px; font-size: .2em;
}
.add-films .contents { text-align: center; font-size: 32px; margin-top: 55px; margin-bottom: 0;
}
.add-films a.proceed-anyway { display: block; color: #c5c5c5;
}
.add-films .price { margin-bottom: 40px; margin-top: -40px; margin-left: 0; text-align: center;
}
.add-films .price h2 { line-height: 1.5em;
}
.add-films button { margin-bottom: 10px; font-size: 1em;
}
.opening { float: left; margin-right: 40px; perspective: 1000;
}
.opening:nth-child(2) .price-table { transition-delay: 700ms;
}
.arise .opening { border-bottom: 0;
}
.flip-me { position: relative; transition: 0.6s; transform-style: preserve-3d;
}
.flip .flip-me { transform: rotateY(180deg);
}
.opening, .front, .back { display: inline-block;
}
.front, .back { backface-visibility: hidden; transform-style: preserve-3d;
}
.front { z-index: 1;
}
.back { position: absolute; top: 0; left: 0; transform: rotateY(-180deg);
}
.price-table { display: block; position: relative; width: 400px; bottom: -1000px; margin-bottom: 20px; margin-right: 3%; padding: 0 1em; border-radius: 7px 7px 0px 0px; background-color: white; text-align: center; transition: bottom 400ms 200ms ease-in-out;
}
.arise .price-table { bottom: 0px;
}
.head { padding: 25px 7px; border-bottom: 1px solid #e6e6e6; text-align: left;
}
h1 { font-weight: 300; line-height: 0; font-size: 1.5em; display: inline-block;
}
.fa-barcode { float: right; font-size: 30px; font-weight: bold;
}
h2 { line-height: 2em; margin: 0;
}
.dollar { font-size: .5em; vertical-align: top; line-height: 3.3;
}
.year { font-size: .3em; font-weight: 300; text-transform: uppercase;
}
.price { font-size: 70px; color: #e6e6e6; margin-left: 20px; margin-bottom: -30px;
}
.submit { margin-bottom: 30px; color: #e6e6e6;
}
.contents { text-align: left; line-height: 2; font-weight: 300; color: #e6e6e6; margin-bottom: 70px;
}
.contents li { list-style: none;
}
.contents li:last-child { margin-top: 1em;
}
.contents ul { margin: 0; padding-left: 20px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="page-container"> <div class="opening"> <div class="flip-me"> <div class="front"> <div class="price-table"> <section class="head"> <h1><span class="bold">Average</span> Pass</h1> <i class="fa fa-barcode"></i> </section> <section class="price"> <h2> <span class="dollar">$</span>199<span class="year">/Year</span> </h2> </section> <section class="contents"> <ul> <li><span class="bold">Unlimited</span> Videos</li> <li><span class="bold">Unlimited</span> Images</li> <li><span class="bold">Unlimited</span> PSDs</li> <li>A years worth of new releases</li> </ul> </section> <button class="submit">Become a Member</button> </div> </div> <div class="back add-films"> <div class="price-table "> <section class="head"> <h1>Make it <span class="bold">Ultimate</span></h1> <i class="fa fa-barcode"></i> </section> <section class="contents"> <span class="ultimate">Add <span class="bold">Unlimited</span> Films</span> </section> <section class="price"> <h2> <span class="year">Only</span><span class="dollar">$</span>99<span class="year">more</span> </h2> </section> <button class="submit">+ Add Films</button> <a href="#" class="proceed-anyway">Proceed without adding films →</a> </div> </div> </div> </div> <div class="opening"> <div class="price-table"> <section class="head"> <h1><span class="bold">Ultimate</span> Pass</h1> <i class="fa fa-barcode"></i> </section> <section class="price"> <h2> <span class="dollar">$</span>299<span class="year">/Year</span> </h2> </section> <section class="contents"> <ul> <li><span class="bold">Unlimited</span> Videos</li> <li><span class="bold">Unlimited</span> Images</li> <li><span class="bold">Unlimited</span> PSDs</li> <li><span class="bold">Unlimited</span> films</li> <li>A years worth of new releases</li> </ul> </section> <button class="submit">Become a Member</button> </div> </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>
Pricing Table Tickets/Passes Flip - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Kreon:300,400,700);
.price-table:after { content: ""; display: block; position: absolute; bottom: -16px; left: 0; background: -webkit-linear-gradient(-135deg, white 50%, transparent 50%) 0 50%, -webkit-linear-gradient(-45deg, white 50%, transparent 50%) 0 50%, transparent; background-repeat: repeat-x; background-size: 16px 16px, 16px 16px, cover, cover; height: 16px; width: 100%;
}
.head { position: relative;
}
.head:after, .head:before { content: ""; display: block; width: 13px; height: 13px; background-color: #5d5d5d; position: absolute; right: -22px; border-radius: 50%; z-index: 2000; bottom: -7px;
}
.head:after { left: -22px;
}
button { display: inline-block; padding: 8px 12px; border-radius: 0; border: 2px solid #c5c5c5; background: none; text-align: center; font-size: 1.35em; transition: all 200ms;
}
button:hover { border-radius: 3px; background-color: #c5c5c5; color: white;
}
* { box-sizing: border-box;
}
body { font-family: 'Kreon', serif; background-color: #5d5d5d; color: #c5c5c5;
}
.bold { font-weight: 700;
}
.page-container { width: 880px; position: relative; padding-top: 10px; padding-bottom: 30px; margin: 0 auto; overflow: hidden;
}
.add-films h1 { font-style: italic; color: #e6e6e6;
}
.add-films .price-table { padding-bottom: 18px; text-align: right;
}
.add-films .dollar { line-height: 2.5;
}
.add-films .year { vertical-align: middle; padding: 0 10px 0 10px; font-size: .2em;
}
.add-films .contents { text-align: center; font-size: 32px; margin-top: 55px; margin-bottom: 0;
}
.add-films a.proceed-anyway { display: block; color: #c5c5c5;
}
.add-films .price { margin-bottom: 40px; margin-top: -40px; margin-left: 0; text-align: center;
}
.add-films .price h2 { line-height: 1.5em;
}
.add-films button { margin-bottom: 10px; font-size: 1em;
}
.opening { float: left; margin-right: 40px; perspective: 1000;
}
.opening:nth-child(2) .price-table { transition-delay: 700ms;
}
.arise .opening { border-bottom: 0;
}
.flip-me { position: relative; transition: 0.6s; transform-style: preserve-3d;
}
.flip .flip-me { transform: rotateY(180deg);
}
.opening, .front, .back { display: inline-block;
}
.front, .back { backface-visibility: hidden; transform-style: preserve-3d;
}
.front { z-index: 1;
}
.back { position: absolute; top: 0; left: 0; transform: rotateY(-180deg);
}
.price-table { display: block; position: relative; width: 400px; bottom: -1000px; margin-bottom: 20px; margin-right: 3%; padding: 0 1em; border-radius: 7px 7px 0px 0px; background-color: white; text-align: center; transition: bottom 400ms 200ms ease-in-out;
}
.arise .price-table { bottom: 0px;
}
.head { padding: 25px 7px; border-bottom: 1px solid #e6e6e6; text-align: left;
}
h1 { font-weight: 300; line-height: 0; font-size: 1.5em; display: inline-block;
}
.fa-barcode { float: right; font-size: 30px; font-weight: bold;
}
h2 { line-height: 2em; margin: 0;
}
.dollar { font-size: .5em; vertical-align: top; line-height: 3.3;
}
.year { font-size: .3em; font-weight: 300; text-transform: uppercase;
}
.price { font-size: 70px; color: #e6e6e6; margin-left: 20px; margin-bottom: -30px;
}
.submit { margin-bottom: 30px; color: #e6e6e6;
}
.contents { text-align: left; line-height: 2; font-weight: 300; color: #e6e6e6; margin-bottom: 70px;
}
.contents li { list-style: none;
}
.contents li:last-child { margin-top: 1em;
}
.contents ul { margin: 0; padding-left: 20px;
}
Pricing Table Tickets/Passes Flip - Script Codes JS Codes
$(document).ready(function() { $("body").addClass("arise"); $(".submit").click(function(){ $(this).closest(".opening").toggleClass("flip"); });
});
Developer | Hans Engebretsen |
Username | hans |
Uploaded | August 09, 2022 |
Rating | 3.5 |
Size | 6,296 Kb |
Views | 30,360 |
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 |
Beautiful gradients, Expanding collums | 4,088 Kb |
IMac - Scrolling effect | 5,429 Kb |
Instagram API Footer | 4,868 Kb |
Visual effects Demo | 4,184 Kb |
Launch Sign up form | 5,586 Kb |
Nav Menu Hover | 4,538 Kb |
Nice textured background | 2,659 Kb |
Candy Text Typographic Fun | 4,103 Kb |
Product -Thumb Hover | 4,960 Kb |
HTML 5 Audio Player | 36,697 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 |
Marching Squares Visualized | Sakri | 7,074 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Formations | Cantelope | 5,731 Kb |
Flex Chart | James_zedd | 4,111 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Filtering with shuffle.js | Deyand | 2,712 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!