-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (180 loc) · 7 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Travel and Workshop">
<meta name="keywords" content="Travel, Workshop, Vacation">
<meta name="author" content="Christian Onoh">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<script src="https://kit.fontawesome.com/2eac604974.js" crossorigin="anonymous"></script>
<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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,400;1,700&display=swap"
rel="stylesheet">
<title>Travel & Workshop</title>
</head>
<body>
<header id="header">
<div class="secondary-nav">
<ul>
<li class="sec-nav-item">
<a href="#" class="sec-nav-link"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="sec-nav-item">
<a href="#" class="sec-nav-link"><i class="fa fa-twitter" aria-hidden="true"></i></i></a>
</li>
<li class="sec-nav-item">
<a href="#" class="sec-nav-link">English</a>
</li>
<li class="sec-nav-item">
<a href="#" class="sec-nav-link">My Page</a>
</li>
<li class="sec-nav-item">
<a href="#" class="sec-nav-link">Logout</a>
</li>
</ul>
</div>
<nav>
<div class="nav">
<div class="open-menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div id="logo" class="display-flex-row">
<img src="images/logo.png" alt="logo">
</div>
<ul class="menu-items">
<li class="close-menu-icon">
<i class="fa fa-times" aria-hidden="true"></i>
</li>
<li class="nav-item">
<a href="pages/about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#main-program" class="nav-link">Program</a>
</li>
<li class="nav-item">
<a href="#speakers" class="nav-link">Speakers</a>
</li>
<li class="nav-item">
<a href="#partners" class="nav-link">Partners</a>
</li>
<li>
<button type="submit" class="nav-btn">T&W Campaign</button>
</li>
</ul>
</div>
</nav>
</header>
<main>
<section id="intro">
<div class="container">
<h2 class="section-header">Hello! Exploring world</h2>
<h1>The Afro Safari Expedition 2023</h1>
<p class="intro-note">
Embark on a journey of a lifetime with The Afro Safari Expedition 2023! <br> Explore the wonders of Afro
culture through travel, fashion, food, workshops, and unforgettable safari experiences. <br>Join us for an
adventure you'll never forget.
</p>
<p class="intro-info">
<span class="date">2023.12.10(SUN) ~ 20(WED)</span> <br>
@ Lagos, Cape Town and Kigali.
</p>
</div>
</section>
<!-- Main Program -->
<section id="main-program">
<h2 class="section-header margin-top">Main Program</h2>
<hr class="hr-section">
<div class="content-container">
<div class="program">
<div class="program-icon">
<i class="fa-solid fa-chalkboard-user"></i>
</div>
<h3 class="program-header">Workshops</h3>
<p class="program-note">Participate in interactive workshops focused on Afro dance, music, art, fashion, and
cuisine, led by experienced cultural experts.
</p>
</div>
<div class="program">
<div class="program-icon">
<i class="fa-regular fa-compass"></i>
</div>
<h3 class="program-header">Guided Tours</h3>
<p class="program-note">Explore the diverse landscapes and wildlife of Africa with guided tours to national
parks, reserves, and historic sites. See the "big five" game animals
</p>
</div>
<div class="program">
<div class="program-icon">
<i class="fa-brands fa-connectdevelop"></i>
</div>
<h3 class="program-header">Network</h3>
<p class="program-note">Connect with fellow adventurers, and industry professionals from around the world,
making valuable connections and new relationships.
</p>
</div>
<div class="program">
<div class="program-icon">
<i class="fa-solid fa-gifts"></i>
</div>
<h3 class="program-header">Gift Bags</h3>
<p class="program-note">Attendees will receive gift bags filled with a variety of handcrafted souvenirs,
including Ankara accessories, postcards, jewelry and more.
</p>
</div>
<div class="program">
<div class="program-icon">
<i class="fa-solid fa-champagne-glasses"></i>
</div>
<h3 class="program-header">Closing Gala</h3>
<p class="program-note">The event will culminate with a gala dinner and celebration, featuring live music,
dance performances, and a showcase of Afro-inspired fashion and art.
</p>
</div>
</div>
<button type="submit" class="signup">Sign up today</button>
</section>
<!-- Speakers -->
<section id="speakers">
<h2 class="section-header margin-top">Featured Speakers</h2>
<hr class="hr-section">
<div class="content-container" id="speakers-container">
</div>
<button type="button" class="see-more-btn">SEE MORE <span> <i class="fa-solid fa-chevron-down"></i></span></button>
</section>
<!-- Partners -->
<section class="margin-top" id="partners">
<h2 class="section-header">Partners</h2>
<hr class="hr-section">
<div class="content-container ">
<div class="slide">
<img src="images/uubo_logo.png" alt="Udo Udoma & Belo-Osagie">
<img src="images/nr_logo.png" alt="Ngworocks">
<img src="images/airbnb_logo.png" alt="Airbnb">
<img src="images/winafric_logo.png" alt="Winafric">
<img src="images/ibom_air_logo.png" alt="Ibom Air">
</div>
<div class="slide">
<img src="images/uubo_logo.png" alt="Udo Udoma & Belo-Osagie">
<img src="images/nr_logo.png" alt="Ngworocks">
<img src="images/airbnb_logo.png" alt="Airbnb">
<img src="images/winafric_logo.png" alt="Winafric">
<img src="images/ibom_air_logo.png" alt="Ibom Air">
</div>
</div>
</section>
</main>
<footer>
<div class="content-container">
<div class="footer-logo">
<img src="images/logo_grey.png" alt="Travel meets Workshop logo">
</div>
<p class="footer-note">Copyright © 2023 Travel & Workshop. All rights reserved.</p>
</div>
</footer>
<script src="script/script.js"></script>
</body>
</html>