Ministerul Educației al Republicii Moldova

Universitatea Tehnică a Moldovei

Facultatea Calculatoare, Informatică şi Microelectronică

Departamentul Ingineria Software şi Automatică

Raport
Lucrarea de laborator nr.1
Disciplina: Tehnologii WEB

A efectuat: st. gr. Ploaia Dan

A verificat conf.univ. Cristian Rusu

Chișinău – 2020
Scopul lucrării: Familiarizarea cu structura unui document HTML/CSS.
Sarcina lucrării: Elaborarea unui machet de site utilizand HTML , CSS si
biblioteca BOOTSTRAP.

Listingul programului:
Navigation bar (HTML)
<nav class="navbar navbar-expand ">
<a class="navbar-brand" routerLink="/homepage"> BrightShop.net</a>

<div class="collapse navbar-collapse">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/homepage">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login" >Sign-In</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/register" >Register</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link">
Contacts
</a>
<div class="dropdown-menu p-4 text-muted" >
<p>
Nr.de contact:
+37360544389
</p>
<p>
Viber: +37360745264
</p>
<p class="mb-0">
E-mail: [email protected]
</p>
</div>
</li>
</ul>

</div>
</nav>
Navigation bar (CSS)
.dropdown:hover > .dropdown-menu {
display: block;
}
.navbar {
border-bottom:2px solid #3498db; background-
color: #111;

.navbar a:hover{
color: #2ecc71;
}
.navbar a {
cursor: pointer;
color: #818181;
text-transform: uppercase;
}

Home page (HTML)

<div class="jumbotron">
<h1 class="display-4">BrightShop</h1>
<p class="lead">Smarter Shopping - Better Living!</p>
<hr class="my-4">
<p>Only here you find the latest products at the lowest prices!</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">View all products!</a>
</p>
</div>
<div class="container">
<div class="row mt-3">
<div class="col-md-4">
<div class="card ">
<div class="inner">
<img class="card-img-top "
src="http://via.placeholder.com/300x200?text=Product image 1" alt="">
</div>
<div class="card-body">
<h4 class="card-title"><a href="#">Product title 1</a></h4> <p class="card-text">Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
 <a href="#" class="card-link float-right">More...</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="inner">
<img class="card-img-top"
src="http://via.placeholder.com/300x200?text=Product image 2" alt="">
</div>
<div class="card-body">
<h4 class="card-title"><a href="#">Product title 2</a></h4> <p class="card-text">Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="card-link float-right">More...</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="inner">
<img class="card-img-top"
src="http://via.placeholder.com/300x200?text=Product image 3" alt="">
</div>
<div class="card-body">
<h4 class="card-title"><a href="#">Product title 3</a></h4> <p class="card-text">Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="card-link float-right">More...</a>
</div>
</div>
</div>

<div class="col-md-4 mt-4">

<div class="card">
<div class="inner">
<img class="card-img-top"
src="http://via.placeholder.com/300x200?text=Product image 4" alt="">
</div>
<div class="card-body">
<h4 class="card-title"><a href="#">Product title 4</a></h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="card-link float-right">More...</a>
 </div>
</div>
</div>
<div class="col-md-4 mt-4">
<div class="card">
<div class="inner">
<img class="card-img-top"
src="http://via.placeholder.com/300x200?text=Product image 5" alt="">
</div>
<div class="card-body">
<h4 class="card-title"><a href="#">Product title 5</a></h4> <p class="card-text">Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="card-link float-right">More...</a>
</div>
</div>
</div>
<div class="col-md-4 mt-4">
<div class="card">
<div class="inner">
<img class="card-img-top"
src="http://via.placeholder.com/300x200?text=Product image 6" alt="">
</div>
<div class="card-body">
<h4 class="card-title"><a href="#">Product title 6</a></h4> <p class="card-text">Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="card-link float-right">More...</a>
</div>
</div>
</div>
</div>
</div>

Home page (CSS)

.jumbotron { margin-bottom:
0px; background: #111;
background-blend-mode: screen;
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: lightgrey; border:3px
solid #3498db;
}
.jumbotron
hr{ color:
#3498db;
}

.container
a{ color: #111;
}

.card{ border:2px solid

#3498db; width: 21.5rem;
}

.inner { overflow:
hidden;
}

.inner img{ transition:

all 1.5s ease;
}

.inner:hover
img{ transform:
scale(1.5);
}
.lead a{ border-radius:
24px; border: 0;
background: none;
margin: 20px auto; text-
align: center; border:2px
solid #3498db; padding:
5px 40px; outline: none;
color: white; transition:
0.30s; cursor: pointer;
}
.lead
a:hover{ background:
#3498db; }
Login page (HTML)

<div class="container mt-5 mb-5">

<h2 class="d-flex justify-content-center">Sign In:</h2>
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<br>
<br>
<form>
<div class="form-group" >
<input type="email" class="form-control" id="email" placeholder="Enter email">
 </div>
<div class="form-group">
<input type="password" class="form-control" id="pass" placeholder="Password"> </div>

<button type="submit" class="btn btn-outline-dark ">Submit</button>

</form>
</div>
</div>
</div>

Login page (CSS)

.container {
width: 400px; padding:
40px; background: #111;
text-align: center;
border:2px solid
#3498db;
}
.container h2{ color:
white; font-weight:
500;
}
.container input[type = "email"],.container input[type = "password"] {
border-radius: 24px; border: 0; background: none;
margin: 20px auto; text-align: center; border:2px
solid #3498db; padding: 14px 10px; width: 220px;
outline: none; color: white; transition: 0.30s;
}
.container input[type = "email"]:focus,.container input[type = "password"]:focus {
width: 280px; border-color: #2ecc71;
}
.container button{
border-radius: 24px;
border: 0; background:
none;
margin: 20px auto; text-align:
center;
border:2px solid #2ecc71;
padding: 5px 40px;
outline: none; color:
white; transition: 0.30s;
cursor: pointer;
}
.container button:hover{
 background: #2ecc71;
}

Registration page (HTML)

<div class="container mt-5 mb-5 ">

<h2>Register:</h2><br>
<form>
<div class="form-group col-md-6">
<input type="text" class="form-control" id="username" placeholder="username">
</div>
</form>
<form>
<div class="form-group col-md-6">
<input type="email" class="form-control" id="mail" placeholder="Email">
</div>
</form>
<form>
<div class="form-group col-md-6">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>

<button type="submit" class="btn btn-outline-dark">Sign in</button>

</form>
</div>

Registration page (CSS)

.container {
width: 505px; padding:
30px; background: #111;
 text-align: center;
border:2px solid
#3498db;
}
.container h2{ color:
white; font-weight:
500;
}
.container input[type = "email"],.container input[type = "password"],
.container input[type = "text"]{
border-radius: 24px;
border: 0;
background: none;
margin: 20px auto;
text-align: center;
border:2px solid #3498db;
padding: 14px 10px;
width: 400px; outline:
none; color: white; transition:
0.30s;
}
.container input[type = "email"]:focus,.container input[type = "password"]:focus ,
.container input[type = "text"]:focus{
width: 420px; border-color:
#2ecc71;
}
.container button{
border-radius: 24px;
border: 0; background:
none; margin: 20px auto;
text-align: center;
border:2px solid #2ecc71;
padding: 5px 40px;
outline: none; color:
white;
transition: 0.30s; cursor:
pointer;
}
.container button:hover{
background: #2ecc71;
}
Sidebar menu(HTML)
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
<h2><a routerLink="/homepage">Home</a></h2>
<h2><a routerLink="/login">My profile</a></h2>
<h2>Categories:</h2>
<a href="#">Gadgets</a>
<a href="#">Phones</a>
<a href="#">Notebooks&PC</a>
<a href="#">TV</a>
<a href="#">Photo</a>
</div>

<span style="font-size:30px;cursor:pointer" (click)="openNav()" >&#9776; Menu</span>

Sidebar menu(CSS)

.container{
font-family: sans-serif;
}

h1{
font-size: 60px;
}

.sidenav
{ height:
100%; width:
0; position:
fixed; z-index:
1; top: 3; left:
0;
background-color: #111;
overflow-x: hidden; transition:
0.80s; padding-top: 50px;
border-right:3px solid #3498db;
}

.sidenav a { padding: 8px

8px 8px 32px; text-
decoration: none; font-
size: 25px; color: #818181;
display: block; transition:
0.3s;
}

.sidenav a:hover
{ color: #3498db;
}

.sidenav .closebtn {
position: absolute;
top: 0; right: 25px;
font-size: 36px;
margin-left: 50px;
}
span:hover
{ color: #3498db;
}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}
.sidenav a {font-size: 10px;}
}
Concluzii:
In aceasta lucrare de laborator am capatat noi deprinderi cu structura unui
document HTML/CSS . Am invatat cum se utilizeaza corect tagurile si
instructiunile din interiorul lor intr-un document HTML, cum creem stilurile
pentru fonturile , tabelele , formele din pagina. De asemenea am utilizat clasele si
structurile predefinite a bibliotecii Bootstrap pentru a personaliza in mod ordonat
elementele CSS si HTML a documentului.