-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvoyage.html
More file actions
138 lines (102 loc) · 3.52 KB
/
voyage.html
File metadata and controls
138 lines (102 loc) · 3.52 KB
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Voyage Slider | GSAP</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'>
<link rel="stylesheet" href="voyage.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="loading__wrapper">
<div class="loader--text">Loading...</div>
<div class="loader">
<span></span>
</div>
</div>
<div class="app">
<div class="cardList">
<button class="cardList__btn btn btn--left">
<div class="icon">
<svg>
<use xlink:href="#arrow-left"></use>
</svg>
</div>
</button>
<div class="cards__wrapper">
<div class="card current--card">
<div class="card__image">
<img src="images/slider/slide1.jpg" alt="" />
</div>
</div>
<div class="card next--card">
<div class="card__image">
<img src="images/slider/slide2.jpg" alt="" />
</div>
</div>
<div class="card previous--card">
<div class="card__image">
<img src="images/slider/slide3.jpg" alt="" />
</div>
</div>
</div>
<button class="cardList__btn btn btn--right">
<div class="icon">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</button>
</div>
<div class="infoList">
<div class="info__wrapper">
<div class="info current--info">
<h1 class="text name">Highlands</h1>
<h4 class="text location">Scotland</h4>
<p class="text description">The mountains are calling</p>
</div>
<div class="info next--info">
<h1 class="text name">Machu Pichu</h1>
<h4 class="text location">Peru</h4>
<p class="text description">Adventure is never far away</p>
</div>
<div class="info previous--info">
<h1 class="text name">Chamonix</h1>
<h4 class="text location">France</h4>
<p class="text description">Let your dreams come true</p>
</div>
</div>
</div>
<div class="app__bg">
<div class="app__bg__image current--image">
<img src="images/slider/slide1.jpg" alt="" />
</div>
<div class="app__bg__image next--image">
<img src="images/slider/slide2.jpg" alt="" />
</div>
<div class="app__bg__image previous--image">
<img src="images/slider/slide3.jpg" alt="" />
</div>
</div>
</div>
<svg class="icons" style="display: none;">
<symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
<polyline points='328 112 184 256 328 400'
style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
</symbol>
<symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
<polyline points='184 112 328 256 184 400'
style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
</symbol>
</svg>
<div class="support">
<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>
<!-- partial -->
<script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js'></script>
<script src="voyage.js"></script>
</body>
</html>