Sunteți pe pagina 1din 57

Universitatea de Stat din Moldova

Facultatea de Matematic i Informatic


Departamentul Informatic




Practica de producere


Sef Catedr ______________ Arnut Vsevolod, dr.conf

Conductor tiinific: _____________Vitalie Crhana

Autorul: ______________Cojocari Ion






Chiinu 2014


CUPRINS
1. Introducere ........................................................................................................................................... 1
2. Activitatea pe parcursul practicii .......................................................................................................... 2
Studierea limbajului HTML ............................................................................................................... 2
Studierea limbajului CSS(Cascading Style Sheets) ............................................................................ 3
Studierea limbajului JavaScript i bibliotecii Jquery ......................................................................... 3
Studierea framework-ului Bootstrap ................................................................................................ 4
De ce Bootstrap ............................................................................................................................... 4
Instalare Bootstrap ........................................................................................................................... 5
Sistemul de gradare Bootstrap ......................................................................................................... 7
CSS .................................................................................................................................................... 8
Componente ................................................................................................................................... 10
JavaScript ........................................................................................................................................ 11
Crearea ablonului .......................................................................................................................... 12
3. Concluzie ............................................................................................................................................. 55

1


1. INTRODUCERE

n perioada de la 17 martie - 5 mai, am petrecut practica de producie n cadrul ntreprinderii
StarSoft East SRL din or.Chisinau, n cadrul departamentului Starsoft Academy sub
coordonarea dnei. Natalia Deli.
Scopul drii de seam l constituie prezentarea activitii ntreprinderii, precum i elucidarea
propriilor activiti n cadrul practicii de producie.
Compania StarSoft este un furnizor de servicii IT, care pune cea mai mare valoare pe fora
de munca. Toi angajaii companiei StarSoft ofera competena maxim la preturi
flexibile .Starsoft utilizeaza recrutarea riguroasa i tehnici de formare a personalului pentru a
asigura cel mai nalt nivel de cunostine angajailor, astfel oferind clienilor un produs
calitativ.
Departamentul Starsoft Academy ete destinat in exclusivitate pregatirii tinirilor specialist in
domeniul web-designului i programarii web. Pregatirea specialitilor avind loc in 3 etape:
I. Etapa n decurs de o lun se studiaz limbajele de programare HTML, CSS,
JavaScript si frameworkul Botstrap.
II. Etapa n decurs de doua luni se studiaza libajul de programare PHP i
MySql.
III. Etapa n decurs de trei luni lucrul asupra proiectelor reale.Lucrul n echipa
sub conducerea unui coordonator.




2


2. ACTIVITATEA PE PARCURSUL PRACTICII

SARCINI
Studierea limbajului HTML.
Studierea limbajului CSS.
Studierea libajului JavaScript i bibliotecii Jquery
Studierea framework-ului Bootstrap.
Crearea cu ajutorul framework-ului Bootstrap unui ablon pentru un magazin electronic de
telefoane mobile.
Studierea limbajului HTML

n prima sptmna de practic am studiat limbajul de programare HTML i mediul de
redactare Webstorm.
SARCINI
Studierea redactorului Webstorm
Sintax HTML
Structura document HTML
Studierea elementelor HTML
A crea o pagin web
JetBrains WebStorm - este un mediu de dezvoltare integrat pentru JavaScript , CSS i
HTML din partea companiei JetBrains , dezvoltat pe baza platformei IntelliJ IDEA
.WebStorm ofer auto- completare , analiz de cod, cod navigare , refactorizarii , depanare ,
i integrarea cu sistemele de control. Un avantaj important al WebStorm IDE este de lucru cu
proiecte ( inclusiv refactoring JavaScript , situate n diferite fiiere i foldere ale proiectului ,
precum i ncorporate n HTML ) .

HTML este un limbaj de marcare orientat ctre prezentarea documentelor text pe o singura
pagin.
Utiliznd un software de redare specializat, numit agent utilizator HTML (cel mai bun
exemplu de astfel de software fiind browserul web) HTML furnizeaz mijloacele prin care
coninutul unui document poate fi adnotat cu diverse tipuri de metadate i indicaii de redare.
Indicaiile de redare pot varia de la decoraiuni minore ale textului (cum ar fi specificarea
faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus) pn la
3

scripturi sofisticate, hri de imagini i formulare. Metadatele pot include informaii despre
titlul i autorul documentului, informaii structurale despre cum este mprit documentul n
diferite segmente, paragrafe, liste, titluri etc. i informaii cruciale care permit ca documentul
s poat fi legat de alte documente pentru a forma astfel hiperlink-uri.

Studierea limbajului CSS(Cascading Style Sheets)

n sptmna a doua de practic am studiat limbajul CSS.
SARCINI
Conectarea CSS
Sintax CSS
Centrarea blocurilor
Creare menu vrtical
Creare menu orizontal
Drop-down menu
Creare pagina web folosind Html i CSS
Noiunea de stil este, pentru un document HTML, asemntoare cu formatarea
documentului, spre exemplu, pentru un document Word. Exis o mulime de atribute prin
care se pot stabili font-urile, caracteristicile de aliniere a textului, forma elementului, culorile
de fond i ale literelor, marginile, poziia elementelor, etc.
Pentru a putea gestiona ct mai eficient stilurile, a fost pus la dispoziia programatorilor de
pagini web un limbaj prin care se poate realiza acest lucru. Acest limbaj este cunoscut sub
numele de CSS



Studierea limbajului JavaScript i bibliotecii Jquery

n sptmna a treiea de practic am studiat limbajul JavaScript si biblioteca Jquery.
SARCINI
Conectarea JavaScript
Conectarea bibliotecii Jquery
Studierea metodelor Animate , hide, show, toggle
Metoda de animatie slide
Creare slaidshow
4

Creare galerie
Creare pagina Web folosind HTML, CSS, JavaScript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe
conceptul prototipurilor.Este folosit mai ales pentru introducerea unor funcionaliti n
paginile web, codul Javascript din aceste pagini fiind rulat de ctre browser. Limbajul este
binecunoscut pentru folosirea sa n construirea siturilor web, dar este folosit i pentru acesul
la obiecte ncastrate (embedded objects) n alte aplicaii.
jQuery este o platform de dezvoltare JavaScript, conceput pentru a uura i mbunti
procese precum traversarea arborelui DOM n HTML, managementul inter-browser al
evenimentelor, animaii i cereri tip AJAX. jQuery a fost gndit s fie ct mai mic posibil,
disponibil n toate versiunile de browsere importante existente, i s respecte filosofia
"Unobtrusive JavaScript". Biblioteca a fost lansat in 2006 de ctre John Resig.

Studierea framework-ului Bootstrap

Bootstrap este un framework pentru front-end pentru dezvoltare mai rapid si uoar a
paginilor web folosind HTML, CSS i Javascript. Bootstrap a fost dezvoltat de ctre Mark
Otto i Jacob Thornton la Twitter. A fost lansat ca un produs open source n august 2011 pe
GitHub.
De ce Bootstrap

Mobile first - ncepnd cu Bootstrap 3 este format din primele stiluri de mobile pe
ntreaga bibliotec n loc de fiiere separate.
Suport pentru browser - El este sprijinit de toate browserele populare.



