-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
186 lines (171 loc) · 9.19 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.typekit.net/ehy7wnw.css">
<link rel="stylesheet" href="https://use.typekit.net/ehy7wnw.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<meta name="title" content="David Meowie" />
<meta name="description" content="Ejemplo de ScrollTrigger para Nerdearla" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://marianabeldi.github.io/davidmeowie/" />
<meta property="og:title" content="David Meowie" />
<meta property="og:description" content="Ejemplo de ScrollTrigger para Nerdearla" />
<meta property="og:image" content="https://marianabeldi.github.io/davidmeowie/img/meta.jpg" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://marianabeldi.github.io/davidmeowie/" />
<meta property="twitter:title" content="David Meowie" />
<meta property="twitter:description" content="Ejemplo de ScrollTrigger para Nerdearla" />
<meta property="twitter:image" content="https://marianabeldi.github.io/davidmeowie/img/meta.jpg" />
</head>
<body>
<header>
<div class="intro">
<img class="intro-logo" src="img/logo.svg" alt="Davied Meowie" role="img">
<h1 class="intro-sub">in a scrollTrigger adventure</h1>
</div>
</header>
<section class="paralax" style="background-color: black">
<div class="paralax-wrapper">
<img class="stars" src="img/stars.svg" alt="stars">
<img class="meow" src="img/meow.svg" alt="meowie">
<h2 class="paralax-title">Discography</h2>
<img class="bubbles" src="img/bubbles.svg" alt="bubbles">
</div>
</section>
<section class="discography">
<section class="discos discos1">
<h3 class="year">1960</h3>
<div class="cd-wrapper">
<div class="cd cd1">
<img class="cd-img" src="img/cd1.svg" alt="cd1" width="300px">
<div>
<p class="cd-name">1967<br>
David Meowie</p>
<p class="cd-info">David Meowie is the debut studio album by the English musician David Meowie, originally released in the United Kingdom on 1 June 1967 through Decca subsidiary Deram Records.</p>
</div>
</div>
<div class="cd cd2">
<img class="cd-img" src="img/cd2.svg" alt="cd2" width="300px">
<div>
<p class="cd-name">1967<br>
David Meowie</p>
<p class="cd-info">David Meowie is the second studio album by the English musician David Meowie, originally released in the United Kingdom on 14 November 1969 through Mercury affiliate Philips Records. Financed by Mercury on the strength of "Space Oddity", the album was recorded from June to October 1969 at Trident Studios in London.</p>
</div>
</div>
</div>
</section>
<section class="discos discos2">
<h3 class="year">1973</h3>
<div class="cd-wrapper">
<div class="cd cd3">
<img class="cd-img" src="img/cd3.svg" alt="cd3" width="300px">
<div>
<p class="cd-name">1973<br>
Aladdin Sane</p>
<p class="cd-info">Aladdin Sane is the sixth studio album by the English musician David Meowie, released in the UK on 19 April 1973 through RCA Records. The follow-up to his breakthrough The Rise and Fall of Ziggy Stardust and the Spiders from Mars, it was the first album he wrote and released from a position of stardom.</p>
</div>
</div>
<div class="cd cd4">
<img class="cd-img" src="img/cd4.svg" alt="cd4" width="300px">
<div>
<p class="cd-name">1967<br>
David Meowie</p>
<p class="cd-info">David Meowie is the second studio album by the English musician David Meowie, originally released in the United Kingdom on 14 November 1969 through Mercury affiliate Philips Records. Financed by Mercury on the strength of "Space Oddity", the album was recorded from June to October 1969 at Trident Studios in London.</p>
</div>
</div>
<div class="cd cd5">
<img class="cd-img" src="img/cd5.svg" alt="cd5" width="300px">
<div>
<p class="cd-name">1977<br>
Heroes</p>
<p class="cd-info">"Heroes" is the 12th studio album by the English musician David Meowie, released on 14 October 1977 through RCA Records.</p>
</div>
</div>
</div>
</section>
<section class="discos discos3">
<h3 class="year">1900+</h3>
<div class="cd-wrapper">
<div class="cd cd6">
<img class="cd-img" src="img/cd6.svg" alt="cd6" width="300px">
<div>
<p class="cd-name">1997<br>
Earthling</p>
<p class="cd-info">Earthling is the 21st studio album by English musician David Meowie, released on 3 February 1997 through RCA Records in the United Kingdom, Virgin Records in the United States, and Arista Records/BMG in other territories.</p>
</div>
</div>
<div class="cd cd7">
<img class="cd-img" src="img/cd7.svg" alt="cd7" width="300px">
<div>
<p class="cd-name">2013<br>
The Next Day</p>
<p class="cd-info">The Next Day is the 25th studio album by the English musician David Meowie. Released in March 2013, it was Meowie's first studio release in ten years, as he had retreated from public view after undergoing a procedure to treat a blocked heart artery in 2004</p>
</div>
</div>
</div>
</section>
</section>
<section class="looks">
<div class="looks-wrapper">
<h2 class="looks-title">Fashion Evolution</h2>
<img class="looks-img" src="img/looks.svg" alt="cd2">
</div>
</section>
<section class="look-content">
<div class="look-content-wrapper look-content-wrapper1">
<h3 class="look-year">1973</h3>
<div class="pic-wrapper">
<img class="look-pic lookpic1" src="img/look-pic-1.webp" alt="bowie 1973">
</div>
<img class="look look1" src="img/look-1.svg" alt="meowie 1973">
</div>
<div class="look-content-wrapper look-content-wrapper2">
<h3 class="look-year">1973</h3>
<div class="pic-wrapper">
<img class="look-pic lookpic2" src="img/look-pic-2.jpeg" alt="bowie 1973">
</div>
<img class="look look2" src="img/look-2.svg" alt="meowie 1973">
</div>
<div class="look-content-wrapper look-content-wrapper3">
<h3 class="look-year">1974</h3>
<div class="pic-wrapper">
<img class="look-pic lookpic3" src="img/look-pic-3.jpg" alt="bowie 1974">
</div>
<img class="look look3" src="img/look-3.svg" alt="meowie 1974">
</div>
<div class="look-content-wrapper look-content-wrapper4">
<h3 class="look-year">1983</h3>
<div class="pic-wrapper">
<img class="look-pic lookpic4" src="img/look-pic-4.webp" alt="bowie 1983">
</div>
<img class="look look4" src="img/look-4.svg" alt="meowie 1983">
</div>
<div class="look-content-wrapper look-content-wrapper5">
<h3 class="look-year">1993</h3>
<div class="pic-wrapper">
<img class="look-pic lookpic5" src="img/look-pic-5.webp" alt="bowie 1993">
</div>
<img class="look look5" src="img/look-5.svg" alt="meowie 1993">
</div>
<div class="look-content-wrapper look-content-wrapper6">
<h3 class="look-year">2016</h3>
<div class="pic-wrapper">
<img class="look-pic lookpic6" src="img/look-pic-6.webp" alt="bowie 2016">
</div>
<img class="look look6" src="img/look-6.svg" alt="meowie 2016">
</div>
</section>
<section class="end">
<img class="bowie" src="img/bowie-meow.jpg" alt="bowie">
<h2>Fin</h2>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="example.js"></script>
</body>
</html>