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 all 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.
124 changes: 124 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,124 @@
<!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">

<div class="Ps-a W100p H100vh Bgc-grey 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*50p -Bdtrd5u 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 Bgc-$secondary900_h H100p Apcr1 D Bdrd100p -Ts">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n">
<use href="img/sprite.svg#cross"></use>
</svg>
</button>
</div>

<!-- Caption-->
<div class="W90p H100p Fnw700 Fns6u D-f Ai-c">
<span> Edit profile</span>
</div>

<div class="H100p P0.5u;0">
<!-- Save button -->
<button class="btn Ml-a Bgc-$accent900 Bgc-$secondary850_h 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="Mt-$headerH H50u Ov-h Ps D-f Jc-c Ai-c 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 Bgc-$secondary200_h Bgc-$secondary400 -Ts -Ctx-wallpaper">

<!-- Change wallpaper button-->
<div class="Bgc-$secondary400 Bgc-$secondary300_h -Ts Bdrd100p P2u O0 ^wallpaper:h:_O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n" >
<use href="img/sprite.svg#photo"></use>
</svg>
</div>

<!-- Delete wallpaper button -->
<div class="Bgc-$secondary400 Bgc-$secondary300_h -Ts Bdrd100p P2u O0 ^wallpaper:h:_O1">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 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-$secondary200 O0 O1_h -Ts">
<!-- Change profile photo button-->
<div class="Bgc-$secondary400 Bgc-$secondary300_h -Ts Bdrd100p P2u">
<svg viewBox="0 0 24 24" aria-hidden="true" class="-Sz26 Us-n">
<use href="img/sprite.svg#photo"></use>
</svg>
</div>
</div>
</div>

<!-- The part with the inputs -->
<div class="-Ts_:input,:textarea C-$accent500_:input,:textarea">

<!-- Name -->
<div class="Mb5u P0;5u">
<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 -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 class="Mb5u P0;5u">
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx 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 class="Mb5u P0;5u">
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx 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 class="Mb5u P0;5u">
<label class="D Bd1;s;$accent600 Bdc-$accent200_fw C-$accent600 Bdrd2u P2u -Ctx 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>
</body>
</html>
Loading