PROIECT PENTRU OBŢINEREA ATESTĂRII PROFESIONALE ÎN INFORMATICĂ

TITLUL LUCRĂRII:

Istoria automobilului

Profesori coordonatori: Elev:

Capangi Mihaela Somesan Sorin Vasile Iosif
Arba Mihaela Clasa a XII-a A

Dej
Mai, 2019

1
Cuprins
Introducere.......................................................................................................................3
Generalitati despre limbajul HTML................................................................................4
Cerinte hardware si software...........................................................................................9
Structura si continutul proiectului.................................................................................10
Codul sursa al Css:.........................................................................................................13
Bibliografie :..................................................................................................................33

2
Introducere

Lucrarea de fata are ca tema prezentarea Istoriei automobilului. Din meniul

principal putem alege :

 Acasa
 Istoric
 Repere
 Galerie
 Secolul XX
 Inovatii
 Noutati

Aplicatia a fost realizata in cea mai mare parte in limbajul HTML, prin editare
directa in cod sursa (scrierea liniilor de comanda) din template-ul ales. Filmele din
categoria Videoclipurile au fost introduse de pe siteul Youtube
(https://www.youtube.com)

Figura 1-reprezinta pagina index

3
Generalitati despre limbajul HTML

Pana in anul 1990 accesarea informatiilor de pe INTERNET era foarte

dificila si reteaua nu era folosita decat de un numar restrans de persoane, in general
oameni de stiinta.
Fizicianul Tim Berners-Lee a devenit celebru deoarece a inventat ‘link’-urile
hypertext.Aceasta idee a dus la dezvoltarea unui limbaj simplu care s-a impus pe piata
mondiala.Acest limbaj a fost numit Hypertext Markup Language, prescurtat, HTML.
Dar ce este de fapt limbajul HTML ? HTML-ul este un set de conventii
pentru marcarea portiunilor de document astfel incat fiecare portiune sa apara cu format
distinct atunci cand documentul este accesat de un program de analiza sintactica (parser).
HTML este limbajul de marcare ce stabileste aspectul documentelor WWW, iar prin
intermediul browserelor se poate vedea documentul gata formatat.
HTML este de fapt un subset al standardului SGML (Standard Generalized
Markup Language) si include capacitati care permit autorilor sa insereze hiperlegaturi
care afiseaza alte documente HTML cand se executa clic pe ele.
Notiunea de hypertext inseamna text pastrat in format electronic cu link-uri
intre pagini.
Pana in 1993, in jur de 100 de calculatoare erau echipate pentru a gazdui
pagini HTML;aceste pagini interconectate au fost denumite <WORLD WIDE WEB>
Nu mult dupa aceea au inceput sa fie scrise primele browsere Web cu ajutorul
carora puteau fi vizualizate pagini web care contineau text si imagini.
In functie de versiunea HTML folosita, paginile WEB sunt grupate in trei
generatii:
- paginile din prima generatie, care foloseau versiunea 1.0, in care se edita text si
1-2 imagini.

4
 - paginile din a doua generatie, proiectate cu HTML 2.0, care puteau contine si un
fundal, permiteau aranjarea datelor in tabele si posibilitatea de a comanda un
produs prin intermediul Internetului.
- paginile din a treia generatie care pot contine culori diferite, secvente animate,
sunete, etc.
In prezent a aparut a patra versiune a limbajului HTML.
Documentele HTML sunt exclusiv de tip text (ASCII); ele pot fi editate direct,
prin comenzi specifice sistemului de operare folosit. In WINDOWS, se poate utiliza
NOTEPAD,WORDPAD sau orice alt editor de texte.
Vizualizarea acestor documente se face cu ajutorul unor aplicatii speciale,
numite BROWSER-e, care nu depind de tipul sistemului de calcul folosit, ceea ce
permite independenta fisierelor de tip HTML fata de platforma de lucru.
Pentru descrierea documentelor WEB se utilizeaza anumite etichete (tag-
uri) specifice pentru fiecare element descris; acestea stabilesc structura si aspectul
documentului final.
Tag-urile sunt recunoscute de browser-e care stabilesc apoi modul de formatare
a documentului. Pentru delimitarea (separarea ) tag-urilor se folosesc delimitatorii “<” si
“>” care incadreaza fiecare eticheta.
Forma generala: <tag> pentru a marca inceputul unui tag si </tag> pentru a
marca sfarsitul unui tag.
In HTML nu se face distinctie intre majuscule si minuscule;
Unele elemente HTML admit atribute care specifica informatii suplimentare
despre continutul elementului. Atributele elementului se precizeaza in cadrul etichetei de
inceput si se aplica doar elementului curent.
Ex. Daca se doreste includerea unei imagini in document, se va specifica drept
atribut adresa fisierului care contine imaginea si eventual alte informatii despre felul in
care se va face includerea.
Avantajul major al unui browser este acela ca poate suporta si alte limbaje, ca
Java sau Basic, ce completeaza utilitatea limbajului HTML.
Pe 14 mai 2006, Microsoft a lansat prima versiune Community Preview
Preview (CTP) a Expression Web, denumită cu numele Quartz . Pe 5 septembrie 2006,

5
Microsoft a lansat Beta 1. Beta 1 a eliminat majoritatea caracteristicilor (non-standard) de
la FrontPage , cum ar fi bots (utilizarea funcțiilor FPSE pentru scripting pe partea de
server), părți, funcții, teme, generarea automată a butoanele de navigare, formularele
FrontPage, panoul de navigare pentru a construi o ierarhie a site-ului Web și alte
caracteristici non-standard disponibile în CTP 1. Versiunea Release To Manufacturing a
fost disponibilă la data de 4 decembrie 2006. Primul și singurul pachet Service Pack a
fost publicat în Decembrie 2007. Expression Web nu are controale de validare a
formularului pentru câmpurile HTML precum FrontPage, dar acceptă controale validator
pentru ASP.NET.

Microsoft Expression Web 2 a fost lansat în 2008. Expression Web 2 oferă

suport nativ pentru PHP și Silverlight. Nu au fost lansate pachete de service pentru
versiunea 2.

Microsoft Expression Web 3 a fost lansat în 2009. Până la versiunea 2,

Expression Web a fost singura aplicație din suita Expression Studio bazată pe codul și
dependențele Microsoft Office . În versiunea 3, Expression Web a fost rescrisă în
Windows Presentation Foundation , în conformitate cu restul Expression Suite, fără
dependențe Microsoft Office. Un rezultat al acestui lucru a fost caracteristicile precum
barele de instrumente personalizabile și meniurile, schema standard de culoare Windows,
verificarea ortografică, addins-urile DLL, funcția de export a meniului de fișiere, trasarea
și plasarea între site-uri la distanță, compararea site-urilor cu marcaje temporale,
eliminate în această versiune. Alte funcții, cum ar fi Anulare, nu funcționează în mod
fiabil. [ Versiunea 3 a introdus instrumentul Expression Web 3 SuperPreview pentru
compararea și redarea paginii web în diverse browsere. De asemenea, sa remarcat lipsa
suportului pentru link-urile relative rădăcină, linkuri care încep cu un "/" pentru a se referi
la rădăcina unui server web. Această caracteristică a fost adăugată cu Expression Web 3
Service Pack 1, lansat în noiembrie 2009. Service Pack 2 pentru Expression Web 3 a fost
lansat în aprilie 2010.Servive Pack 3 pentru Expression Web 3 a fost lansat în octombrie
2011 și include produs general, stabilitate, performanță și remedierile de securitate.

6
 Microsoft Expression Web 4 a fost lansat pe 7 iunie 2010. Acesta a adăugat
opțiunea de adnotări HTML și acces la o funcționalitate SuperPreview bazată pe web,
pentru testarea paginilor din browserele care nu pot fi instalate în sistemul utilizatorului
(cum ar fi ca browsere Mac OS X sau Linux ). Microsoft Expression Web 4 oferă, de
asemenea, un SEO Checker care analizează site-ul Web produs împotriva celor mai bune
practici pentru obținerea celor mai înalte clasamente posibile pentru motoarele de căutare.
Versiunea 4 nu aduce înapoi toate caracteristicile eliminate în versiunea 3. Expression
Web 4 Service Pack 1 a fost lansat în martie 2011 și a adăugat suport pentru IntelliSense
pentru specificațiile HTML5 și CSS3 din editorul de cod, suport HTML5 și CSS3 din
paleta Proprietăți CSS, proprietăți CSS3 selectate în dialogurile de stil, tagurile semantice
HTML5 din Design View și noi funcții PHP 5.3. Expression Web 4 SP2 a fost lansat în
iulie 2011 și a rezolvat o serie de probleme și a introdus noi caracteristici, cum ar fi
suportul jQuery IntelliSense , un panou pentru gestionarea fragmentelor, panoul
Interactive Snapshot Panel, funcționalitatea comment / uncomment în Cod View, și
spațiul de lucru și personalizarea barei de instrumente.

Figura 1-este prezentat interfata programului Microsoft Web Expresion 4

7
 Incepând cu luna decembrie 2012, Microsoft a anunțat că Expression Studio nu va
mai fi un produs autonom. Expression Blend este integrat în Visual Studio , în timp ce
Expression Web și Expression Design vor fi acum produse gratuite. Suport tehnic este
disponibil pentru clienții care au achiziționat Expression Web sau Expression Design în
urma ghidurilor de viață publicate pentru asistență, în timp ce niciun suport nu va fi oferit
descărcării gratuite. Nu sunt programate noi versiuni de Expression Web sau Design.

Figura 2-este prezentat o parte din codul paginii index.html

8
Cerinte hardware si software

Fiind realizat in HTML, functionarea corecta depinde de foarte putini factori la

nivel hardware.
Configuratia minima necesara :
 procesor la 133MHz
 min. 32 MB RAM (de preferat cel putin 64 MB)
 o placa vide care sa suporte mai mult de 256 de culori (optional pentru
o afisare corecta a detaliilor)

Este necesara o versiune a browser-ului care sa permita recunoasterea tuturor

comenzilor ( testul a fost facut cu Google Chrome)
Conditii de testare: proiectul a fost facut si testat pe un PC Intel Core I3-2120
CPU 3,30Ghz la 4 GB DDRAM, sistem de operare MS Windows 8.1

9
Structura si continutul proiectului

Figura 3 -este prezentata pagina "Galerie"

Aplicatia a fost realizata in cea mai mare parte in limbajul HTML, prin programare
direct in cod sursa. Scrierea liniilor de comanda s-a facut cu Microsoft Web Expression
4 , vizualizarea codului putandu-se face cu orice editor text (MS Word, Notepad s.a.).

Structural, prima pagina (index.html) este structurata cu ajutorul div-urilor si a

tabelelor
In primul rand (table row) este prezentat meniul animat,din care poti alege:
Acasa, Istoric, Repere, Galerie, Secolul XX, Inovatii, Noutati

Meniul principal a fost realizat in html si css (cascading style sheet), pentru care s-a
folosit in principal programul de editare Microsoft Web Expression 4.

10
1. Acasa - acasa..html. In aceasta pagina este prezentata o introducere despre istoria
automobilelor.

2. Istoric- istoric.html In aceasta pagina sunt prezentate detalii despre istoria

automiblului pe scrut . Este prezentat urmatorul submeniu:

 Principalele evolutii istorice

 Prima masina
3. Repere- repere.html In aceasta pagina sunt prezentate detalii despre principalele
tipuri de motoare .Avem urmatorul submeniu:

 Vehicule cu abur
 Motoare cu ardere interna
 Motoare cu aprindere prin scanteie
 Vehicule electrice

4. Galerie- hairstyle.html In aceasta pagina sunt prezentate imagini cu evolutia

autovehiculelor din secolele XVIII-XIX-XX Se prezinta urmatoarele poze

11
 

5. Secolul XX – contact.html In aceasta pagina se prezinta imagini cu orase si

peisaje din Spania.Avem urmatorul submeniu :
 Perioada antebelica
 Primul Razboi Mondial
 Perioada interbelica
 Al Doilea Razboi Mondial
6. Inovatii- inovatii.html. Avem urmatorul submeniu cu clipuri video:
 Principalele evolutii
 Principalele inovatii
7. Noutati - news.html. Detalii despre noutatile acestei teme abordate.

12
Codul sursa al Css:

@font-face {
font-family: 'Arimo-Bold';
src: url('../fonts/Arimo-Bold/Arimo-Bold.eot');
src: url('../fonts/Arimo-Bold/Arimo-Bold.woff') format('woff'), url('../fonts/Arimo-
Bold/Arimo-Bold.ttf') format('truetype'), url('../fonts/Arimo-Bold/Arimo-Bold.svg')
format('svg');
}
@font-face {
font-family: 'ChangaOne';
src: url('../fonts/ChangaOne/ChangaOne-Regular.eot');
src: url('../fonts/ChangaOne/ChangaOne-Regular.woff') format('woff'),
url('../fonts/ChangaOne/ChangaOne-Regular.ttf') format('truetype'),
url('../fonts/ChangaOne/ChangaOne-Regular.svg') format('svg');
}
@font-face {
font-family: 'Comfortaa-Regular';
src: url('../fonts/Comfortaa/Comfortaa-Regular.eot');
src: url('../fonts/Comfortaa/Comfortaa-Regular.woff') format('woff'),
url('../fonts/Comfortaa/Comfortaa-Regular.ttf') format('truetype'),
url('../fonts/Comfortaa/Comfortaa-Regular.svg') format('svg');
}
body {
background: #ededed url(../images/bg-header.gif) repeat-x top center;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

13
#header {
margin: 0 auto;
padding: 0;
width: 960px;
}
#header .section {
margin: 0;
padding: 0;
overflow: hidden;
}
#header .section .logo {
float: left;
margin: 0;
padding: 60px 0 0 10px;
width: 324px;
}
#header .section .logo a {
background: url(../images/bg-logo.png) repeat-x top left;
color: #fff;
display: block;
font-family: 'Arimo-Bold';
font-size: 60px;
font-weight: normal;
height: 130px;
line-height: 130px;
margin: 0;
padding: 0;
text-align:center;
text-decoration: none;
text-transform: uppercase;
width: 270px;

14
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 114px 0 0;
}
#header .section ul li {
background: url(../images/bg-nav-right.gif) no-repeat top right;
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
background: url(../images/bg-nav-left.gif) no-repeat top left;
color: #fff;
display: inline-block;
font-size: 16px;
height: 30px;
letter-spacing: 0.05em;
line-height: 30px;
margin: 0;
padding: 0 15px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header .section ul li a:hover {

15
 color: #ccc;
}
#header .section ul li.selected {
background: url(../images/bg-nav-right-selected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(../images/bg-nav-left-selected.gif) no-repeat top left;
}
#header .article {
background: #fff;
border: 2px solid #5fb3bd;
border-radius: 4px;
margin: 50px auto 28px;
overflow: hidden;
padding: 0;
width: 936px;
}
#header .article img {
display: block;
float: left;
margin: 0 50px 0 0;
padding: 0;
}
#header .article h1 {
color: #1b2130;
font-family: 'ChangaOne';
font-size: 40px;
font-weight: normal;
margin: 0;
line-height: 50px;
padding: 110px 30px 30px;

