-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (141 loc) · 6.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Poppins:ital,wght@0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Portflio - Sammuel LEKPOR</title>
</head>
<body>
<div class="modal-container">
<section class="tonic-section modal-tonic-section">
<div class="modal-title">
<h2 class="section-title">Tonic</h2>
<span class="close"><a>✕</a></span>
</div>
<div class="section-subtitle">
<h6 id="company" class="canopy">Canopy</h6>
<img src="images/Counter.svg" alt=".">
<h6 id="job">Back End Dev</h6>
<img src="images/Counter.svg" alt=".">
<h6 id="year">2015</h6>
</div>
<img class="tonic-section-image mobile" id="tonic-section-imageM" src="images/Snapshoot-Portfolio1.svg" alt="tonic-section-image">
<img class="tonic-section-image desktop" id="tonic-section-imageD" src="images/Snapshoot-Portfolio-dt1.svg" alt="tonic-section-image">
<div class="tonic-section-description-d">
<p class="section-description" id="section-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent</p>
<div class="section-description-tech">
<ul class="technologies" id="techno">
</ul>
<div class="button-container">
<button class="button detail-btn" type="button">See Live <img src="images/IconLive.svg" alt=""> </button>
<button class="button detail-btn" type="button">See Source <img src="images/VectorGitHubB.svg" alt=""> </button>
</div>
</div>
</div>
</section>
</div>
<div class="big-container" id="big-container">
<header class="header">
<nav class="nav-bar">
<h2 id="my-logo"><a href="#">My Logo</a></h2>
<a class="toggle-btn" href="#">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-bar-list">
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<section class="headline">
<h2 class="headline-title">
I am Sammuel <br>Glad to see you!
</h2>
<p>I’m a software developer! I can help you build a product , feature or website Look through some of my work and experience! If you like what you see and have a project you need coded, don’t hestiate to contact me.</p>
</section>
<section class="social-media">
<h3 class="social-media-title">Let's connect</h3>
<ul class="social-media-icons">
<li><a href="https://twitter.com/samuel_lekpor"><img src="images/Vectortwitter.svg" alt="twitter-icon"></a></li>
<li><a href="https://linkedin.com/in/sammuel-lekpor"><img src="images/iconlinkedin.svg" alt="linkedin-icon"></a></li>
<li><a href="#"><img src="images/VectorM.svg" alt="m-icon"></a></li>
<li><a href="https://github.com/Samuellekpor"><img src="images/Vectorgithub.svg" alt="github-icon"></a></li>
<li><a href="#"><img src="images/VectorV.svg" alt="v-icon"></a></li>
</ul>
</section>
</div>
</div>
<section class="about-section" id="about">
<div class="about-description-section">
<section class="headline about">
<h2 class="headline-title2">
About <br class="desktop"> Myself
</h2>
<p>I’m a software developer! I can help you build a product , feature or website Look through some of my work and experience! If you like what you see and have a project you need coded, don’t hestiate to contact me.</p>
</section>
<section class="social-media">
<h3 class="social-media-title">Let's connect</h3><br>
<ul class="social-media-icons">
<li><a href="https://github.com/Samuellekpor"><img src="images/Vectorgithub.svg" alt="github-icon"></a></li>
<li><a href="https://linkedin.com/in/sammuel-lekpor"><img src="images/iconlinkedin.svg" alt="linkedin-icon"></a></li>
<li><a href="#"><img src="images/VectorV.svg" alt="v-icon"></a></li>
<li><a href="https://twitter.com/samuel_lekpor"><img src="images/Vectortwitter.svg" alt="twitter-icon"></a></li>
<li><a href="#"><img src="images/VectorM.svg" alt="m-icon"></a></li>
</ul>
<button class="button resume-button" type="button">Get my resume</button>
</section>
</div>
<ul class="technology-categories">
<li class="category languages">
<h4 class="title">Languages</h4>
<img src="images/Union1.svg" alt="icon-1">
</li>
<li class="detail-section">
<div class="detail">
<img src="images/Ellipse-js.svg" alt="javaScript">
<p>javaScript</p>
</div>
<div class="detail">
<img src="images/Ellipse-html.svg" alt="html">
<p>HTML</p>
</div>
<div class="detail">
<img src="images/Ellipse-css.svg" alt="css">
<p>CSS</p>
</div>
</li>
<li class="category frameworks">
<h4 class="title">Frameworks</h4>
<img src="images/Union2.svg" alt="">
</li>
<li class="category skills">
<h4 class="title">Skills</h4>
<img src="images/Union2.svg" alt="">
</li>
</ul>
</section>
<section class="contact" id="contact">
<div class="contact-header">
<h2>Contact me</h2>
<p>If you have an application you are interested in developing, a feature that you need built or a project that needs coding. I’d love to help with it </p>
</div>
<form action="https://formspree.io/f/moqbvjoj" method="POST" class="contact-form" novalidate>
<input type="text" placeholder="Your name" maxlength="30" required>
<input type="email" name="email" id="email" placeholder="Your email" required>
<textarea name="text" id="text" cols="30" rows="10" maxlength="500" placeholder="Write your message here" required></textarea>
<small></small>
<button type="submit" class="button btn">Get In Touch</button>
</form>
</section>
<script src="script.js"></script>
</body>
</html>