Sunteți pe pagina 1din 21

PAGINI WEB

PREZENTARE
Sala de fitness

Elev: Ghiberdicu Ionut-Florin

Clasa: XII-a MI
CUPRINS

Argument ...........................................................................................................4

Structura site-ului .............................................................................................5

Pagina index.html .............................................................................................8

Pagina abonamente.html .................................................................................10

Pagina fitness&cardio.html ............................................................................ 12

Pagina aerobic.html ........................................................................................ 14

Pagina contact.html ........................................................................................ 16

Bibliografie ...................................................................................................... 19

Anexe ................................................................................................................20
Argument

Am ales ca temă pentru atestatul profesional, Pagini Web – Prezentare


Sala de fitness, deoarece sunt pasionat de domeniul sportului și consider că
in zilele noastre internetul și implicit, Paginile Web reprezintă cea mai
bună modalitate de prezentare și promovare a afacerilor.

Prin intermediul paginilor web se pot stabili relații de colaborare, se pot


face cunoscute domeniile de interes și determina o lansare rapida si
eficace .

Consider că informațiile prezentate in paginile care urmează pot fi utile


pentru promovarea unei sali de fitness, făcând posibilii clienți să își
dorească adoptarea unui stil de viata cat mai sanatos si mentinerea acestuia
in locatii special amenajate.
Structura site-ului

Site-ul este alcătuit din 5 pagini web:

 index.html
 abonamente.html
 fitness&cardio.html
 aerobic.html
 contact.html

Fiecare pagina web are urmatoarea structura:

HEADER

Meniu

Continut

Continut 1 Continut 2

În alcătuirea fiecărei pagini au fost utilizate 4 elemente <div></div> ce au


asociate identificatorii: header, meniu, continut. Div-ul continut conține 2
elemente <div> cu identificatorii dreapta respectiv stanga.
Au fost utilizate foi de stiluri externe implementate în fișierul stiluri.css.
Referința către acest fișier este realizată în secțiunea <head></head> a fiecărei
pagini web.
<link rel="stylesheet" type="text/css" href="stiluri.css" />
Div-ul header conține titlul proiectului.
Div-ul meniu conține meniul site-ului. În realizarea acestuia au fost folosite
liste neordonate și aufost aplicate următoarele foi de stiluri.
Lista neordonată

<div id="meniu">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="pag1.html">Abonamente</a></li>
<li><a href="pag2.html">Fitness&Cardio</a></li>
<li><a href="pag3.html">Aerobic</a></li>
<li><a href="pag4.html">Contact</a></li>
</ul>
</div>
Foi de stiluri

#meniu {
margin-top:10px;
margin-left:10%;
margin-right:10%;
background-color:#999999;

}
#meniu ul{
list-style:none;
padding:0px;
margin:0px;
padding-top:6px;
padding-bottom:6px;
}
#meniu ul li{
display:inline;
padding-top:6px;
margin-left:20px;

}
#meniu ul li a{
font-family:Verdana;
font-size:20pt;
color:#C74311;

}
#meniu ul li a:link, a:visited{
text-decoration:none;
color:#C74311;
}

#meniu ul li a:hover{
text-decoration:underline;
color:#ffe6e6;
font-style:italic;
Pagina index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css" />
<style type="text/css">