16
}
#body {
margin: 0 auto;
min-height: 812px;
padding: 20px 0 50px;
width: 960px;
}
#body > ul {
margin: 0;
overflow: hidden;
padding: 0;
}
#body > ul li {
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
width: 220px;
}
#body > ul li > a:hover {
opacity: 0.9;
}
#body > ul li > a img {
border: 0;
display: block;
margin: 0;
padding: 0;
}
#body > ul li b {
color: #000;
display: block;

17
 font-size: 18px;
font-weight: normal;
margin: 0;
padding: 10px 0 5px;
text-transform: capitalize;
}
#body > ul li p {
color: #464646;
font-size: 12px;
line-height: 24px;
margin: 0;
padding: 0;
}
#body > ul li p a {
color: #464646;
text-decoration: underline;
}
#body > ul li p a:hover {
color: #252525;
}
#body > div {
margin: 0;
overflow: hidden;
padding: 50px 0 0;
}
#body > .more {
color: #464646;
display: block;
font-size: 13px;
margin: 0 auto;
padding: 0;

18
 text-align: center;
text-decoration: underline;
text-transform: capitalize;
width: 80px;
}
#body > .more:hover {
color: #4a8b92;
}
#body h2 {
background: url(../images/bg-featured.png) repeat-x;
color: #fff;
font-family: 'Comfortaa-Regular';
font-size: 20px;
font-weight: normal;
height: 47px;
letter-spacing: 0.1em;
left: 15px;
line-height: 47px;
margin: 0;
padding: 0 25px;
position: absolute;
text-transform: capitalize;
top: -14px;
}
#body h3 {
color: #2f394e;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: normal;
margin: 0;