Uor de nceput - Cu doar cunotine de HTML i CSS oricine poate ncepe cu
Bootstrap. De asemenea, site-ul oficial Bootstrap are o buna documentare.
5

Design Responsiv - Bootstrap este responsive pentru dispositive de tipul: desktop-
uri, tablete i telefoane mobile.
Ofer o soluie curat i uniform pentru a construi o interfa pentru
dezvoltatori.
Acesta conine componente frumoase i funcionale built-in, care sunt uor de
personalizat.
Acesta de asemenea prevede personalizare bazat pe web.

Ce include pechetul Bootstrap?
Structur - Bootstrap ofer o structur de baz cu sistemul Grid, stiluri de link-uri,
de fundal.
CSS - Bootstrap vine cu o caracteristic de setri globale CSS, elemente
fundamentale HTML, stiluri mbuntite cu clase extensibile, precum i un sistem
avansat de gradare.
Componente - Bootstrap conine peste o duzin de componente reutilizabile
construite pentru a oferi iconografie, dropdowns, navigatie, alerte, popovers, i mult
mai multe.
JavaScript Plugin-uri - Bootstrap conine peste o duzin de plugin-uri personalizate
jQuery. Putei include cu uurin-le pe toate, sau unul cte unul.
Particularizare - Putei personaliza componentele Bootstrap-lui, plugin-uri jQuery
pentru a obine propria versiune.
Instalare Bootstrap

Este foarte uor de instalat i de a ncepe s utilizai Bootstrap. Acest capitol va explica
modul de descrcare i instalare Bootstrap. Se va discuta, de asemenea, structura de fiiere
Bootstrap i utilizarea acesteia cu un exemplu.
6


STRUCTURA DE FIIERE.
n fiierele descrcate, vei gsi urmtoarea structur i coninut, grupate n mod logic, de
caracteristicile comune i versiuni conin att minimizate i compilat. Dup download,
dezarhiveaz folderul comprimat pentru a vedea structura (compilare) Bootstrap. Ar trebui s
fie ca aceasta:

ABLON HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.
js">
</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Aici putem vedea jquery.js i bootstrap.min.js i fiiere bootstrap.min.css sunt incluse pentru
a face un fiier normal HTM.
7


Sistemul de gradare Bootstrap

n design grafic, o gril este o structur (de obicei bidimensional) compus dintr-o serie de
linii drepte intersectate (verticale, orizontale) utilizate pentru a structura coninutul. Acesta
este utilizat pe scar larg pentru a proiecta aspectul i coninutul structura in print design. In
web design, este o metod foarte eficient de a crea un aspect consistent rapid i eficient
folosind HTML i CSS. n cuvinte simple n web design sitemul de gradare organizeaz i
structureaz coninutul site-urilor web. Bootstrap include un prim sistem receptiv, mobil
fluid gril care scaleaz n mod corespunztor pn la 12 coloane Acesta include clase
predefinite de opiuni pentru generarea de machete mai semantice.
Bootstrap v permite s facei un design adaptabil pentru diferite dispozitive (telefoane,
tablete, convenional i monitoare cu ecran lat).

Folosind o singur clasa .col-md-*, putem crea sistemul de baz a unei pagini web.
<div class="container ">
<div class="row">
<div class="col.md-*">

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

8



CSS

Setrile globale CSS, elemente fundamentale HTML, stil i mbuntire cu clase extensibile.
1. Tipografie
1.1. Rubrici
1.2. Evideiere
1.2.1. Text de mici dimensiuni
1.2.2. ngrosat
1.2.3. Italice
1.2.4. Clase de aliniere
1.3. Abrevieri
1.3.1. Abreviere de baz
1.3.2. Initialism
1.4. Informaii de contact
1.5. Blockquotes
1.6. Liste
1.6.1. Neordonate
1.6.2. Ordonate
1.6.3. Unstyled
1.6.4. Inline
1.6.5. Descriere
1.6.6. Descrierea orizontal
1.7. Cod
9

1.7.1. Inline
1.7.2. Bloc de baz
1.8. Tabele
1.8.1. Rnduri dungi
1.8.2. Tabel mrginit
1.8.3. Rnduri hover
1.8.4. Tabel condensate
1.8.5. Clase contextuale
1.8.6. Tabele responsive
1.9. Formulare
1.9.1. Formular inline
1.9.2. Formular orizontal
1.9.3. Controale acceptate
1.9.4. Textarea
1.9.5. Casetele de selectare i radiouri
1.9.6. Casetele de selectare inline
1.9.7. Selects
1.9.8. Formular de control static
1.9.9. Formulare cu focus de intrare
1.9.10. Formulare cu introducere interzis
1.9.11. Stri de validare
1.9.12. Cu icoanie opionale
1.9.13. Dimensionare de control
1.9.14. Formulare cu text ajutor
1.10. Butoane
1.10.1. Mrime
1.10.2. Stare activ
1.10.3. Stare interzisa
1.11. Imagini
1.11.1. Imagini responsive
1.11.2. Forme de imagine
1.12. Clase ajuttoare
1.12.1. Culori contextuale
1.12.2. Culori fundal
1.12.3. Centrare bloc
1.12.4. Clearfix


10

Componente

Peste o duzin de componente reutilizabile construite pentru a oferi iconografie, dropdowns, grupuri de
intrare, navigatie, alerte, i mult mai mult.
1. Glyphicons
2. Dropdowns
3. Grupuri de butoane
3.1. Bara de instrumente
3.2. Dimensionarea
3.3. Cuiburi
3.4. Variaie vertical
3.5. Grupuri de buton justificate
4. Navs
4.1. Tabs
4.2. Pills
4.3. Tabs cu Dropdown
4.4. Pills cu dropdown
5. Navbar
5.1. Navbar implicit
5.2. Formular
5.3. Butoane
5.4. Fixat sus
5.5. Fixat jos
5.6. Static sus
5.7. Static jos
5.8. Navbar inversat
6. Breadcrumbs
7. Paginaie
8. Etichete
9. Insigne
10. Jumbotron
11. Antetul paginii
12. Miniaturi
13. Alerte
14. Bare de progress
15. Panouri

11

JavaScript

Aduce componente Bootstrap la via, cu peste o duzin de plugin-uri personalizate jQuery.
1. Modals
1.1. Static
1.2. Comutare
2. Dropdown
3. ScrollSpy
4. Togglable tabs
5. Tooltips
6. Popovers
7. Mesaje de avertizare
8. Collapse
9. Carousel



















12

Crearea ablonului

CREAREA ABLONULUI
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
13

<title>Bootstrap 101 Template</title>
<link rel="icon" type="image/png" href="images/favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="bg-default">
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse">
<p class="navbar-text">
<a href="register.php" class="navbar-link">CREATE AN ACCOUNT</a> OR <a href="#"
class="navbar-link" data-toggle="modal" data-target="#LogIn">LOG IN</a>
<div class="modal fade bs-example-modal-sm" id="LogIn" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">Log In</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form role="form" class="contact-form">
<div class="form-group">
<label>Username<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label >Password<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="password" class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-warning" data-
dismiss="modal">Log In</button>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-12">
<a href="#">Forgot Your Password?</a><br>
14

<a href="#">Forgot Your Username?</a>
</div>
</div>
</div>
</div>
</div>
</div>

</p>

