forked from KrishnaGambhir/Ocean-Oasis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (48 loc) · 4.77 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
<!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>Document</title>
<link href="./dist/output.css" rel="stylesheet">
</head>
<body>
<div class="flex min-h-screen items-center justify-center bg-neutral-800">
<div class="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
<div class="group relative cursor-pointer items-center justify-center overflow-hidden transition-shadow hover:shadow-xl hover:shadow-black/30">
<div class="h-96 w-72">
<img class="h-full w-full object-cover transition-transform duration-500 group-hover:rotate-3 group-hover:scale-125" src="https://mr-travl.com/img/BookArticles/804/gbrmp.jpg" alt="" />
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-black/70"></div>
<div class="absolute inset-0 flex translate-y-[60%] flex-col items-center justify-center px-9 text-center transition-all duration-500 group-hover:translate-y-0">
<h1 class="font-dmserif text-3xl font-bold text-white">Great Barrier Reef Marine Park, Australia</h1>
<p class="mb-3 text-lg italic text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">The Great Barrier Reef Marine Park is the largest coral reef system in the world and spans over 344,000 square kilometers. </p>
<button class="rounded-full bg-neutral-900 py-2 px-3.5 font-com text-sm capitalize text-white shadow shadow-black/60"><a href="https://en.wikipedia.org/wiki/Great_Barrier_Reef_Marine_Park">See More</a></button>
</div>
</div>
<div class="group relative cursor-pointer items-center justify-center overflow-hidden transition-shadow hover:shadow-xl hover:shadow-black/30">
<div class="h-96 w-72">
<img class="h-full w-full object-cover transition-transform duration-500 group-hover:rotate-3 group-hover:scale-125" src="https://oceanservice.noaa.gov/facts/marine-monument.jpg"
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-black/70"></div>
<div class="absolute inset-0 flex translate-y-[60%] flex-col items-center justify-center px-9 text-center transition-all duration-500 group-hover:translate-y-0">
<h1 class="font-dmserif text-3xl font-bold text-white">Papahānaumokuākea Marine National Monument, USA</h1>
<p class="mb-3 text-lg italic text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">Papahānaumokuākea Marine National Monument is located in the northwestern Hawaiian Islands and covers over 360,000 square kilometers.</p>
<button class="rounded-full bg-neutral-900 py-2 px-3.5 font-com text-sm capitalize text-white shadow shadow-black/60"><a href="https://www.papahanaumokuakea.gov">See More</a></button>
</div>
</div>
<div class="group relative cursor-pointer items-center justify-center overflow-hidden transition-shadow hover:shadow-xl hover:shadow-black/30">
<div class="h-96 w-72">
<img class="h-full w-full object-cover transition-transform duration-500 group-hover:rotate-3 group-hover:scale-125" src="https://www.galapagosislands.com/blog/wp-content/uploads/2018/08/hammerhead-shark-warm-season-beach-best-time-galapagos-sky-summer-vacation-travel-summer-winter-ecuador-galapagos-islands.jpg" alt="" />
</div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black group-hover:from-black/70 group-hover:via-black/60 group-hover:to-black/70"></div>
<div class="absolute inset-0 flex translate-y-[60%] flex-col items-center justify-center px-9 text-center transition-all duration-500 group-hover:translate-y-0">
<h1 class="font-dmserif text-3xl font-bold text-white">Galapagos Marine Reserve</h1>
<p class="mb-3 text-lg italic text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">The Galapagos Marine Reserve is a 133,000 square kilometer protected area surrounding the Galapagos Islands. It is home to a unique array of marine species, including sea turtles, sharks, and marine iguanas. .</p>
<button class="rounded-full bg-neutral-900 py-2 px-3.5 font-com text-sm capitalize text-white shadow shadow-black/60"><a href="https://education.nationalgeographic.org/resource/case-study-galapagos-marine-reserve/">See More</a></button>
</div>
</div>
</div>
</div>
</body>
</html>