19
 padding: 25px 10px 40px;
text-transform: capitalize;
}
#body > b {
color: #2f394e;
display: inline-block;
font-size: 18px;
font-weight: normal;
margin: 0;
padding: 0 10px;
text-transform: capitalize;
}
#body > p {
color: #464646;
font-size: 13px;
line-height: 24px;
margin: 0;
padding: 30px 10px;
}
#body > p a {
color: #464646;
text-decoration: underline;
}
#body > p a:hover {
color: #252525;
}
#body div div {
float: left;
margin: 0 10px;
padding: 0;
}

20
#body div .featured {
background: #fff;
border: 5px solid #5fb3bd;
border-radius: 4px;
min-height: 450px;
padding: 45px 15px 15px;
position: relative;
width: 420px;
}
#body div .featured h2 {
text-align: center;
}
#body div .featured h3 {
color: #354057;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 10px 0 0;
text-transform: none;
}
#body div .featured img {
display: block;
float: left;
margin: 10px 30px 25px 0;
padding: 0;
}
#body div .featured p {
clear: both;
color: #464646;
font-size: 12px;
line-height: 24px;

21
 margin: 0 0 24px;
padding: 0;
}
#body div .featured p a {
color: #464646;
}
#body div .featured p a:hover {
color: #252525;
}
#body div .section {
width: 460px;
}
#body div .section div {
background: #519194;
border: 5px solid #5fb3bd;
border-radius: 4px;
float: none;
margin: 0;
padding: 0 15px;
position: relative;
}
#body div .section .article {
height: 183px;
margin-bottom: 25px;
padding: 55px 15px 20px;
text-align: right;
}
#body div .section .article h2 {
text-align: left;
}
#body div .section .article h2 a {

