-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathyellow-deck.html
191 lines (172 loc) · 10.8 KB
/
yellow-deck.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yellow deck | Pocket-tips</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.0/lottie.min.js"></script>
</head>
<body class="blue-body">
<div class="barraInAlto">
<a href="index.html">
<div class="animatedLogoContainer" id="animatedLogoContainer"></div>
</a>
<a href="#" class="menu-button">menu</a>
</div>
<div class="wrapper blue-section">
<div class="nome-categoria yellow-name">
<h1>ASSAPORA</h1>
</div>
<!-- Blue deck -->
<div class="fan-out">
<div class="navigationSpace">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="card yellow-card cover card-4 hidden-card">
<div class="blue-vector vector-wrapper">
<img src="res/yellow-vector.svg" alt="Yellow vector" class="blue-vector vector">
</div>
<div class="face-wrapper">
<div class="title-icon-wrapper">
<h1>La pasta icona di Bovisa</h1>
<img src="res/small-vectors/yellow-vector-small.svg" alt="" class="small-icon">
</div>
<h2>Centoventicinque</h2>
</div>
</div>
<div class="card yellow-card cover card-5 hidden-card retrocedi">
<div class="blue-vector vector-wrapper">
<img src="res/yellow-vector.svg" alt="Yellow vector" class="blue-vector vector">
</div>
<div class="face-wrapper">
<div class="title-icon-wrapper">
<h1>I ravioli<br>del secolo</h1>
<img src="res/small-vectors/yellow-vector-small.svg" alt="" class="small-icon">
</div>
<h2>Delicious</h2>
</div>
</div>
<div class="card yellow-card cover card-6 hidden-card cliccabile">
<div class="blue-vector vector-wrapper">
<img src="res/yellow-vector.svg" alt="Yellow vector" class="blue-vector vector">
</div>
<div class="face-wrapper">
<div class="title-icon-wrapper">
<h1>Dalla A alla F(ocaccia)</h1>
<img src="res/small-vectors/yellow-vector-small.svg" alt="" class="small-icon">
</div>
<h2>Focacceria Ale e Mary</h2>
</div>
</div>
<div class="card yellow-card cover card-0 selected-card cliccabile">
<div class="blue-vector vector-wrapper">
<img src="res/yellow-vector.svg" alt="Yellow vector" class="blue-vector vector">
</div>
<div class="face-wrapper">
<div class="title-icon-wrapper">
<h1>La Toscana<br>a La Masa</h1>
<img src="res/small-vectors/yellow-vector-small.svg" alt="" class="small-icon">
</div>
<h2>Ovosodo</h2>
</div>
</div>
<div class="card yellow-card cover card-1 hidden-card cliccabile">
<div class="blue-vector vector-wrapper">
<img src="res/yellow-vector.svg" alt="Yellow vector" class="blue-vector vector">
</div>
<div class="face-wrapper">
<div class="title-icon-wrapper">
<h1>I piatti più grossi di Leonardo</h1>
<img src="res/small-vectors/yellow-vector-small.svg" alt="" class="small-icon">
</div>
<h2>16round</h2>
</div>
</div>
<div class="card yellow-card cover card-2 hidden-card avanza">
<div class="blue-vector vector-wrapper">
<img src="res/yellow-vector.svg" alt="Yellow vector" class="blue-vector vector">
</div>
<div class="face-wrapper">
<div class="title-icon-wrapper">
<h1>L'Iginio Massari<br>di Piola</h1>
<img src="res/small-vectors/yellow-vector-small.svg" alt="" class="small-icon">
</div>
<h2>I 4 Mastri</h2>
</div>
</div>
<div class="card yellow-card cover card-3 hidden-card">
<div class="blue-vector vector-wrapper">
<img src="res/yellow-vector.svg" alt="Yellow vector" class="blue-vector vector">
</div>
<div class="face-wrapper">
<div class="title-icon-wrapper">
<h1>L'aperitivo post lezione</h1>
<img src="res/small-vectors/yellow-vector-small.svg" alt="" class="small-icon">
</div>
<h2>New Brand Cafè</h2>
</div>
</div>
</div>
</div>
<!-- Arrow Buttons for navigation -->
<div class="buttons">
<!-- <= <= Button left <= <= -->
<div class="button-left">
<svg width="38" height="24" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg">
<path d="M36.418 13.5C37.2464 13.5 37.918 12.8284 37.918 12C37.918 11.1716 37.2464 10.5 36.418 10.5L36.418 13.5ZM0.94064 10.9393C0.354855 11.5251 0.354855 12.4749 0.940639 13.0607L10.4866 22.6066C11.0724 23.1924 12.0221 23.1924 12.6079 22.6066C13.1937 22.0208 13.1937 21.0711 12.6079 20.4853L4.12262 12L12.6079 3.51472C13.1937 2.92893 13.1937 1.97918 12.6079 1.3934C12.0221 0.807609 11.0724 0.807609 10.4866 1.3934L0.94064 10.9393ZM36.418 10.5L2.0013 10.5L2.0013 13.5L36.418 13.5L36.418 10.5Z"/>
<path d="M36.418 13.5C37.2464 13.5 37.918 12.8284 37.918 12C37.918 11.1716 37.2464 10.5 36.418 10.5L36.418 13.5ZM0.94064 10.9393C0.354855 11.5251 0.354855 12.4749 0.940639 13.0607L10.4866 22.6066C11.0724 23.1924 12.0221 23.1924 12.6079 22.6066C13.1937 22.0208 13.1937 21.0711 12.6079 20.4853L4.12262 12L12.6079 3.51472C13.1937 2.92893 13.1937 1.97918 12.6079 1.3934C12.0221 0.807609 11.0724 0.807609 10.4866 1.3934L0.94064 10.9393ZM36.418 10.5L2.0013 10.5L2.0013 13.5L36.418 13.5L36.418 10.5Z"/>
</svg>
</div>
<!-- => => Button right => => -->
<div class="button-right">
<svg width="38" height="24" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10.5C1.17157 10.5 0.5 11.1716 0.5 12C0.5 12.8284 1.17157 13.5 2 13.5V10.5ZM37.4773 13.0607C38.0631 12.4749 38.0631 11.5251 37.4773 10.9393L27.9314 1.3934C27.3456 0.807611 26.3959 0.807611 25.8101 1.3934C25.2243 1.97919 25.2243 2.92893 25.8101 3.51472L34.2953 12L25.8101 20.4853C25.2243 21.0711 25.2243 22.0208 25.8101 22.6066C26.3959 23.1924 27.3456 23.1924 27.9314 22.6066L37.4773 13.0607ZM2 13.5H36.4167V10.5H2V13.5Z"/>
<path d="M2 10.5C1.17157 10.5 0.5 11.1716 0.5 12C0.5 12.8284 1.17157 13.5 2 13.5V10.5ZM37.4773 13.0607C38.0631 12.4749 38.0631 11.5251 37.4773 10.9393L27.9314 1.3934C27.3456 0.807611 26.3959 0.807611 25.8101 1.3934C25.2243 1.97919 25.2243 2.92893 25.8101 3.51472L34.2953 12L25.8101 20.4853C25.2243 21.0711 25.2243 22.0208 25.8101 22.6066C26.3959 23.1924 27.3456 23.1924 27.9314 22.6066L37.4773 13.0607ZM2 13.5H36.4167V10.5H2V13.5Z"/>
</svg>
</div>
</div>
<!-- Cursor -->
<div id="cursor" class="cursor">
<img src="res/pointers/pointer-arrow-right.svg" class="cursor-right yellow-cursor" alt="">
<img src="res/pointers/pointer-arrow-left.svg" class="cursor-left yellow-cursor" alt="">
<div class="cursor-cat yellow-cursor">Assapora</div>
</div>
<!-- Full screen menu -->
<div class="full-screen-menu full-screen-menu-hidden">
<div class="categories-list">
<a href="blue-deck.html">Scopri</a>
<a href="#">Assapora</a>
<a href="#">Esplora</a>
<a href="#">Crea</a>
<a href="green-deck.html">Risparmia</a>
</div>
<div class="menu-footer">
<a href="instragram.com/_pocket_tips">Instagram</a>
<p>Copyright 2023 PockeTips</p>
</div>
</div>
<!-- GREENSOCK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Flip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Observer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/EaselPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/MotionPathPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/PixiPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/CustomEase.min.js"></script>
<script src="deck-javascript-v2.js"></script>
<!--
CustomBounce.min.js, and CustomWiggle.min.js are Club GreenSock perks which are not available on a CDN. Download them from your GreenSock account and include them locally like this:
<script src="/[YOUR_DIRECTORY]/CustomBounce.min.js"></script>
<script src="/[YOUR_DIRECTORY]/CustomWiggle.min.js"></script>
Sign up at https://greensock.com/club or try them for free on CodePen or CodeSandbox
-->
</body>
</html>