Lab 3.

Ministerul Educaţiei al Republicii Moldova
Universitatea Tehnică a Moldovei

Facultatea Electronica si Telecomunicatii
Departament:Telecomunicatii
REFERAT
Lucrarea de Laborator nr. 1
Disciplina: Aplicații Software Specializate
Tema: Fonturi. Stiluri. Liste

.
A efectuat Namolovan A.
Studentul grupei RST-201
semnătura
A verificat __________ ______ ______________ Alexei Arina

nota data semnătura
Chisinău 2023
1
Obiective:
- Mutarea continutului in pagina dupa pasii din laborator
- Adaugarea detaliilor pe sigla
- Plutirea unor elemete din pagina
- Crearea unui aspect reutilizabil
- Adaugarea un proprietati bazate pe fonturi
Pasul 1.
Clarificare in CSS-ul de baza.
Pasul 2.
Mutare continutului din pagina
Pasul 3.
Adaugarea a mai multor elemente pe sigla
Pasul 4.
Crearea aspectului reutilizabil.
Pasul 5.
Actualizarea fontului pe tot textul din pagini.
Pasul 6.
Adaugarea stilurilor la elementele de ancorare.
Pasul 7.
Actualizarea logo-ului.
Rezultatele:
2
3
4
Concluzie:
In urma efectuarii lucrari de laborator am acumulat
deprinderi practice in mutarea continutului din pagina si in
adaugarea stilurilor la mai multe elemente din pagina
precum adaugarea stilurilor pentru elementele de aconrare.
5
Codul Paginii web:
INDEX.html
<!DOCTYPE html>
<html lang="ro">
<head><title>Web burger</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet"
href="assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css2?
family=Roboto: wght@100;300;400&display=swap"
rel="stylesheet">
<nav class="nav primary-nav">
<ul>
<li>
<a href="laboarator ASS.html">Acasa</a>
</li>
<li>
<a href="meniu.html">Meniuri</a>
</li>
<li>
<a href="livrare.html">Adauga o adresa pentru
livrare</a>
</li>
<li>
<a href="promotie.html">La promotie</a>
</li>
</nav>
</head>
<header class="container group">
6
<body>
<h1 > <a href="laboarator ASS.html">Bun venit <br>la<br>
Web-burgers</a></h1>

<section class="grid">
<section class="col-1-3">
<h5><a href="burger.html">Burgeri</a></h5>
</section>
<h5><a href="wrap.html">Wrap's</a></h5>
</section>
<H5> <a href="salate.html">Salate</a></H5>
</section>
<h5><a href="bauturi.html">Bauturi</a></h5>
</section>
<br>
<br>
<br>
<br>
<footer class="primary-footer container group">
<small>© SRL Web-burgers | WB 2023</small>
</footer>
</body>
</header>
</html>
BURGER.html
<!DOCTYPE html>
7
<html lang="ro">
rel="stylesheet">
<ul>
<li>
</li>
<li>
</li>
<li>
livrare</a>
</li>
<li>
</li>
</nav>
</head>
<header class="container group">
<section class="grid" class="nav" >
<h3>Burger</h3>
<h3>Dublu Burger</h3>
<h3>CheesBurger</h3>
<h3>Dubluchesbuger<img src="burger
2 .png" style="width: 80px;"></a></h3>
</section>
8
<br>
<br>
<br>
<br>
<footer class="primary-footer container
group">
<small>© SRL Web-burgers | WB
2023</small>
</footer>
</body>
</header>
</html>
WRAP.html
<!DOCTYPE html>
<html lang="ro">
rel="stylesheet">
<ul>
<li>
</li>
<li>
</li>
9
<li>
livrare</a>
</li>
<li>
</li>
</nav>
</head>

<section style="color: aquamarine;"
class="container" class="hero container">
<h3>Wrap Classic<a href="wrap.html"><img
src="wrap.png" style="width: 80px;"></a></h3>
<h3>Spyce Wrap <a href="wrap.html"><img
src="wrap.png" style="width: 80px;"></a></h3>
<h3>Wrap cu creveti</h3>
<h3>Wrap cu pirjoala</h3>
</section>
<br>
<br>
<br>
<br>
<footer class="primary-footer container group">
<small>© SRL Web-burgers | WB 2023</small>
</footer>
</body>
</header>
</html>
SALATE.html
<!DOCTYPE html>
<html lang="ro">
10
rel="stylesheet">
<ul>
<li>
</li>
<li>
</li>
<li>
livrare</a>
</li>
<li>
</li>
</nav>
</head>

