Laborator nr.5

Ministerul Educaţiei, Culturii şi Cercetării
al Republicii Moldova
Universitatea Tehnică a Moldovei
Facultatea Electronică şi Telecomunicaţii
Departamentul Telecomunicaţii şi Sisteme Electronice
Lucrarea de laborator Nr.5

La disciplina
“Aplicații software specializate ”
Tema:Utilizarea tipografiei in continutul paginii webb
A efectuat: st.gr IMTC-181

Zamfirov Eugeniu
A verificat: l.univ. Alexei Arina
Chișinău 2021
I)Obiective:
-utilizarea tipografiei in continutul paginii web;
- realizarea raportului pentru lucrarea de laborator.
II)Pasii principali.
1)Am inceput prin aplicarea stilurilor pentru elementul <body> .Am creat o noua
sectiune pentru aceste stiluri perosnalizate in fisierul main.css.
2)Am adaugat citeva stiluri tipografice ,adaugind in mod specific o margina de jos
la citeva niveluri diferite de titluri si paragrafe.In aceeasi sectiune a fisierului
main.css ,adaugam o culoare la nivelurile heading 1-4.
3)Elementele <h5> vor fi mai unice decit restul rubricilor .In consecinta vom schimba putin stilul
lor.
4)Setam un stil de caractere cu caractere italice

5)Am adaugat citeva stiluri la elementele de ancorare. Am schimbat culoarea intr-un gri deschis
cind un utilizator trece peste o ancora.
6)Actualizam stilurile la elementul <header> ,prin actualizarea logo-ului si adaugarea

proprietatilor de dimensiune a fontului,inaltimii a liniei in setul de reguli al logo-ului.
7)Adaugam o margine la elementul <h3> din elementul <header> pentru al echilibra.Pune o

valoare de atribut de clasa tagline.
8)Dupa elementul <h3> cu valoarea atributului de clasa tagline,vine elemtul <nav>.Adaugam o

valoare de atribut de clasa primary-nav
.
9)Folosim selectorul de clase hero existent si creand noi selectori pentru elementele <h2> si <p>.
Stilurile pentru sectiune se vor descompune in felul dat:
10)Am adaugat o valoare a atributului de clasa de teaser la toate cele 3 coloane din pagina de
pornire.
11)Am plutit logo-ul spre stinga in elementul <header>. Am adaugat proprietatea text-align cu
valoare right la emenetul <h3>
12)Adaugam stiluri de navigare partajate. Incepem prin adaugarea proprietatii text-aling cu o
valoare right la un set de reguli de clasa nav.
13)Adaugam fontul Roboto
13)Am stability si elementul de paragraph din sectiunea hero la acea greutate. Putem folosi
selectorul existent pentru a face acest lucru .Noul set de reguli.
Rezultat la pagine web.
III)Codul HTML
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>
Livrare Flori Hancesti
</title>
<link rel="stylesheet" href="assets/stylesheet/main.css">
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400&display=swap" rel="stylesheet">
</head>
<body>
<header class="primary-header container group">
<section class="container">
<h1 class="logo">
<a href="acasa.html">
LIVRARE <br> FLORI <br> HANCESTI
</a>
</h1>
</section>
<div class="bg-img">
<div class="cont">
<div class="topnav">
<ul>
<li><a href="acasa.html">Acasa</a></li><li><a href="buchete.html" target="_blank">Buchete</a></li><li><a href="flori_camera.html" target="_blank">Flori de

camera</a></li><li><a href="cosuri.html" target="_blank">Cosuri</a></li><li><a href="compozitii.html" target="_blank">Compozitii</a></li><li><a href="contacte.html" target="_blank">Contacte</a></li>
</ul>
</div>
</div>
</div>
</header>
<section class="row-alt">
<div class="container">

<section class="teaser col-1-3">
<h5>Buchete</h5>
<a href="buchete.html" target="_blank">
<img src="aaa.jpg" width="200" height="111">
<h3>Orice floare se poate transforma in buchet</h3>
</a>
<p>Alege un buchet deja existent sau utilizeaza-ti toata imaginatia pentru
crearea la ceva nou! </p1>
</section>

<section class=" teaser col-1-3">
<h5>Flori de camera</h5>
<a href="flori_camera.html" target="_blank">
<img src="bbb.jpg" width="200" height="111">
<h3>Flori pentru interior sau exterior</h3>
</a>
<p>Cel mai larg asortiment in stoc sau la comanda </p>
</section >

<section class=" teaser col-1-3">
<h5>Cosuri</h5>
<a href="cosuri.html" target="_blank">
<img src="ccc.jpg" width="200" height="111">
<h3>Doresti originalitate ,atunci comanda chiar acum un cos</h3>
</a>
<p>Cel mai larg asortiment in stoc sau la comanda </p>
</section>

