-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (129 loc) · 5.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- <section> -->
<div class="grid-container">
<header>
Zhanibek Sundetov
</header>
<article class="personal-info-wrapper">
<div class="personal-info-block">
<div class="personal-info-item">
<div>
<img src=" assets/briefcase.png" alt="" srcset="">
</div>
<div class="personal-info-item-title text-color-grey">
Occupation
</div>
<div class="personal-info-item-title">
Front-end Developer
</div>
</div>
<div class="personal-info-item">
<div>
<img src="assets/location.png" alt="" srcset="">
</div>
<div class="personal-info-item-title text-color-grey">
Location
</div>
<div class="personal-info-item-title">
Astana, Kazakhstan
</div>
</div>
</div>
<div class="personal-info-block">
<div class="personal-info-item">
<div>
<img src="assets/person.png" alt="" srcset="">
</div>
<div class="personal-info-item-title text-color-grey">
Age
</div>
<div class="personal-info-item-title">
27
</div>
</div>
<div class="personal-info-item">
<div>
<img src="assets/home.png" alt="" srcset="">
</div>
<div class="personal-info-item-title text-color-grey">
Family
</div>
<div class="personal-info-item-title">
Married
</div>
</div>
</div>
</article>
<article class="indicator-wrapper">
<h1>Tech</h1>
<div class="indicator-block">
<div class="indicator-item">
<div>Javascript</div>
<div class="progress-bar">
<div class="javascript"><span>75%</span></div>
</div>
</div>
<div class="indicator-item pd-top-17px">
<div>CSS, SCSS</div>
<div class="progress-bar">
<div class="css"><span>65%</span></div>
</div>
</div>
<div class="indicator-item pd-top-17px">
<div>Vue.js</div>
<div class="progress-bar">
<div class="vue"><span>80%</span></div>
</div>
</div>
</div>
</article>
<article class="biography-wrapper">
<h1>Biography</h1>
<aside class="fs-15px">
Zhanibek and his wife Malika. They can focus more on their
careers but their main worry is about their future kids education and health. With busy week days,
the
time they can really get together as a family is during the dinners time and weekends. So their
meal
is a really special part of their days. He loves to use avocados in his diet. Interested in
programming.
</aside>
</article>
<article class=" needs-wrapper">
<h1>Needs</h1>
<aside class="fs-15px">
<ul class="needs-block-list">
<li>Be ready for holiday family gathering as well as for light dinner during the day.</li>
<li>Find balance between feeling good about himself, being able to maintain his lifestyle, while
contributing with the world.</li>
<li>Wise choices of the brands and respect to environment and sustainability is fundamental for
him.
</li>
</ul>
</aside>
</article>
<article class="points-wrapper">
<h1>Pain points</h1>
<aside class="fs-15px">
Zhanibek need to find flexible solution that can help him to optimize his time while dedicating himself
to
his carrier, making sure to maintain a health lifestyle.
</aside>
</article>
<figure class="image-wrapper">
<div class="image-block">
<img src="assets/avatar.png" alt="" width="500" height="750">
<div class="image-block-text">"It is very important for me to have fresh, tasty products at hand."</div>
</div>
</figure>
</div>
</body>
</html>