-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
212 lines (209 loc) · 7.56 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
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Martin's Portfolio</title>
<meta charset="UTF-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="shortcut icon" href="favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__container _container">
<div class="header__logo">
<div class="logo__link"><a href="index.html">Martin WD</a></div>
</div>
<div class="header__menu menu">
<div class="menu__icon icon-menu">
<span></span>
<span></span>
<span></span>
</div>
<nav class="menu__body">
<ul class="menu__list">
<li class="menu__link"><a href="index.html">Main page</a></li>
<li class="menu__link"><a href="index.html#bio">About</a></li>
<li class="menu__link"><a href="secondblock.html">Skills</a></li>
<li class="menu__link"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main class="page"><section class="aboutme" id="aboutme">
<div class="aboutme__container _container">
<h1 class="aboutme__title">
I am <span>Martin B.</span><br />
Front-end developer
</h1>
<p class="aboutme__subtitle">TThat is my portfolio</p>
<div class="aboutme__buttons">
<button class="glow-on-hover" type="button">See animations</button>
<div class="buttons-aboutme">
<a href="" class="buttons-aboutme__button btnnocol">Download files</a>
</div>
</div>
</div>
</section>
<section class="bio" id="bio">
<a name="“bio”"> </a>
<div class="bio__container _container">
<div class="bio__overlay">
<div class="bio__withimage">
<div class="bio__image">
<img src="img/photo_2022-06-13_09-25-51.jpg" alt="" />
</div>
</div>
<div class="bio__contant">
<h2 class="bio__title">About me</h2>
<p class="bio__subtitle">
Hello! My name is Martin and I have a great affinity for collaborative
work, I like to create websites that inspire and involve people. As a
web developer, I believe that a good product not only provides a
solution, but also creates an emotional experience for the people who
use it.
<span
>In my creative process I use tools like Figma, Vs code, Gulp, that
help me in the workflow for the production of websites.</span
>
</p>
<div class="bio__button">
<a href="" class="bio-btn">
<div class="bio-btn__text">Links to Download</div>
<div class="bio-btn__image">
<img src="img/contantimgs/arrow-right.png" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="do">
<div class="do__container">
<h3 class="do__title">Services</h3>
<p class="do__subtitle">
Design that solves problems, one product at a time.
</p>
<div class="do__body">
<div class="do__item">
<div class="do__card">
<div class="do__image">
<img src="img/Dos/cando_01.png" alt="" />
</div>
<div class="do__name">What I can do for you</div>
<div class="do__info">
Faster, better products that your users love. Here's all the
services I provide:
</div>
<div class="do__abilities">
<div class="do__ability">Layout Strategy</div>
<div class="do__ability">Web and Mobile App Layout</div>
<div class="do__ability">Front-end Development</div>
</div>
</div>
</div>
<div class="do__item">
<div class="do__card">
<div class="do__image">
<img src="img/Dos/cando_02.png" alt="" />
</div>
<div class="do__name">Applications I'm fluent</div>
<div class="do__info">
Every web-developer needs the right tools to do the perfect job.
Thankfully, I'm multilingual.
</div>
<div class="do__abilities">
<div class="do__ability">Vs code</div>
<div class="do__ability">Avacode</div>
<div class="do__ability">Figma</div>
</div>
</div>
</div>
<div class="do__item">
<div class="do__card">
<div class="do__image">
<img src="img/Dos/cando_03.png" alt="" />
</div>
<div class="do__name">What you can expect</div>
<div class="do__info">
I make products that are more than pretty. I make them shippable and
usable.
</div>
<div class="do__abilities">
<div class="do__ability">Clean and functional</div>
<div class="do__ability">Device and user friendly</div>
<div class="do__ability">Efficient and maintainable</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__line"></div>
<div class="footer__container _container">
<div class="footer__question">Ready to make something interesting?</div>
<div class="footer__title">Let's get on a call.</div>
<div class="footer__allcontant">
<div class="footer__contant1">
<div class="footer__contact">
<div class="footer__person">Martin Babak</div>
<div class="footer__address">Rochester NH, USA</div>
<a href="" class="footer__gmail">[email protected]</a>
</div>
<div class="footer__socials">
<a href="" class="socials__body">
<div class="socials__image">
<img src="img/socials/soc_01.png" alt="" />
</div>
<div class="socials__text">Instagram</div>
</a>
<a href="" class="socials__body">
<div class="socials__image">
<img src="img/socials/soc_02.png" alt="" />
</div>
<div class="socials__text">Telegram</div>
</a>
<a href="" class="socials__body">
<div class="socials__image">
<img src="img/socials/soc_03.png" alt="" />
</div>
<div class="socials__text">Facebook</div>
</a>
</div>
</div>
<div class="footer__contant2">
<div class="footer__column">
<a href="" class="footer__text">About</a>
<a href="" class="footer__text">Contact</a>
<a href="" class="footer__text">Dribbble</a>
</div>
<div class="footer__column">
<a href="" class="footer__text">Services</a>
<a href="" class="footer__text">Blog</a>
<a href="" class="footer__text">Instagram</a>
</div>
<div class="footer__column">
<a href="" class="footer__text">Experience</a>
<a href="" class="footer__text">Projects</a>
<a href="" class="footer__text">Twitter</a>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Swiper -->
<!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
<script src="js/vendors.min.js"></script>
<script src="js/app.min.js"></script>
</body>
</html>