-
Notifications
You must be signed in to change notification settings - Fork 0
/
du phong.txt
322 lines (312 loc) · 14.1 KB
/
du phong.txt
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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/global.css">
<link rel="stylesheet" href="./assets/fontawesome/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<div id="header">
<div id="header-menu" class="d-flex container1">
<div id="logo">
<p><i class="fas fa-cube"></i></p>
<p>Theproduct</p>
<p>Subcaption</p>
</div>
<ul id="menu-list" class="d-flex">
<li>
<div> <a href=""><i class="fas fa-home"></i></a></div>
<div class="menu-list-box"> <a href="">Home</a></div>
</li>
<li>
<div> <a href=""><i class="far fa-envelope-open"></i></a></div>
<div class="menu-list-box"> <a href="">About</a></div>
<li>
<div> <a href=""><i class="fas fa-suitcase"></i></i></a></div>
<div class="menu-list-box"> <a href="">Works</a></div>
</li>
<li>
<div> <a href=""><i class="far fa-envelope"></i></a></div>
<div class="menu-list-box"> <a href="">Contacts</a></div>
</li>
</ul>
<div style="display: flex;">
<div id="login" class="d-flex" >
<button style=" width: 130px;border: none;
height: 48px; background-color: white; border-radius: 35px;outline:none;justify-content: space-around; align-items: center;" class="d-flex" algin>
<p style="
padding-top: 14px;
" >Login</p>
<i class="far fa-user"></i>
</button>
</div>
<div style="color:inherit;"></div>
</div>
</div>
<!-- --- End header-menu ---- -->
<div id="header-main" class="d-flex">
<div id="img">
<img src="./assets/image/Layer 1.png" alt="">
</div>
<div id="header-content">
<div>
Timesaving <br> Figmar system
</div>
<div>
<p> Get early access!</p>
<form action="">
<i " class=" far fa-envelope"></i>
<input type="mail" placeholder="Input your business mail">
<button>Subscribe</button>
</form>
</div>
<div class="d-flex">
<p> <i class="fas fa-medal"></i></p>
<p> Record to beat,1min 45s to get insued. Already insured? <br>
We cancel your old insurance for you!</p>
</div>
</div>
</div>
</div>
<body>
<!-- Column-Page 2 in my excercise -->
<div id="text-column" class="container1 d-flex">
<form action="" style="width: 308px;height: 426px;">
<p style="margin-bottom: -0.2%;"> <img src="./assets/image/feather.png" alt=""></p>
<h2 style="margin-top:-12px;">Start your journey</h2>
<p style=" margin-top: -19px;
margin-left: 1em;
font-size: 14px;">We help creative entrepreneurs build </br> awesome apps and release
products
</p>
<div class=" input-group">
<input style=" width: 268px;margin-top: -10px;
" type="text" id="first-name" required>
<label style="margin-top: 0.35em;" for="first-name">First name</label>
<img style="
margin-left: 14.5em;
margin-top: -3.65em;" src="./assets/image/user1.png" alt="">
</div>
<div class="input-group">
<input type="text" id="email-address" style=" width: 268px;margin-top: -31px;
" required>
<label style="margin-top: 0.35em;" for="email-address">Email Address</label>
<img src="./assets/image/at-sign.png" style="
margin-left: 14.5em;
margin-top: -4em;" alt="">
</div>
<h5>
<input style="align-items: center;" type="checkbox">
<p style="color: #858585;">I accept the terms of service and</br>privacy policy</p>
</h5>
<button>Get started yesterday
<img src="./assets/image/arrow right.png" alt="">
</button>
</form>
<div id="column-left" class="d-flex">
<div class="column-top">
<p>Get started yesterday.</p>
<p>Figma landing system for creative entrepreneurs.</p>
</div>
<div id="body-wrapper" class="d-flex">
<div>
<div class="parafont">
<p>Design system for living</p>
<p>We believe an honest and intentional life wiill carry over to the way you run you business
</p>
</div>
<div class="parafont">
<p>Design system for the boost</p>
<p>We believe that being genuine and transparent with your audicence is paramount to a
successful business</p>
</div>
</div>
<div>
<div class="parafont">
<p>Design system for business</p>
<p>We believe that amazing typography and white space will help you build a beautiful website
experience.</p>
</div>
<div class="parafont">
<p>Design system for community</p>
<p>We beleive that doing life together-both business and personal-is the only way to go about
this journey</p>
</div>
</div>
</div>
</div>
</div>
<div id="Desktop">
<!-- Header Desktop -->
<div id="header-desktop" class="d-flex container1">
<div id="header-desktop-left">
<p style="font-size: 64px;
font-weight: bold;">Preview our useful app</p>
<p style="font-size: 32px;
font-weight: 500;
color: #858585;">It’s better to paste your original design items into the square blocks to increase the
showcase effect</p>
</div>
<div style=" display: flex;
justify-content: space-around;
padding-top: 30px;" id="header-desktop-right">
<div>
<a target="_blank" href="https://www.apple.com/ios/app-store/"><img
src="./assets/image/Appstore.png" alt=""></a>
</div>
<div>
<a target="_blank"
href="https://play.google.com/store?utm_source=apac_med&utm_medium=hasem&utm_content=Jul0720&utm_campaign=Evergreen&pcampaignid=MKT-DR-apac-vn-1003227-med-hasem-py-Evergreen-Jul0720-Text_Search_BKWS-BKWS%7cONSEM_kwid_43700055535117176_creativeid_446280874210_device_c_kwd_kwd-890784766_geoid_1028580_network_g&gclid=Cj0KCQjwvvj5BRDkARIsAGD9vlI_Kfz27iALL2Z7SoM4jstcgljh9n_6xlQNpr2jjRU3ZWQZGYiYwLIaAhKdEALw_wcB&gclsrc=aw.ds"><img
src="./assets/image/Webapp.png" alt=""></a>
</div>
</div>
</div>
<!-- End Desktop -->
<div id="desktop-main" class="container1 d-flex" style=" justify-content: center;">
<div id="img">
<img src="./assets/image/Mac Window.png" alt="">
<div class="inside-picture" style="bottom: 69px;
right: 0;" id="sales">
<img src="./assets/image/Grow.png" alt="">
</div>
<div class="inside-picture" id="express" style=" left: 299px;
bottom: -39px;">
<img src="./assets/image/Express.png" alt="">
</div>
<div style="top: 49px;
left: 19px;" class="inside-picture" id="audience">
<img src="./assets/image/Feature.png" alt="">
</div>
</div>
</div>
</div>
<div id="plans">
<div id="header-plans" class="container1 d-flex">
<p>Choose your best plan</p>
<p>Keep in mind you can also recolor parent price card to increase impact</p>
</div>
<!-- End plan -->
<div id="main-plan" class="d-flex container1">
<div id="starter">
<form action="" class="sizeform" style="border: 1px solid #d8dcd8;">
<p style="color: #C2C2C2;">Starter</p>
<p style="color: #5C5C5C;">Free</p>
<p>forever</p>
<p style="color: #1BE1AF;">Up to 30.000 MAU</p>
<p>Components-driven design system, Awesome outlined Feather icons pack</p>
<input style="background-color: #ADADAD; color: white;" type="submit" value="Get started">
</form>
</div>
<div id="genius">
<form action="" class="sizeform" style="border: 1px solid #d8dcd8;">
<p style="color: #ADADAD;">Genius</p>
<p style="color: #5C5C5C;">$12.99</p>
<p>per month</p>
<p style="color: #1BE1AF;">Up to 50.000 MAU</p>
<p>Components-driven design system, Awesome outlined Feather icons pack</p>
<input style="background-color: #858585;color: white; font-weight:bold;" type="submit"
value="Get started">
</form>
</div>
<div id="medium">
<form action="" class="sizeform" style="border: 1px solid green;background-color: #5113ffa6;">
<p style="color: #1BE1AF;"">Medium</p>
<p style=" color: white;">$24</p>
<p>per month</p>
<p style="color: #1BE1AF;">Up to 200K MAU</p>
<p>Components-driven design system, Awesome outlined Feather icons pack</p>
<input style="background-color:white" type="submit" value="Get started">
</form>
</div>
<div id="guru">
<form action="" class="sizeform" style="border: 1px solid green;background-color: white;">
<p>Guru</p>
<p style="color: #5C5C5C;">$56</p>
<p>per month</p>
<p style="color: #7C4DFF;">More than 1M</p>
<p>Components-driven design system, Awesome outlined Feather icons pack</p>
<input style="color:white;background-color: #5C5C5C;" type="submit" value="Get started">
</form>
</div>
</div>
</div>
</body>
<footer>
<div id="footer-header" style="margin-top: 125px;" class="d-flex container1">
<div id="footer-header-left">
<p class="spacing-ex">FOLLOW US</p>
<div id="frame-acces">
<a class="background-icon-acces" style="background-color: white;" href="#">
<img src="./assets/image/facebook.png" alt="facebook">
</a>
<a href="#">
<img class="background-icon-acces" src="./assets/image/linkedin.png" alt="likein">
</a>
<a href="#">
<img class="background-icon-acces" src="./assets/image/slack.png" alt="slack">
</a>
<a href="#">
<img class="background-icon-acces" src="./assets/image/twitter.png" alt="twitter">
</a>
</div>
</div>
<div id="footer-header-right">
<p style="color: #5C5C5C;" class="spacing-ex">drop us a line</p>
<p style="color: #7C4DFF;font-size: 32px; font-weight: 500;">[email protected]</p>
</div>
</div>
<div id="footer-bottom" class="d-flex container1">
<div id="footer-bottom-left">
<p class="spacing-ex" style=" padding-left: 40px;
">INFORMATTION</p>
<div id="information-figma" class="d-flex">
<div style="display: flex; flex-direction: column;">
<a href="#">About Fapster app</a>
<a href="#">Get in Touch</a>
<a href="#">Things We Like</a>
</div>
<div style="display: flex; flex-direction: column;">
<a href="#">Shipping / Returns</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
</div>
<div style="display: flex; flex-direction: column;">
<a href="#">We are hiring!</a>
<a href="#">Resources</a>
</div>
</div>
</p>
</div>
<div id="footer-bottom-right">
<p class="spacing-ex">keep in touch</p>
<div style="display: flex;">
<input type="text" style=" padding-left: 13px; width: 345px;
height: 40.67px;
" placeholder="Email Address">
<input type="submit" style=" background-color: #333333;
color: white;
font-size: 18px;
padding: 7px 62px;
border-radius: 5px;
border: none;
margin-left: -6px;">
</div>
<p style=" margin-top: 19px; font-size: 14px;
color: #333333;">Actually, we SPAM 86 times per week</p>
</div>
</div>
</footer>
</html>
<!--
background-color: #333333;
color: white;
font-size: 18px;
padding: 7px 62px;
border-radius: 5px;
border: none;
margin-left: -6px;
-->