forked from codrops/CheckoutConcepts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
rounded.html
118 lines (116 loc) · 6.46 KB
/
rounded.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Checkout Concepts | Demo: Rounded</title>
<meta name="description" content="Some simple ideas for enhancing the checkout process" />
<meta name="keywords" content="checkout, button, concept, animated, web design, inspiration" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/checkout-rounded.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="color-3">
<div class="container">
<header class="codrops-header">
<h1>Checkout Concepts <span>Simple enhancements for the checkout process</span></h1>
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/TextInputEffects/" title="Previous Demo"><span>Previous Demo</span></a>
<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=22434" title="Back to the article"><span>Back to the Codrops article</span></a>
</div>
<nav class="codrops-demos">
<a href="index.html">Corner Flat</a>
<a href="rounded.html" class="current-demo">Rounded</a>
<a href="boxes.html">Boxes</a>
<a href="sidebar.html">Sidebar</a>
</nav>
</header>
<section class="content">
<div id="dummy-grid" class="dummy-grid">
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
<div class="dummy-grid__item"></div>
</div>
</section>
<section class="content content--related">
<p>If you enjoyed this demo you might also like:</p>
<a class="media-item" href="http://tympanus.net/Development/DialogEffects/">
<img class="media-item__img" src="img/related/DialogEffects.jpg" />
<h3 class="media-item__title">Dialog Effects</h3>
</a>
<a class="media-item" href="http://tympanus.net/Development/ButtonComponentMorph/">
<img class="media-item__img" src="img/related/MorphingButtons.jpg" />
<h3 class="media-item__title">Morphing Buttons</h3>
</a>
</section>
<div class="dummy-fixed">
<svg class="checkout__icon" width="30px" height="30px" viewBox="0 0 35 35">
<path d="M33.623,8.004c-0.185-0.268-0.486-0.434-0.812-0.447L12.573,6.685c-0.581-0.025-1.066,0.423-1.091,1.001 c-0.025,0.578,0.423,1.065,1.001,1.091L31.35,9.589l-3.709,11.575H11.131L8.149,4.924c-0.065-0.355-0.31-0.652-0.646-0.785 L2.618,2.22C2.079,2.01,1.472,2.274,1.26,2.812s0.053,1.146 0.591,1.357l4.343,1.706L9.23,22.4c0.092,0.497,0.524,0.857,1.03,0.857 h0.504l-1.15,3.193c-0.096,0.268-0.057,0.565,0.108,0.798c0.163,0.232,0.429,0.37,0.713,0.37h0.807 c-0.5,0.556-0.807,1.288-0.807,2.093c0,1.732,1.409,3.141,3.14,3.141c1.732,0,3.141-1.408,3.141-3.141c0-0.805-0.307-1.537-0.807-2.093h6.847c-0.5,0.556-0.806,1.288-0.806,2.093c0,1.732,1.407,3.141,3.14,3.141 c1.731,0,3.14-1.408,3.14-3.141c0-0.805-0.307-1.537-0.806-2.093h0.98c0.482,0,0.872-0.391,0.872-0.872s-0.39-0.873-0.872-0.873 H11.675l0.942-2.617h15.786c0.455,0,0.857-0.294,0.996-0.727l4.362-13.608C33.862,8.612,33.811,8.272,33.623,8.004z M13.574,31.108c-0.769,0-1.395-0.626-1.395-1.396s0.626-1.396,1.395-1.396c0.77,0,1.396,0.626,1.396,1.396S14.344,31.108,13.574,31.108z M25.089,31.108c-0.771,0-1.396 0.626-1.396-1.396s0.626-1.396,1.396-1.396c0.77,0,1.396,0.626,1.396,1.396 S25.858,31.108,25.089,31.108z"/>
</svg>
<div class="checkout">
<a class="checkout__button" href="#"><!-- Fallback location -->
<span class="checkout__text">
<span class="checkout__text-inner checkout__initial-text">Checkout</span>
<span class="checkout__text-inner checkout__final-text">$40.70 <i class="fa fa-fw fa-shopping-cart"></i></span>
</span>
</a>
<div class="checkout__order">
<div class="checkout__order-inner">
<table class="checkout__summary">
<thead>
<tr><th>Item</th><th>QTY</th><th>Price</th><th> </th></tr>
</thead>
<tbody>
<tr><td>Imitations <span>Mark Lanegan</span></td><td>1</td><td>$12.90</td><td><button class="checkout__action"><i class="icon fa fa-trash"></i></button></td></tr>
<tr><td>Out Of Exile <span>Audioslave</span></td><td>1</td><td>$15.90</td><td><button class="checkout__action"><i class="icon fa fa-trash"></i></button></td></tr>
<tr><td>Cure For Pain <span>Morphine</span></td><td>1</td><td>$11.90</td><td><button class="checkout__action"><i class="icon fa fa-trash"></i></button></td></tr>
</tbody>
</table><!-- /checkout__summary -->
<button class="checkout__close checkout__cancel"><i class="icon fa fa-fw fa-close"></i>Close</button>
</div><!-- /checkout__order-inner -->
</div><!-- /checkout__order -->
</div><!-- /checkout -->
<div class="checkout__count">3</div>
</div>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script>
(function() {
var dummy = document.getElementById('dummy-grid');
[].slice.call( document.querySelectorAll( '.checkout' ) ).forEach( function( el ) {
var openCtrl = el.querySelector( '.checkout__button' ),
closeCtrl = el.querySelector( '.checkout__cancel' );
openCtrl.addEventListener( 'click', function(ev) {
ev.preventDefault();
classie.add( el, 'checkout--active' );
classie.add( dummy, 'dummy-grid--highlight' );
} );
closeCtrl.addEventListener( 'click', function() {
classie.remove( el, 'checkout--active' );
classie.remove( dummy, 'dummy-grid--highlight' );
} );
} );
})();
</script>
</body>
</html>