-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (109 loc) · 6.02 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seal World</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<section class="hero">
<video class="hero__background" autoplay muted loop>
<source src="video/pexels-zlatin-georgiev-5607740_2160p.mp4" type="video/mp4" >
</video>
<div class="hero__foreground">
<h1 class="hero__title"> Get Ready to Seal-abrate!</h1>
<p class="hero__text">
Dive in and Discover the Charm of These Aquatic Wonder
</p>
</div>
</section>
<section class="section">
<h2 class="section__title">Exploring the World of Seals</h2>
<img class="section__img" src="img/pexels-minsu-b-11932453.jpg" alt="">
<p class="section__text">
Hold onto your flippers, beacuse we're about to embark on a journey into the lives of seals! Thse adorable aquatic mammals are real stars of the ocean, and they've got some seal-iously cool tales to tell. From Artic cold to sunny shores, seals have mastered the art of enjoying life both above and below the waves. Let's splash into the deep waters os seal knowledge!
</p>
</section>
<section class="section">
<h2 class="section__title">Style and Moves</h2>
<img class="section__img-inline" src="img/pexels-sabine-freiberger-16788877.jpg" alt="">
<div class="section__text-inline">
<p>Seals are known for their elegant swimming skills, often rivalling those of top-tier Olympic swimmers. Their flippers, akin to well-trained athletes, effortlessly guide them through water with a mesmerizing grace.</p>
<p>
A fascinating aspect is their natural insulation: layers of blubber. This built-in warmth mechanism allows them to thrive in various water temperatures. Picture these creatures gliding beneath the water's surface - a seamless dance with currents, their streamlined bodies moving with fluidity and elegance. It's a testament to nature's adaptability and the awe-inspiring beauty of aquatic life.
</p>
</div>
</section>
<section id="hangouts" class="section">
<h2 class="section__title">Seal Hangouts</h2>
<img class="section__img" src="img/pexels-diana-4445229.jpg" alt="">
<p class="section__text">
Guess where you can find these fantastic creatures? From the icy polar
plunge zones to the sunny coastal chill spots, seals know how to pick
their pads. They love lounging on rocky shores, showing off their
sun-kissed fur, and occasionally doing the cha-cha-slide into the
water.
</p>
</section>
<section class="section">
<h2 class="section__title">Meet the Seal Crew</h2>
<div class="gallery">
<span class="gallery__img-wrapper">
<img class="gallery__img" src="img/harbor_seal.jpg" alt="" />
</span>
<span class="gallery__img-wrapper">
<img class="gallery__img" src="img/grey_seal.jpg" alt="" />
</span>
<span class="gallery__img-wrapper">
<img class="gallery__img" src="img/elephant_seal.jpg" alt="" />
</span>
<span class="gallery__img-wrapper">
<img class="gallery__img" src="img/leopard_seal.jpg" alt="" />
</span>
</div>
<p class="section__text">
Meet the VIPs (Very Important Pinnipeds)! We've got the harbor seal,
the grey seal, the elephant seal (yep, the one with the hilarious
schnoz), and the fierce leopard seal. It's like a star-studded cast of
the ocean! Each has their own quirks and skills, making them the true
icons of the underwater red carpet.
</p>
</section>
<section class="section">
<h2 class="section__title">Cool Facts About Seals</h2>
<img class="section__img-inline" src="img/pexels-daniel-lee-3187036.jpg" alt="" />
<div class="section__text-inline">
<p>
Dive into the world of seals, those charming sea creatures with a
flair for the extraordinary. From holding their breath like
underwater champs to using their whiskers for underwater GPS, these
marine wonders are quite the showstoppers.
</p>
<p>
Seals rock the art of breath-holding, making any professional diver
green with envy. And those whiskers? They're like nature's very own
GPS, guiding these underwater explorers through their aquatic
escapades.
</p>
<p>
For a deeper dive into seal awesomeness, visit
<a href="#">sealworld.com</a>
</p>
</div>
</section>
</main>
<footer class="footer">
Made with
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="#f64348" stroke="#f64348" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
by
<a href="https://github.com/V131R4" target="_blank">@V131R4</a>
</footer>
</body>
</html>