-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
217 lines (198 loc) · 10.6 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
<!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="stylesheet" href="style.css">
<link rel="stylesheet" href="media.css">
<title>Portfolio</title>
</head>
<body class="page">
<div class="wrapper">
<header class="header">
<div class="header__container container">
<img src="img/photo.jpg" alt="male portrait" class="header__userpic">
<div class="header__box">
<h1 class="header__title title caption_l text">Bill Preston</h1>
<p class="header__subtitle text">Frontend Developer</p>
</div>
</div>
</header>
<main class="main">
<section class="objective">
<div class="objective__container container">
<h2 class="objective__title title caption_m">Objective</h2>
<p class="objective__paragraph paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime, harum
velit.
Pariatur,
magnam ducimus! Dolores magnam sapiente eligendi reprehenderit adipisci magni natus blanditiis
eaque
provident, officiis repellendus, perspiciatis labore sint.</p>
<p class="objective__paragraph paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Incidunt dicta
atque
quae,
reiciendis
voluptates nobis possimus earum culpa soluta quos. Nemo quidem blanditiis quis error expedita
ipsam
temporibus. Aliquam cumque, suscipit sapiente laudantium impedit neque numquam. Eum, nam quae
incidunt
maxime repellendus ratione id nemo animi veniam voluptatibus inventore, voluptatem recusandae
placeat
nulla harum nobis, earum autem quam quis. Quaerat libero est similique enim necessitatibus
voluptatibus
aperiam dolorum aliquid voluptate doloribus perferendis officia distinctio quidem, fuga nemo?
Tempora
consectetur minima voluptas repellendus natus iste exercitationem incidunt est fuga quis illum
numquam
corporis voluptate, sint at veniam veritatis inventore cupiditate accusantium?</p>
</div>
</section>
<section class="experience">
<div class="experience__container container">
<h2 class="experience__title title caption_m">Experience</h2>
<div class="experience__box">
<p class="experience__activity">2019-present</p>
<div class="experience__box-inner">
<h3 class="experience__subtitle title caption_s">Web-studio 1</h3>
<p class="experience__paragraph paragraph">Lorem ipsum dolor sit amet consectetur
adipisicing
elit. Dolor
qui
tempore
autem
quia
consequuntur
dicta
numquam dolores assumenda optio, ratione accusantium soluta cumque nisi voluptas
suscipit
doloribus
alias officiis nihil! A, laudantium! Voluptatibus labore vel, excepturi aliquam,
asperiores
molestias
aspernatur, quaerat voluptatum delectus voluptates veniam! Ut provident doloribus itaque
sequi.
</p>
</div>
</div>
<div class="experience__box">
<p class="experience__activity">2016-2019</p>
<div class="experience__box-inner">
<h3 class="experience__subtitle title caption_s">WebRef Studio</h3>
<p class="experience__paragraph paragraph">Lorem ipsum dolor sit amet consectetur
adipisicing
elit. Itaque
sequi
sit,
sapiente
debitis explicabo quos praesentium provident! Qui molestias provident excepturi eius
sint
porro,
ab
laboriosam incidunt quos quia saepe ipsa repudiandae perferendis labore, similique hic.
</p>
</div>
</div>
<div class="experience__box">
<p class="experience__activity">2014-2016</p>
<div class="experience__box-inner">
<h3 class="experience__subtitle title caption_s">New York Times</h3>
<p class="experience__paragraph paragraph">Lorem ipsum dolor sit amet consectetur
adipisicing
elit. Fuga
dolorum
quam
quis
magni
officia sed
adipisci
impedit obcaecati. Rerum delectus ipsa nam. Magnam nemo hic quis tenetur architecto illo
provident
praesentium fuga sint. Quisquam eveniet temporibus voluptates atque, impedit earum. Nisi
incidunt
odio
eaque
vel doloribus dolorem suscipit fugiat dolorum voluptatem ab modi, nostrum corrupti fugit
alias,
sit
iste
eligendi. Quos doloremque, et obcaecati doloribus necessitatibus dolorum praesentium
voluptates
in?
</p>
</div>
</div>
</div>
</section>
<section class="skills">
<div class="skills__container container">
<h2 class="skills__title title caption_m">Skills</h2>
<p class="skills__paragraph paragraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Laborum
facilis
dolore
sapiente. Facilis
possimus laborum aperiam laudantium quidem dicta debitis dignissimos, repellat dolorum,
voluptatem
quia
sapiente fugit. Beatae adipisci accusantium saepe velit placeat porro nisi eligendi ab ducimus,
quibusdam vitae, enim expedita natus recusandae eum sequi cumque nam, molestias pariatur.
</p>
</div>
</section>
<section class="language">
<div class="language__container container">
<h2 class="language__title title caption_m">Language</h2>
<ul class="language__list">
<li><span class="language__item">English</span></li>
<li><span class="language__item">Russian</span></li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<section class="contact-form">
<div class="contact-form__container container">
<h2 class="contact-form__title title caption_m">Form</h2>
<form action="#" class="contact-form__form">
<div class="contact-form__box">
<div class="contact-form__box-inner">
<label for="name" class="contact-form__label">Имя</label>
<input type="text" id="name" required tabindex="1" class="contact-form__input">
</div>
<div class="contact-form__box-inner">
<label for="email" class="contact-form__label">Email</label>
<input type="email" id="email" required tabindex="2" class="contact-form__input">
</div>
</div>
<textarea id="message" placeholder="Your Message" maxlength="225" tabindex="3"
class="contact-form__textarea contact-form__input"></textarea>
<button type="submit" class="contact-form__btn">Send</button>
</form>
</div>
</section>
<section class="contacts">
<div class="contacts__container container">
<h2 class="contacts__title title caption_m text">Contacts</h2>
<ul class="contacts__list">
<li class="contacts__item">
<a href="tel:+123456789" class="contacts__link">+1(234)56-789</a>
</li>
<li class="contacts__item">
<a href="mailto:example@gmail.com" class="contacts__link">example@gmail.com</a>
</li>
<li class="contacts__item">
<a href="https://www.youtube.com/channel/UC_Q1vhf7wcR_zGlc5ahAg0A"
class="contacts__link">YouTube
Channel</a>
</li>
</ul>
<p class="contacts__copyright text">All Right Reserved 2022</p>
</div>
</section>
</footer>
</div>
</body>
</html>