-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
389 lines (329 loc) · 17.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
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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!--HTML CODE by Beable-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Outlaws Project - ADEIKA, Blessing</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="tailwind.css">
<script src="https://kit.fontawesome.com/1b7599756c.js" crossorigin="anonymous"></script>
</head>
<body>
<!--header-->
<header>
<a href="index.html"><div id ="logo">Beable <a id="logo-s">Devs</a> </div></a>
<span class="nav"><a class ="act" href ="#">Home</a></span>
<span class="nav"><a href ="#Profile">Profile</a></span>
<span class="nav"><a href ="#About">About</a></span>
</header>
<!--Photo Card Section-->
<div class = "slide-container">
<div class= "showSlide fade" style="display:block;">
<div class = "caption">
<h1>ADEIKA, Blessing</h1>
<p> Software Developer, Data Scientist and Digital Marketer</p>
</div>
<div class="img" style="background-image: url('./img/brown1.png')"></div>
</div>
<div class= "showSlide fade">
<div class = "caption">
<h1>ADEGOKE, Favor</h1>
<p> Software Developer</p>
</div>
<div class="img" style="background-image: url('./img/brown2.jpg')"></div>
</div>
<div class= "showSlide fade">
<div class = "caption">
<h1>ADEGOKE, Faith</h1>
<p> Software Developer, UI/UX Designer</p>
</div>
<div class="img" style="background-image: url('./img/brown3.jpg')"></div>
</div>
<div class= "showSlide fade">
<div class = "caption">
<h1>DUNMOYE,Ayobami</h1>
<p> Front-End Developer</p>
</div>
<div class="img" style="background-image: url('./img/brown4.jpg')"></div>
</div>
<div class= "showSlide fade">
<div class = "caption">
<h1>AGOIDE, Abisola</h1>
<p> Software Developer and Content developer</p>
</div>
<div class="img" style="background-image: url('./img/brown5.jpg')"></div>
</div>
<div class= "showSlide fade">
<div class = "caption">
<h1>ALABI, Adefola</h1>
<p> Software Developer and Digital Marketer</p>
</div>
<div class="img" style="background-image: url('./img/brown6.jpg')"></div>
</div>
<div class= "showSlide fade">
<div class = "caption">
<h1>GBAYEGUN, Deji</h1>
<p> Software Developer and SEO</p>
</div>
<div class="img" style="background-image: url('./img/brown7.jpg')"></div>
</div>
<div class= "showSlide fade">
<div class = "caption">
<h1>OVIE, Uwanugho</h1>
<p> Software Developer, Network Analyst</p>
</div>
<div class="img" style="background-image: url('./img/brown8.jpg')"></div>
</div>
<!-- Left and Right Arrow Navigation-->
<a class="prev" onclick="currentSlide()">❮</a>
<a class="next" onclick="plusSlides()">❯</a>
<div class="dotsbox" style="text-align:center;">
<span class ="dot" onclick=""></span>
<span class ="dot" onclick=""></span>
<span class ="dot" onclick=""></span>
<span class ="dot" onclick=""></span>
<span class ="dot" onclick=""></span>
<span class ="dot" onclick=""></span>
<span class ="dot" onclick=""></span>
<span class ="dot" onclick=""></span>
</div>
</div>
<!-- Main Body -->
<div class = "bd">
<div class="progb">
<div class="progtxt">Programming is the most sought for skill in the year 2021. There is a high demand for software engineers who are proficient in their field.
During the course of this 3-Month class, we were introduced to HTML, CSS, UI/UX design (using Figma and Adobe XD), JavasSript, XML.
These are amongst the numerous tools required for programming. One can decide to be a Front-end developer or a back-end developer and others might
just want to be proficient in both.
</div>
</div>
<!-- Wrapper begins -->
<section class="wrapper">
<!-- Boxes for Skills -->
<div class="boxes">
<div class="col-md-4">
<div class="box" style="padding-top: 6px;">
<div class="box-content">
<i class="fab fa-html5 fa-3x"></i>
<h3>HTML</h3>
<p>Hypertext Markup Language (HTML) is the standard markup language for documents
designed to be displayed in a web browser. Web browsers receive HTML documents
from a web server or from local storage and render the documents into multimedia
web pages. HTML describes the structure of a web page semantically and originally
included cues for the appearance of the document.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-content">
<i class="fab fa-css3-alt fa-3x"></i>
<h3>CSS</h3>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML. CSS
is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including
layout, colors, and fonts.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box" style="padding-top: 6px;">
<div class="box-content">
<i class="fab fa-js fa-3x"></i>
<h3>JavaScript</h3>
<p>JavaScript often abbreviated as JS, is a programming language that conforms to
the ECMAScript specification. JavaScript is high-level, often just-in-time
compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing,
prototype-based object-orientation, and first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the
World Wide Web.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Info/About Section -->
<a id="About"><section class="info"></a>
<h2>About CodeOutlaws</h2>
<img class="info-img" src="./img/codeit2.jpg" alt="An Image showing a laptop on a table with codes displayed on its screen">
<div class="info-i">
<div class="info-bdy">
<p> Code Outlaw was founded by Benjamin Ayangbola.He initiated a free training on Software Development. This traning spanned from the
9th of November, 2020 to 9th of February, 2021.
This is the final project given for the basic class in Software Development. In this project, we are to create an HTML page showing image card
for each profile given in the project.js file - the page should include arrows to the left and to the right of each card, such that
on click of the arrows, the next or previous card is loaded to view. The project should be in a folder which should include the
index.html, main.css and main.js. The project should be uploaded on GitHub repo and named "my-code-outlaws-project"
<br>
This project was executed by ADEIKA, Blessing (Beable)
<br>
This Project was first deployed on the 26th of February, 2021 and upon starting a carrer as a UI/UX developer at Aimtoget Technologies, I had to edit
the content of the page to suit the Manager's specifications.
<br>
This project was supervised by Brainlord and Boffin. I made use of the Grid, flex box, and others
</p>
</div>
</div>
</section>
</div>
<!-- Portfolio and Form -->
<a id="Profile">
<div class="port-a-form"></a>
<!-- Portfolio -->
<div class="port-prof">
<h1>Profile</h1>
<p>
Below is a Profile of some students that attended and completed the CodeOutlaws 3-month Course
</p>
</div>
<section class="portfolio">
<div class= "port-profile">
<div class = "portclass">
<img src="./img/brown1.png" alt="">
<h1> ADEIKA, Blessing</h1> <br>
<p>
<b>Nickname:</b> Beable <br>
<b>Interest:</b> Software Developer, Data Scientist <br> and Digital Marketer<br>
</p>
</div>
<div class = "portclass">
<img src="./img/brown2.jpg" alt="">
<h1> ADEGOKE, Favour</h1> <br>
<p>
<b>Nickname:</b> Favour <br>
<b>Interest:</b> Software Development <br>
</p>
</div>
<div class = "portclass">
<img src="./img/brown3.jpg" alt="">
<h1>ADEGOKE, Faith </h1><br>
<p>
<b>Nickname:</b> Faith <br>
<b>Interest:</b> Software Developer, UI/UX Designer <br>
</p>
</div>
<!-- Mid-profiles -->
<div class = "portclass">
<img src="./img/brown4.jpg" alt="">
<h1> DUNMOYE, Ayobami</h1> <br>
<p>
<b>Nickname:</b> Ayobami <br>
<b>Interest:</b> Front-End Developer<br>
</p>
</div>
<div class = "portclass">
<img src="./img/brown1.jpg" alt="">
<h1> JACK, Catherine</h1> <br>
<p>
<b>Nickname:</b> Catty <br>
<b>Interest:</b> Full-stack Developer<br>
</p>
</div>
<div class = "portclass">
<img src="./img/brown5.jpg" alt="">
<h1> AGOIDE, Abisola</h1> <br>
<p>
<b>Nickname:</b> Abisola <br>
<b>Interest:</b> Software Developer and Content Developer<br>
</p>
</div>
<!-- Last-Profiles -->
<div class = "portclass">
<img src="./img/brown6.jpg" alt="">
<h1> ALABI, Adefola</h1> <br>
<p>
<b>Nickname:</b> Adefola <br>
<b>Interest:</b> Software Developer and Digital Marketer<br>
</p>
</div>
<div class = "portclass">
<img src="./img/brown7.jpg" alt="">
<h1> GBAYEGUN, Deji</h1> <br>
<p>
<b>Nickname:</b> Deji <br>
<b>Interest:</b> Software Developer and SEO<br>
</p>
</div>
<div class = "portclass">
<img src="./img/brown8.jpg" alt="">
<h1> OVIE,Uwanugho</h1> <br>
<p>
<b>Nickname:</b> Oviking <br>
<b>Interest:</b> Software Developer and Network Analyst<br>
</p>
</div>
</div>
</section>
</div>
<!-- Form -->
<section class="form-fill">
<div class="form-deco">
<h2>
You can send Beable a message by filling the form below. Let us know how we can assist you. Thanks
</h2>
<div class="form-deco-inner">
<form name = "beableForm" action="#"
onsubmit= "return formValidation()" method="POST" >
<div class="form-each">
<label for="Name"> Name:</label>
<input type="text" name= "name" placeholder="Name Here" required>
</div>
<div class="form-each">
<label for="Email">Email:</label>
<input id="email" name= "email" placeholder="eg:someone@yourmail.com" required>
</div>
<div class="form-each">
<label for="Phone Number">Phone:</label>
<input type="text" name= "phno" placeholder="Phone Number Here" ><span id = "num">
</div>
<div class="form-each txt">
<label for="Message">Message:</label>
<textarea name= "msg" placeholder="Input Your Message here" rows="5" cols="20" required></textarea>
<div class= "form-btn">
<button type="submit" id="submit">Send a Message</button>
</div>
</form>
</div>
</div>
</section>
<!-- Social links -->
<section class ="footer-links">
<div class="footer-links-tab">
<div class= "footer-links-attr">
<p>
<b>Contact Address:</b> Beable Devs, Silicon Valley, Los Angeles
</p>
</div>
<div class= "footer-links-attr">
<p>
<a href="#">FAQ <br></a>
<a href="#">Blog</a>
</p>
</div>
<div class= "footer-links-attr">
<p>
<a href="#">Privacy Policy <br></a>
<a href="#">Terms and condition</a>
</p>
</div>
<div class= "footer-links-attr">
<p>
Social Links:
<div class = "footer-links-social">
<a href="https://www.facebook.com/love.gregory.77" alt="Facebook"><i class="fab fa-facebook-f face"></i></a>
<a href="https://www.instagram.com/blessadeik/" alt="Instagram"> <i class="fab fa-instagram insta"></i> </a>
<a href="https://twitter.com/blessadeik" alt="Twitter"> <i class="fab fa-twitter tweet"></i></a>
<a href="https://api.whatsapp.com/?phone=09034001521&text=Hi%20Beable%20Devs" alt="WhatsApp"> <i class="fab fa-whatsapp whatsapp"></i> </a>
</div>
</p>
</div>
</div>
</section>
<footer> © Beable Devs -2021</footer>
<script script src="main.js" type = "text/javascript"></script>
</body>
</html>