<ul class="nav navbar-nav navbar-right ">
<li class="dropdown">
<a href="online_stores.php" class="dropdown-toggle" data-toggle="dropdown">ONLINE
STORE
<span class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Manufacturer Default Layout</a></li>
<li class="divider"></li>
<li><a href="#">Display Vendor Contact</a></li>
<li class="divider"></li>
<li><a href="#">List Orders</a></li>
<li class="divider"></li>
<li><a href="#">User Edit Address</a></li>
<li class="divider"></li>
<li><a href="#">Category Layout</a></li>
</ul>
</li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="delivery.php">DELIVERY</a></li>
<li><a href="faqs.php">FAQS</a></li>
<li><a href="contact.php">CONTACTS</a></li>
</ul>
</nav>
</div>
<div class="row">
<nav class="navbar navbar-inverse logo">
<a href="index.php" class="navbar-brand"><img src="images/logo.png" alt="Cell phones"
title="Cell phones"
class="img-responsive"></a>
<div class="navbar-text pull-right dropdown">
<span class="glyphicon glyphicon-shopping-cart"></span> NOW IN YOUR CART
<a href="#" class="navbar-link dropdown-toggle" data-toggle="dropdown">0 ITEMS
<span class="glyphicon glyphicon-ok-sign"></span>
<ul class="dropdown-menu">
<li><a href="#">YOUR SHOPPING CART IS EMPTY!</a></li>
</ul>
</a>
</div>
</nav>
</div>
<div class="row">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="phones.php">PHONES</a></li>
<li><a href="#">ACCESSORIES</a></li>
15

<li><a href="#">CAMERAPHONES</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SMARTPHONES <span
class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">NOKIA</a></li>
<li><a href="#">HTC</a></li>
<li><a href="#">SAMSUNG</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">MOTOROLA</a></li>
</ul>
</li>
<li><a href="#">SPECIAL OFFERS</a></li>
<li><a href="#" data-toggle="modal" data-target="#add_prod">Add new phone</a></li>
<div class="modal fade" id="add_prod" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">
Add new product
</h4>
</div>
<div class="modal-body">

<!-- -->
<form role="form" action="add_prod.php" method="post"
enctype="multipart/form-data">
<!-- -->
<div class="form-group">
<label for="phone_mode;">Phone model</label>
<input name="model" type="text" class="form-control"
placeholder="Phone model">
</div>
<!-- -->
<div class="form-group">
<label for="phone_info">Description</label>
<input name="info" type="text" class="form-control"
placeholder="Description">
</div>
<!-- -->
<div class="form-group">
<label for="phone_price">Price</label>
<input name="price" type="text" class="form-control"
placeholder="$">
</div>
<!-- -->
<div class="form-group">
<label for="phone-img">Phone Images</label>
<input type="file" name="cell_img" placeholder="File">
<!-- -->

16

</div>

</div>
<div class="modal-footer">
<input type="submit" value="Add" name="button" class="btn btn-danger
pull-right">
</form>
</div>
</div>
</div>
</div>
</ul>
<form class="navbar-form navbar-right serch-form" role="search">
<div class="form-group">
<input type="search" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</nav>
</div><div class="row">
<div class="col-md-9">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="list-inline slaid-indic-pos">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<a><span class="glyphicon glyphicon-unchecked"></span></a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<a><span class="glyphicon glyphicon-unchecked"></span></a>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<a><span class="glyphicon glyphicon-unchecked"></span></a>
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<a href="product.php"><img src="images/slaider-img-1.jpg" alt="Slaider-1"
class="img-responsive slaid-img"></a>
<div class="carousel-caption">
</div>
</div>
<div class="item ">
<a href="product.php"><img src="images/slaider-img-2.jpg" alt="Slaider-2"
class="img-responsive slaid-img"></a>
<div class="carousel-caption">
</div>
</div>
<div class="item ">
<a href="product.php"><img src="images/slaider-img-3.jpg" alt="Slaider-3"
class="img-responsive slaid-img"></a>
<div class="carousel-caption">
17

</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 bg-white">
<h3 class="baner1-text">Motorola Droid X</h3>
<a href="product.php"><img src="images/banner1.png" alt="Cell-1" title="Cell-1" class="right-
img-carusel"></a>
</div>
</div>
<div class="row">
<div class="baner-blok">
<h4 class="baner-text-h4">Sony Xperia ZL</h4>
<p class="baner-text-p">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit.</p>
<a href="product.php"><img src="images/banner2.jpg" class="img-size"></a>
</div>
<div class="baner-blok">
<h4 class="baner-text-h4">Asus Padfone 2</h4>
<p class="baner-text-p">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit.</p>
<a href="product.php"><img src="images/banner3.jpg" class="img-size"></a>
</div>
<div class="baner-blok">
<h4 class="baner-text-h4">Nokia Lumia 925</h4>
<p class="baner-text-p">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit.</p>
<a href="product.php"><img src="images/banner4.jpg" class="img-size"></a></div>
</div>
<div class="row">
<h4 class="new">New Products</h4>
</div>
<div class="row">
<div class="col-xs-6 col-md-3 " style="border-right: 15px solid transparent;">
<div class="row">
<a href="product.php" class="thumbnail ">
<img src="images/motorola.png" alt="Motorola Droid X" title="Motorola Droid X"
class="img-responsive">
</a>
<h2 class="white">$380.50</h2>
<a href="product.php" class="thub_link">Motorola Droid X</a><br>
<a href="product.php"><button type="button" class="btn btn-warning">ADD TO
CART</button></a>
</div>
</div>
<div class="col-xs-6 col-md-3 " style="border-right: 15px solid transparent;">
<div class="row">
<a href="product.php" class="thumbnail">
<img src="images/nokia_e7_1.png" alt="NOKIA E7" title="NOKIA E7"
class="img-responsive">
</a>
<h2 class="white">$435.20</h2>
<a href="product.php" class="thub_link">NOKIA E7</a><br>
<a href="product.php"><button type="button" class="btn btn-warning">ADD TO
CART</button></a>
</div>
18