<section class="container" class="hero
container">

<h3>Salata cesar(Classic)<a
href="salate.html"><img src="cesar.png" alt="Salata
cesar" style="width: 80px;"></a></h3>
<h3>Salata cesar(cu creveti)</h3>
<h3>Salata Shopski</h3>
11
</section>
<br>
<br>
<br>
<br>
group">
2023</small>
</footer>
</body>
</header>
</html>
BAUTURI.html
<!DOCTYPE html>
<html lang="ro">
rel="stylesheet">
<ul>
<li>
</li>
<li>
</li>
12
<li>
livrare</a>
</li>
<li>
</li>
</nav>
</head>

<section class="container" class="hero
container">

<h3>Coca-Cola</h3>
<h3>Fanta</h3>
<h3>Sprite</h3>
<h3>Kvas</h3>
<h3>Fresh de portocale</h3>
<h3>Fresh de Grapefrut</h3>
<h3>Fresh Mix</h3>
</section>
<br>
<br>
<br>
<br>
group">
2023</small>
</footer>
</body>
</header>
</html>
13
Fisierul css
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background: rgb(34,193,195);
background: radial-gradient(circle, rgba(34,193,195,1)
0%, rgba(253,237,45,1) 100%);
line-height: 1;
}
14
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-right: 30 px;
width: 50%;
}
.container,
15
.grid
{
margin: 0 auto;
width: 1200px;
}
.container
{
padding-left: 30px;
padding-right: 30px;
}
/*
Clear fix
*/
.group :before,
.group :after
{
content: table;
}
.group:after
{
clear:both;
}
.group
{
clear: both;
*zoom: 1;
}
/*
Primary header
*/
.logo
{
16
border-top: 4px solid
#648880;
float: left;
font-size: 48px;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px
0;
text-transform:
uppercase;

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

/*
Primary footer
*/
.primary-footer
{

color: #648880;
font-
size: 14px;

padding-bottom: 44px;

padding-top: 44px;
}
17
.primary-footer small
{

float: left;

font-weight: 400;
}
.col-1-3
{ width:
33.33%; }
.col-2-3 { width:
66.66%; }
.col-1-3,
.col-2-3
{
display:
inline-block;

vertical-align: top;
}
.grid,
.col-1-3,
.col-2-3
{

padding-left: 15px;

padding-right: 15px;
}
/*
Nav Bar
*/
.primary-nav {
18
font-size: 14px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
}
.nav
{
text-align: right;
}

/*
Tipografie
*/
h1,h2,h3,h4,h5,h6,p {
margin-bottom: 20px;
}
/*
Butoane
*/
.btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
.btn-alt {
border: 1px solid gray;
padding: 10px 30px;
}
/*
Home
*/
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
19
text-align: center;
}
.hero h2
{
font-size: 36px;
}
.hero p
{
font-size: 24px;
font-weight: 100;
}

/*
Costom Style
*/
body {
color: #888;
font: 300 16px/22px "Open Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4 {

color: #648880;
}
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
20
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
strong {
font-weight: 400;
}
cite, em {
font-style: italic;
}
.teaser a:hover h3 {

color: #a9b2b9;
}
a {

color: #648880;
text-
decoration: none;
}

a:hover {

color: #a9b2b9;
21
}
p a {

border-bottom: 1px solid #dfe2e5;
}

/*
Links
*/
a:hover {
color: #a9b2b9;
}
a {
color: #648880;
}

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-right:
22
30 px; width: 50%;
}
/*
Nav Bar */ .nav
{ margin: 0 auto;
padding-right: 30 px; padding-
left: 90px; width: 90%;
/*
Tipografie
*/ h1,h2,h3,h4,h5,h6,p {
margin-bottom: 20px;
}
/*
Butoane
*/
.btn { border-
radius: 5px; display:
inline-block; margin:
0;
} .btn-alt {
border: 1px solid gray;
padding: 10px 30px;
}
23
/*
Home
*/ .hero {
padding: 22px 80px 66px 80px;
}
24

Lab 3.

Î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

Lab 3.

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educaţiei al Republicii Moldova

Universitatea Tehnică a Moldovei

Disciplina: Aplicații Software Specializate

Tema: Fonturi. Stiluri. Liste

A verificat ______ Alexei Arina

- Adaugarea detaliilor pe sigla

- Plutirea unor elemete din pagina

- Crearea unui aspect reutilizabil

- Adaugarea un proprietati bazate pe fonturi

h1, h2, h3, h4 {

content: ''; content: none;

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