#intreg {
text-align:justify;
margin-left:50px;
margin-right:50px;
margin-top:30px;
}
#continut{
border-bottom:solid 7pt #ff944d;
}
#intreg{
font-size:18pt;
}
</style>
</head>
<body>
<div id="header">
<h1> Focus GYM </h1>
</div>
<div id="meniu">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="pag1.html">Abonamente</a></li>
<li><a href="pag2.html">Fitness&Cardio</a></li>
<li><a href="pag3.html">Aerobic</a></li>
<li><a href="pag4.html">Contact</a></li>
</ul>
</div>
<div id="continut">
<div id="stanga">
<p> Pășește în sălile noastre de fitness spațioase și îți vei da seama ce înseamnă să te antrenezi
într-un spațiu modern și să fii întâmpinat de o echipă profesionistă de instructori.
Cluburile Focus GYM îți oferă peste 3.000 de metri pătrați cu aparatură modernă, facilității excelente
și cele mai bune clase de Group Fitness din Craiova.
Hai și tu să descoperi experiența Focus GYM! </p>
<p> Echipa noastră este formată din specialiști certificați în pregătirea performanței, antrenori
de forță și condiționare și instructori de fitness de grup.
Combinată cu sala noastră de gimnastică proiectată și echipată cu grijă, echipa noastră este capabilă
să ofere antrenamente de calitate superioară sportivilor, echipelor și practic oricui dorește să devină
mai puternic, mai rapid sau mai în formă.
Folosim un sistem de antrenament dovedit pentru a îmbunătăți postura, crește puterea și viteza,
reduce riscul de rănire și face corpul mai durabil.
Suntem dedicați îmbunătățirii și învățării continue în conformitate cu cele mai recente cercetări
științifice pentru a vă asigura că vă instruiți în cel mai inteligent mod posibil. </p>
</div>
<div id="dreapta">
<p>
<table>
<tr>
<td><img src="sala.jpg" width="300px" height="225px" hspace="10px"
vspace="20px"></td>
<td><img src="sala2.jpg" width="320px" hspace="35px"></td>
</tr>
<tr>
<td><img src="sala8.jpg" width="300px" hspace="10px" height="200px"></td>
<td><img src="sala9.jpg" width="350px" hspace="20px" height="200px"></td>
</tr>
</table>
</p>
</div>
<div style="clear:both"> </div>
</div>
<div id="intreg">
Focus GYM îsi rezervă dreptul de a-si selecta clientela. În
cazul în care un oaspete nu respectă termenii Regulamentului de Ordine
interioară sau prezinta un comportament sau limbaj inadecvat, acesta
nu poate beneficia de serviciile resortului.
</div>
<div id="footer">
</div>
</body>
</html>
Pagina abonamente.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css" />
<style type="text/css">
#intreg {
text-align:justify;
margin-left:50px;
margin-right:50px;
margin-top:30px;
}
#continut{
border-bottom:solid 7pt #ff944d;
}

#continut #stanga{
font-size:13.4pt;
}
#intreg{
font-size:19pt;
}
</style>
</head>
<body>
<div id="header">
<h1> Focus GYM </h1>
</div>
<div id="meniu">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="pag1.html">Abonamente</a></li>
<li><a href="pag2.html">Fitness&Cardio</a></li>
<li><a href="pag3.html">Aerobic</a></li>
<li><a href="pag4.html">Contact</a></li>
</ul>
</div>
<div id="continut">
<div id="stanga">
<p> Fă primul pas spre o viață activă!
Antrenează-te așa cum vrei și bucură-te din plin de echipamentele noastre moderne, clasele de
Group Fitness și susținerea antrenorilor noștri dedicați.
Abonamentele la sălile de fitness Focus GYM includ tot ce ai nevoie pentru a-ți îmbunătăți modul de
viață. </p>
<p> Focus GYM are 2 săli de fitness în Craiova, unde te poți antrena în spații largi, cu aparate
moderne și antrenori personali profesioniști.
Indiferent ce tip de antrenament îți dorești să urmezi, la noi cu siguranță vei reuși să-ți depășești
limitele și să-ți atingi obiectivele fit. </p>
<p> <img src="sala10.jpg" width="750px" height="280px" hspace="5px"> </p>
</div>
<div id="dreapta">
<p>
<img src="sala3.jpg" width="675px" height="450px" hspace="20px" height="200px">
</p>
</div>
<div style="clear:both"> </div>
</div>
<div id="intreg">
Schimbarea în bine începe chiar aici!
Intră și tu în comunitatea noastră fit și antrenează-te alături de noi la una dintre cele două săli de
fitness din Craiova.
</div>
<div id="footer">
</div>
</body>
</html>

