Pagina de profil cu carduri: box model și flexbox

Cardul — dreptunghiul cu colțuri rotunjite, umbră discretă și conținut scurt — e peste tot: pe YouTube, pe site-urile de știri, în magazinele online. Azi îl construiești tu. La finalul laboratorului vei avea o pagină de profil personal cu trei carduri așezate frumos unul lângă altul, și vei ști să explici de ce stau acolo și nu unul sub altul.

Ce îți trebuie

• VS Code (code.visualstudio.com) și un browser.
• Dosarul site-ul-meu din laboratorul trecut. Dacă nu-l mai ai, creezi unul nou în 2 minute — pașii sunt mai jos.
• Fără cont, totul local.
• Timp: 45 de minute — 15 pentru card, 15 pentru flexbox, 15 pentru misiune.

Fiecare element e o cutie

Înainte de primul rând de cod, regula care explică tot CSS-ul de azi: browserul desenează orice element ca pe o cutie cu patru straturi.

Ține minte ordinea din interior spre exterior: conținut → padding → border → margin. Când un card „respiră" frumos, e padding. Când două carduri nu se lipesc între ele, e margin.

Construiește primul card

1. În dosarul proiectului, creează profil.html și pornește de la schema de bază (tastezi ! + Tab în VS Code). Leagă fișierul CSS existent cu link rel="stylesheet" către css/style.css.
2. În body, adaugă un titlu și primul card:

<h1>Profilul meu</h1>

<div class="card">
    <h2>Cine sunt</h2>
    <p>Elev în clasa a VII-a. Îmi place să aflu cum funcționează lucrurile.</p>
</div>

3. În css/style.css, adaugă regula pentru clasa card:

.card {
    background: white;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

4. Deschide pagina în browser. Apoi experimentează pe rând, cu refresh după fiecare schimbare: pune padding: 0 (textul se lipește de ramă — urât), pune-l înapoi pe 16px, apoi schimbă border-radius la 0 și la 30px. Acum ai văzut box model-ul cu ochii tăi.

Trei carduri pe un rând, cu flexbox

5. Duplică div-ul cu clasa card de încă două ori și schimbă conținutul: al doilea card — „Materia mea preferată", al treilea — „Ce vreau să învăț anul ăsta". Refresh: cardurile stau unul sub altul. Normal — fiecare div ocupă singur un rând întreg.
6. Ca să stea pe un rând, au nevoie de un părinte care să le alinieze. Împachetează cele trei carduri într-un container:

<div class="rand-carduri">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

7. În CSS, transformă containerul în flexbox:

.rand-carduri {
    display: flex;
    gap: 16px;
}

.card {
    flex: 1;
}

Două lucruri s-au întâmplat: display: flex pe părinte așază copiii pe orizontală, iar flex: 1 pe copii îi face să împartă lățimea în mod egal. gap pune spațiu între ei fără să te mai chinui cu margini.

8. Testează elasticitatea: strânge fereastra browserului. Cardurile se îngustează împreună, ca trei pasageri pe o banchetă. Asta face flexbox — distribuie spațiul disponibil.

Dacă nu merge

• Cardurile n-au niciun stil. Cel mai des: ai scris class = "card" cu spații, sau în CSS ai uitat punctul din .card. HTML-ul iartă spațiile, CSS-ul nu iartă punctul.
• display: flex nu face nimic. Regula e pe elementul greșit. Deschide pagina, clic dreapta pe un card → Inspect: în panoul care se deschide vezi exact ce reguli primește fiecare element. E cel mai bun instrument de detectiv CSS.
• Cardurile stau pe rând, dar unul e mult mai lat. Unul dintre carduri nu are flex: 1 — probabil are altă clasă sau un typo în numele clasei.
• Umbra nu se vede. box-shadow are patru valori despărțite prin spații; dacă lipsește una sau ai virgule în plus, browserul ignoră toată linia. Copiaz-o din nou din laborator.
• Ai stricat tot și nu știi unde. În VS Code, Ctrl + Z ține istoricul pe fiecare fișier. Întoarce-te la ultima variantă care mergea și refă pașii unul câte unul.

Misiunea ta

Nivel de bază: pagina de profil are titlu și trei carduri egale pe un rând, fiecare cu subtitlu și text propriu.

Extindere: adaugă în fiecare card o imagine sus (poate fi orice imagine ai local, pusă în dosarul img). Ca să nu deformeze cardul, dă-i în CSS max-width: 100%. Apoi leagă pagina de profil în meniul site-ului din laboratorul trecut.

Provocare: fă un al doilea rând cu patru carduri mai mici („4 lucruri pe care le știu să le fac"). Același CSS, alt container — nu ai voie să scrii reguli noi pentru lățimi. Dacă ai făcut flexbox-ul corect, funcționează din prima.

Ai terminat când:

• cele trei carduri stau pe un rând și se îngustează împreună când strângi fereastra;
• poți arăta cu degetul pe ecran unde e padding-ul și unde e margin-ul unui card;
• schimbi gap la 40px și spațiul dintre carduri crește vizibil după refresh;
• pagina folosește același css/style.css ca restul site-ului.