-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
127 lines (105 loc) · 5.14 KB
/
index.html
File metadata and controls
127 lines (105 loc) · 5.14 KB
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
<!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="style.css">
<title>Document</title>
</head>
<body class="Bgc-white C-$accent900 Fnf-mUss -HeaderH13u M0">
<div class="Ps-a W100p H100vh Bgc-grey D-f Jc-c Ai-c">
<div class="Ps-a -Sz100p md_W38gg md_H170u md_Mxh90vh md_Bdrd3u Ov-h">
<div class="-Sz100p Bgc-black md_Bdtlr3u md_Bdblr3u Ovy-s Ctnn-form Ctnt-is">
<!-- Header -->
<header class="P2u @c:form:w>=600_P2u;3u H-$headerH Ps-sk T0 W100p Bgc#000*50p Bgc#000*0.5 md_Bdtlr3u Zi20">
<div class="D-f Ai-str Jc-fs -Sz100p">
<!-- Close button-->
<div class="W10p H100p ">
<button class="btn Bd-n C-$accent900 Bgc-tp H100p Apcr1 D Bdrd100p -Ts @:hv_Bgc-$secondary900_h @:hv-n_Bgc-$secondary900_a ">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b">
<use href="img/sprite.svg#cross"></use>
</svg>
</button>
</div>
<!-- Caption-->
<div class="W90p @c:form:w<540_P0;3u H100p Fnw700 Fns4.5u md_Fns5.5u D-f Ai-c">
<span> Edit profile</span>
</div>
<div class="H100p P0.5u;0">
<!-- Save button -->
<button class="btn Ml-a Bgc-$accent900 @:hv_Bgc-$secondary850_h @:hv-n_Bgc-$secondary850_a D-f Ai-c Jc-c C-$accent850 H100p W18u Bdrd10u Fnw600 -Ts ">
<span class="Lnh100p"> Save </span>
</button>
</div>
</div>
</header>
<!-- Form's main part -->
<main class="P0 Ps">
<!-- Profile wallpaper-->
<div class="H35u md_H50u Ov-h Ps D-f Jc-c Ai-c Mb15u md_Mb20u">
<!-- Wallpaper-->
<img src="img/wallpaper.jpg" class="D P0;1 W100p Ps" alt="wallpaper">
<div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u @:hv_Bgc-$secondary200_h Bgc-$secondary400 -Ts -Ctx-wallpaper">
<!-- Change wallpaper button-->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a Bgc-$secondary400 C-$accent900 -Ts Bdrd100p P2u @:hv_O0 @:hv_^wallpaper:h:_O1 O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b" >
<use href="img/sprite.svg#photo"></use>
</svg>
</button>
<!-- Delete wallpaper button -->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a Bgc-$secondary400 C-$accent900 -Ts Bdrd100p P2u @:hv_O0 @:hv_^wallpaper:h:_O1 O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b" >
<use href="img/sprite.svg#cross"></use>
</svg>
</button>
</div>
</div>
<div class="Ps-a Zi10 H25u md_H30u D-ib Bd2;s;black Bdrd100p Apcr1 T23u md_T38u L5u">
<!-- Profile photo-->
<img src="img/json.jpg" class="D Bdrd100p Mxw100p" alt="profile-photo">
<div class="Ps-a T0 L0 -Sz100p Bdrd100p D-f Jc-c Ai-c Bgc-$secondary200 @:hv_O0 @:hv_O1_h O1 -Ts">
<!-- Change profile photo button-->
<button class="btn Bgc-$secondary400 @:hv_Bgc-$secondary300_h @:hv-n_Bgc-$secondary300_a C-$accent900 -Ts Bdrd100p P2u">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n Va-b">
<use href="img/sprite.svg#photo"></use>
</svg>
</button>
</div>
</div>
<!-- The part with the inputs -->
<div class="@l:base_Mb6u_:div @l:base_P0;2u_:div sm_P0;3u_:div md_P0;5u_:div -Ts_:input,:textarea C-$accent500_:input,:textarea">
<!-- Name -->
<div>
<label class="D Ps Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Ct-';';'*'_af C-$accent300_fw:af Ps-a_af T2u_af R2u_af Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Name</span>
<input maxlength="50" class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="Json Statement">
</label>
</div>
<!-- Bio-->
<div>
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Bio</span>
<textarea class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900 Txw-w Rs-n " type="text">A professional Frontend dev and killer-feature maker with 20 years of experience</textarea>
</label>
</div>
<!-- Location -->
<div>
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Location</span>
<input maxlength="100" class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="Planet Earth">
</label>
</div>
<!-- Website -->
<div>
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h @:hv_Bdc-$accent400_!fw:h -Ts">
<span class="D Mb1u ^:fw:_C-$accent200 -Ts">Website</span>
<input maxlength="100" class="D W100p Bgc-tp Bd-n Ol-n_f ^:fw:_C-$accent900" type="text" value="https://mlut.style/">
</label>
</div>
</div>
</main>
</div>
</div>
</div>
</body>
</html>