1
Recapitulare rapida: tag-uri HTML folosite in proiect
Recapitulare rapida: tag-uri HTML folosite in proiect
In proiectul tau ai folosit tag-uri din toate cele 5 lectii anterioare. Iata un rezumat:
| Tag HTML | Ce face | Lectia |
|---|---|---|
<!DOCTYPE html> |
Spune browserului ca pagina e HTML5 | L1 |
<html>, <head>, <body> |
Structura de baza a oricarei pagini | L1 |
<h1>, <h2> |
Titluri (h1 = cel mai mare si important) | L2 |
<p> |
Paragraf de text | L2 |
<ul>, <ol>, <li> |
Liste neordonate / ordonate / element de lista | L3 |
<a href="..."> |
Link catre alta pagina sau sectiune | L3 |
<img src="..." alt="..."> |
Imagine cu text alternativ | L4 |
<figure>, <figcaption> |
Imagine cu legenda/subtitlu | L4 |
<header>, <section>, <footer> |
Tag-uri semantice - organizeaza pagina | L1-L2 |
<nav> |
Meniu de navigare | L3 |
<style> |
CSS intern - stilizeaza pagina | L5 |
2
Recapitulare CSS
Recapitulare CSS
In proiect ai folosit mai multe proprietati CSS. Iata ce face fiecare:
| Proprietate CSS | Ce face | Exemplu |
|---|---|---|
background-color |
Culoarea fundalului | #0a0a12 (negru-albastru) |
color |
Culoarea textului | #8b5cf6 (violet) |
font-family |
Tipul de font | Arial, sans-serif |
font-size |
Marimea textului | 2.5em (de 2.5 ori marimea normala) |
padding |
Spatiu interior (intre continut si margine) | 25px |
margin |
Spatiu exterior (intre element si vecini) | 20px auto (centreaza) |
border-radius |
Colturi rotunjite | 15px (colturi rotunde) |
border |
Bordura vizibila | 3px solid #8b5cf6 |
text-align |
Aliniere text | center |
text-decoration |
Subliniere / decorare text | none (scoate sublinierea) |
:hover |
Stil cand mouse-ul e deasupra | Schimba culoarea la hover |
display: flex |
Asaza elementele pe acelasi rand | Meniul de navigare |
3
Portofoliu complet - tot codul intr-un singur fisier
Portofoliu complet - tot codul intr-un singur fisier
Iata intreaga pagina de la inceput pana la sfarsit. Copiaz-o si salveaz-o ca portofoliu.html:
portofoliu.html - Codul complet
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofoliul lui Maria Popescu</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #0a0a12;
color: #f1f5f9;
margin: 0;
padding: 0;
}
header {
text-align: center;
padding: 40px 20px;
background-color: #1a1a2e;
border-bottom: 3px solid #8b5cf6;
}
h1 { color: #8b5cf6; font-size: 2.5em; }
h2 {
color: #06b6d4;
border-bottom: 2px solid #8b5cf6;
padding-bottom: 10px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 20px;
}
nav a {
color: #8b5cf6;
text-decoration: none;
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
}
nav a:hover {
background-color: #8b5cf6;
color: white;
}
section {
max-width: 700px;
margin: 20px auto;
padding: 25px;
background-color: #12121f;
border-radius: 15px;
}
img {
border-radius: 10px;
border: 3px solid #8b5cf6;
}
.galerie-container {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
figcaption {
color: #94a3b8;
font-style: italic;
}
a { color: #8b5cf6; text-decoration: none; }
a:hover {
color: #06b6d4;
text-decoration: underline;
}
footer {
text-align: center;
padding: 20px;
color: #64748b;
border-top: 1px solid #2d2d44;
}
</style>
</head>
<body>
<header>
<h1>Maria Popescu</h1>
<p>Eleva in clasa a VII-a</p>
<nav>
<ul>
<li><a href="#despre">Despre</a></li>
<li><a href="#hobby">Hobby-uri</a></li>
<li><a href="#galerie">Galerie</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="despre">
<h2>Despre mine</h2>
<img src="https://picsum.photos/150/150?grayscale" alt="Poza mea" width="150">
<p>Buna! Sunt Maria si imi place tehnologia.</p>
</section>
<section id="hobby">
<h2>Hobby-urile mele</h2>
<ol>
<li>Programare</li>
<li>Citit</li>
<li>Fotografie</li>
</ol>
</section>
<section id="galerie">
<h2>Galeria mea</h2>
<div class="galerie-container">
<figure>
<img src="https://picsum.photos/200/150?random=1" alt="Proiect 1" width="200">
<figcaption>Primul site</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/200/150?random=2" alt="Proiect 2" width="200">
<figcaption>Desen digital</figcaption>
</figure>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: <a href="mailto:maria@email.com">maria@email.com</a></p>
</section>
<footer>
<p>© 2026 Maria Popescu</p>
</footer>
</body>
</html>
4
Idee 1: Gradient pe fundal
Idee 1: Gradient pe fundal
In loc de o singura culoare de fundal, poti folosi un gradient (trecere intre doua culori):
Gradient CSS
header {
background: linear-gradient(135deg, #1a1a2e, #16213e);
/* Trecere de la un albastru-inchis la altul */
}
5
Idee 2: Efecte animate la hover
Idee 2: Efecte animate la hover
Poti face imaginile sa se mareasca usor cand treci mouse-ul peste ele:
Hover cu tranzitie
img {
transition: transform 0.3s;
/* tranzitia dureaza 0.3 secunde */
}
img:hover {
transform: scale(1.05);
/* mareste imaginea cu 5% */
}
6
Idee 3: O a doua pagina!
Idee 3: O a doua pagina!
Creeaza un al doilea fisier HTML (ex: proiecte.html) si leaga-l din meniul de navigare. In loc de #, foloseste numele fisierului:
Link catre alta pagina
<!-- In meniul de navigare -->
<li><a href="proiecte.html">Proiectele mele</a></li>