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 |
Candy Text Typographic Fun | 4,103 Kb |
Visual effects Demo | 4,184 Kb |
Whisky Friday | 5,677 Kb |
Typographic Fun | 3,844 Kb |
HTML 5 Audio Player | 36,697 Kb |
Beautiful gradients, Expanding collums | 4,088 Kb |
IMac - Scrolling effect | 5,429 Kb |
The World Wide Web | 7,352 Kb |
Background-filter toggle | 38,215 Kb |
Portfolio Home page | 12,664 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 |
E-mail Template | SoloMDFK | 4,871 Kb |
Background Images | Jooonebug | 2,100 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
Popover Example | Seanboom | 2,429 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
CSS Colors | Alexpate | 2,232 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!