-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
249 lines (239 loc) · 12.4 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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home: Book Shelter</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poller+One&display=swap" rel="stylesheet">
<link rel="icon" href="./images/logo-favicon.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<!-- Top Nav -->
<div class="display-none display-md-show cus-grid cus-grid-cols-2 cus-bg-color px-3 cus-second-color py-1">
<p><a href="./pages/tickets.html">Get your Tickets now for October Classes!</a></p>
<div class="cus-flex cus-flex-jus-end">
<p>Connect On Socials: </p>
<div>
<a href="#"><i class="fab fa-facebook-square ml-3"></i></a>
<a href="#"><i class="fab fa-twitter-square ml-3"></i></a>
<a href="#"><i class="fab fa-linkedin ml-3"></i></a>
</div>
</div>
</div>
<!-- Main Nav -->
<nav class="navbar navbar-expand-md cus-main-nav">
<div class="cus-header-logo pt-1">
<a href="./index.html"><img src="./images/header-logo.jpg" alt="Logo"></a>
</div>
<div class="d-md-none navbar-toggler pr-0">
<i class="fas fa-bars" data-toggle="collapse" data-target="#collapsibleNavbar"></i>
</div>
<div class="collapse navbar-collapse cus-flex-jus-f-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item pt-3 pt-md-0"><a class="nav-link" href="./index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./pages/about.html">About</a></li>
<li class="nav-item"><a class="nav-link pr-md-0" href="./pages/tickets.html">Tickets</a></li>
</ul>
</div>
</nav>
</header>
<main class="mx-auto">
<!-- Banner Image -->
<section class="cus-big-bg-image w-100">
<div class="clearfix cus-big-bg-inner">
<div class="float-left">
<h1 class="mb-3">Welcome To Book Shelter</h1>
<p>The number one learning community in West Africa!</p>
</div>
<div class="d-none d-sm-none d-md-block cus-form-bg-color cus-intro-form float-right mt-3 mt-xl-5 px-3">
<h3 class="pt-3">Study at your own pace</h3>
<p class="my-2">We have the best collections of books from all over the world waiting to be explored.</p>
<p class="mb-2">You can start by simply searching through our collections today.</p>
<div class="form-group w-75 mx-auto">
<input type="text" class="form-control" placeholder="What are you learning today?">
</div>
</div>
</div>
</section>
<!-- Program Section -->
<section class="container-fluid text-center py-4 cus-program-section cus-second-color">
<h2 class="mb-3 py-3">Upcoming Program</h2>
<div class="cus-flex cus-flex-dr-column cus-flex-align-center cus-flex-dr-md-row">
<article class="cus-flex cus-flex-align-center cus-flex-dr-md-column cus-flex-jus-md-center px-md-3">
<h3 class="cus-color-red my-md-3">Onboarding</h3>
<p>We will give you all the details you need for next month classes.</p>
<div><i class="fas fa-chalkboard-teacher"></i></div>
</article>
<article class="cus-flex cus-flex-align-center cus-flex-dr-md-column cus-flex-jus-md-center px-md-3">
<h3 class="cus-color-red my-md-3">Connect</h3>
<p>Meet with developers all over the world that will be participating in the program.</p>
<div><i class="fas fa-globe-africa"></i></div>
</article>
<article class="cus-flex cus-flex-align-center cus-flex-dr-md-column cus-flex-jus-md-center px-md-3">
<h3 class="cus-color-red my-md-3">Mentorship</h3>
<p>Have a physical session with your assigned mentor before joining the camp.</p>
<div><i class="fas fa-user-plus"></i></div>
</article>
<article class="cus-flex cus-flex-align-center cus-flex-dr-md-column cus-flex-jus-md-center px-md-3">
<h3 class="cus-color-red my-md-3">Medicals</h3>
<p>Get a full medical report from our on site Doctors before joining the camp.</p>
<div><i class="fas fa-clinic-medical"></i></div>
</article>
<article class="cus-flex cus-flex-align-center cus-flex-dr-md-column cus-flex-jus-md-center px-md-3">
<h3 class="cus-color-red my-md-3">Welcome</h3>
<p>Head to your assigned camp ground for the welcome party.</p>
<div><i class="fas fa-glass-cheers"></i></div>
</article>
</div>
<p class="my-5 display-none display-md-show cus-display-in-block">
<a href="#">SEE PAST PROGRAMS</a>
</p>
<div class="text-center display-md-none mt-4 mb-3">
<button type="button" class="px-5 py-4">Join Book Shelter Global Summit</button>
</div>
</section>
<!-- Speakers Section -->
<section class="container-fluid mt-5 cus-speakers px-md-5">
<h2 class="text-center py-3">Top Speakers</h2>
<div class="row mt-4">
<div class="col-md-6">
<div class="cus-speakers-bg-img cus-speaker-img-1 cus-float-left mr-3">
<!-- Background Image -->
</div>
<div>
<h3 class="mb-2">Helen A.S. Popkin</h3>
<p class="mb-3 cus-color-red cus-text-italic">Deputy Editor at Forbes Online</p>
<p>Helen is an award-winning columnist and editor who understands the ever-evolving world of online
media—how
it drives viewers and creates interactive journalism that is informative and engaging. On her LinkedIn
profile, you may read that she played “a key role in doubling audience traffic and generating
approximately
730k page views daily for the Tech channel of Forbes.com by spotting and analyzing trends, seeing how
they
fit into the big picture, developing and launching several news verticals and establishing new areas of
consumer-facing tech coverage”.</p>
</div>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="cus-speakers-bg-img cus-speaker-img-2 cus-float-left mr-3">
<!-- Background Image -->
</div>
<div>
<h3 class="mb-2">Dan Seifert</h3>
<p class="mb-3 cus-color-red cus-text-italic">Deputy Editor at The Verge (USA)</p>
<p>Dan is a technology journalist with a specialty in mobile tech. He works for The Verge and is responsible
for covering news, editing posts, reviewing devices, producing video reviews, and communicating with the
reader base. Dan has a passion for technology and the work that he does and strives to provide the best
coverage and analysis to his readers. Keep in mind that he has been working for The Verge since 2012. This
means that product press releases will not surprise him. Prepare your message, throw in some data.
Statistics on the use of new technologies by young users will always be well seen. His most recent article
is titled “Ring adds privacy dashboard to app in response to security concerns”.</p>
</div>
</div>
</div>
<div class="row mt-4 display-sm-none">
<div class="col-md-6">
<div class="cus-speakers-bg-img cus-speaker-img-3 cus-float-left mr-3">
<!-- Background Image -->
</div>
<div>
<h3 class="mb-2">Matt Quinn</h3>
<p class="mb-3 cus-color-red cus-text-italic">Senior Tech Editor at CNN Business</p>
<p>Matt fills a critical role as CNN Business sharpens its focus on technology companies and their growing
influence on our culture, society, politics and our economy. He brings over 15 years of experience in
guiding business coverage in leadership positions at WSJ, Inc., and AdAge before his most recent role as
Tech Editor at Quartz.</p>
</div>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="cus-speakers-bg-img cus-speaker-img-4 cus-float-left mr-3">
<!-- Background Image -->
</div>
<div>
<h3 class="mb-2">Anthony Spadafora</h3>
<p class="mb-3 cus-color-red cus-text-italic">Freelance Journalist at TechRadar.com</p>
<p>He has been a tech enthusiast for as long as he can remember and has spent countless hours researching
and tinkering with PCs, mobile phones and game consoles. He has lived and taught in Spain, Argentina,
China, Washington DC and South Korea where he has spent the last seven years. His main topics of interest
include US tech giants’ dominance on the digital single market.</p>
</div>
</div>
</div>
<div class="text-center display-md-none mt-5 mb-3 cus-more-speakers">
<button type="button" class="cus-bg-white w-100 py-3">More <i class="fas fa-arrow-circle-down"></i></button>
</div>
</section>
</main>
<footer>
<!-- Partners -->
<section class="mt-5 cus-partners">
<div class="cus-bg-color cus-second-color">
<h2 class="text-center pb-3 pt-5">Partners</h2>
<div
class="cus-flex cus-flex-dr-column cus-flex-dr-md-row cus-flex-align-center cus-flex-jus-md-center py-4 cus-flexed-partners">
<div class="cus-flex">
<div><i class="fab fa-facebook"></i></div>
<div class="ml-5"><i class="fab fa-yahoo"></i></div>
</div>
<div class="cus-flex mt-3 mx-md-5">
<div><i class="fab fa-google-drive"></i></div>
<div class="ml-5"><i class="fab fa-google"></i></div>
</div>
<div class="cus-flex mt-3">
<div><i class="fab fa-twitter"></i></div>
<div class="ml-5"><i class="fab fa-linkedin-in"></i></div>
</div>
</div>
</div>
</section>
<!-- footer credits -->
<div class="mt-5 px-3">
<div class="cus-flex-md cus-flex-jus-md-center cus-flex-md-space cus-flex-md-space-even cus-cred-list">
<ul class="mt-2">
<li><a href="#">Teach on Book Shelter</a></li>
<li><a href="#">Get the app</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<ul class="mt-2">
<li><a href="#">Careers</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help and Support</a></li>
<li><a href="#">Affiliate</a></li>
</ul>
<ul class="mt-2">
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy policy and cookie policy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Featured courses</a></li>
</ul>
</div>
<div class="mt-3 cus-flex-md cus-flex-md-space cus-flex-align-center">
<div class="cus-footer-logo">
<a href="./index.html"><img src="./images/footer-logo.png" alt="Logo"></a>
</div>
<div class="mt-2 mt-md-0">© 2020 Book Shelter</div>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>