Pagina fitness&cardio.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css" />
<style type="text/css">
#intreg {
text-align:justify;
margin-left:50px;
margin-right:50px;
margin-top:30px;
}
#continut{
border-bottom:solid 7pt #ff944d;
}
#continut #stanga{
font-style:bold;
}
#intreg{
font-size:18pt;
}
</style>
</head>
<body>
<div id="header">
<h1> Focus GYM </h1>
</div>
<div id="meniu">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="pag1.html">Abonamente</a></li>
<li><a href="pag2.html">Fitness&Cardio</a></li>
<li><a href="pag3.html">Aerobic</a></li>
<li><a href="pag4.html">Contact</a></li>
</ul>
</div>
<div id="continut">
<div id="stanga">
<p> Clasele de Group Fitness sunt modalitatea perfectă de antrena cu instructori profesioniști,
într-o atmosferă prietenoasă, care te stimulează să-ți atingi obiectivele fit.
La Focus GYM au loc diverse antrenamente de grup, de la yoga și pilates, la Steel Training și Tabata.
Astfel, în fiecare săptămână ai o mulțime de opțiuni, în funcție de nivelul de dificultate pe care îl
preferi. </p>
<p> <b>Antrenori personali</b>: Instructorii noștri îți pun la punct antrenamente speciale, care
te vor ajuta să-ți atingi mai repede obiectivele tale fit. </p>
<p><b>Puncte Cardio</b>: Fie că îți faci încălzirea sau preferi workout-urile cardio, la
Electroputere Parc ai parte de 17 puncte de cardio, perfecte pentru antrenamentele intense. </p>
<p><b>Aparatura moderna</b>: Sala noastră de fitness este dotată cu aparate de ultimă
generație Nautilus. </p>
<p><b>Studio de Cycling</b>: O sesiune de Schwinn Cycling este modalitatea perfectă de a te
menține în formă. </p>
</div>
<div id="dreapta">
<p>
<img src="sala4.jpg" width="400px" height="200px" hspace="150px" vspace="20px">
<table>
<tr>
<td><img src="sala5.jpg" width="350px" height="210px" hspace="10px"
vspace="10px"></td>
<td><img src="sala11.jpg" width="330px" height="210px" hspace="10px"
vspace="10px"></td>
</tr>
</table>

</p>
</div>
<div style="clear:both"> </div>
</div>
<div id="intreg">
Schimbarea în bine începe chiar aici!
Intră și tu în comunitatea noastră fit și antrenează-te alături de noi la una dintre cele două săli de
fitness din Craiova.
</div>
<div id="footer">
</div>
</body>
</html>

Pagina aerobic.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css" />
<style type="text/css">
#intreg {
text-align:justify;
margin-left:50px;
margin-right:50px;
margin-top:30px;
}
#continut{
border-bottom:solid 7pt #ff944d;
}
#continut #stanga{
font-style:bold;
}
#continut #stanga{
text-align:justify;
}
#intreg{
font-size:18pt;
}
</style>
</head>
<body>
<div id="header">
<h1> Focus GYM </h1>
</div>
<div id="meniu">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="pag1.html">Abonamente</a></li>
<li><a href="pag2.html">Fitness&Cardio</a></li>
<li><a href="pag3.html">Aerobic</a></li>
<li><a href="pag4.html">Contact</a></li>
</ul>
</div>
<div id="continut">
<div id="stanga">
<p> Iti punem la dispozitie clase de aerobic variate.
Clasele de aerobic sunt alegerea perfecta pentru momentele cand ai nevoie sa te antrenezi alaturi de
profesionisti sau cand vrei sa incerci ceva deosebit.
Avem o multitudine de clase de aerobic, create special pentru tine, pentru ca tu sa ai o experienta
buna alaturi de cei mai buni antrenori din domeniu. </p>
<br><b>Iata cateva beneficii ale claselor de aerobic</b>: </br>
<br>1. Slabesti in mod sanatos;</br>
2. Imbunatatesti sistemul imunitar si articulatiile;</br>
3. Iti tonifiezi musculatura;
<br>4. Elimini stresul acumulat.</br></p>
</div>
<div id="dreapta">
<p>
<img src="sala6.jpg" width="530px" height="400px" hspace="43px" height="150px"
vspace="30px">
</p>
</div>
<div style="clear:both"> </div>
</div>
<div id="intreg">
Schimbarea în bine începe chiar aici!
Intră și tu în comunitatea noastră fit și antrenează-te alături de noi la una dintre cele două săli de
fitness din Craiova.
</div>
<div id="footer">
</div>
</body>
</html>

