-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
141 lines (129 loc) · 6.71 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Playfair+Display&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!--
// Performance tips and what to
// 0. Resize
// 1. Render only when you need to
// 2. Check if objects are in the viewport, and dont render them
// 3. Break scroll parts into pieces
// 4. Antialias
// 5. Device Pixel Ratio
// 6. Debug performance
-->
</head>
<body>
<main>
<div data-scroll>
<div class="page">
<header>
<h1>Oceans</h1>
<img src="img/header.jpg" alt="">
</header>
<!-- BEGIN grid -->
<div class="grid">
<!-- BEGIN item -->
<a href="https://www.livescience.com/octopuses-punch-fish.html" class="item item_v">
<div class="item__image">
<img src="img/1.jpg" alt="">
<div class="item__meta">December 23, 2020</div>
</div>
<h2 class="item__title">Octopus punches fish in the head (just because it can)</h2>
<p>Octopuses sometimes partner with fish to hunt, but the partnership comes with risks (for the fish, that is).</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="https://www.livescience.com/balloon-like-comb-jelly-discovered-puerto-rico.html" class="item item_h">
<div class="item__image">
<img src="img/2.jpg" alt="">
<div class="item__meta">December 01, 2020</div>
</div>
<h2 class="item__title">Newfound marine blob looks like 'party balloon' with two strings, scientists say</h2>
<p>This is the first species NOAA scientists have ever discovered from video footage alone.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="https://www.livescience.com/largest-recorded-swarm-of-deep-sea-fish.html" class="item item_h">
<div class="item__image">
<img src="img/4.jpg" alt="">
<div class="item__meta">November 26, 2020</div>
</div>
<h2 class="item__title">Swarm of eels breaks record</h2>
<p>Before we start mining for precious metals in the darkness of the deep sea, we might try switching on the light first and observing our surroundings.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="https://www.livescience.com/mantis-shrimp-property-wars.html" class="item item_v">
<div class="item__image">
<img src="img/3.jpg" alt="">
<div class="item__meta">November 03, 2020</div>
</div>
<h2 class="item__title">Mantis shrimp punch down</h2>
<p>Home-stealers fought the hardest for smaller-than-ideal dens.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="https://www.livescience.com/megalodon-big-for-a-shark.html" class="item item_v">
<div class="item__image">
<img src="img/1.jpg" alt="">
<div class="item__meta">October 05, 2020</div>
</div>
<h2 class="item__title">Megalodon's hugeness</h2>
<p>Even among its extinct relatives, Megalodon was unequalled in length and mass.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="https://www.livescience.com/tiny-sunfish-larva.html" class="item item_h">
<div class="item__image">
<img src="img/2.jpg" alt="">
<div class="item__meta">July 27, 2020</div>
</div>
<h2 class="item__title">Adorable sunfish</h2>
<p>Sunfish in the Molidae family are among the biggest fish in the world.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="https://www.livescience.com/supergiant-isopod-newfound-species.html" class="item item_h">
<div class="item__image">
<img src="img/4.jpg" alt="">
<div class="item__meta">August 18, 2020</div>
</div>
<h2 class="item__title">Massive 'Darth Vader' sea bug</h2>
<p>The newly described species is one of the biggest isopods known to science.</p>
</a>
<!-- END item -->
<!-- BEGIN item -->
<a href="https://www.livescience.com/worlds-deepest-octopus.html" class="item item_v">
<div class="item__image">
<img src="img/3.jpg" alt="">
<div class="item__meta">June 01, 2020</div>
</div>
<h2 class="item__title">Scientists capture the world's deepest octopus</h2>
<p>The octopus was found miles beneath the ocean surface.</p>
</a>
<!-- END item -->
</div>
<!-- END grid -->
<!-- BEGIN footer -->
<footer class="footer">
<p>© all news from <a href="https://www.livescience.com/topics/ocean">LiveScience</a></p>
<p>
This page was made for <a href="https://www.awwwards.com/academy/course/merging-webgl-and-html-worlds">Merging WebGL and HTML course on Awwwards.com</a>
<br>Wish you a good day! =)</p>
</footer>
<!-- END footer -->
</div>
<!-- end page -->
</div>
<!-- end scroll -->
</main>
<div id="container"></div>
<script src="js/app.js"></script>
</body>
</html>