22
 background: url(../images/icons.png) no-repeat 0 10px;
display: inline-block;
height: 40px;
margin: 0;
padding: 0;
text-indent: -99999px;
width: 31px;
}
#body div .section .article p {
color: #f5f5f5;
font-size: 12px;
line-height: 24px;
margin: 0;
padding: 20px 0px;
text-align: left;
}
#body div .section .article p a {
color: #f5f5f5;
text-decoration: underline;
}
#body div .section .article p a:hover {
color: #97d0d3;
}
#body div .section .article > a {
color: #f5f5f5;
font-size: 18px;
text-decoration: none;
}
#body div .section .article > a:hover {
color: #97d0d3;
}

23
#body div .section .newsletter {
height: 168px;
padding: 30px 15px 19px 214px;
position: relative;
}
#body div .section .newsletter img {
display: block;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: -13px;
z-index: 5;
}
#body div .section .newsletter p {
color: #f5f5f5;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.03em;
line-height: 30px;
margin: 0;
padding: 0;
}
#body div .section .newsletter p span {
display: block;
}
#body div .section .newsletter form {
margin: 0;
overflow: hidden;
padding: 0;
}

24
#body div .section .newsletter form span {
color: #f5f5f5;
clear: both;
display: block;
font-size: 14px;
letter-spacing: 0.01em;
line-height: 30px;
margin: 0;
padding: 0 0 4px;
text-transform: capitalize;
text-shadow: 0 -1px 0 #285f62;
}
#body div .section .newsletter form input {
background: url(../images/interface.png) no-repeat;
border: 0;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
}
#body div .section .newsletter form #email {
background-position: -399px -72px;
color: #68a7aa;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
line-height: 30px;
padding: 0 5px;
text-align: center;
width: 130px;

