-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
246 lines (245 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CD9JE7NBNV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-CD9JE7NBNV');
</script>
<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="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css" />
<title>Portfolio</title>
</head>
<body>
<!--Mobile menu-->
<div id="menuId" class="myMenu">
<ul >
<li class="claList"><a href="#workers">Portfolio</a></li>
<li class="claList"><a href="#about">About</a></li>
<li class="claList"><a href="#contact">Contact</a></li>
</ul>
<img src="./image/IconX.svg" alt="Close Menu" class="close" id="closeMenu">
</div>
<!--Mobile menu End-->
<div class="card-popup-window">
<div class="popup-main-container">
<div class="main-container">
<div class="title">
<h2 id="pop-title"></h2>
</div>
<div class="info">
<span></span>
<span><img src="Counter.png" alt="counter" /></span>
<span></span>
<span><img src="Counter.png" alt="counter" /></span>
<span></span>
</div>
<div class="portfolio-img">
<img src="" alt="tonic">
</div>
<div class="left-container">
<div class="detail">
<p>
</p>
</div>
<div class="about-links">
<ul class="languages" id="lang"></ul>
<div class="links">
<a href="#" class="btn-pop"><span>see live</span><span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 9C2 5.13401 5.13401 2 9 2C9.55229 2 10 1.55228 10 1C10 0.447715 9.55229 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18C13.9706 18 18 13.9706 18 9C18 8.44772 17.5523 8 17 8C16.4477 8 16 8.44772 16 9C16 12.866 12.866 16 9 16C5.13401 16 2 12.866 2 9ZM13 0C12.4477 0 12 0.447715 12 1C12 1.55228 12.4477 2 13 2H14.5858L8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711L16 3.41421V5C16 5.55228 16.4477 6 17 6C17.5523 6 18 5.55228 18 5V1C18 0.447715 17.5523 0 17 0H13Z" fill="#6070FF"/>
</svg></span></a>
<a href="#" class="btn-pop"><span>source code</span> <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20" fill="none">
<path d="M17.9989 7.46114C17.9989 6.32124 17.6329 5.25043 16.9342 4.31779C17.2004 3.41969 17.2669 2.27979 17.2004 0.967185C17.1671 0.414508 16.7345 0 16.2022 0C15.9028 0 13.3741 0.0345423 11.9101 1.38169C10.6458 1.1399 9.31495 1.1399 8.01736 1.38169C6.58667 0.0345423 4.05802 0 3.7253 0C3.19296 0 2.76042 0.414508 2.72715 0.967185C2.62734 2.27979 2.72715 3.41969 2.99333 4.31779C2.29462 5.28497 1.92863 6.35579 1.92863 7.46114C1.92863 9.8791 3.7253 12.0553 6.45358 13.0915C6.35377 13.2988 6.28723 13.5406 6.22068 13.7824C3.32604 13.4715 1.9619 10.7427 1.89536 10.639C1.66246 10.1209 1.06357 9.91364 0.56449 10.19C0.0654144 10.4318 -0.134216 11.0535 0.131958 11.5717C0.198501 11.7444 2.02845 15.4404 6.05432 15.8549V18.9637C6.05432 19.5509 6.48686 20 7.05248 20H12.875C13.4406 20 13.8732 19.5509 13.8732 18.9637V14.8532C13.8732 14.2314 13.7401 13.6442 13.5072 13.1261C16.2022 12.0553 17.9989 9.91364 17.9989 7.46114Z" fill="#6070FF"/>
</svg></span></a>
</div>
</div>
</div>
<div class="close">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</div>
<header id="header">
<div class="header-container">
<div class="logo">
<a href="https://github.com/OLIPLICHE/portfolio/pull/1">My Logo</a>
</div>
<nav class="navbar">
<ul class="d-navbar">
<li><a class="a-navbar" href="#portfolio">Portfolio</a></li>
<li><a class="a-navbar" href="#About">About</a></li>
<li><a class="a-navbar" href="#contact">Contact</a></li>
</ul>
<div class="hamberger" id="hambergerShape">
<i class="fa fa-bars"></i>
</div>
</nav>
</div>
</header>
<main id="main-container">
<section class="headline">
<div class="headline-main-container">
<h1 class="welcome">
I am Paka <br />
Glad to see
you!
</h1>
<p class="introduction">
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>
<div class="link-up">
<h2>LET'S CONNECT</h2>
<div >
<ul class="social-list">
<li>
<a href="#"><img alt="github" src="image/github.png"/></a>
</li>
<li>
<a href="#"><img alt="twitter" src="image/twitter.png"/></a>
</li>
<li>
<a href="#"><img src="image/Linkedin_icon.png" alt="linkedin"/></a>
</li>
<li>
<a href="#"><img alt="medium" src="image/medium.png"/></a>
</li>
<li>
<a href="#"><img alt="angellist" src="image/angellist.png"/></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="portfolio" class="works-section">
<ul class="boxes"></ul>
</section>
<section class="aboutMe" id="about">
<div class="headline-main-container1">
<div class="main-headline1">
<h3 class="welcome">
About <br />
Myself
</h3>
<p class="introduction1">
Hello 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>
<div class="link-up">
<h2>LET'S CONNECT</h2>
<ul class="social-list">
<li>
<a href="https://github.com/OLIPLICHE">
<img src="image/github.png" class="icon" alt="git"/>
</a>
</li>
<li>
<a href="www.linkedin.com/in/olipliche">
<img src="image/Linkedin_icon.png" class="icon" alt="linkedin"/>
</a>
</li>
<li>
<a href="https://google.com">
<img src="image/angellist.png" class="icon" alt="google"/>
</a>
</li>
<li>
<a href="https://twitter.com/olipliche1">
<img src="image/twitter.png" class="icon" alt="twitter"/>
</a>
</li>
<li>
<a href="https://medium.com/@olipliche">
<img src="image/medium.png" class="icon" alt="mediamarket"/>
</a>
</li>
</ul>
<div class="btn-T button">
<button class="btn" type="button">Get my resume</button>
</div>
</div>
</div>
<div class="main-knowledges">
<ul class="knowledges">
<li class="languages knw">
<div class="lang">
<h3>Langguages</h3>
<i class="fas fa-chevron-down"></i>
</div>
<ul class="lang-list">
<li class="java">
<img src="image/css.svg" class="img-list" alt="javascript"/>
<pre>JavaScript</pre>
</li>
<li class="java">
<img src="image/js.svg" class="img-list" alt="html"/>
<pre>HTML</pre>
</li>
<li class="java">
<img src="image/html.svg" class="img-list" alt="css"/>
<pre>Css</pre>
</li>
</ul>
</li>
<li class="frameworks knw">
<div class="lang">
<h3>Frameworks</h3>
<i class="fas fa-chevron-right"></i>
</div>
</li>
<li class="skills knw">
<div class="lang">
<h3>Skills</h3>
<i class="fas fa-chevron-right"></i>
</div>
</li>
</ul>
</div>
</div>
</section>
<section class="contact-section" id="contact">
<form action="https://formspree.io/f/moqynypw" method="post" id="form-contact">
<h3>Contact me</h3>
<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 class="coverUl">
<ul class="contact-form">
<li class="contact-item">
<input type="text" name="name" id="name" placeholder="Yeremias" maxlength="30" required/>
</li>
<li class="contact-item">
<input type="email" name="email" id="email" placeholder="[email protected]" required/>
</li>
<li class="contact-item">
<textarea name="message" cols="30" rows="10" id="message" placeholder="Write your message here" maxlength="500" required></textarea>
</li>
<li class="contact-item error">
<span class="show-msg"></span>
</li>
<li class="subm">
<button type="submit">Get it Touch</button>
</li>
</ul>
</div>
</form>
</section>
</main>
<script src="script.js"></script>
<script src="validation.js"></script>
<script src="index.js"></script>
</body>
</html>