-
Notifications
You must be signed in to change notification settings - Fork 37
/
index.html
executable file
·108 lines (90 loc) · 4.7 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Showcase Slider with jQuery and CSS Transitions</title>
<meta name="description" content="Vertical Showcase Slider with jQuery and CSS Transitions" />
<meta name="keywords" content="css3, transitions, vertical, layout, fullscreen, jquery, slide up, slide down" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Dosis:200,400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<noscript><link rel="stylesheet" type="text/css" href="css/noscript.css" /></noscript>
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/noscript.css" /><![endif]-->
</head>
<body>
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Tutorials/3DRestaurantMenu/">
<strong>« Previous Demo: </strong>3D Restaurant Menu Concept
</a>
<span class="right">
<a href="http://www.ikea.com/gb/en/">Products and images by IKEA</a>
<a href="http://tympanus.net/codrops/?p=11146">
<strong>Back to the Codrops Article</strong>
</a>
</span>
</div><!--/ Codrops top bar -->
<section id="ps-container" class="ps-container">
<div class="ps-header">
<h1>Vertical Showcase Slider</h1>
</div><!-- /ps-header -->
<div class="ps-contentwrapper">
<div class="ps-content">
<h2>Bernhard</h2>
<span class="ps-price">£100</span>
<p>With restful springiness in the seat; prevents static sitting and provides enhanced seating comfort. Padded seat and back for enhanced seating comfort. Soft, hardwearing and easy care leather, which ages gracefully.</p>
<a href="http://www.ikea.com/gb/en/catalog/products/80163804/#/60203882">Buy this item</a>
</div>
<div class="ps-content">
<h2>Tobias</h2>
<span class="ps-price">£65</span>
<p>For increased stability, re-tighten the screws about two weeks after assembly. Seat and back with restful flexibility; prevents a static sitting posture and enhances comfort.</p>
<a href="http://www.ikea.com/gb/en/catalog/products/90185320/#/20115038">Buy this item</a>
</div>
<div class="ps-content">
<h2>Pöang</h2>
<span class="ps-price">£140</span>
<p>Frame made of layer-glued bent birch; a very strong and durable material. High back provides great support for your neck. Sheepskin has natural insulating properties, which make it feel warm and cosy to sit on. Extra cushions are available for variation and renewal.</p>
<a href="http://www.ikea.com/gb/en/catalog/products/S79889694/#/S59901017">Buy this item</a>
</div>
<div class="ps-content">
<h2>Mellby</h2>
<span class="ps-price">£195</span>
<p>Easy to keep clean; removable, machine washable cover. Seat cushion with a top layer of memory foam; moulds to the precise contours of your body and regains its shape when you get up.</p>
<a href="http://www.ikea.com/gb/en/catalog/products/S99895000/#/S69894380">Buy this item</a>
</div>
<div class="ps-content">
<h2>Torbjörn</h2>
<span class="ps-price">£30</span>
<p>Height adjustable for a comfortable sitting posture. The sloping seat gives a comfortable sitting position when leaning forwards.</p>
<a href="http://www.ikea.com/gb/en/catalog/products/70224756/">Buy this item</a>
</div>
</div><!-- /ps-contentwrapper -->
<div class="ps-slidewrapper">
<div class="ps-slides">
<div style="background-image:url(images/1.jpg);"></div>
<div style="background-image:url(images/2.jpg);"></div>
<div style="background-image:url(images/3.jpg);"></div>
<div style="background-image:url(images/4.jpg);"></div>
<div style="background-image:url(images/5.jpg);"></div>
</div>
<nav>
<a href="#" class="ps-prev" ></a>
<a href="#" class="ps-next" ></a>
</nav>
</div><!-- /ps-slidewrapper -->
</section><!-- /ps-container -->
<!-- jQuery if needed -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
Slider.init();
});
</script>
</body>
</html>