<section class="teaser col-1-3">
<h5>Compozitii</h5>
<a href="compozitii.html" target="_blank">
<img src="ddd.jpg" width="200" height="111">
<h3>Cumpara ceva original si nemaivazut pan acum</h3>
</a>
<p>Creaza ceva original doar bazandute doar pe imaginatie </p>
</section>
</div>
</section>
<footer class="primary-footer container group ">
<div class="ft footer2" >
<ul>
<li><a href="acasa.html">Acasa</a></li><li><a href="buchete.html"
target="_blank">Buchete</a></li><li><a href="flori_camera.html" target="_blank">Flori de
camera</a></li><li><a href="cosuri.html" target="_blank">Cosuri</a></li><li><a href="compozitii.html"
target="_blank">Compozitii</a></li><li><a href="contacte.html" target="_blank">Contacte</a></li>
</ul>
</div>
<small class="hero container"> ©LIVRARE FLORI HANCESTI 2021

</small>
</footer>
</body>
</html>
Css cod
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
body {
line-height: 1;
ol, ul {
list-style: none;
blockquote, q {
quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
table {
border-collapse: collapse;
border-spacing: 0;
/*
===============================
Grid
===============================
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.container {
margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
width: 1 auto;
/*
===================
Typography
===================
*/
h1, h3, h4 ,h5, p {

margin-bottom: 22px;
/*
====================
Buttons
====================
*/
.btn{
border-radius : 5px;
color: #fff;
cursor: pointer;
font-weight: 400;
letter-spacing: .5px;
display: inline-block;
margin: 0;
text-transform: uppercase;
.btn-alt{
border: 1px solid #fff;
padding: 10px 30px;
.btn-alt:hover{
background: #fff;
color: #648880;}
/*
===============
Home
===============
*/
.hero{
color: #383838 ;
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: right;
}
.hero h2{
font-size: 36 px;}
.hero p{
font-size: 24px;
font-weight: 100;}
/*
==========================
Clearfix
==========================
*/
.group:before,
.group:after{
content: "";
display: table;}
.group:after{
clear: both;}
.group{
clear: both;
*zoom: 1;}
/*
================
Primary header
================
*/
.logo{
border-top: 4px solid #648880;
padding: 40px 0 22px ;
float:left;}
/*
===============
Primary footer
===============
*/
.primary-footer{
color: #648880;
font-size: 14px;
padding-bottom: 44px;
padding-top: 44px;}
.col-1-3{
width: 23.33%;}
.col-2-3{
width: 76.66%;}
.col-1-3,
.col-2-3{
vertical-align: top;}
.grid,
.col-1-3,
.col-2-3{
padding-left: 15px;
padding-right: 15px;}
.container,
.grid{
margin: 0 auto;
width: 1200px;}
.container{
padding-left: 30px;
padding-right: 30px;}
/*
==================
Custom styles
==================
*/
body{
background-image: url("fundal.jpg" );
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
color:#FF0000 ;
font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue",

Helvetica,Arial, sans-serif;
h1,h2,h3,h4{
color: #64880;}
h1{
font-size: 36px;
line-height: 44px;}
h2{
font-size: 24px;
line-height: 44px;}
h3{
font-size: 21px;}
h4{
font-size: 18px;}
h5{
color: #FF0000 ;
font-size: 14px;
font-weight: 400; }
strong{
font-weight: 400;
cite, em{
font-style: italic; }
/*
==================
Links
==================
*/
a:hover{
color: #000000 ;}
a{
color: #000000 ;}
.logo{
border-top : 4px solid #000000 ;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px 0;
text-transform: uppercase;
.primary-nav{
font-size:14px;
font-weight: 400;}
.primary-footer small {
float: left;
font-weight: 400;
.teaser a:hover h3 {
color : #000000 ;}
a{
color: #000000 ;
text-decoration: none;}
a:hover{
color: #a9b2b9;}
pa{
border-bottom: 1px solid #dfe2e5;}
h5{
color: #000080 ;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;}
.primary-nav{
font-size:14px;
font-weight: 400;
]letter-spacing: .5px;
text-transform: uppercase;}
.tagline{
margin: 66px 0 22px 0;
text-align: right;}
/*
======================
Navigation
======================
*/
.nav{
text-align: right;}
.primary-header a,
.primary-footer a {
color: #000000 ;
.primary-header a:hover,
.primary-footer a:hover{
color: #648880;}
/*
================
Rows
================
*/
.row{
background: #fff;
min-width: 1200px;
padding: 66px 0 44px 0;}
.row,
.row-alt{
min-width: 1200px;}
.row-alt{
background:#cbe2c1;
background: -webkit-linear-gradient(to right, #77fd9f, #f6f1d3);
background: -moz-linear-gradient(to right, #77fd9f, #f6f1d3);
background: linear-gradient(to right, #77fd9f, #f6f1d3);
/*
==================
Leads
==================
*/
.lead{
text-align: center;}
.lead p{
font-size: 21px;
line-height: 33px;}
.nav li{
margin:0 10px;
vertical-align: top;}
.nav li:last-child{
margin-right: 0;}
/*
====================
Buchete
====================
*/
.Buchete{
border: 1px solid #dfe2e5;
border-radius: 5px;
margin-top: 88px;
padding: 22px 0;
text-align: center;}
.buc{
margin-bottom: 44px;}
.row1{
background:#cbe2c1;
background: -webkit-linear-gradient(to left, #ffc0cb #f6f1d3);
background: -moz-linear-gradient(to left, #ffc0cb, #f6f1d3);
background: linear-gradient(to left, #ffc0cb, #f6f1d3);
.bg-img {
min-height: 340px;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
/* Position the navbar container inside the image */
.cont {
position: absolute;
margin: 10px 0 0 1000px;
/* The navbar */
.topnav {
overflow: hidden;
/*text-shadow: 0.5px 0.5px;
*/font-weight: 900;
/* Navbar links */
.topnav a {
float: left;
color: #F70056;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
.topnav a:hover {
background-color: #ddd;
color: black;
.ft a{
float: left;
color: #383838;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
padding-left: 50px;
font-weight: 500;
font: bold;
.footer2{
display: center;
padding-left: 150px;
text-align: center;
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
/* Hide the images by default */
.mySlides {
display: none;
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;

user-select: none;
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
/* Caption text */
.text {
color: black;
font-weight: bold;
font-size: 22px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
transition: background-color 0.6s ease;
.active, .dot:hover {
background-color: #717171;
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
IV)Concluzie.
În urmă efectuării lucrării de laborator am adaugat citeva proprietati bazate pe fonturi.In fisierul
main.css am creat noi sectiuni pentru a-l pastra mai organizat.Am resetat stiluri implicite ale
browserului pentru elementele <string><cite><em>.Am adaugat valoare de atribut de clasa
primary-nav,am crescut valoarea font-weight a elementului <small>.
Site-ul a inceput a arata mai bine din punct de vedere al structurii,ceea ce i-a oferit un aspect
vizual mai placut .

Laborator nr.5

Încărcat de

Informații document

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

Laborator nr.5

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educaţiei, Culturii şi Cercetării

Lucrarea de laborator Nr.5

A efectuat: st.gr IMTC-181

A verificat: l.univ. Alexei Arina

4)Setam un stil de caractere cu caractere italice

6)Actualizam stilurile la elementul <header> ,prin actualizarea logo-ului si adaugarea

7)Adaugam o margine la elementul <h3> din elementul <header> pentru al echilibra.Pune o

8)Dupa elementul <h3> cu valoarea atributului de clasa tagline,vine elemtul <nav>.Adaugam o

13)Adaugam fontul Roboto

Livrare Flori Hancesti

<link rel="stylesheet" href="assets/stylesheet/main.css">

<header class="primary-header container group">

LIVRARE <br> FLORI <br> HANCESTI

--><li><a href="buchete.html" target="_blank">Buchete</a></li><!--

--><li><a href="flori_camera.html" target="_blank">Flori de

--><li><a href="cosuri.html" target="_blank">Cosuri</a></li><!--

--><li><a href="compozitii.html" target="_blank">Compozitii</a></li><!--

--><li><a href="contacte.html" target="_blank">Contacte</a></li>

<section class="teaser col-1-3">

<a href="buchete.html" target="_blank">

<img src="aaa.jpg" width="200" height="111">

<h3>Orice floare se poate transforma in buchet</h3>

<section class=" teaser col-1-3">

<a href="flori_camera.html" target="_blank">

<img src="bbb.jpg" width="200" height="111">

<h3>Flori pentru interior sau exterior</h3>

<p>Cel mai larg asortiment in stoc sau la comanda </p>

<section class=" teaser col-1-3">

<a href="cosuri.html" target="_blank">

<img src="ccc.jpg" width="200" height="111">

<h3>Doresti originalitate ,atunci comanda chiar acum un cos</h3>

<p>Cel mai larg asortiment in stoc sau la comanda </p>

<section class="teaser col-1-3">

<a href="compozitii.html" target="_blank">

<img src="ddd.jpg" width="200" height="111">

<h3>Cumpara ceva original si nemaivazut pan acum</h3>

<p>Creaza ceva original doar bazandute doar pe imaginatie </p>

<footer class="primary-footer container group ">

<div class="ft footer2" >

--><li><a href="cosuri.html" target="_blank">Cosuri</a></li><!--

--><li><a href="contacte.html" target="_blank">Contacte</a></li>

<small class="hero container"> &copy;LIVRARE FLORI HANCESTI 2021

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

h1, h3, h4 ,h5, p {

padding: 10px 30px;

padding: 22px 80px 66px 80px;

border-top: 4px solid #648880;

padding: 40px 0 22px ;

background-position: center center;

font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue",

border-top : 4px solid #000000 ;

padding: 40px 0 22px 0;

<small class="hero container"> ©LIVRARE FLORI HANCESTI 2021