</div>
<div class="col-xs-6 col-md-3" style="border-right: 15px solid transparent;">
<div class="row">
<a href="product.php" class="thumbnail">
<img src="images/samsung.png" alt="Samsung i9100 Galaxy S II" title="Samsung i9100
Galaxy S II"
class="img-responsive">
</a>
<h2 class="white">$395.20</h2>
<a href="product.php" class="thub_link">Samsung i9100 Galaxy S II</a><br>
<a href="product.php"><button type="button" class="btn btn-warning">ADD TO
CART</button></a>
</div>
</div>
<div class="col-xs-6 col-md-3 pull-right " style="width: 290px">
<div class="row">
<a href="product.php" class="thumbnail">
<img src="images/hts.png" alt="HTC Desire" title="HTC Desire" class="img-responsive">
</a>
<h2 class="white">$380.20</h2>
<a href="product.php" class="thub_link">HTC Desire </a><br>
<a href="product.php"><button type="button" class="btn btn-warning">ADD TO
CART</button></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 footer">
Copyright 2014 Wheels & Tyres. All Rights Reserved. Joomla! is Free Software released under
the GNU. | <a
href="http://deli.md/web/" target="_blank">Starsoft-Academy</a>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function () {
$('#bgrid').addClass('active');
$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').addClass('col-md-12');
$('.info').addClass('col-md-12');
$('.price').addClass('col-md-12');

$('#bgrid').click(function () {
$(this).addClass('active');
$('#blist').removeClass('active');

$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').removeClass('col-md-2');
19

$('.info').removeClass('col-md-7');
$('.price').removeClass('col-md-3');

});
$('#blist').click(function () {
$(this).addClass('active');
$('#bgrid').removeClass('active');

$('.prod').addClass('col-md-12');
$('.prod').removeClass('col-md-4');
$('.image').addClass('col-md-2');
$('.info').addClass('col-md-7');
$('.price').addClass('col-md-3');
});

});
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
//galery
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html("(" + largeAlt + ")");
return false;
});


});
</script>
<script>
function doMinus(){
if( document.getElementById("count").value > 1){ document.getElementById("count").value = --
document.getElementById("count").value;}
else {document.getElementById("count").value = 1;}
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
</script>
<script>
20

$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body>
</html>

























21

register.html



22


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="icon" type="image/png" href="images/favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="bg-default">
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse">
<p class="navbar-text">
<a href="register.php" class="navbar-link">CREATE AN ACCOUNT</a> OR <a href="#"
class="navbar-link" data-toggle="modal" data-target="#LogIn">LOG IN</a>
<div class="modal fade bs-example-modal-sm" id="LogIn" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">Log In</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form role="form" class="contact-form">
<div class="form-group">
<label>Username<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label >Password<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="password" class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-warning" data-
dismiss="modal">Log In</button>
</form>
23

</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-12">
<a href="#">Forgot Your Password?</a><br>
<a href="#">Forgot Your Username?</a>
</div>
</div>
</div>
</div>
</div>
</div>
</p>
<ul class="nav navbar-nav navbar-right ">
<li class="dropdown">
<a href="online_stores.php" class="dropdown-toggle" data-toggle="dropdown">ONLINE
STORE
<span class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Manufacturer Default Layout</a></li>
<li class="divider"></li>
<li><a href="#">Display Vendor Contact</a></li>
<li class="divider"></li>
<li><a href="#">List Orders</a></li>
<li class="divider"></li>
<li><a href="#">User Edit Address</a></li>
<li class="divider"></li>
<li><a href="#">Category Layout</a></li>
</ul>
</li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="delivery.php">DELIVERY</a></li>
<li><a href="faqs.php">FAQS</a></li>
<li><a href="contact.php">CONTACTS</a></li>
</ul>
</nav>
</div>
<div class="row">
<nav class="navbar navbar-inverse logo">
<a href="index.php" class="navbar-brand"><img src="images/logo.png" alt="Cell phones"
title="Cell phones" class="img-responsive"></a>
<div class="navbar-text pull-right dropdown">
<span class="glyphicon glyphicon-shopping-cart"></span> NOW IN YOUR CART
<a href="#" class="navbar-link dropdown-toggle" data-toggle="dropdown">0 ITEMS
<span class="glyphicon glyphicon-ok-sign"></span>
<ul class="dropdown-menu">
<li><a href="#">YOUR SHOPPING CART IS EMPTY!</a></li>
</ul>
</a>
</div>
</nav>
</div>
<div class="row">
24

<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="phones.php">PHONES</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">CAMERAPHONES</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SMARTPHONES <span
class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">NOKIA</a></li>
<li><a href="#">HTC</a></li>
<li><a href="#">SAMSUNG</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">MOTOROLA</a></li>
</ul>
</li>
<li><a href="#">SPECIAL OFFERS</a></li>
<li><a href="#" data-toggle="modal" data-target="#add_prod">Add new phone</a></li>
<div class="modal fade" id="add_prod" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">
Add new product
</h4>
</div>
<div class="modal-body">
<form role="form" action="add_prod.php" method="post"
enctype="multipart/form-data">
<div class="form-group">
<label for="phone_mode;">Phone model</label>
<input name="model" type="text" class="form-control"
placeholder="Phone model">
</div>
<div class="form-group">
<label for="phone_info">Description</label>
<input name="info" type="text" class="form-control"
placeholder="Description">
</div>
<div class="form-group">
<label for="phone_price">Price</label>
<input name="price" type="text" class="form-control"
placeholder="$">
</div>
<div class="form-group">
<label for="phone-img">Phone Images</label>
<input type="file" name="cell_img" placeholder="File">
</div>
</div>
<div class="modal-footer">
25

<input type="submit" value="Add" name="button" class="btn btn-danger
pull-right">
</form>
</div>
</div>
</div>
</div>
</ul>
<form class="navbar-form navbar-right serch-form" role="search">
<div class="form-group">
<input type="search" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</nav>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel ">
<div class="panel-heading">
<h5>
BESTSELLERS
</h5>
</div>
</div>
<ul class="list-group">
<li class="list-group-item list">
<a href="#"> Item 1
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 2
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 3
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 4
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 5
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 6
26

</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 7
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 8
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 9
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 10
</a>
</li>
</ul>
</div>
<div class="col-md-9 ">
<div class="row">
<ol class="breadcrumb path">
<li><a href="index.php"> Home</a></li>
<li><a href="online_stores.php"> Online Store</a></li>
<li><a href="#"> User Edit Address</a></li>
<li class="active">Your acount details</li>
</ol>
</div>
<div class="row">
<h5 class="white"> YOUR ACCOUNT DETAILS</h5>
</div>
<div class="row panel">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<p>When you are already registered, please login directly here.</p>
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group col-md-6">
<label class="control-label white" for="userid">Username:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text"
class="form-control " placeholder="Username" class="input-medium">
<a href="#">Forgot Your Username?</a>
</div>
</div>

<!-- Password input-->
27

<div class="control-group col-md-6">
<label class="control-label white"
for="passwordinput">Password:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput"
class="form-control " type="password" placeholder="********" class="input-medium">
<a href="#">Forgot Your Password?</a>
</div>
</div>

<!-- Button -->
<div class="control-group col-md-2">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign
In</button>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group col-md-10">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0"
value="Remember me">
Remember me
</label>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="row">
<h5 class="white"> YOUR ACCOUNT DETAILS</h5>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="white text-center"> YOUR ACCOUNT DETAILS</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label
rg_lable">Email<sup><span class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail3"
placeholder="Email" required="">
</div>
</div>
<div class="form-group">
<label for="inputUsername" class="col-sm-3 control-label
rg_lable">Username</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputUsername"
placeholder="Username" required="">
</div>
28

</div>
<div class="form-group">
<label for="inputDisplaydName" class="col-sm-3 control-label
rg_lable">Displayed Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputDisplaydName"
placeholder="Displayed Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label
rg_lable">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword"
placeholder="********" required="">
</div>
</div>
<div class="form-group">
<label for="inputConfirmPassword" class="col-sm-3 control-label
rg_lable">Confirm Password</label>
<div class="col-sm-8">
<input type="password" class="form-control"
id="inputConfirmPassword" placeholder="********" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label rg_lable">I agree to the Terms of
Service</label>
<div class="col-sm-8">
<input type="checkbox" required="">
</div>
</div>
<h4 class="white text-center">Bill To</h4>
<div class="form-group">
<label for="inputCompanyName" class="col-sm-3 control-label
rg_lable">Company Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputCompanyName"
placeholder="Company Name">
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="col-sm-3 control-label
rg_lable">Title</label>
<div class="col-sm-8">
<select class="form-control">
<option selected>Mr</option>
<option>Mrs</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputFirstName" class="col-sm-3 control-label
rg_lable">First Name<sup><span class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
<div class="col-sm-8">
29

<input type="text" class="form-control" id="inputFirstName"
placeholder="First Name" required="">
</div>
</div>
<div class="form-group">
<label for="inputMidleName" class="col-sm-3 control-label
rg_lable">Middle Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputMidleName"
placeholder="Middle Name" >
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-sm-3 control-label rg_lable">Last
Name<sup><span class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputLastName"
placeholder="Last Name" required="">
</div>
</div>
<div class="form-group">
<label for="inputAddress1" class="col-sm-3 control-label
rg_lable">Address 1<sup><span class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputAddress1"
placeholder="Address 1" required="">
</div>
</div>
<div class="form-group">
<label for="inputAddress2" class="col-sm-3 control-label
rg_lable">Address 2</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputAddress2"
placeholder="Address 2">
</div>
</div>
<div class="form-group">
<label for="inputZipCode" class="col-sm-3 control-label rg_lable">Zip /
Postal Code<sup><span class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputZipCode"
placeholder="Zip / Postal Code" required="">
</div>
</div>
<div class="form-group">
<label for="inputCity" class="col-sm-3 control-label
rg_lable">City<sup><span class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputCity"
placeholder="City" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label rg_lable">Country<sup><span
class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
30

<div class="col-sm-8">
<select class="form-control">
<option>--Select--</option>
<option>Moldova</option>
<option>Romanian</option>
<option>United States</option>
<option>Ukraine</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label rg_lable">State / Province /
Region<sup><span class="glyphicon glyphicon-asterisk lable-red"></span></sup></label>
<div class="col-sm-8">
<select class="form-control">
<option>--Select--</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-sm-3 control-label
rg_lable">Phone</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPhone"
placeholder="Phone">
</div>
</div>
<div class="form-group">
<label for="inputMobilePhone" class="col-sm-3 control-label
rg_lable">Mobile phone</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputMobilePhone"
placeholder="Mobile phone">
</div>
</div>
<div class="form-group">
<label for="inputFax" class="col-sm-3 control-label
rg_lable">Fax</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputFax"
placeholder="Fax">
</div>
</div>
<hr>
<div class="form-group col-md-3 pull-right">
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
31

<div class="row">
<div class="col-md-12 footer">
Copyright 2014 Wheels & Tyres. All Rights Reserved. Joomla! is Free Software released under
the GNU. | <a
href="http://deli.md/web/" target="_blank">Starsoft-Academy</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function () {
$('#bgrid').addClass('active');
$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').addClass('col-md-12');
$('.info').addClass('col-md-12');
$('.price').addClass('col-md-12');

$('#bgrid').click(function () {
$(this).addClass('active');
$('#blist').removeClass('active');

$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').removeClass('col-md-2');
$('.info').removeClass('col-md-7');
$('.price').removeClass('col-md-3');

});
$('#blist').click(function () {
$(this).addClass('active');
$('#bgrid').removeClass('active');

$('.prod').addClass('col-md-12');
$('.prod').removeClass('col-md-4');
$('.image').addClass('col-md-2');
$('.info').addClass('col-md-7');
$('.price').addClass('col-md-3');
});

});
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
32

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
//galery
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html("(" + largeAlt + ")");
return false;
});
});
</script>
<script>
function doMinus(){
if( document.getElementById("count").value > 1){ document.getElementById("count").value = --
document.getElementById("count").value;}
else {document.getElementById("count").value = 1;}
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
</script>
<script>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body>
</html>






















33

product.html




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="icon"
34

type="image/png"
href="images/favicon.ico">

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="bg-default">
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse">
<p class="navbar-text">
<a href="register.php" class="navbar-link">CREATE AN ACCOUNT</a> OR <a href="#"
class="navbar-link" data-toggle="modal" data-target="#LogIn">LOG IN</a>
<div class="modal fade bs-example-modal-sm" id="LogIn" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">Log In</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form role="form" class="contact-form">
<div class="form-group">
<label>Username<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label >Password<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="password" class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-warning" data-
dismiss="modal">Log In</button>
</form>
</div>
35

</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-12">
<a href="#">Forgot Your Password?</a><br>
<a href="#">Forgot Your Username?</a>
</div>
</div>
</div>
</div>
</div>
</div>

</p>

<ul class="nav navbar-nav navbar-right ">
<li class="dropdown">
<a href="online_stores.php" class="dropdown-toggle" data-toggle="dropdown">ONLINE
STORE
<span class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Manufacturer Default Layout</a></li>
<li class="divider"></li>
<li><a href="#">Display Vendor Contact</a></li>
<li class="divider"></li>
<li><a href="#">List Orders</a></li>
<li class="divider"></li>
<li><a href="#">User Edit Address</a></li>
<li class="divider"></li>
<li><a href="#">Category Layout</a></li>
</ul>
</li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="delivery.php">DELIVERY</a></li>
<li><a href="faqs.php">FAQS</a></li>
<li><a href="contact.php">CONTACTS</a></li>
</ul>
</nav>
</div>
<div class="row">
<nav class="navbar navbar-inverse logo">
<a href="index.php" class="navbar-brand"><img src="images/logo.png" alt="Cell phones"
title="Cell phones"
class="img-responsive"></a>

<div class="navbar-text pull-right dropdown">
<span class="glyphicon glyphicon-shopping-cart"></span> NOW IN YOUR CART
<a href="#" class="navbar-link dropdown-toggle" data-toggle="dropdown">0 ITEMS
<span class="glyphicon glyphicon-ok-sign"></span>
<ul class="dropdown-menu">
<li><a href="#">YOUR SHOPPING CART IS EMPTY!</a></li>
</ul>
</a>
</div>
36

</nav>
</div>
<div class="row">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="phones.php">PHONES</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">CAMERAPHONES</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SMARTPHONES <span
class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">NOKIA</a></li>
<li><a href="#">HTC</a></li>
<li><a href="#">SAMSUNG</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">MOTOROLA</a></li>
</ul>
</li>
<li><a href="#">SPECIAL OFFERS</a></li>
<li><a href="#" data-toggle="modal" data-target="#add_prod">Add new phone</a></li>
<div class="modal fade" id="add_prod" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">
Add new product
</h4>
</div>
<div class="modal-body">

<!-- -->
<form role="form" action="add_prod.php" method="post"
enctype="multipart/form-data">
<!-- -->
<div class="form-group">
<label for="phone_mode;">Phone model</label>
<input name="model" type="text" class="form-control"
placeholder="Phone model">
</div>
<!-- -->
<div class="form-group">
<label for="phone_info">Description</label>
<input name="info" type="text" class="form-control"
placeholder="Description">
</div>
<!-- -->
<div class="form-group">
<label for="phone_price">Price</label>
<input name="price" type="text" class="form-control"
placeholder="$">
37

</div>
<!-- -->
<div class="form-group">
<label for="phone-img">Phone Images</label>
<input type="file" name="cell_img" placeholder="File">
<!-- -->

</div>

</div>
<div class="modal-footer">
<input type="submit" value="Add" name="button" class="btn btn-danger
pull-right">
</form>
</div>
</div>
</div>
</div>
</ul>
<form class="navbar-form navbar-right serch-form" role="search">
<div class="form-group">
<input type="search" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</nav>
</div>
<div class="row" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<div class="col-md-3">
<div class="panel ">
<div class="panel-heading">
<h5>
BESTSELLERS
</h5>
</div>
</div>
<ul class="list-group">
<li class="list-group-item list">
<a href="#"> Item 1
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 2
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 3
</a>
</li>
<li class="list-group-item list">
<a href="#">
38

Item 4
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 5
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 6
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 7
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 8
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 9
</a>
</li>
<li class="list-group-item list">
<a href="#">
Item 10
</a>
</li>
</ul>
</div>
<div class="col-md-9 ">
<div class="row">
<ol class="breadcrumb path">
<li><a href="index.php"> Home</a></li>
<li><a href="online_stores.php"> Online Store</a></li>
<li><a href="phones.php"> Phones</a></li>
<li class="active">NOKIA E7</li>
</ol>
</div>
<div class="row">
<div class="col-md-4 ">
<div class="row">
<div class="col-md-12 thumbnail">
<a href="#" data-toggle="modal" data-target="#Prod-img">
<img src="images/nokia_e7_1.png" alt="NOKIA E7" title="NOKIA E7"
class="img-responsive" id="largeImg">
</a>
<!-- Modal -->
<div class="modal fade" id="Prod-img" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel"
39

aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span>
</button>
<h4 class="modal-title" id="myModalLabel">NOKIA E7</h4>
</div>
<div class="modal-body ">
<div id="carousel-example-generic" class="carousel slide" data-
ride="carousel">
<!-- Indicators -->
<ol class="list-inline">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active">
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">

</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/nokia_e7_1.png" alt="NOKIA E7">
<div class="carousel-caption">
</div>
</div>
<div class="item ">
<img src="images/nokia_e7_2.png" alt="NOKIA E7">
<div class="carousel-caption">
</div>
</div>
<div class="item ">
<img src="images/nokia_e7_3.png" alt="NOKIA E7">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
40

</div>
</div>
</div>
<div class="row">
<div class="col-md-4 thumbnail prod-smol-img thumbs">
<a href="images/nokia_e7_2.png">
<img src="images/nokia_e7_2.png" alt="NOKIA E7" title="NOKIA E7"
class="img-responsive">
</a>
</div>
<div class="col-md-4 thumbnail prod-smol-img thumbs">
<a href="images/nokia_e7_3.png">
<img src="images/nokia_e7_3.png" alt="NOKIA E7" title="NOKIA E7"
class="img-responsive">
</a>
</div>
<div class="col-md-4 thumbnail prod-smol-img thumbs">
<a href="images/nokia_e7_1.png">
<img src="images/nokia_e7_1.png" alt="NOKIA E7" title="NOKIA E7"
class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-md-8" style="padding-right: 0">
<h2 class="white">NOKIA E7</h2>
<hr>
<p style="color: #999">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque fugiat
fugit
harum, magnam molestias
numquam quisquam rerum sed soluta voluptatum. Asperiores eligendi illo ipsum laboriosam
nostrum
officia sunt veniam voluptatibus?</p>
<hr>
<div class="panel" style="padding: 10px">
<div class="rating pull-left">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
</div>
<p style="padding: 3px 0 0 135px;"> Rating: Not Rated Yet</p>
<div>
<h5 style="float: left;color: #333">Sales price:</h5>
<h2 class="big-price">$121.00</h2>
</div>
<div>Sales price without tax: <span class="smoll-price">$100.00</span></div>
<div>Tax amount: <span class="smoll-price">$21.00</span></div>
<div class="row" style="padding: 10px 0;">
<!-- count -->
<form name="quantity" class="col-md-2">
<input id="count" class="form-control text-right" type="text" name="count" size="10"
value="1">
</form>
41

<button class="btn btn-default col-md-1" value="+" id="plus" onclick="doPlus();"><span
class="glyphicon glyphicon-plus"></span></button>
<button class="btn btn-default col-md-1" value="-" id="minus"
onclick="doMinus();"><span
class="glyphicon glyphicon-minus"></span></button>
<div class="col-md-9"></div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-danger" data-toggle="modal" data-target="#CrtModal">ADD TO
CART</button>
<div class="modal fade" id="CrtModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-
remove-circle"></span>
</button>
<div class="row">
<div class="col-md-5"><a href="#"><h4 class="close">Continue
Shopping</h4></a></div>
<div class="col-md-6 text-right"><a href="#"><h4>Show
Cart</h4></a></div>
</div>
</div>
<div class="modal-body">
<div class="row">
<img src="images/nokia_e7_1.png" class="img-responsive col-md-
4">
<div class="col-md-8">
<h3>NOKIA E7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Architecto
corporis, cum cumque debitis eum excepturi hic
incidunt inventore ipsam
maxime nobis nulla numquam qui, repellat reprehenderit
sint temporibus
veritatis vitae.
</p>
</div>
</div>
</div>
<div class="modal-footer">
<h4 class="text-left">1 x Lorem ipsum dolor sit amet conse ctetur
adipisicing was
added to
your cart.</h4>
</div>
</div>
</div>
</div>
</div>
42


<div class="col-md-6">
<a href="#" class="question" data-toggle="modal" data-target="#QuestionModal">Ask
a question
about this product</a>
<div class="modal fade bs-example-modal-lg" id="QuestionModal" tabindex="-1"
role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-
remove-circle"></span>
</button>
<h2 class="modal-title" id="myModalLabel">ASK A QUESTION</h2>
</div>
<div class="modal-body">
<div class="row">
<h3 class="col-md-12">IPSUM DOLOR SIT AMET CONSE CTETUR</h3>
<p class="col-md-12">
Sed sapien sapien, vulputate ac varius vitae, rutrum
ultrices odio.
Morbi vel tortor enim. Praesent lobortis gravida pretium.
Vestibulum
faucibus pellentesque metus, nec convallis mauris congue
sed.
</p>
</div>
<div class="row">
<div class="col-md-6">
<form role="form" class="contact-form">
<div class="form-group">
<label>Name<sup><span
class="glyphicon glyphicon-asterisk
lable-red"></span></sup></label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Email<sup><span
class="glyphicon glyphicon-asterisk
lable-red"></span></sup></label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label>Message<sup><span
class="glyphicon glyphicon-asterisk
lable-red"></span></sup></label>
<textarea class="form-control"
rows="10"></textarea>
</div>
</form>
</div>
<div class="col-md-6">
<img src="images/nokia_e7_1.png" class="img-responsive">
43

</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-warning">Send your
question</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Description</a></li>
<li><a href="#profile" data-toggle="tab">Reviews</a></li>
<li><a href="#messages" data-toggle="tab">Custom</a></li>
<li><a href="#settings" data-toggle="tab">Video</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active " id="home">
<p class="prod-menu-text text-left">
Sed sapien sapien, vulputate ac varius vitae, rutrum
ultrices odio. Morbi vel tortor enim. Praesent lobortis gravida pretium.
Vestibulum faucibus
pellentesque metus, nec convallis mauris congue sed. Fusce id neque eu tellus
luctus adipiscing.
Integer rhoncus ante non dui blandit dapibus. Proin lobortis eleifend elit, at
lacinia libero
suscipit sed.
Aliquam fringilla euismod risus ac bibendum. Sed sit amet sem varius ante feugiat
lacinia. Nunc
ipsum nulla, vulputate ut venenatis vitae, malesuada ut mi. Quisque iaculis, dui
congue placerat
pretium, augue erat accumsan lacus, eget euismod mi purus et magna. Integer
molestie velit quis
justo sodales pharetra.
- See more at:
http://livedemo00.template-help.com/virtuemart_47517/index.php/online-
store/summer_tyres/product-1-detail#sthash.CEn2cYde.dpuf
</p>
</div>
<div class="tab-pane " id="profile">
<p class="prod-menu-text text-left">
There are yet no reviews for this product.
</p>
</div>
<div class="tab-pane " id="messages">
<div class="col-md-12">
<div class="row">
44

<div class="col-md-4"><img src="images/nokia_e7_1.png" class="img-responsive"
alt="NOKIA E7"
title="NOKIA E7"></div>
<div class="col-md-4"><img src="images/nokia_e7_2.png" class="img-responsive"
alt="NOKIA E7"
title="NOKIA E7"></div>
<div class="col-md-4"><img src="images/nokia_e7_3.png" class="img-responsive"
alt="NOKIA E7"
title="NOKIA E7"></div>
</div>
</div>
<p class="prod-menu-text text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque lacinia
nisi, ac
gravida mi suscipit vitae. Class aptent taciti sociosqu ad litora torquent per
conubia nostra,
per inceptos himenaeos. Proin tortor justo, sagittis ac ultricies sed, tincidunt
eu magna. Sed
laoreet vehicula lectus non sollicitudin. Donec dictum interdum mauris, at rhoncus
lorem blandit
a. Phasellus convallis justo a orci congue sollicitudin. Mauris lacus turpis,
porttitor at
placerat blandit, feugiat et augue. Nullam eu urna nunc, vel posuere magna.
Vivamus varius lorem
id elit convallis id ultricies neque tempus.
Morbi eros dolor, dignissim quis tristique ut, aliquet at urna. Phasellus eu nibh
erat, et
ultricies augue. Donec vitae orci blandit enim viverra condimentum. Donec luctus
nisi eget orci
gravida auctor. Vivamus vestibulum rhoncus libero, id venenatis tortor lacinia
vel. Pellentesque
felis dolor, imperdiet vel pharetra vel, rhoncus ac purus. Nunc euismod lacus vel
augue congue
vel iaculis sapien tristique. Maecenas in nisl est, sit amet pretium quam. Nullam
elit mauris,
suscipit ac vehicula ac, sodales sit amet augue. Morbi tellus dui, imperdiet eu
sagittis sed,
mollis non magna.
- See more at:
http://livedemo00.template-help.com/virtuemart_47517/index.php/online-
store/summer_tyres/product-1-detail#sthash.CEn2cYde.dpuf
</p>
</div>
<div class="tab-pane text-center" id="settings">
<iframe width="560" height="315" src="//www.youtube.com/embed/JByRRlBSjLc"
frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row"><!-- prev next -->
<ul class="pager">
<li class="previous"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span>
Prev product</a>
</li>
45

<li class="next"><a href="#">Next product <span class="glyphicon glyphicon-chevron-right"
</a></li>
</ul>
</div>
<div class="row ">
<div class="prod prod-thub-lef">
<div class="image">
<a href="product.php" class="thumbnail">
<img src="images/samsung.png" alt="Samsung i9100 Galaxy S II" title="Samsung i9100
Galaxy S II"
class="img-responsive">
</a>
</div>
<div class="info text-center">
<a href="#">Samsung i9100 Galaxy S II</a><br>
</div>
</div>
<div class="prod ">
<div class="image">
<a href="product.php" class="thumbnail">
<img src="images/hts.png" alt="HTC Desire" title="HTC Desire" class="img-
responsive">
</a>
</div>
<div class="info text-center">
<a href="#">HTC Desire</a><br>
</div>
</div>
<div class="prod ">
<div class="image">
<a href="product.php" class="thumbnail">
<img src="images/motorola.png" alt="Motorola Droid X" title="Motorola Droid X"
class="img-responsive">
</a>
</div>
<div class="info text-center">
<a href="#">Motorola Droid X</a><br>
</div>
</div>
</div>
<div class="row">
<hr>
<a href="phones.php">
<button class="btn btn-warning">Back to: Summer tyres</button>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 footer">
Copyright 2014 Wheels & Tyres. All Rights Reserved. Joomla! is Free Software released under
the GNU. | <a
href="http://deli.md/web/" target="_blank">Starsoft-Academy</a>
</div>
</div>
</div>
46

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function () {
$('#bgrid').addClass('active');
$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').addClass('col-md-12');
$('.info').addClass('col-md-12');
$('.price').addClass('col-md-12');
$('#bgrid').click(function () {
$(this).addClass('active');
$('#blist').removeClass('active');
$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').removeClass('col-md-2');
$('.info').removeClass('col-md-7');
$('.price').removeClass('col-md-3');
});
$('#blist').click(function () {
$(this).addClass('active');
$('#bgrid').removeClass('active');
$('.prod').addClass('col-md-12');
$('.prod').removeClass('col-md-4');
$('.image').addClass('col-md-2');
$('.info').addClass('col-md-7');
$('.price').addClass('col-md-3');
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
//galery
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html("(" + largeAlt + ")");
return false;
});
47

});
</script>
<script>
function doMinus(){
if( document.getElementById("count").value > 1){ document.getElementById("count").value = --
document.getElementById("count").value;}
else {document.getElementById("count").value = 1;}
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
</script>
<script>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body>
</html>


contact.html


48


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="icon" type="image/png" href="images/favicon.ico">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body class="bg-default">
<div class="container">
<div class="row">
<nav class="navbar navbar-inverse">
<p class="navbar-text">
<a href="register.php" class="navbar-link">CREATE AN ACCOUNT</a> OR <a href="#"
class="navbar-link" data-toggle="modal" data-target="#LogIn">LOG IN</a>
<div class="modal fade bs-example-modal-sm" id="LogIn" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content ">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">Log In</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form role="form" class="contact-form">
<div class="form-group">
<label>Username<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label >Password<sup><span class="glyphicon glyphicon-
asterisk lable-red"></span></sup></label>
<input type="password" class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-warning" data-
dismiss="modal">Log In</button>
49

</form>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-12">
<a href="#">Forgot Your Password?</a><br>
<a href="#">Forgot Your Username?</a>
</div>
</div>
</div>
</div>
</div>
</div>
</p>
<ul class="nav navbar-nav navbar-right ">
<li class="dropdown">
<a href="online_stores.php" class="dropdown-toggle" data-toggle="dropdown">ONLINE
STORE
<span class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Manufacturer Default Layout</a></li>
<li class="divider"></li>
<li><a href="#">Display Vendor Contact</a></li>
<li class="divider"></li>
<li><a href="#">List Orders</a></li>
<li class="divider"></li>
<li><a href="#">User Edit Address</a></li>
<li class="divider"></li>
<li><a href="#">Category Layout</a></li>
</ul>
</li>
<li><a href="about.php">ABOUT US</a></li>
<li><a href="delivery.php">DELIVERY</a></li>
<li><a href="faqs.php">FAQS</a></li>
<li><a href="contact.php">CONTACTS</a></li>
</ul>
</nav>
</div>
<div class="row">
<nav class="navbar navbar-inverse logo">
<a href="index.php" class="navbar-brand"><img src="images/logo.png" alt="Cell phones"
title="Cell phones"
class="img-responsive"></a>
<div class="navbar-text pull-right dropdown">
<span class="glyphicon glyphicon-shopping-cart"></span> NOW IN YOUR CART
<a href="#" class="navbar-link dropdown-toggle" data-toggle="dropdown">0 ITEMS
<span class="glyphicon glyphicon-ok-sign"></span>
<ul class="dropdown-menu">
<li><a href="#">YOUR SHOPPING CART IS EMPTY!</a></li>
</ul>
</a>
</div>
</nav>
50

</div>
<div class="row">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="phones.php">PHONES</a></li>
<li><a href="#">ACCESSORIES</a></li>
<li><a href="#">CAMERAPHONES</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SMARTPHONES <span
class="glyphicon glyphicon-ok-sign"></span></a>
<ul class="dropdown-menu">
<li><a href="#">NOKIA</a></li>
<li><a href="#">HTC</a></li>
<li><a href="#">SAMSUNG</a></li>
<li><a href="#">LG</a></li>
<li><a href="#">MOTOROLA</a></li>
</ul>
</li>
<li><a href="#">SPECIAL OFFERS</a></li>
<li><a href="#" data-toggle="modal" data-target="#add_prod">Add new phone</a></li>
<div class="modal fade" id="add_prod" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"><span class="glyphicon glyphicon-remove-
circle"></span></button>
<h4 class="modal-title" id="myModalLabel">
Add new product
</h4>
</div>
<div class="modal-body">
<!-- -->
<form role="form" action="add_prod.php" method="post"
enctype="multipart/form-data">
<!-- -->
<div class="form-group">
<label for="phone_mode;">Phone model</label>
<input name="model" type="text" class="form-control"
placeholder="Phone model">
</div>
<!-- -->
<div class="form-group">
<label for="phone_info">Description</label>
<input name="info" type="text" class="form-control"
placeholder="Description">
</div>
<!-- -->
<div class="form-group">
<label for="phone_price">Price</label>
<input name="price" type="text" class="form-control"
placeholder="$">
</div>
<!-- -->
51

<div class="form-group">
<label for="phone-img">Phone Images</label>
<input type="file" name="cell_img" placeholder="File">
<!-- -->
</div>
</div>
<div class="modal-footer">
<input type="submit" value="Add" name="button" class="btn btn-danger
pull-right">
</form>
</div>
</div>
</div>
</div>
</ul>
<form class="navbar-form navbar-right serch-form" role="search">
<div class="form-group">
<input type="search" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</nav>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel ">
<div class="panel-heading">
<h5>
CELL PHONES
</h5>
</div>
</div>
<address>
8901 Marmora Road,<br>
Glasgow, D04 89GR.<br>
Freephone:+1 800 559 6580<br>
Telephone:+1 959 603 6035<br>
FAX:+1 504 889 9898<br>
E-mail:<a href="mailto:#">mail@demolink.org</a>
</address>
<address>
8901 Marmora Road,<br>
Glasgow, D04 89GR.<br>
Freephone:+1 800 559 6580<br>
Telephone:+1 959 603 6035<br>
FAX:+1 504 889 9898<br>
E-mail:<a href="mailto:#">mail@demolink.org</a>
</address>
</div>
<div class="col-md-6">
<div class="row">
<h3 class="white">CONTACT</h3>
</div>
52

<div class="row">
<form role="form" class="contact-form">
<div class="form-group">
<label class="white">Name<sup><span class="glyphicon glyphicon-asterisk lable-
red"></span></sup></label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label class="white">Email<sup><span class="glyphicon glyphicon-asterisk
lable-red"></span></sup></label>
<input type="email" class="form-control">
</div>
<div class="form-group">
<label class="white">Subject<sup><span class="glyphicon glyphicon-asterisk
lable-red"></span></sup></label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label class="white">Message<sup><span class="glyphicon glyphicon-asterisk
lable-red"></span></sup></label> <textarea class="form-control" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-warning">SEND EMAIL</button>
</form>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12 goog-panel">
<div class="panel">
<div class="panel-heading">
<h5>
GOOGLE MAP
</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="map_canvas"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 footer">
Copyright 2014 Wheels & Tyres. All Rights Reserved. Joomla! is Free Software released under
the GNU. | <a href="http://deli.md/web/" target="_blank">Starsoft-Academy</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
53

<script>
jQuery(document).ready(function () {
$('#bgrid').addClass('active');
$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').addClass('col-md-12');
$('.info').addClass('col-md-12');
$('.price').addClass('col-md-12');
$('#bgrid').click(function () {
$(this).addClass('active');
$('#blist').removeClass('active');
$('.prod').addClass('col-md-4');
$('.prod').removeClass('col-md-12');
$('.image').removeClass('col-md-2');
$('.info').removeClass('col-md-7');
$('.price').removeClass('col-md-3');
});
$('#blist').click(function () {
$(this).addClass('active');
$('#bgrid').removeClass('active');
$('.prod').addClass('col-md-12');
$('.prod').removeClass('col-md-4');
$('.image').addClass('col-md-2');
$('.info').addClass('col-md-7');
$('.price').addClass('col-md-3');
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").html("(" + largeAlt + ")");
return false;
}); });
</script>
<script>
function doMinus(){
if( document.getElementById("count").value > 1){ document.getElementById("count").value = --
document.getElementById("count").value;}
54

else {document.getElementById("count").value = 1;}
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
</script>
<script>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>

</body>
</html>


55


3. CONCLUZIE

Efectuind acesta practica pot sa deduc foarte multe lucruri si concluzii,dar cel mai important
consider ca dupa finisarea ei apar deja unele deprinderi din domeniul, si aceasta mi-a dat
posibilitatea de a intelege cu adevarat importanta functiei alese. Realizarea practicii de
produie a servit ca un factor semnificativ n aprofundarea cunotinelor n domeniul
Webdesignului i anume punnd accentua pe activiti aplicative dezvoltnd n sine conceptul
specialitii date i dezvluind cunotine noi de ordin intern ce st la baza funcionalitii
aplicaiilor ce le conine.Ca i orice alt lucru nou ntlnit, practica de producie a reflectat
pentru mine un interes deosebit fa de ntregul perimetru de activiti incluse n cadrul
companiei Starsoft East ce au servit ca un stimul esenial n conturarea specialitii
mbriate precum i o mic generalizare a importanei i scopului pe care-l
ndeplinete.Practica, sub aspect al importanei pentru fiecare student, deci reflect perfect
aceast condiie,servind pentru fiecare posibilitatea de a pune n aplicaie cunotinele
colectate pe parcursul a toi aceti ani i dobndirea acestor abiliti practice pentru viitorul
profesional. Se poate de considerat sau de conceput altfel ca un prim pas ndreptat spre o
carier profesional reuit.Practica de producie a servit n acest context ca un prim
experiment de a ne gasi fa n fa cu responsabilitatea i condiiile de activitate n calitate
de mici nceptori.