-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (119 loc) · 6.15 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/css/simplebar.min.css">
<link rel="stylesheet" href="dist/css/style.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap">
<title>Dmitriy Hulpe</title>
</head>
<body>
<aside class="sidebar" id="sidebar">
<header class="sidebar__header">
<img class="sidebar__image" src="source/images/avatar.jpg" alt="#">
</header>
<nav class="sidebar__navigation">
<a href="index.html" data-title="About me"><span>About me</span></a>
<a href="https://freelancehunt.com/freelancer/dmitriyhulpe.html" data-title="Freelance"><span>Freelance</span></a>
<a href="blog.html" data-title="Blog"><span>Blog</span></a>
<a href="timeline.html" data-title="Timeline"><span>Timeline</span></a>
<a href="#" data-modal="contact" data-title="Contact"><span>Contact</span></a>
</nav>
<div class="sidebar__logo">
<h1><span class="typewrite" data-period="2000" data-rotate='["Dmitriy Hulpe", "Frontend Developer"]'></span></h1>
</div>
<div class="sidebar__burger" id="burger">
<span></span>
</div>
<footer class="sidebar__footer">
<ul class="sidebar__icons">
<li><a href="https://github.com/dmitriyhulpe"><i class="fab fa-github-alt"></i></a></li>
<li><a href="https://t.me/dmitriyhulpe"><i class="fab fa-telegram-plane"></i></a></li>
<li><a href="https://twitter.com/dmitriyhulpe"><i class="fab fa-twitter"></i></a></li>
</ul>
<div class="sidebar__copyright">
<p>All rights reserved</p>
</div>
</footer>
</aside>
<main class="main">
<header class="header" id="header">
<h1>Dmitriy Hulpe</h1>
<h2>Frontend Developer</h2>
<i class="layer fab fa-gulp" data-temp="1.25"></i>
<i class="layer fab fa-html5" data-temp="1.25"></i>
<i class="layer fab fa-vuejs" data-temp="1.25"></i>
<i class="layer fab fa-sass" data-temp="1.25"></i>
<i class="layer fab fa-react" data-temp="1.25"></i>
<i class="layer fab fa-angular" data-temp="1.25"></i>
<i class="layer fab fa-git" data-temp="1.25"></i>
</header>
<section class="section" data-simplebar data-simplebar-auto-hide="false">
<div class="container">
<div class="section__header">
<h3 class="section__title">Some Information About Me</h3>
<p class="section__description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur temporibus voluptate accusantium!</p>
</div>
<div class="about">
<p class="about__paragraph">Odit commodi nostrum exercitationem nulla suscipit officia! Eos ut, pariatur eiu
eveniet velit voluptatem aut sunt dolore officia ducimus! Maiores nam animi voluptas a dolores! Unde tempora alias, voluptas labore quas
voluptatem commodi eveniet perferendis sint ullam vero ut, laudantium ipsa aspernatur excepturi minima aliquam explicabo provident ipsum tenetur omnis debitis.
Repellendus amet obcaecati dicta, dolore perspiciatis modi velit eum praesentium unde?
</p>
<p class="about__paragraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet esse, libero delectus corrupti doloremque
modi nobis nihil incidunt officiis? Temporibus maxime voluptatibus quis aut facilis optio iure quibusdam labore voluptates perspiciatis
itaque debitis eligendi ipsam similique atque laboriosam, odit commodi nostrum exercitationem nulla suscipit officia! Eos ut, pariatur eiu
eveniet velit voluptatem aut sunt dolore officia ducimus! Maiores nam animi voluptas a dolores! Unde tempora alias, voluptas labore quas
voluptatem commodi eveniet perferendis sint ullam vero ut, laudantium ipsa aspernatur excepturi minima aliquam explicabo provident ipsum tenetur omnis debitis.
Repellendus amet obcaecati dicta, dolore perspiciatis modi velit eum praesentium unde?
</p>
<p class="about__paragraph">Odit commodi nostrum exercitationem nulla suscipit officia! Eos ut, pariatur eiu
eveniet velit voluptatem aut sunt dolore officia ducimus! Maiores nam animi voluptas a dolores! Unde tempora alias, voluptas labore quas
voluptatem commodi eveniet perferendis sint ullam vero ut, laudantium ipsa aspernatur excepturi minima aliquam explicabo provident ipsum tenetur omnis debitis.
Repellendus amet obcaecati dicta, dolore perspiciatis modi velit eum praesentium unde?
</p>
<p class="about__paragraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet esse, libero delectus corrupti doloremque
modi nobis nihil incidunt officiis? Temporibus maxime voluptatibus quis aut facilis optio iure quibusdam labore voluptates perspiciatis
itaque debitis eligendi ipsam similique atque laboriosam, odit commodi nostrum exercitationem nulla suscipit officia! Eos ut, pariatur eiu
eveniet velit voluptatem aut sunt dolore officia ducimus! Maiores nam animi voluptas a dolores! Unde tempora alias.
</p>
</div>
</div>
</section>
</main>
<div class="overlay" id="contact">
<div class="modal">
<div class="modal__line"></div>
<div class="modal__title">
<h3>Drop a Line to Contact me</h3>
</div>
<form class="modal__form" action="#" method="#" id="form">
<div class="form__row">
<div class="form__input">
<input class="required" type="text" required name="name">
<span class="underline"></span>
<label>Name</label>
</div>
<div class="form__input">
<input class="email required" type="text" required name="email">
<span class="underline"></span>
<label>Email</label>
</div>
</div>
<div class="form__input">
<input class="message required" type="text" required name="message">
<span class="underline"></span>
<label>Message</label>
</div>
<button class="form__button button" type="submit">Submit</button>
<button class="form__button button close" type="button">Close</button>
</form>
</div>
</div>
<script src="source/js/simplebar.min.js"></script>
<script src="source/js/font.awesome.min.js"></script>
<script src="dist/js/script.js"></script>
<script src="dist/js/form.js"></script>
</body>
</html>