Skip to content

Add the tutorial about states #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ramazanmak wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add the tutorial about states #1

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
774974f
feat: add the repository for the states-step of the course
Ramazanmak Nov 4, 2025
d7b0765
fix: rebuild css to add color palette
Ramazanmak Nov 4, 2025
5116aa7
fix: change some stylistical choices
Ramazanmak Dec 8, 2025
6bfb7cf
fix: reshape stylistics and change the initial stage
Ramazanmak Dec 15, 2025
3445d4c
fix: add images to the basic's folder that I've accidentally deleted
Ramazanmak Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<h1>mlut tutorials</h1>
<ul>
<li><a href="basics/0">Basics</a></li>
<li><a href="states/0">States</a></li>
</ul>
</body>
</html>
Binary file added states/-1/img/json.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions states/-1/img/sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added states/-1/img/wallpaper.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
147 changes: 147 additions & 0 deletions states/-1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!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 -ShortTsd200ms -HeaderH13u">

<div class="Ps-a W100p H100vh Bgc#242d34 D-f Jc-c Ai-c">

<div class="Ps-a Mxw600 W90p H160u Mxh90vh Bgc-black T5p Bdrd5u Ovy-s P0;0;5u">
<!-- Header -->

<header class="P2u;3u H-$headerH Ps-f Mxw600 W90p Bgc#000*0.5 -Bdtrd5u Zi20">
<div class="D-f Ai-str Jc-fs -Sz100p">

<!-- Close button-->
<div class="Flg0 W10p H100p ">
<button class="btn Bd-n C-$accent900 Bgc-tp Bgc-$hover900_h H100p Apcr1 D Bdrd100p Tsd-$shortTsd">
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n">
<use href="img/sprite.svg#cross"></use>
</svg>
</button>

</div>

<!-- Caption-->
<div class="Flg0.9 H100p Fnw700 Fns5.5u D-f Ai-c">
<span> Edit profile</span>
</div>

<div class="Flg0.1 H100p P0.5u;0">
<!-- Save button -->
<button class="btn Ml-a Bgc-$accent900 Bgc-$hover850_h D-f Ai-c Jc-c C-$accent850 H100p W18u Bdrd10u Fnw600 Tsd-$shortTsd ">
<span class="Lnh100p">
Save
</span>
</button>
</div>
</div>
</header>

<!-- Form's main part -->

<main class="P0 Ps-r">

<!-- Profile wallpaper-->
<div class="Mt-$headerH H50u Ov-h Ps-r D-f Jc-c Ai-c Mb20u">
<!-- Wallpaper-->
<img src="img/wallpaper.jpg" class="D P0;1 W100p Ps-r" alt="wallpaper">
<div class="Ps-a Zi2 T0 L0 -Sz100p D-f Jc-c Ai-c Gap5u Bgc-$hover200_h Bgc-$hover400 Tsd-$shortTsd -Ctx-wallpaper">

<!-- Change wallpaper button-->
<div class="Bgc-$hover400 Bgc-$hover300_h Tsd-$shortTsd Bdrd100p P2u O0 ^wallpaper:h:_O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" >
<use href="img/sprite.svg#photo"></use>
</svg>
</div>

<!-- Delete wallpaper button -->
<div class="Bgc-$hover400 Bgc-$hover300_h Tsd-$shortTsd Bdrd100p P2u O0 ^wallpaper:h:_O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n" >
<use href="img/sprite.svg#cross"></use>
</svg>
</div>

</div>
</div>

<div class="Ps-a Zi10 H30u D-ib Bd2;s;black Bdrd100p Apcr1 T38u L5u">
<!-- Profile photo-->
<img src="img/json.jpg" class="D Bdrd100p" alt="profile-photo">

<div class="Ps-a T0 L0 -Sz100p Bdrd100p D-f Jc-c Ai-c Bgc-$hover200 O0 O1_h Tsd-$shortTsd">
<!-- Change profile photo button-->
<div class="Bgc-$hover400 Bgc-$hover300_h Tsd-$shortTsd Bdrd100p P2u">
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-cc -Sz26 P0.5u Us-n">
<use href="img/sprite.svg#photo"></use>
</svg>
</div>
</div>
</div>

<!-- The part with the inputs -->
<div class="Mb5u_:div P0;5u_:div Tsd-$shortTsd_:label Tsd-$shortTsd_:span">
Copy link
Collaborator

@mr150 mr150 Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

На названия тегов завязываться не надо. В крайнем случае, допустимо на input для css only интерактивности


<!-- Name -->
<div>
<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">
Copy link
Collaborator

@mr150 mr150 Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ps-r - можно использовать дефолтное значение утилиты, оно такое же

Copy link
Collaborator

@mr150 mr150 Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bd1;s;$accent600 - вижу, что меняется только цвет. Есть же Bdc

<span class="D Mb1u ^:fw:_C-$accent200">Name</span>
<input maxlength="50" id="name" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="Json Statement">
</label>
</div>

<!-- Bio-->
<div>
<label for="Bio" class="D Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h">
<span class="D Mb1u ^:fw:_C-$accent200">Bio</span>

<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>
</label>
</div>

<!-- Location -->
<div>
<label for="location" class="D Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h">
<span class="D Mb1u ^:fw:_C-$accent200">Location</span>
<input maxlength="100" id="location" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="Planet Earth">
</label>
</div>

<!-- Website -->
<div>
<label for="website" class="D Bd1;s;$accent600 Bd1;s;$accent200_fw C-$accent600 Bdrd2u P2u -Ctx Bdc-$accent400_!fw:h">
<span class="D Mb1u ^:fw:_C-$accent200">Website</span>
<input maxlength="100" id="website" class="D W100p Bgc-tp Bd-n Ol-n C-$accent900" type="text" placeholder="" value="https://mlut.style/">
</label>
</div>
</div>

<!-- Expanded bio-->
<div class="Fi-$accent200_h::svg">
<div class="D-f Ai-c Jc-sb -Ctx Bgc-$accent600_h Tsd-$shortTsd P2u;5u">
<span class="D Fns5u"> Create expanded bio</span>
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent600 -Sz26 P0.5u Us-n Tsd-ih">
<use href="img/sprite.svg#larger"></use>
</svg>
</div>
</div>

<!-- Skills -->
<div class="Fi-$accent200_h::svg">
<div class="D-f Ai-c Jc-sb -Ctx Bgc-$accent600_h Tsd-$shortTsd P2u;5u">
<span class="D Fns5u"> Add your skills</span>
<svg viewBox="0 0 24 24" aria-hidden="true" class="Fi-$accent600 -Sz26 P0.5u Us-n Tsd-ih">
<use href="img/sprite.svg#larger"></use>
</svg>
</div>
</div>

</main>
</div>
</div>
</body>
</html>
Loading