Pagina contact.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css" />
<style type="text/css">
#intreg {
text-align:justify;
margin-left:50px;
margin-right:50px;
margin-top:30px;
}
#continut{
border-bottom:solid 7pt #ff944d;
}
#continut #stanga{
font-style:bold;
text-align:left;
}
#intreg{
font-size:18pt;
}
</style>
</head>
<body>
<div id="header">
<h1> Focus GYM </h1>
</div>
<div id="meniu">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="pag1.html">Abonamente</a></li>
<li><a href="pag2.html">Fitness&Cardio</a></li>
<li><a href="pag3.html">Aerobic</a></li>
<li><a href="pag4.html">Contact</a></li>
</ul>
</div>
<div id="continut">
<div id="stanga">
<p><b><br>Program</b>:</br> Luni-Vineri: 07:00-16:00
<br> Sambata si Duminica: 09:00-22:00 </br>
Programul poate varia in perioada sarbatorilor! </p>
<p> <b>Email</b>: focusgymfit@gmail.com</p>
<p><b>Telefon</b>: 0779.051.396</p>
<p><b>Adresa</b>: </br> 1. Calea București, nr. 80, et. 1, Craiova (Electroputere Parc);</br>
2. Bulevardul Decebal, nr. 85, Craiova (Metal Lemn).</p>
</div>
<div id="dreapta">
<table>
<tr>
<td>
<form>
<label for="fname">Nume:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Prenume:</label><br>
<input type="text" id="lname" name="lname" value=""><br>
<label for="fname">Adresa de e-mail:</label><br>
<input type="text" id="email" name="email" value=""><br>
<label for="fname">Număr de telefon:</label><br>
<input type="text" id="telefon" name="telefon" value=""><br>
<label for="fname">Mesaj:</label><br>
<input type="text" id="mesaj" name="mesaj" value=""><br><br>
<input type="submit" value="Submit">
</form>
</td>
<td>
<p>

<img src="sala7.jpg" width="430px" height="400px" hspace="25px" height="120px"


vspace="5px">
</p>
</td>
<tr>
</table>
</div>
<div style="clear:both"> </div>
</div>
<div id="intreg">
Schimbarea în bine începe chiar aici!
Intră și tu în comunitatea noastră fit și antrenează-te alături de noi la una dintre cele două săli de
fitness din Craiova.
</div>
<div id="footer">
</div>
</body>
</html>

Bibliografie
https://www.4moving.ro/

http://focus-gyms.com/

Anexe
Fisierul stiluri.css

/* CSS Document */

body{
background-color:#ffebcc;
}
#header{
width:80%;
background-color:#ffa366;
margin-left:10%;
margin-right:10%;
height:100px;
}
#header h1{
padding-top:30px;
border-bottom:solid 2pt white;
padding-left:70px;
width:50%;
font-family:"Times New Roman", Times, serif;
font-size:44px;
font-style:italic;
color:#132639;
}

#meniu {
margin-top:10px;
margin-left:10%;
margin-right:10%;
background-color:#999999;

}
#meniu ul{
list-style:none;
padding:0px;
margin:0px;
padding-top:6px;
padding-bottom:6px;
}
#meniu ul li{
display:inline;
padding-top:6px;
margin-left:20px;

}
#meniu ul li a{
font-family:Verdana;
font-size:20pt;
color:#C74311;
}
#meniu ul li a:link, a:visited{
text-decoration:none;
color:#C74311;
}

#meniu ul li a:hover{
text-decoration:underline;
color:#ffe6e6;
font-style:italic;
}
#continut{
margin-top:10px;
margin-bottom:10px;
margin-left:30px;
margin-right:30px;
height:500px;

#stanga{
float:left;
width:50%;
font-style:italic;
font-size:23px;
text-align:center;}

#dreapta{
float:right;
width:48%;}

#footer{
height:100px;
padding:6px;
margin-left:2%;
margin-right:2%;
font-style:italic;
font-size:15px;
}

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