-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (144 loc) · 8.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio - Elliot Yibaebi Yibalua</title>
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<header class="main-header">
<h1 id="page-top">Elliot Yibaebi Yibalua</h1>
<nav class="main-nav">
<a href="#about-profile">About</a>
<a href="#expertise-section">Expertise</a>
<a href="#projects">projects</a>
<a href="#contact-details">Contact</a>
</nav>
</header>
<main>
<section id="about-profile" class="profile-grid-container">
<div id="name-profile-image">
<img id = "profile-image" tabindex="0" src="Profile.jpg" alt="Elliot Yibaebi">
<h1 id="page-top">Elliot Yibaebi Yibalua</h1>
</div>
<div id="about-me">
<h2 id = "about-me-header">ABOUT ME</h2>
<article id="about-me-article">I am a lion. I am a war! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit
veniam placeat ex dolores, qui error dolor facilis. Similique distinctio iure veritatis
consequuntur, numquam obcaecati eius quam adipisci illum quia assumenda non amet provident.
Assumenda dolores reiciendis officia nihil, </article>
</div>
</section>
<section id="expertise-section" class="profile-grid-container expertise-section">
<h2>EXPERTISE</h2>
<div id="expertise-container">
<div class="expertise">
<h3><span id="html">HTML</span></h3><img
src="https://image.flaticon.com/icons/svg/152/152843.svg">
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi quaerat dicta
dignissimos
iste
aperiam, quisquam harum, u</article>
</div>
<div class="expertise">
<h3><span id="css">CSS</span></h3>
<img src="https://image.flaticon.com/icons/svg/732/732007.svg" alt="">
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi quaerat dicta
dignissimos
iste
aperiam, quisquam harum, ullam eius voluptates,</article>
</div>
<div class="expertise">
<h3><span id="javascript">JavaScript</span></h3><img
src="https://image.flaticon.com/icons/svg/2807/2807744.svg" alt="">
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi quaerat dicta
dignissimos
iste
aperiam, quisquam harum, ullam eius voluptates, aliquam nulla tempore debitis! Temporibus
praesentium molestias exercitationem rerum accusantium labore.</article>
</div>
<div class="expertise">
<h3><span id="writing">Content Writing</span></h3><img
src="https://image.flaticon.com/icons/svg/2878/2878701.svg" alt="">
<article>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi quaerat dicta
dignissimos
iste
aperiam, quisquam harum, ullam eius voluptates, aliquam nulla tempore debitis! Temporibus
praesentium molestias exercitationem rerum accusantium labore.</article>
</div>
</div>
</section>
<section id="projects" class="profile-grid-container expertise-section">
<h2>PROJECTS</h2>
<h3><span class="projects-header">False Projects</span> </h3>
<div id="projects-container">
<section class="projects">
<p>Custom Web Design</p><img
src="https://media1.tenor.com/images/5cb6a1566e86b0e8d7557ca20555e1e0/tenor.gif?itemid=14337909">
</section>
<section class="projects">
<p>Responsive Web Design</p><img
src="https://media1.tenor.com/images/815b70701367a9e1b609194d8e5f84ef/tenor.gif?itemid=13156874"
alt="">
</section>
<section class="projects">
<p>Freelance Web Design</p><img
src="https://media1.tenor.com/images/afbdcac47ad106628dd21c1d5fea0934/tenor.gif?itemid=17312824"
alt="">
</section>
</div>
<h3><span class="projects-header">Pet Projects</span></h3>
<div id="projects-container">
<section class="projects">
<p>Animal Trading Card</p><a href=""><img
src="https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="Animal Trading Card"></a>
</section>
<section class="projects">
<p>Todo-list App</p><img
src="https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="Todo List App" alt="">
</section>
</div>
</section>
<section id="contact-details">
<h2>CONTACT ME</h2>
<div section id="contact-section" class="profile-grid-container">
<div>
<form action="#top" autocomplete="off">
<section class="message-container"><label for="email">Email</label>
<input type="email" name="email-list" id="email"></section>
<section class="message-container"><label for="name">Name</label>
<input type="text" name="visitor-name" id="name"></section>
<section class="message-container"><label for="message">Enter Message:</label>
<textarea name="" id="message" cols="50" rows="20"></textarea>
</section>
<input type="submit" value="SUBMIT">
</form>
</div>
<section class="social-media">
<a href="https://web.facebook.com/elliot.yibaebi/" title="Facebook" target="_blank"><i
class="fa fa-facebook-square fa-2x"></i></a>
<a href="https://www.linkedin.com/in/yibaebi-elliot-77660410b/" title="LinkedIn"
target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
<a href="https://www.instagram.com/elliot.yibaebi/" title="Instagram" target="_blank"><i
class="fa fa-instagram fa-2x"></i></a>
<a href="https://twitter.com/Yibaebi_Elliot" title="Twitter" target="_blank"><i
class="fa fa-twitter fa-2x"></i></a>
<a href="https://github.com/Yibaebi" title="GitHub" target="_blank"><i
class="fa fa-github fa-2x"></i></a>
<a href="https://medium.com/@elliot.yibaebi" title="Medium" target="_blank"><i
class="fa fa-medium fa-2x"></i></a>
</section>
</div>
</section>
</main>
<footer>
Designed and developed by Elliot Yibaebi © 2020
</footer>
</div>
</body>
</html>