-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtundra.html
91 lines (90 loc) · 3.86 KB
/
tundra.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website design</title>
<link rel="stylesheet" href="tundra1.css">
</head>
<body>
<!--NAVBAR-->
<nav class="navbar">
<h1 class="logo">TUNDRA</h1>
<ul class="nav-links">
<li><a href="index.html" class="ctn">Home</a></li>
<li><a href="rainforest.html" class="ctn">Rainforest</a></li>
<li><a href="grassland.html" class="ctn">Grassland</a></li>
<li><a href="desert.html" class="ctn">Desert</a></li>
<li><a href="ocean.html" class="ctn">Ocean</a></li>
<li><a href="tundra.html" class="ctn">Tundra</a></nav></li>
</ul>
<img src="menu-btn.png" alt="" class="menu-btn">
<header>
<div class="header-content">
<h2>Underneath the white</h2>
<div class="line">
<h1>TUNDRA</h1>
<a href="gallery.html" class="ctn">Explore</a>
</div>
</div>
</header>
<!-- ==introductory photos-->
<section class="animals">
<div class="title">
<h1>WILDLIFE</h1>
<div class="line"></div></div>
</div>
<div class="row">
<div class="col">
<img src="animals/t.seal.jpg" alt="">
<h4>Seal</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem animi qui rerum numquam, sequi velit, doloremque harum natus facere tempore, expedita sapiente totam earum ad mollitia. Similique autem aliquid nulla!</p>
</div>
<div class="col">
<img src="animals/t.shhep.jpg" alt="">
<h4>Mountain Goat</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem animi qui rerum numquam, sequi velit, doloremque harum natus facere tempore, expedita sapiente totam earum ad mollitia. Similique autem aliquid nulla!</p>
</div>
</div>
</section>
<!--3rd section-->
<section class="nature">
<div class="nature-content">
<h1> Explore the White</h1>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, perspiciatis. Nam fugiat, libero eaque nemo nesciunt iure rem voluptas nisi blanditiis eos deserunt necessitatibus voluptatibus rerum odit beatae quaerat quisquam?</p>
<a href="gallery.html" class="ctn">Let's Go</a>
</div>
</section>
<!--column image gallery-->
<section class="plants">
<div class="row">
<div class="col content-col">
<h1>Flora and Fauna</h1>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ut voluptatum omnis pariatur doloribus tempora, repudiandae vitae accusamus facilis vero! Rerum dolor optio, corporis iste libero quisquam ea</p>
</div>
<div class="col image-col">
<div class="image-gallery">
<img src="./animals/t.polarbear.jpg" alt="">
<img src="./animals/t.penguins.jpg" alt="">
<img src="./animals/t.shhep.jpg" alt="">
<img src="./animals/t.snowfox.jpg" alt="">
</div>
</div>
</div>
</section>
<!--footer-->
<section class="footer">
<p>Nature's beauty lies in its infinite diversity, where every landscape, creature, and phenomenon unveils a unique masterpiece.</p>
</section>
<!--the things that makes menu button work-->
<script>
const menuBtn = document.querySelector('.menu-btn')
const navlinks = document.querySelector('.nav-links')
menuBtn.addEventListener('click', ()=>{
navlinks.classList.toggle('mobile-menu')
})
</script>
</body>
</html>