-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (116 loc) · 5.11 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
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<script src="script/index.js" defer></script>
<title>3d scroll Animation</title>
</head>
<body>
<main class="container">
<section class="galerry">
<div class="frame">
<div class="frame__content">
<h2>Beautiful World</h2>
</div>
</div>
<div class="frame">
<div class="frame__content">
<div class="frame__media frame__media_left" style="background-image: url(./images/1.jpg);"></div>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame__media frame__media_right" src="./media/video_optimized.mp4" autoplay muted loop
playsinline></video>
</div>
</div>
<div class="frame">
<div class="frame__content text-right">
<h3>Pure Planet</h3>
<p>I'm Dreaming of a Green Planet. Just like the one I used to know.
Where the streams are flowing and the coral's growing
In oceans that still have some fish
I'm dreaming of a Green planet, with every Prius that I drive
Arctic winters, the Polar Bear Alive! And with temperatures below 125.
I'm dreaming of a Green Planet. Just like the one I used to have.
Where the birds are singing and seasons bringing
A place for every living thing.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<div class="frame__media frame__media_left" style="background-image: url(./images/2.jpg);"></div>
</div>
</div>
<div class="frame"></div>
<div class="frame frame_bg">
<div class="frame__content">
<div class="frame__media frame__media_right" style="background-image: url(./images/3.jpg);"></div>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-left">
<h3>Ask the mountains</h3>
<p>Ask the mountains
Springs and fountains
Why couldn't this go on?
Couldn't our happiness go on?
Ask the sun that lightens up the sky
When the night gives in, to tell you why
</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<div class="frame__media frame__media_right" style="background-image: url(./images/4.jpg);"></div>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame__media frame__media_left" src="./media/video_optimized.mp4" autoplay muted loop
playsinline></video>
</div>
</div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame frame_bg">
<div class="frame__content">
<div class="frame__media frame__media_right" style="background-image: url(./images/5.jpg);"></div>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame__media" src="./media/video_optimized.mp4" autoplay muted loop
playsinline></video>
</div>
</div>
<div class="frame">
<div class="frame__content">
<div class="frame__media frame__media_left" style="background-image: url(./images/1.jpg);"></div>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content text-right">
<h3>One man history</h3>
<p>It ain't rained in four months
One cigarette spark will burn the whole town up
That 'ole well is plum dry
The city put a limit on the water you can buy
We don't mind 'cause 'round here
We save water and drink beer</p>
</div>
</div>
<div class="frame">
<div class="frame__content">
<p>© Save water, Drink beer</p>
</div>
</div>
</section>
</main>
<img class="sound-button paused" src="images/sound.gif" alt="sound button">
<audio src="./media/ambient.mp3" class="audio" loop></audio>
</body>
</html>