25
}
#body div .section .newsletter form #send {
background-position: -399px -110px;
text-indent: -99999px;
width: 80px;
}
#body > .article {
margin: 0;
padding: 0;
}
#body > .article b {
color: #2f394e;
display: inline-block;
font-weight: normal;
margin: 0;
padding: 0 10px 15px;
text-transform: capitalize;
}
#body > .article p {
color: #464646;
font-size: 13px;
line-height: 24px;
margin: 0;
padding: 0 10px;
}
#body > .article p a {
color: #464646;
text-decoration: underline;
}
#body > .article p a:hover {
color: #252525;

26
}
#body > .article ul {
margin: 0;
padding: 30px 0 30px 10px;
}
#body > .article ul li {
color: #464646;
line-height: 24px;
list-style: none;
margin: 0;
padding: 0;
}
#body > .article ul li a {
color: #464646;
text-decoration: none;
}
#body > .article ul li a:hover {
color: #252525;
}
#body > .article h3 {
padding-bottom: 20px;
}
#body .blog {
padding: 0;
}
#body .content {
float: left;
margin: 0 35px 0 10px;
padding: 0;
width: 585px;
}

27
#body .content h3 {
padding-bottom: 25px;
padding-left: 0;
}
#body .content p {
color: #464646;
font-size: 13px;
line-height: 24px;
margin: 0;
padding: 0 0 24px;
}
#body .content p a {
color: #464646;
text-decoration: underline;
}
#body .content p a:hover {
color: #252525;
}
#body .sidebar {
background: url(../images/bg-sidebar.jpg) repeat-y top left;
float: right;
margin: 0 10px 82px 0;
padding: 0;
width: 320px;
}
#body .sidebar h3 {
background: url(../images/bg-sidebar-heading.jpg) no-repeat 0 0;
color: #2f394e;
font-family: 'Comfortaa-Regular';
font-size: 20px;
font-weight: normal;

