Skip to content

Commit 774974f

Browse files
RamazanmakRamazanmak
committed
feat: add the repository for the states-step of the course
1 parent fda7e00 commit 774974f

File tree

10 files changed

+1482
-0
lines changed

10 files changed

+1482
-0
lines changed

‎states/-1/img/json.jpg‎

27.5 KB
Loading

‎states/-1/img/sprite.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎states/-1/img/wallpaper.jpg‎

230 KB
Loading

‎states/-1/index.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Document</title>
8+
</head>
9+
<body class="Bgc-white C-$accent900 Fnf-mUss -ShortTsd200ms -HeaderH12u">
10+
11+
<div class="Ps-a W100p H100vh Bgc#242d34 D-f Jc-c Ai-c">
12+
13+
<div class="Ps-a Mxw600 W90p H160u Mxh90vh Bgc-black T5p Bdrd5u Ovy-s P0;0;5u">
14+
<!-- Header -->
15+
16+
<header class="P2u;3u H-$headerH Ps-f Mxw600 W90p Bgc#000*0.5 -Bdtrd5u Zi20">
17+
<div class="D-f Ai-str Jc-fs -Sz100p">
18+
<div class="Flg0 W10p H100p ">
19+
<!-- Close button-->
20+
<button class="btn Bd-n C-$accent900 Bgc-tp Bgc-$hover900_h H100p Apcr1 D Bdrd100p Tsd-$shortTsd">
21+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n">
22+
<use href="img/sprite.svg#cross"></use>
23+
</svg>
24+
</button>
25+
26+
</div>
27+
28+
<!-- Caption-->
29+
<div class="Flg0.9 H100p Fnw700 Fns5.5u">
30+
Edit profile
31+
</div>
32+
33+
<div class="Flg0.1 H100p">
34+
<!-- Save button -->
35+
<button class="btn Bgc-$accent900 Bgc-$hover850_h D P0 M0 C-$accent850 H100p W80p Bdrd10u Fnw600 Tsd-$shortTsd">
36+
<span class="D">
37+
Save
38+
</span>
39+
</button>
40+
</div>
41+
</div>
42+
</header>
43+
44+
<!-- Form's main part -->
45+
46+
<main class="P0 Ps-r">
47+
48+
<!-- Profile wallpaper-->
49+
<div class="Mt-$headerH H50u Ov-h Ps-r D-f Jc-c Ai-c Mb20u">
50+
<!-- Wallpaper-->
51+
<img src="img/wallpaper.jpg" class="D P0;1 W100p Ps-r" alt="wallpaper">
52+
<div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u Bgc-$hover200_h Bgc-$hover400 Tsd-$shortTsd -Ctx-wallpaper">
53+
54+
<!-- Change wallpaper button-->
55+
<div class="Bgc-$hover400 Bgc-$hover300_h Tsd-$shortTsd Bdrd100p P2u O0 ^wallpaper:h:_O1">
56+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" >
57+
<use href="img/sprite.svg#photo"></use>
58+
</svg>
59+
</div>
60+
61+
<!-- Delete wallpaper button -->
62+
<div class="Bgc-$hover400 Bgc-$hover300_h Tsd-$shortTsd Bdrd100p P2u O0 ^wallpaper:h:_O1">
63+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" >
64+
<use href="img/sprite.svg#cross"></use>
65+
</svg>
66+
</div>
67+
68+
</div>
69+
</div>
70+
71+
<div class="Ps-a Zi10 H30u D-ib Bd2;s;black Bdrd100p Apcr1 T38u L5u">
72+
<!-- Profile photo-->
73+
<img src="img/json.jpg" class="D Bdrd100p" alt="profile-photo">
74+
75+
<div class="Ps-a T0 L0 -Sz100p Bdrd100p D-f Jc-c Ai-c Bgc-$hover200 O0 O1_h Tsd-$shortTsd">
76+
<!-- Change profile photo button-->
77+
<div class="Bgc-$hover400 Bgc-$hover300_h Tsd-$shortTsd Bdrd100p P2u">
78+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n">
79+
<use href="img/sprite.svg#photo"></use>
80+
</svg>
81+
</div>
82+
</div>
83+
</div>
84+
85+
<!-- The part with the inputs -->
86+
<div class="P3u;5u_:div Tsd-$shortTsd_:label Tsd-$shortTsd_:span">
87+
88+
<!-- Name -->
89+
<div>
90+
<label for="name" class="D Ps-r Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Ct-';';'*'_af C-$accent300_fw:af Ps-a_af T2u_af R2u_af Bdc-$accent400_!fw:h">
91+
<span class="D Mb1u ^:fw:_C-$accent200">Name</span>
92+
<input maxlength="50" id="name" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="Json Statement">
93+
</label>
94+
</div>
95+
96+
<!-- Bio-->
97+
<div>
98+
<label for="Bio" class="D Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h">
99+
<span class="D Mb1u ^:fw:_C-$accent200">Bio</span>
100+
101+
<textarea id="Bio" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900 Txw-w Rs-n" type="text" placeholder="" >A professional Frontend dev and killer-feature maker with 20 years of experience</textarea>
102+
</label>
103+
</div>
104+
105+
<!-- Location -->
106+
<div>
107+
<label for="location" class="D Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h">
108+
<span class="D Mb1u ^:fw:_C-$accent200">Location</span>
109+
<input maxlength="100" id="location" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="Planet Earth">
110+
</label>
111+
</div>
112+
113+
<!-- Website -->
114+
<div>
115+
<label for="website" class="D Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h">
116+
<span class="D Mb1u ^:fw:_C-$accent200">Website</span>
117+
<input maxlength="100" id="website" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="https://mlut.style/">
118+
</label>
119+
</div>
120+
</div>
121+
122+
<!-- Expanded bio-->
123+
<div class="Fi-$accent200_h::svg">
124+
<div class="D-f Ai-c Jc-sb -Ctx Bgc-$accent600_h Tsd-$shortTsd P2u;5u">
125+
<span class="D Fns5u"> Create expanded bio</span>
126+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent800 -Sz26 P0.5u Us-n Tsd-ih">
127+
<use href="img/sprite.svg#larger"></use>
128+
</svg>
129+
</div>
130+
</div>
131+
132+
<!-- Skills -->
133+
<div class="Fi-$accent200_h::svg">
134+
<div class="D-f Ai-c Jc-sb -Ctx Bgc-$accent600_h Tsd-$shortTsd P2u;5u">
135+
<span class="D Fns5u"> Add your skills</span>
136+
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent800 -Sz26 P0.5u Us-n Tsd-ih">
137+
<use href="img/sprite.svg#larger"></use>
138+
</svg>
139+
</div>
140+
</div>
141+
142+
</main>
143+
</div>
144+
</div>
145+
</body>
146+
</html>

0 commit comments

Comments
 (0)