Laboratorul - 3 - ASS - Nitreanu Andrei

Ministerul Educației și Cercetării al Republicii
Moldova
Universitatea Tehnică a Republicii Moldova
Facultatea Electronică și Telecomunicații
Departament Telecomunicații și Sisteme Electronice
DARE DE SEAMĂ
Lucrare de laborator nr.3
la disciplina: APLICAȚII SOFTWARE SPECIALIZATE
Tema:“ Fonturi.Stiluri.Liste”
A efectuat st. gr. IMTC-201: Nitreanu Andrei
A verificat l. univ.: Alexei Arina
Chișinău 2023
1.1 Scopul lucrării: Modificarea aspectului vizual al site-ul proiectat
1.2 Sarcina practică
Elaborarea lucrării a fost efectuată în baza documentelor suport anexate în care sunt redate
toți pașii necesari pentru implementarea modificărilor asupra aspectului vizual al site-ului.
Codul HTML
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<title>Skoda</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<h1>Skoda</h1>
<p>Škoda, este un producător ceh de automobile, ca vechime unul din primii 4 din lume.
<p>
<header cllass="'container">
<h1>Skoda</h1>
<h3>Skoda Moldova</h3>
<a href="https://www.skoda.md/" class="btn btn-alt">Contacteaza-ne</a>
<nav>
<a href="index.html">Home</a>
<a href="Modele.html">Modele</a>
<a href="History.html">Descopera Skoda</a>
<a href="Oferte.html">Oferte</a>
<a href="contacte.html">Contacte</a>
</nav>
</header>
<section class="container">
<h2>Inginerii creeaza viitorul!</h2>
<p>Škoda, este un producător ceh de automobile, ca vechime unul din primii 4 din
lume.</p>
</section>
<section>
<section>
<a href="Modele.html">
<h5>Modele</h5>
</a>
<p>Afla modelele noi de Skoda.</p>
</section>
<section>
<a href="History.html">
<h5>History</h5>
</a>
<p>Descopera istoria Skoda</p>
</section>
<section>
<a href="Oferte.html">
<h5>Oferte</h5>
</a>
<p>Decopera ofertele noi</p>
</section>
</section>
<h1>
<a href="index.html">Skoda Moldova</a>
</h1>
<footer class="container">
<small>© Scoda Moldova | DAAC HERMES 2023</small>
<nav>
<a href="index.html">Home</a>
<a href="Modele.html">Modele</a>
<a href="History.html">Descopera Skoda</a>
<a href="Oferte.html">Oferte</a>
<a href="contacte.html">Contacte</a>
</nav>
</footer>
</body>
</html>
Codul CSS
/* ===================================
Clearfix
==================================*/
.group:before, .group:after { content: ""; display: table;

}
.group.after { clear: both;

}
.group {
clear: both;
*zoom: 1;
}
/* ==============================
Primary header
========================*/
.logo { float: left; border-top: 4px solid #648880; font-size: 48px; font-weight: 100; letter-
spacing: .5px; line-height: 44px; padding: 40px 0 22px 0; text-align: uppercase;
}
/* ==============================
Primary footer
========================*/ .primary-footer small { float: left; padding-bottom: 44px;
padding-top: 44px; font-weight: 400;
}
/*===========================
Custom style
=========================*/
h1 {
font-size: 36px; line-height: 44px;
}
h2 { font-size: 24px; line-height: 44px;

} h3 { font-size: 21px;
} h4 { font-size: 18px;
} h5 { color: lightgreen; font-size: 14px; font-weight: 400;
text-transform: uppercase;
} strong { font-weight: 400;
} cite, em { font-style: italic;
}
/*==============================
Links
=============================*/ a:hover { color: lightgray;
} a{
color: lightblue; text-decoration: none;
}
.tagline { margin: 66px 0 22px 0; text-align: right;

}
.primary-nav { font-size: 14px; font-weight: 400; letter-spacing: .5px; text-transform:

uppercase;
}
.primary-footer { color: #648880; font-size: 14px; padding-bottom: 44px; padding-top: 44px;
}
.hero { line-height: 44px; padding: 22px 80px 66px 80px; text-align: center;
}
.hero h2 {
font-size: 36px;
}
.hero p { font-size: 24px; font-weight: 100;

}
.teaser a :hover h3 { color: #a9b2b9;

} pa{ border-bottom: 1px solid #dfe2e5;
}
/*=======================================
Navigation
=====================================*/
.nav { text-align: right;
} body { color: #888; font: 300 16px/22px "Edu NSW ACT Foundation", "Open Sans", "sans-
serif"; }
Afișarea rezultatului final
Concluzie
În cadrul lucrării de laborator am analizat fonturile și stilurile pentru afișarea vizuală a site-
ului proiectat. Pentru aplicarea acestor fonturi am folosit atribute de tipul class pentru
stilizarea secțiunilor. Respectiv, am modificat afișarea, culoarea, poziționarea și fontul de
reprezentare a acestora. În ceea ce privește schimbul fontului, nu am utilizat unul standard,
dar am introdus unul la alegere de pe Google Fonts, fontul dat fiind anexat ca un link de
stilizare prin comenzile link href și rel=”stylesheet”.

Laboratorul - 3 - ASS - Nitreanu Andrei

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Laboratorul - 3 - ASS - Nitreanu Andrei

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educației și Cercetării al Republicii

la disciplina: APLICAȚII SOFTWARE SPECIALIZATE

A efectuat st. gr. IMTC-201: Nitreanu Andrei

A verificat l. univ.: Alexei Arina

.group:before, .group:after { content: ""; display: table;

.group.after { clear: both;

h2 { font-size: 24px; line-height: 44px;

.tagline { margin: 66px 0 22px 0; text-align: right;

.primary-nav { font-size: 14px; font-weight: 400; letter-spacing: .5px; text-transform:

.hero p { font-size: 24px; font-weight: 100;

.teaser a :hover h3 { color: #a9b2b9;

S-ar putea să vă placă și