-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (101 loc) · 5.69 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BIG-5 Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="header-left">
<div class="logo">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.7273 44C33.9891 44 31.6043 39.8386 30.3636 33.69C29.123 39.8386 26.7382 44 24 44C21.2618 44 18.877 39.8386 17.6364 33.69C16.3957 39.8386 14.0109 44 11.2727 44C7.25611 44 4 35.0457 4 24C4 12.9543 7.25611 4 11.2727 4C14.0109 4 16.3957 8.16144 17.6364 14.31C18.877 8.16144 21.2618 4 24 4C26.7382 4 29.123 8.16144 30.3636 14.31C31.6043 8.16144 33.9891 4 36.7273 4C40.7439 4 44 12.9543 44 24C44 35.0457 40.7439 44 36.7273 44Z" fill="currentColor"></path>
</svg>
</div>
<div class="header-title"><a href="/Home-Page-test/index.html">BIG-5 Safari</a></div>
</div>
<div class="header-right">
<div class="nav-links">
<a href="plinks/about.html">About</a>
<a href="plinks/tours.html">Tours</a>
<a href="plinks/contact.html">Contact</a>
</div>
<div class="buttons">
<button class="search-button">
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
<path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
</svg>
</button>
<button class="user-button">
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256">
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"></path>
</svg>
</button>
</div>
<div class="profile-pic"></div>
</div>
</header>
<div class="top-section">
<div class="container">
<h1 class="top-header">Discover Africa's Majestic Big 5</h1>
<p class="top-text">They embody the essence of Africa's untamed wilderness, each with its unique allure and majesty. From the regal lion's commanding roar to the elusive leopard's stealth, these iconic creatures captivate the spirit of the wild.</p>
<button class="sign-up-button">Sign up</button>
</div>
<div class="image-lion">
<img class="rounded-image" src="images/lion.jpg" alt="lion image" width="505" height="250">
</div>
</div>
<div class="section-title">
<h5>The Grandeur of Africa's Wilderness</h5>
</div>
<div class="content-mid">
<div class="item">
<img class="rounded-images" src="images/rhino.jpg" alt="rhino image" width="150" height="150">
<div class="text-wrapper">
<div class="text">Guardians of the African Plains, embodying a blend of raw power and majestic beauty. These magnificent creatures are a testament to resilience and strength.</div>
</div>
</div>
<div class="item">
<img class="rounded-images" src="images/elephant.jpg" alt="elephant image" width="150" height="150">
<div class="text-wrapper">
<div class="text">Enormous and elegant, these gentle giants roam the savannas with grace and wisdom. Their deep family bonds and intelligence make them a true marvel of nature.</div>
</div>
</div>
<div class="item">
<img class="rounded-images" src="images/leopard.jpg" alt="leopard image" width="150" height="150">
<div class="text-wrapper">
<div class="text">Leopards are the epitome of agility and camouflage. Their silent, nighttime hunts showcase their unmatched prowess in the wild, making them one of nature's most elusive and fascinating creatures.</div>
</div>
</div>
<div class="item">
<img class="rounded-images" src="images/buffalo.jpg" alt="buffalo image" width="150" height="150">
<div class="text-wrapper">
<div class="text">Unyielding and fierce, these herd protectors stand as a symbol of resilience and power. Their formidable presence commands respect and awe across the grasslands.</div>
</div>
</div>
</div>
<div class="quote-section">
<p class="quote-text">
“There is an undeniable magic in the vast landscapes and diverse wildlife of Africa.
It is a continent that beckons with adventure and the promise of unforgettable experiences.”
</p>
<p class="quote-author">- Prince Philip, Duke of Edinburgh</p>
</div>
<div class="last-section">
<div class="cta-container">
<div class="text-container">
<h3> Unlock Africa's Wild Wonders Today!</h3>
<p>Sign up by clicking the button over there</p>
</div>
<div>
<button class="cta-button">Sign up</button>
</div>
</div>
</div>
<div class="footer">
<h4 class="footer-txt">Copy Right The Odin Project 2024</h4>
</div>
</body>
</html>