-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
225 lines (225 loc) · 13.1 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Desech Studio">
<meta name="description" content="This is Jane Smith's portfolio website, a web designer and font end developer">
<link rel="stylesheet" href="css/general/portfolio.css">
<title>Jane Smith Portfolio Website</title>
<base href="">
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/general/reset.css">
<link rel="stylesheet" href="css/general/animation.css">
<link rel="stylesheet" href="css/general/font.css">
<link rel="stylesheet" href="css/general/root.css">
<link rel="stylesheet" href="css/general/component-css.css">
<link rel="stylesheet" href="css/general/component-html.css">
<link rel="stylesheet" href="css/page/index.css">
</head>
<body>
<main class="block e0gmebvb">
<header class="block e0whscd8">
<p class="text e04ez8d4 subtle-shadow">J</p>
<nav class="block e0qufarj">
<a class="text e0m7xmut" href="#home">Home</a>
<a class="e0123o9a text" href="#about">About</a>
<a class="text e0cpupr1" href="#skills">Skills</a>
<a class="text e0pbzfm0" href="#services">Services</a>
<a class="text e0mbm2z5" href="#portfolio">Portfolio</a>
<a class="text e0b3qz92" href="#testimonials">Testimonials</a>
<a class="text e0bx973z" href="#contact">Contact</a>
</nav>
</header>
<article class="block e0kbhkm2">
<section class="block e0kiray9" id="home">
<div class="block e01bx3jl">
<h1 class="text e0d6w28z">
<em class="e0sen21e">Hi,</em>
<br>
<em class="e0xc3bhu">I'm Jane Smith</em>
<br>Front End Developer
</h1>
<a class="block e06r6yvy subtle-shadow button" href="mailto:[email protected]">
<svg class="e0pkm2d6" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<title>ic_recommend_24px</title>
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm6 9.8a.9.9 0 0 1-.1.5l-2.1 4.9a1.34 1.34 0 0 1-1.3.8H9a2 2 0 0 1-2-2v-5a1.28 1.28 0 0 1 .4-1L12 5l.69.69a1.08 1.08 0 0 1 .3.7v.2L12.41 10H17a1 1 0 0 1 1 1z"></path>
</svg>
<p class="text e0zi0hox">Hire me</p>
</a>
</div>
<img class="e025t7pw" srcset="asset/image/myself-top.jpg 1x, asset/image/[email protected] 2x, asset/image/[email protected] 3x" alt="Jane Smith">
</section>
<section class="block e0vaphw3" id="about">
<img class="e0segaui" srcset="asset/image/myself-about.jpg 1x, asset/image/[email protected] 2x, asset/image/[email protected] 3x" alt="Jane Smith">
<div class="block e0q0ucve">
<p class="text e0t6jdtx">Jane Smith</p>
<p class="text e0jc0xa6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus ac cursus. Ut venenatis gravida ligula, luctus ultricies elit hendrerit ac. Maecenas tincidunt vulputate felis eu rhoncus. Etiam sed metus condimentum, fringilla quam ut, ultricies enim. Nullam euismod commodo sem at elementum. Nam sodales a nisi at dapibus. Integer sed mauris eu metus euismod rutrum. In nec rhoncus nisl. Curabitur facilisis pellentesque hendrerit. Aliquam eros metus, molestie vitae ultrices ut, rhoncus sit amet lorem. Praesent a nibh iaculis, consequat lacus at, hendrerit diam. In nec consectetur justo, in mattis augue.</p>
</div>
</section>
<section class="block e0xupq9c section-middle" id="skills">
<div class="block e0ms085i section-header">
<h3 class="text e0yauh6j section-header-title">My <em class="e0a3zvqa">Skills</em>
</h3>
<hr class="block e0216f1r section-header-rule">
<p class="text e0dgj8lt section-header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus ac cursus.</p>
</div>
<div class="block e0ohtt80">
<div class="block e03jskp5">
<div class="block e0l41lrh skill-block-header">
<p class="text e0bbd0yg skill-block-title">Web Design</p>
<p class="text e096sbfq skill-block-rating">1/10</p>
</div>
<progress class="e05f90qq skill-block-level" max="10" value="1"></progress>
</div>
<div class="block e0pnuc8d">
<div class="block e0fvbjjk skill-block-header">
<p class="text e0aouuqp skill-block-title">HTML</p>
<p class="text e0blglc2 skill-block-rating">8/10</p>
</div>
<progress class="e02vlh2k skill-block-level" max="10" value="8"></progress>
</div>
<div class="block e0cgbnmi">
<div class="block e06naw4s skill-block-header">
<p class="text e0o4w82p skill-block-title">UI/UX</p>
<p class="text e020s464 skill-block-rating">1/10</p>
</div>
<progress class="e03hnu0y skill-block-level" max="10" value="1"></progress>
</div>
<div class="block e06hj996">
<div class="block e02dyewt skill-block-header">
<p class="text e0v5p6qo skill-block-title">CSS</p>
<p class="text e0cfb1ve skill-block-rating">8/10</p>
</div>
<progress class="e07vll4d skill-block-level" max="10" value="8"></progress>
</div>
<div class="block e08shdql">
<div class="block e0rfv3lv skill-block-header">
<p class="text e0a0fqb5 skill-block-title">Print</p>
<p class="text e00bnddg skill-block-rating">1/10</p>
</div>
<progress class="e0tdxjm6 skill-block-level" max="10" value="1"></progress>
</div>
<div class="block e0k6le9u">
<div class="block e0vczpqu skill-block-header">
<p class="text e06g71fn skill-block-title">Javascript</p>
<p class="text e09c2kl3 skill-block-rating">1/10</p>
</div>
<progress class="e01xbyp5 skill-block-level" max="10" value="1"></progress>
</div>
</div>
</section>
<section class="block e0trzaif section-middle" id="services">
<div class="block e0uwj7e4 section-header">
<h3 class="text e0lco5dz section-header-title">My <em class="e0l21329">Services</em>
</h3>
<hr class="block e03nubqp section-header-rule">
<p class="text e0j4o1rw section-header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus ac cursus.</p>
</div>
<div class="block e0sycevn">
<div class="block e0n4m6ni service-block subtle-shadow">
<div class="block e0j820bh service-block-header">
<svg class="e0be4jtl service-block-icon" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"></path>
</svg>
<h6 class="text e0lz7phh service-block-title">Artistic touch</h6>
</div>
<p class="text e0hxkn8s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus </p>
</div>
<div class="block e0dlxds8 service-block subtle-shadow">
<div class="block e0f155km service-block-header">
<svg class="e08u3x0l service-block-icon" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"></path>
</svg>
<h6 class="text e09mbx0u service-block-title">Cross browser</h6>
</div>
<p class="text e0qadi8a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus </p>
</div>
<div class="block e0nacpmf service-block subtle-shadow">
<div class="block e068bg09 service-block-header">
<svg class="e0we0nsq service-block-icon" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="4" r="2"></circle>
<path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z"></path>
</svg>
<h6 class="text e0imo3h5 service-block-title">Web accessibility</h6>
</div>
<p class="text e01ru374">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus </p>
</div>
</div>
</section>
<section class="block e07yp1h0 section-middle" id="portfolio">
<div class="block e0z8945e section-header">
<h3 class="text e0rmat5n section-header-title">My <em class="e0zv082l">Portfolio</em>
</h3>
<hr class="block e0qmfwzt section-header-rule">
<p class="text e04i69ta section-header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus ac cursus.</p>
</div>
<div class="block e0skiwag">
<a class="block e0c2vrj7" href="/">
<img class="e0zxs5xv" srcset="asset/image/image.jpg 1x">
</a>
<a class="block e04j0il3" href="/">
<img class="e0v797xo" srcset="asset/image/image.jpg 1x">
</a>
</div>
</section>
<section class="block e0z8xjoc section-middle" id="testimonials">
<div class="block e0qujxkd section-header">
<h3 class="text e0ey9800 section-header-title">What <em class="e0muhbo6">Clients</em> Say</h3>
<hr class="block e0fxdbhq section-header-rule">
<p class="text e0b20r40 section-header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus ac cursus.</p>
</div>
<div class="block e03oomjg">
<div class="block e0tpk40r testimonial-block">
<div class="block e0xpv5id testimonial-content">
<svg class="e0jjaf8c testimonial-quote" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"></path>
</svg>
<blockquote class="text e09qi59q">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus ac cursus.</blockquote>
</div>
<div class="block e05230q4 testimonial-footer">
<img class="e04vuvhx" srcset="asset/image/author1.jpg 1x, asset/image/[email protected] 2x, asset/image/[email protected] 3x" alt="Juliet Smith">
<div class="block e0yyiny9 testimonial-author">
<p class="text e0dyu1wn">Juliet Smith</p>
<p class="text e0x6st23 testimonial-job">Product Manager</p>
</div>
</div>
</div>
<div class="block e0k4ebip testimonial-block">
<div class="block e01xncu4 testimonial-content">
<svg class="e0vm4127 testimonial-quote" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"></path>
</svg>
<blockquote class="text e0hges93">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra sed risus ac cursus.</blockquote>
</div>
<div class="block e0j4nt7l testimonial-footer">
<img class="e02rg7de" srcset="asset/image/author1.jpg 1x, asset/image/[email protected] 2x, asset/image/[email protected] 3x" alt="Juliet Smith">
<div class="block e06w66pd testimonial-author">
<p class="text e06fgpy4">Juliet Smith</p>
<p class="text e0zfs3e8 testimonial-job">Product Manager</p>
</div>
</div>
</div>
</div>
</section>
</article>
<footer class="block e0hj42mz" id="contact">
<p class="text e0adcre6">J</p>
<a class="block e09ghh8u" href="mailto:[email protected]">
<svg class="e0na7qqc" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"></path>
</svg>
<p class="text e07nyypm">Email me</p>
</a>
<p class="text e0ce4ve1">© 2021 Jane Smith</p>
</footer>
</main>
</body>
</html>