forked from eliakimceleste/Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
276 lines (261 loc) · 11.6 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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="index.css" rel="stylesheet" />
<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=Playwrite+GB+S:ital@0;1&family=Quicksand:[email protected]&display=swap" rel="stylesheet">
<title>
BenRover-24 : Cars4Mars
</title>
</head>
<body>
<header>
<nav>
<ul class="sidebar">
<li onClick="hideSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="45px"
viewBox="0 -960 960 960" width="45px" fill="#5f6368">
<path
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
</svg></a></li>
<li><a href="#AboutProject">Project</a></li>
<li><a href="#Goals">Goals & Objectives</a></li>
<li><a href="#About the Team">Our Team</a></li>
<li><a href="sponsor.html">Sponsor Us</a></li>
<hr />
<ul class="sidebar-media">
<li><a href="https://www.linkedin.com/" target="_blank" id="linkedin"><img
src="ressources\images\LinkedIn_logo_initials.png" alt="Linkedin"></a></li>
<li><a href="https://www.instagram.com/" target="_blank" id="instagram"><img
src="ressources\images\Instagram_icon.png.webp" alt="Instagram"></a></li>
<li><a href="https://www.github.com/" target="_blank" id="github"><img src="ressources\images\Github.png"
alt="Github"></a></li>
</ul>
</ul>
<ul>
<li><a class="navbar-brand" href="index.html">
<h1>BenRover-24</h1>
</a></li>
<li class="hideOnMobile"><a href="#AboutProject">Project</a></li>
<li class="hideOnMobile"><a href="#Goals">Goals & Objectives</a></li>
<li class="hideOnMobile"><a href="#About the Team">Our Team</a></li>
<li class="hideOnMobile"><a href="sponsor.html">Sponsor Us</a></li>
<li class="menu-button" onclick="showSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg"
height="45px" viewBox="0 -960 960 960" width="45px" fill="#5f6368">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
</svg></a></li>
</ul>
</nav>
<script>
function showSidebar() {
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'flex'
}
function hideSidebar() {
const sidebar = document.querySelector('.sidebar');
sidebar.style.display = 'none'
}
</script>
<div class="hero">
<div class="hero-text">
<h1> Rover for Martian environment mission</h1>
<h3>A Rover design & build in Benin </h3>
<button type="button"><a class="btn btn-danger" href="#AboutProject" role="button">Discover</a></button>
</div>
</div>
</header>
<div class="main">
<div class="container-fluid">
<div class="AboutProject" id="AboutProject">
<h2>About the project</h2>
<div class="ProjecContent">
<img src="ressources/images/mars-glace-carte-canonqie.jpg" alt="Hero - Mars " />
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars " />
<p>
This project has been built by a team of young Benin Engineers and Students as part of AFRICAN ROVER
CHALLENGE. <br> The challenge is to design and build a Mars rover prototype. This is not expected to be a
space-grade machine and does not need to be ready to operate in actual space or Mars conditions.
It's a small, mobile robot, controlled wirelessly with an independent power source.
</p>
</div>
</div>
<div class="Goals" id="Goals">
<h2> Goals & Objectives </h2>
<div class="GoalsContent">
<div>
<img src="ressources/images/Cars4Mars-Home-1536x864.png" alt="Hero - Mars " />
<p>
The competition is a continuous mentoring effort which is intended to educate the next generation of
multidisciplinary engineers and others, boost innovation in research and business, and popularise STEM
(Science, Technology, Engineering and Mathematics) advancements.
</p>
</div>
<div class="GoalsDescription">
<p>
The excitement in participating in this competition will enable students to learn and
use their creativity building robots and opportunity to interact on many levels with others.
</p>
<img src="ressources\images\black-teacher-using-robot-arm-explaining-engineering-students.jpg" alt="Hero - Mars " />
<p>
Inspiring African youth to be part of the Robotics, Space Technologies, and AI rush to conquer the world
and outer space.
</p>
</div>
</div>
<div class="AboutMars">
<h2>About the Planet</h2>
<div class="mars-image">
<div>
<img src="ressources/images/MarsImageForNews_12655_1639495090990810.webp" alt="Mars">
</div>
<div class="mars-text">
<h4>
MARS
</h4>
<br />
<p>
At an average distance of 140 million miles, Mars is one of Earth's closest habitable neighbors.
Mars is about half again as far from the Sun as Earth is, so it still has decent sunlight.
It is a little cold, but we can warm it up.
Its atmosphere is primarily CO2 with some nitrogen and argon and a few other trace elements, which means
that we can grow plants on Mars just by compressing the atmosphere.
Gravity on Mars is about 38% of that of Earth, so you would be able to lift heavy things and bound
around. Furthermore, the day is remarkably close to that of Earth.
</p>
<table class="data animate">
<tbody>
<tr>
<td>Diameter</td>
<td>6,791 km <span>/ 4,220 mi</span></td>
</tr>
<tr>
<td>Day Length</td>
<td>24 hrs 37 min</td>
</tr>
<tr>
<td>Force of Gravity</td>
<td>38% of Earth</td>
</tr>
<tr>
<td>Avg Distance from Earth</td>
<td>225Mkm <span>/ 140Mmi</span></td>
</tr>
<tr>
<td>Age</td>
<td>4.5 billion years</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="AboutTeam" id="AboutTeam">
<h2> Our Team </h2>
<p class="TeamDescription">
A Multidisciplianry, skillful and passionate team from Electronics, to IT, Mechanics and Space
Science
</p>
<div id="team-container" class="team-container"></div>
</div>
<div class="Sponsor" id="Sponsor">
<h2>Sponsor Us</h2>
<div class="SponsorContent">
<img src="ressources/images/Mars-rover-competition.jpg" alt="Hero - Mars ">
<div class="CallSponsors">
<p>
Our BenRover-24 project represents not only an incredible opportunity for our team of passionate students to put our engineering and science skills into practice, but also a platform for demonstrating our passion for technology and innovation.
By becoming our sponsor, you can help us turn this vision into reality and encourage innovation.
Be part of this exciting adventure and leave your mark on Benin's educational and scientific landscape.
</p>
<br />
<button type="button" class="button3"><a href="sponsor.html">Sponsor Us</a></button>
</div>
</div>
<p class="Description">
Join us, and together we'll drive science and innovation forward. Thank you for your support. </p>
<div class="OurSponsors">
<h3>
Our Sponsors & Donors
</h3>
<div class="SponsorContainer">
<div class="sponsor-image">
<img src="ressources/images/Tekbot.jpg" alt="Tekbot">
</div>
<div class="sponsor-image">
<img src="ressources/images/Sèmè_City.webp" alt="Linkedin">
</div>
<div class="sponsor-image">
<img src="ressources/images/SCOP.jpg" alt="Linkedin">
</div>
<div class="sponsor-image">
<img src="ressources/images/Tekbot.jpg" alt="Tekbot">
</div>
</div>
</div>
</div>
<div class="Media">
<h2>Medias</h2>
<div class="RefDoc">
<p>Our Open Source Technical Documentation</p>
<button type="button" class="button3"><a href="https://benrover-24.github.io/Docs/" target="_blank">Explore</a></button>
</div>
<div class="Medias">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
<img src="ressources\images\MjAyMTAyMDJmNTdjNGY4NmJlZTQ2Y2U1MmExNzJmNjQ3ZmYzMzA.avif" alt="Hero - Mars ">
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="Section1">
<h1> BenRover-24</h1>
<h4>
Powered by Tekbot Robotics
</h4>
<h4 class="Contact">
Contact
</h5>
<p>
Cotonou, en face de l'Ecole Montaigne </p>
<a href="mailto:">[email protected] </a>
<div class="FooterSocial">
<a href="https://bj.linkedin.com/company/tekbot-robotics" target="_blank"><img
src="ressources\images\LinkedIn_logo_initials.png" alt="Linkedin"></a>
<a href="https://www.instagram.com/tekbot_/" target="_blank"><img
src="ressources\images\Instagram_icon.png.webp" alt="Instagram"></a>
<a href="https://benrover-24.github.io/Docs/" target="_blank"> <img src="ressources\images\Github.png"
alt="Github"></a>
</div>
</div>
<div class="Section2">
<br />
<br />
<ul class="FooterMenu">
<li>
<a href="#AboutProject"> Project</a>
</li>
<li>
<a href="#Goals"> Goals & Objectives </a>
</li>
<li>
<a href="#AboutTeam"> Our Team </a>
</li>
<li>
<a href="sponsor.html"> Sponsor Us </a>
</li>
</ul>
</div>
</footer>
<script type="module" src="index.js"></script>
</body>
</html>