28
 letter-spacing: 0.1em;
margin: 0;
padding: 25px 10px;
text-align: center;
text-transform: capitalize;
}
#body .sidebar ul {
background: url(../images/bg-sidebar-footer.jpg) no-repeat bottom left;
margin: 0;
padding: 0 20px 50px;
}
#body .sidebar ul li {
list-style: none;
margin: 0;
padding: 0 0 24px;
}
#body .sidebar ul li span {
color: #2f394e;
display: block;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.01em;
line-height: 24px;
margin: 0;
padding: 0;
}
#body .sidebar ul li span a {
color: #2f394e;
text-decoration: none;
}
#body .sidebar ul li span a:hover {

29
 color: #4c8f97;
}
#body .sidebar ul li p {
color: #000;
font-size: 13px;
line-height: 24px;
margin: 0;
padding: 0;
}
#body .sidebar ul li p a {
color: #000;
text-decoration: underline;
}
#body .sidebar ul li p a:hover {
color: #4c8f97;
}
#footer {
background: #4c8f96;
border-top: 1px solid #9bd9e0;
margin: 0;
padding: 0;
}
#footer > div {
margin: 0 auto;
padding: 30px 0 28px;
overflow: hidden;
text-align: center;
width: 960px;
}
#footer div p {
color: #ededed;

30
 display: inline-block;
float: right;
font-size: 12px;
letter-spacing: 0.05em;
margin: 0;
padding: 27px 0 0;
text-align: center;
}
#footer div .connect {
background: #387a82;
float: right;
height: 18px;
margin: 0 20px 0 150px;
padding: 22px 20px;
overflow: hidden;
width: 144px;
}
#footer div .connect span {
color: #ededed;
display: inline-block;
float: left;
font-size: 12px;
height: 19px;
line-height: 21px;
margin: 0;
padding: 0 0 0 39px;
}
#footer div .connect a {
background: url(../images/icons.png) no-repeat;
display: block;
float: left;

31
 height: 20px;
margin: 0 8px;
padding: 0;
text-indent: -99999px;
width: 20px;
}
#footer div .connect #twitter {
background-position: 0 -32px;
}
#footer div .connect #twitter:hover {
background-position: -25px -32px;
}
#footer div .connect #facebook {
background-position: 0 -57px;
}
#footer div .connect #facebook:hover {
background-position: -25px -57px;
}
#footer div .connect #googleplus {
background-position: 0 -82px;
}
#footer div .connect #googleplus:hover {
background-position: -25px -82px;
}
#footer div .connect #pinterest {
background-position: 0 -107px;
}
#footer div .connect #pinterest:hover {
background-position: -25px -107px;
}

32
Bibliografie :
https://ro.wikipedia.org/wiki/Istoria_automobilului

https://www.hotnews.ro/stiri-arhiva-1026907-siguranta-mai-importanta-decat-confortul-
top-10-inovatii-auto.html

https://en.wikipedia.org/wiki/Microsoft_Expression_Web

33