Universitatea de Stat din Moldova
Facultatea “Matematică și Informatică”
Specialitatea “Informatica Aplicată”
Lucrare Individuală
Obiectul”HTML și CSS”
Tema:”Proiectarea unui web site cu ajutorul HTML și CSS”
A efectuat: Graur Dumitru , IAFR-2301
A verificat: Ghenadie Marin , lec. Universitar
Chișinău,2023
Conținutul fișierului: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style1.css">
<link rel="shortcut icon" href="img/icon.png">
<title>Automobile second hand</title>
</head>
<body style="background-color:#DCDCDC">
<div id="input">
<div class="inp">
<label id="lb"for="username">Username: </label>
<input type="text" id="in" name="username"><br>
</div>
<div class="inp">
<label id="lb"for="password">Password: </label>
<input type="text" id="in" name="password"><br>
</div>
<div id="log">
<input type="submit" value="Log In">
</div>
</form>
</div>
</br>
<ul class="nav">
<li><a href="index.html">ACASA</a></li>
<li><a href="index.html">MASINI DE VANZARE</a></li>
<li><a href="second.html">FINANTARE</a></li>
<li><a href="index.html">RECENZII</a></li>
<li><a href="index.html">CLIENTII NOSTRI</a></li>
<li><a href="index.html">LIVRARE</a></li>
<li><a href="index.html">GARANTIE</a></li>
<li><a href="index.html">CONTACT</a></li>
</ul>
<br>
<hr>
<div id="list">
<ul style="list-style-type:circle">
<li><a href="">Audi</a></li>
<li><a href="">BMW</a></li>
<li><a href="">Mercedes-Benz</a></li>
<li><a href="">Honda</a></li>
<li><a href="">Toyota</a></li>
<li><a href="">Subaru</a></li>
<li><a href="">Volkswagen</a></li>
<li><a href="">Seat</a></li>
<li><a href="">Volvo</a></li>
<li><a href="">Huyndai</a></li>
<li><a href="">Kia</a></li>
<li><a href="">Peugeot</a></li>
<li><a href="">Nissan</a></li>
<li><a href="">Renault</a></li>
<li><a href="">Dacia</a></li>
<li><a href="">Ford</a></li>
<li><a href="">Skoda</a></li>
<li><a href="">Mitsubishi</a></li>
<li><a href="">Lexus</a></li>
<li><a href="">Alfa Romeo</a></li>
<li><a href="">Jeep</a></li>
<li><a href="">Land Rover</a></li>
<li><a href="">Citroen</a></li>
<li><a href="">Mazda</a></li>
<li><a href="">Infiniti</a></li>
<li><a href="">Jaguar</a></li>
<li><a href="">Opel</a></li>
<li><a href="">Porsche</a></li>
<li><a href="">Abarth</a></li>
<li><a href="">Aston Martin</a></li>
<li><a href="">Bentley</a></li>
<li><a href="">Cadillac</a></li>
<li><a href="">Daewoo</a></li>
<li><a href="">Fiat</a></li>
<li><a href="">Dodge</a></li>
<li><a href="">Fisker</a></li>
<li><a href="">Hummer</a></li>
<li><a href="">Iveco</a></li>
<li><a href="">Lada</a></li>
<li><a href="">Lotus</a></li>
<li><a href="">Mini</a></li>
<li><a href="">Saab</a></li>
<li><a href="">Suzuki</a></li>
<li><a href="">Smart</a></li>
<li><a href="">Tesla</a></li>
<li><a href="">Ssangyong</a></li>
<li><a href="">Lincoln</a></li>
<li><a href="">Lancia</a></li>
<li><a href="">Mega</a></li>
<li><a href="">Polestar</a></li>
</ul>
</div>
<div>
<div id="img1">
<div class="gallery">
<a target="_blank" href="img\Ford.jpg">
<img src="img\Ford.jpg" alt="Ford" width="430" height="200">
</a>
<div class="desc">Ford Kuga</div>
</div>
<div class="gallery">
<a target="_blank" href="img\kia.jpg">
<img src="img\kia.jpg" alt="Kia" width="430" height="200">
</a>
<div class="desc">Kia Sportage</div>
</div>
<div class="gallery">
<a target="_blank" href="img\Mercedes.jpg">
<img src="img\Mercedes.jpg" alt="Northern Lights" width="430" height="200">
</a>
<div class="desc">Mercedes-Benz GLE Coupe</div>
</div>
</div>
<br>
<div id="img2">
<div class="gallery">
<a target="_blank" href="img\volkswagen.jpg">
<img src="img\volkswagen.jpg" alt="Volkswagen" width="430" height="200">
</a>
<div class="desc">Volkswagen Tiguan</div>
</div>
<div class="gallery">
<a target="_blank" href="img\nissan.jpg">
<img src="img\nissan.jpg" alt="Nissan" width="430" height="200">
</a>
<div class="desc">Nissan X-Trail</div>
</div>
<div class="gallery">
<a target="_blank" href="img\renault.jpg">
<img src="img\renault.jpg" alt="Renault" width="430" height="200">
</a>
<div class="desc">Renault Kadjar</div>
</div>
</div>
<br>
<div id="img3">
<div class="gallery">
<a target="_blank" href="img\peugeot.jpg">
<img src="img\peugeot.jpg" alt="Peugeot" width="430" height="200">
</a>
<div class="desc">Peugeot 3008</div>
</div>
<div class="gallery">
<a target="_blank" href="img\volvo.jpg">
<img src="img\volvo.jpg" alt="Volvo" width="430" height="200">
</a>
<div class="desc">Volvo V40</div>
</div>
<div class="gallery">
<a target="_blank" href="img\dacia.jpg">
<img src="img\dacia.jpg" alt="Mountains" width="430" height="200">
</a>
<div class="desc">Dacia Dokker</div>
</div>
</div>
<div id="img3">
<div class="gallery">
<a target="_blank" href="img\toyota.jpg">
<img src="img\toyota.jpg" alt="Toyota" width="430" height="200">
</a>
<div class="desc">Toyota Auris</div>
</div>
<div class="gallery">
<a target="_blank" href="img\ford2.jpg">
<img src="img\ford2.jpg" alt="Ford" width="430" height="200">
</a>
<div class="desc">Ford C-Max</div>
</div>
<div class="gallery">
<a target="_blank" href="img\bmw.jpg">
<img src="img\bmw.jpg" alt="BMW" width="430" height="200">
</a>
<div class="desc">BMW 5 Series</div>
</div>
</div>
<div id="img3">
<div class="gallery">
<a target="_blank" href="img\skoda2.jpg">
<img src="img\skoda2.jpg" alt="Skoda" width="430" height="200">
</a>
<div class="desc">Skoda Kodiaq</div>
</div>
<div class="gallery">
<a target="_blank" href="img\skoda.jpg">
<img src="img\skoda.jpg" alt="Skoda" width="430" height="200">
</a>
<div class="desc">Skoda Superb</div>
</div>
<div class="gallery">
<a target="_blank" href="img\transit.jpg">
<img src="img\transit.jpg" alt="Ford Transit" width="430" height="200">
</a>
<div class="desc">Ford Transit</div>
</div>
</div>
</div>
<img id="publicitate"src="img\img1.png">
<div id="text">
<h4>Vanzari auto Chisinau</h4>
<p>Intelegem ca achizitionarea unui autoturism second-hand poate fi un proces
descurajant, motiv pentru care ne straduim sa il facem cat mai usor si fara stres posibil.
Echipa noastra de experti este aici pentru a raspunde la orice intrebare pe care o aveti si
pentru a va ghida pe parcursul intregului proces de achizitie. Vrem sa va simtiti increzatori in
decizia dvs. si sa plecati acasa cu o masina pe care o iubiti si in care aveti incredere.
Descopera gama noastra de autoturisme second hand cu garantie si livrare gratuita!</p>
<h4>GARANTIE 12 LUNI Fara limita de KM</h4>
<p>La fiecare autoturism achizitionat din parcul nostru auto, veti beneficia de o GARANTIE
de 12 luni, pentru MOTOR + CUTIE DE VITEZE (incluzand toate elementele interioare,
pistoane, segmenti, arbore cotit, cuzineti, chiuloasa, etc ).</p>
<p>Fie ca sunteti in cautarea unei masini compacte pentru naveta zilnica sau a unui SUV
spatios pentru calatoriile cu familia, la noi veti gasi cu siguranta masina perfecta care sa se
potriveasca bugetului si stilului dvs. de viata.</p>
</div>
<br>
<br>
<br>
<hr>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d47488.78187778536!2d28.867275309084654!3d46.986976271894655!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40c979406ac1e331%3A0x7755bd4540c2292a!
2sAUTODEALER%20GROUP!5e0!3m2!1sru!2s!4v1696891125341!5m2!1sru!2s" width="600"
height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade"></iframe>
<br>
<div id="down">
<div id="dow">
<h6>Exemple SRL</h6>
<p>Dealer auto rulare Chisinau</p>
<p>Parcul auto din Chisinau: Strada Exemplu 25</p>
<p>Tel: 00000000 </p>
<p> Email:
[email protected]</p>
<sub><a href="https://www.google.com">Google</a><a
href="https://www.facebook.com">Facebook</a><a
href="https://www.instagram.com">Instagram</a></sub>
</div>
</div>
<div>
<textarea>Adauga comentariu</textarea>
<input id="sub"type="submit" value="Submit">
</div>
</body>
</html>
Conținutul fișierului: second.html
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link rel="stylesheet" href="style1.css">
<link rel="shortcut icon" href="img/icon.png">
<title>Automobile second hand</title>
</header>
<body>
<div id="input">
<div class="inp">
<label id="lb"for="username">Username: </label>
<input type="text" id="in" name="username"><br>
</div>
<div class="inp">
<label id="lb"for="password">Password: </label>
<input type="text" id="in" name="password"><br>
</div>
<div id="log">
<input type="submit" value="Log In">
</div>
</div>
</br>
<ul class="nav">
<li><a href="index.html">ACASA</a></li>
<li><a href="index.html">MASINI DE VANZARE</a></li>
<li><a href="second.html">FINANTARE</a></li>
<li><a href="index.html">RECENZII</a></li>
<li><a href="index.html">CLIENTII NOSTRI</a></li>
<li><a href="index.html">LIVRARE</a></li>
<li><a href="index.html">GARANTIE</a></li>
<li><a href="index.html">CONTACT</a></li>
</ul>
<br>
<hr>
<div id="list">
<ul style="list-style-type:circle">
<li><a href="">Audi</a></li>
<li><a href="">BMW</a></li>
<li><a href="">Mercedes-Benz</a></li>
<li><a href="">Honda</a></li>
<li><a href="">Toyota</a></li>
<li><a href="">Subaru</a></li>
<li><a href="">Volkswagen</a></li>
<li><a href="">Seat</a></li>
<li><a href="">Volvo</a></li>
<li><a href="">Huyndai</a></li>
<li><a href="">Kia</a></li>
<li><a href="">Peugeot</a></li>
<li><a href="">Nissan</a></li>
<li><a href="">Renault</a></li>
<li><a href="">Dacia</a></li>
<li><a href="">Ford</a></li>
<li><a href="">Skoda</a></li>
<li><a href="">Mitsubishi</a></li>
<li><a href="">Lexus</a></li>
<li><a href="">Alfa Romeo</a></li>
<li><a href="">Jeep</a></li>
<li><a href="">Land Rover</a></li>
<li><a href="">Citroen</a></li>
<li><a href="">Mazda</a></li>
<li><a href="">Infiniti</a></li>
<li><a href="">Jaguar</a></li>
<li><a href="">Opel</a></li>
<li><a href="">Porsche</a></li>
<li><a href="">Abarth</a></li>
<li><a href="">Aston Martin</a></li>
<li><a href="">Bentley</a></li>
<li><a href="">Cadillac</a></li>
<li><a href="">Daewoo</a></li>
<li><a href="">Fiat</a></li>
<li><a href="">Dodge</a></li>
<li><a href="">Fisker</a></li>
<li><a href="">Hummer</a></li>
<li><a href="">Iveco</a></li>
<li><a href="">Lada</a></li>
<li><a href="">Lotus</a></li>
<li><a href="">Mini</a></li>
<li><a href="">Saab</a></li>
<li><a href="">Suzuki</a></li>
<li><a href="">Smart</a></li>
<li><a href="">Tesla</a></li>
<li><a href="">Ssangyong</a></li>
<li><a href="">Lincoln</a></li>
<li><a href="">Lancia</a></li>
<li><a href="">Mega</a></li>
<li><a href="">Polestar</a></li>
</ul>
</div><br><br><br><br>
<video width="780" height="500" controls>
<source src="movie.ogg" type="video/ogg">
</video>
<div id="form">
<form>
<label for="fname">Numele:</label><br>
<input type="" id="fname" value="Numele" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]
{2,4}$"><br>
<label for="lname">Prenumele:</label><br>
<input type="" id="lname" value="Prenumele" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]
{2,4}$"><br>
<label for="email">E-mail:</label><br>
<input type="" id="email" value="E-mail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
><br>
<label for="nastere">Data nasterii:</label><br>
<input type="date" id="nastere"><br>
<label for="telefon">Telefonul:</label><br>
<input type=""id="telefon" value="Telefonul"><br>
</form>
<form>
<label for="marca">Alege marca:</label><br>
<input type="" id="marca" value="*Marca automobilului" pattern="[a-z0-9._%+-]+@[a-z0-
9.-]+\.[a-z]{2,4}$"><br>
<label for="suma">Suma depozitului:</label><br>
<input type="" id="suma" value="Suma" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]
{2,4}$"><br>
<label for="termen">Termenul:</label><br>
<input type="" id="termen" value="Termenul" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]
{2,4}$" ><br><br>
<input type="submit" value="Aplica acum">
</form>
</div>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
</audio>
<table>
<tr>
<h2 id="table">Costul livrarii</h2>
<th>Compania</th>
<th>Pretul livrarii</th>
<th>Timpul estimat</th>
</tr>
<tr>
<td>Sauto</td>
<td>100$</td>
<td>30 zile</td>
</tr>
<tr>
<td>Autoplus</td>
<td>137$</td>
<td>24 zile</td>
</tr>
<tr>
<td>Avtolux</td>
<td>169$</td>
<td>21 zile</td>
</tr>
<tr>
<td>CasaAuto</td>
<td>178$</td>
<td>19 zile</td>
</tr>
<tr>
<td>CoroMoto</td>
<td>190$</td>
<td>17 zile</td>
</tr>
<tr>
<td>GoldenAuto</td>
<td>197$</td>
<td>14 zile</td>
</tr>
<tr>
<td>AutoShina</td>
<td>250$</td>
<td>10 zile</td>
</tr>
<tr>
<td>AmgAuto</td>
<td>261$</td>
<td>7-8 zile</td>
</tr>
</table>
<img id="publicitate"src="img\img1.png"><br><br><br><br><br><br>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d47488.78187778536!2d28.867275309084654!3d46.986976271894655!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40c979406ac1e331%3A0x7755bd4540c2292a!
2sAUTODEALER%20GROUP!5e0!3m2!1sru!2s!4v1696891125341!5m2!1sru!2s" width="600"
height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade"></iframe>
<br>
<div id="down">
<div id="dow">
<h6>Exemple SRL</h6>
<p>Dealer auto rulare Chisinau</p>
<p>Parcul auto din Chisinau: Strada Exemplu 25</p>
<p>Tel: 00000000 </p>
<p> Email: [email protected]</p>
<sub><a href="google.com">Google</a><br><a href="facebook.com">Facebook</a><br><a
href="instagram.com">Instagram</a></sub>
</div>
</div>
<div>
<textarea>Adauga comentariu</textarea>
<input id="sub"type="submit" value="Submit">
</div>
</body>
</html>
Conținutul fișierului: style.css
#bar1 li{
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
#bar1 {
position: relative;
left: 80px;
top: 60px;
font-size: 10px;
padding: 6px;
padding-right: 300px;
font-size: 18px;
}
.nav li{
display: inline-block;
font-size: 22px;
padding: 14px;
position: relative;
top: 30px;
}
.nav {
position: relative;
top: 60px;
text-align: center;
}
a{
color: black;
text-decoration: none;
}
a:hover {
color: red;
}
p,h4 {
top: 10px;
text-align: center;
}
table, td {
border: 1px solid black;
text-align: center;
}
#input {
position: absolute;
top: 10px;
right: 30px;
}
#in {
position: absolute;
right: 10px;
}
#lb {
position: relative;
right: 105px;
}
.inp {
margin: 5px;
}
#log {
margin: 10px;
}
#text {
position: relative;
top: 100px;
}
#img {
top:50px;
left: 15%;
position: relative;
width: 70%;
height: 150px;
}
.tab {
position: relative;
top: 25px;
}
#p {
postion: relative;
top: 60px;
}
div.gallery:hover {
border: 1px solid #777;
transform: scale(1.3);
position: relative;
z-index: 1000;
}
div.desc {
padding: 15px;
text-align: center;
width: 400px;
background-color: red;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
position: relative;
top: 100px;
left: 20%;
float: left;
}
#img1 {
display: inline-block;
}
#img2 {
display: inline-block;
}
#img3 {
display: inline-block;
}
#publicitate {
position: relative;
top: 110px;
left: 14.2%;
width: 70%;
}
#list {
position: absolute;
top: 25%;
left: 30px;
}
#down {
position: relative;
left: 70%;
top: 50px;
}
#dow {
display: inline-block;
text-align: center;
}
textarea {
position: relative;
left: 40px;
bottom: 100px;
width: 50%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
#sub {
position: relative;
bottom: 70px;
right: 30px;
}
iframe {
position: relative;
left: 33%;
top: 30px;
}
body {
background-image: url('img/background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#form {
position: absolute;
left: 65%;
top: 26%;
}
video {
position: relative;
left: 20%;
bottom: 1%;
}
audio {
position: absolute;
top: 78%;
left: 386px;
}
table {
position: relative;
left: 30%;
top: 60px;
}
#table {
position: relative;
left: 33%;
top: 60px;
}
