Sunteți pe pagina 1din 56

Facultatea Tehnologii Informaționale și Statistică Economică

Proiect de an.
Tema: Proectarea si elaborarea aplicatiei WEB "HI TECH". Administrarea
aplicatiei WEB.

Autor:
Student anul III
grupa CIB-201 FR
Burcovschi Dorin

Verificat de:
Lector universitar
Prisacaru Anatolie

Chisinau 2023
Cuprins.

Introducere
Capitolul 1 (partea teoretica)
Capitolul 2 (partea aplicativa)
Concluzii
Referinte Bibliografice
Anexe
Introducere.
Într-o lume tot mai digitalizată, companiile de programare joacă un rol esențial în
dezvoltarea soluțiilor tehnologice pentru a satisface nevoile clienților lor. În acest
context, un site web bine conceput poate fi o componentă vitală a strategiei de
marketing a unei companii de programare, oferind o prezentare detaliată a serviciilor
oferite și a portofoliului de proiecte finalizate cu succes. În acest proiect, vom explora
elementele esențiale ale unui site web de succes și vom elabora un site web atractiv
și funcțional pentru o companie de programare. Vom lua în considerare aspecte
precum design-ul, navigarea, conținutul și funcționalitatea site-ului pentru a crea o
experiență pozitivă pentru utilizatorii săi și pentru a promova afacerea companiei.
Tema elaborării unui site web pentru o companie de programare este foarte actuală
și importantă în ziua de azi, dat fiind faptul că tehnologia informației și comunicațiilor
joacă un rol tot mai important în afaceri și în viața cotidiană.
În ultimii ani, pandemia de COVID-19 a accelerat procesul de digitalizare, iar afacerile
au fost nevoite să își adapteze strategiile și să își dezvolte prezența online. Acest
lucru a dus la o cerere crescândă pentru servicii IT și de programare, iar companiile
din această industrie au devenit tot mai importante și mai solicitate.
De asemenea, o prezență online bine dezvoltată este esențială pentru succesul unei
companii de programare. Un site web atrăgător și funcțional poate fi un instrument
valoros de marketing, putând ajuta compania să atragă noi clienți și să își consolideze
relația cu clienții existenți. În plus, un site web bine dezvoltat poate îmbunătăți
eficiența și productivitatea companiei, permițându-i să comunice mai eficient cu
clienții săi și să își gestioneze mai bine operațiunile.
Există mai multe motive pentru care am ales tema elaborării unui site web pentru o
companie de programare ca subiect pentru proiectul meu de an.
În primul rând, industria IT și de programare este în plină dezvoltare, iar cererea
pentru astfel de servicii este în continuă creștere. Această temă poate oferi ocazia de
a învăța abilități practice în dezvoltarea site-urilor web și în utilizarea instrumentelor
și tehnologiilor necesare pentru aceasta. Aceste abilități sunt esențiale în domeniul
tehnologiei informației și pot fi utile pentru cariera mea viitoare.
În al doilea rând, elaborarea unui site web pentru o companie de programare poate
ajuta să înțeleag mai bine cum funcționează o companie de programare și cum poate
fi promovată aceasta în mediul online. Astfel, pot dobândi o înțelegere mai profundă
a industriei IT și a tehnologiilor care o susțin.
În plus, acest proiect poate fi util și pentru compania de programare pentru care se
dezvoltă site-ul web. Eu pot să ofer o perspectivă nouă și creativă asupra designului și
funcționalității site-ului web, ajutând astfel compania să se diferențieze de
concurență și să atragă noi clienți.
În concluzie, elaborarea unui site web pentru o companie de programare poate fi o
alegere motivantă și benefică, deoarece poate oferi abilități practice în domeniul IT și
de programare, poate ajuta să înțeleg mai bine industria și poate oferi oportunitatea
de a oferi o contribuție valoroasă unei companii reale.

În concluzie, elaborarea unui site web pentru o companie de programare este o temă
foarte actuală și importantă în ziua de azi, având în vedere rolul tot mai important pe
care tehnologia îl joacă în afaceri și în viața de zi cu zi. Un site web bine dezvoltat
poate fi un instrument valoros de marketing și poate ajuta compania să își
îmbunătățească performanța financiară și operațională.
Capitoliul 1: Partea teoretica
Analiza profunda a temei proiectului
Tema proiectului de a elabora un site web pentru o companie de programare este una importantă în
contextul actual, dat fiind faptul că site-urile web sunt o parte esențială a identității și prezenței
online a companiilor din toate domeniile, inclusiv al programării.

O analiză profundă a acestei teme implică examinarea a numeroase aspecte, inclusiv:

• Obiectivele companiei de programare - Companiile de programare pot avea obiective


diferite, cum ar fi să își prezinte serviciile și produsele, să își mărească vizibilitatea online, să
își crească vânzările sau să își construiască o comunitate de utilizatori. Un site web ar trebui
să reflecte aceste obiective și să ofere o experiență bună pentru utilizatorii săi.
• Publicul țintă - Companiile de programare pot avea diferite audiențe țintă, cum ar fi
dezvoltatori, oameni de afaceri sau utilizatori finali. Un site web ar trebui să fie proiectat în
funcție de aceste audiențe și să ofere conținut și funcționalități relevante pentru acestea.
• Platforma tehnologică - Există o mulțime de tehnologii disponibile pentru crearea de site-uri
web, inclusiv HTML, CSS, JavaScript, PHP, Python și multe altele. Este important să se aleagă
o platformă tehnologică care să se potrivească nevoilor și obiectivelor companiei de
programare, dar și cunoștințelor și abilităților echipei care va dezvolta site-ul.
• Design și UX - Designul și experiența utilizatorului sunt aspecte esențiale ale oricărui site
web. Site-ul ar trebui să fie proiectat astfel încât să fie ușor de navigat, ușor de utilizat și
atractiv din punct de vedere vizual. Este important să se ia în considerare principiile de
design UX pentru a asigura o experiență bună pentru utilizatori.
• SEO și marketing online - Odată ce site-ul web este dezvoltat, este important să se
optimizeze pentru motoarele de căutare și să se promoveze online pentru a atrage trafic
relevant și pentru a-și îndeplini obiectivele.

În concluzie, elaborarea unui site web pentru o companie de programare este un proiect important
și complex care implică o mulțime de aspecte tehnice și de design. Este important să se ia în
considerare obiectivele și audiența companiei de programare, să se aleagă platforma tehnologică
potrivită și să se ia în considerare designul și experiența utilizatorului pentru a crea un site web
eficient și atractiv. De asemenea, optimizarea pentru motoarele de căutare și promovarea online
sunt esențiale pentru a asigura o prezență online eficientă a companiei.

Analiza comparativa a situatiei existente in domeniul dat


Pentru a realiza o analiză comparativă a situației existente în domeniul elaborării de site-uri web
pentru companii de programare, este important să se ia în considerare câteva aspecte importante.

În primul rând, se poate examina concurența existentă în domeniu, pentru a înțelege cum și-au
dezvoltat companiile de programare prezența online. Se poate verifica site-ul web al concurenților și
se pot analiza caracteristicile acestuia, inclusiv designul, structura informațională, funcționalitățile și
experiența utilizatorului. De asemenea, se poate analiza și strategia de marketing online a acestora,
pentru a înțelege cum își promovează serviciile și produsele.

În al doilea rând, se poate examina tendințele actuale din domeniul elaborării de site-uri web pentru
companii de programare. Se pot examina noile tehnologii, limbaje de programare și framework-uri
care sunt utilizate în prezent și care sunt considerate cele mai eficiente pentru crearea de site-uri
web. De asemenea, se pot analiza tendințele de design și de experiență utilizatorului, pentru a vedea
cum evoluează acestea și pentru a putea oferi o experiență mai bună utilizatorilor.
În al treilea rând, se poate examina nevoia și cererea pentru servicii de elaborare de site-uri web
pentru companii de programare. Se poate analiza cererea pentru astfel de servicii, precum și nevoile
companiilor de programare în ceea ce privește prezența lor online. Aceste informații pot ajuta la
identificarea oportunităților și a nevoilor de piață care ar putea fi satisfăcute prin dezvoltarea unui
site web pentru o companie de programare.

În final, o analiză comparativă a situației existente în domeniul elaborării de site-uri web pentru
companii de programare poate oferi informații valoroase despre ce funcționează și ce nu
funcționează în prezent în acest domeniu. Aceste informații pot ajuta la dezvoltarea unei strategii
eficiente pentru dezvoltarea și promovarea unui site web pentru o companie de programare, pentru
a asigura o prezență online eficientă și o experiență bună pentru utilizatori.

Scopul si obiectivele proiectului


Scopul proiectului de elaborare a unui site web predestinat unei companii de programare este de a
crea o prezență online eficientă pentru compania de programare, care să ofere informații relevante
despre produsele și serviciile oferite și să ofere o experiență plăcută și intuitivă utilizatorilor care
vizitează site-ul web.

Obiectivele specifice ale proiectului pot include următoarele:

• Dezvoltarea unui design atractiv și profesionist pentru site-ul web, care să ofere o primă
impresie pozitivă utilizatorilor și să reflecte valoarea și experiența companiei de programare.
• Crearea unei structuri informaționale clare și ușor de navigat pe site-ul web, care să ofere
informații relevante și să ajute utilizatorii să găsească rapid ce caută.
• Integrarea de funcționalități avansate pe site-ul web, cum ar fi un sistem de căutare eficient,
o formă de contact sau un sistem de programare online, care să faciliteze interacțiunea
utilizatorilor cu compania de programare.
• Asigurarea compatibilității site-ului web cu diferite dispozitive și platforme, pentru a oferi o
experiență uniformă utilizatorilor, indiferent de dispozitivul sau platforma folosită.
• Crearea unui conținut relevant și de calitate pe site-ul web, care să ofere informații utile și să
susțină poziționarea companiei de programare ca o autoritate în domeniul său.
• Asigurarea optimizării site-ului web pentru motoarele de căutare, pentru a crește
vizibilitatea companiei de programare și a atrage trafic organic către site-ul web.
• Integrarea unui sistem de analiză a traficului și comportamentului utilizatorilor pe site-ul
web, pentru a evalua eficacitatea site-ului web și a identifica oportunități de îmbunătățire.

Prin atingerea acestor obiective, proiectul de elaborare a unui site web predestinat unei companii de
programare poate contribui la creșterea prezenței online a companiei și la atragerea de noi clienți și
oportunități de afaceri.
Selectia si analiza surselor teoretice pentru proiect
Selecția și analiza surselor teoretice este o etapă importantă în elaborarea oricărui proiect de an,
deoarece asigură o bază solidă și actuală pentru cercetarea și dezvoltarea proiectului. În cazul
proiectului de elaborare a unui site web pentru o companie de programare, sursele teoretice pot
include:

• Cărți și manuale de programare web: Aceste surse pot oferi informații relevante despre
tehnicile și metodele de programare web, cum ar fi HTML, CSS, JavaScript și PHP, și pot oferi
o perspectivă generală asupra dezvoltării unui site web.
• Studii de caz și exemple de site-uri web pentru companii de programare: Aceste surse pot
oferi exemple concrete și inspirație pentru design-ul și structura site-ului web, și pot oferi o
perspectivă asupra strategiilor de marketing online utilizate de companii de programare.
• Ghiduri și tutoriale pentru optimizarea site-ului web pentru motoarele de căutare: Aceste
surse pot oferi informații relevante despre optimizarea site-ului web pentru motoarele de
căutare, cum ar fi utilizarea cuvintelor cheie, meta-descrierilor și a altor elemente de
optimizare.
• Studii de piață și cercetări de marketing în domeniul companiilor de programare: Aceste
surse pot oferi o perspectivă asupra pieței de software și servicii IT și pot oferi informații
relevante despre tendințele și nevoile actuale ale consumatorilor.
• Articole de specialitate și bloguri de autoritate în domeniul programării web și marketingului
online: Aceste surse pot oferi informații actualizate și relevante despre noile tendințe și
tehnologii din domeniul programării web și marketingului online.

Analiza surselor teoretice poate include:

• Evaluarea relevanței și actualității informațiilor oferite de sursele selectate.


• Evaluarea calității și credibilității surselor selectate, pentru a asigura o bază solidă și fiabilă
pentru cercetarea și dezvoltarea proiectului.
• Compararea și sintetizarea informațiilor oferite de sursele selectate, pentru a obține o
perspectivă amplă și echilibrată asupra subiectului.
• Identificarea tendințelor și oportunităților relevante pentru proiectul în cauză, prin
intermediul analizei informațiilor obținute din sursele teoretice.
• Adaptarea și integrarea informațiilor obținute din sursele teoretice în proiect, pentru a
asigura o abordare relevantă și actuală a subiectului.

Integrarea diverselor contributii teoretice si unitati tematice cu privire la


subiectul studiat si raportarea critica si independenta a acesteia.
Integrarea diverselor contribuții teoretice în unități tematice reprezintă o etapă importantă în
procesul de analiză a temei proiectului. Această integrare trebuie să se realizeze într-un mod coerent
și structurat, astfel încât să poată fi identificate și analizate principalele aspecte ale subiectului
studiat.

Pentru a realiza integrarea acestor contribuții teoretice, trebuie să se organizeze unitățile tematice în
funcție de subiecte și să se identifice principalele puncte de vedere, argumente și teorii relevante
pentru fiecare subiect. De asemenea, este important să se raporteze critic și independent la aceste
contribuții teoretice, pentru a putea oferi o perspectivă personală și argumentată asupra subiectului.
În ceea ce privește subiectul proiectului de elaborare a unui site web pentru o companie de
programare, unitățile tematice ar putea include:
• Tehnici și metode de programare web: În această unitate tematică ar putea fi incluse
contribuțiile teoretice referitoare la limbajele de programare web, cum ar fi HTML, CSS,
JavaScript și PHP, și tehnici și metodologii de dezvoltare a site-urilor web.
• Design-ul și structura site-ului web: Această unitate tematică ar putea cuprinde contribuțiile
teoretice referitoare la design-ul și structura site-ului web, cum ar fi elementele de design,
utilizarea culorilor, tipografiilor și a layout-ului, precum și structurarea conținutului pe site.
• Marketing online și optimizarea site-ului web pentru motoarele de căutare: În această
unitate tematică ar putea fi incluse contribuțiile teoretice referitoare la strategiile de
marketing online utilizate de companii de programare și tehnici de optimizare a site-ului web
pentru motoarele de căutare, cum ar fi utilizarea cuvintelor cheie, meta-descrierilor și a altor
elemente de optimizare.
• Tendințe și oportunități în domeniul companiilor de programare: Această unitate tematică ar
putea cuprinde contribuțiile teoretice referitoare la tendințele actuale și oportunitățile din
domeniul companiilor de programare, precum și cercetări de piață și analize de tendințe în
domeniu.
• Cercetări și studii de caz în domeniul programării web și marketingului online: În această
unitate tematică ar putea fi incluse contribuțiile teoretice referitoare la cercetările și studiile
de caz relevante pentru subiectul proiectului, precum și analize ale acestora și a criticilor
acestora.

Pentru a se raporta critic și independent la aceste contribuții teoretice, este important să se evalueze
argumentele și teoriile prezentate și să se identifice punctele forte și punctele slabe ale acestora. De
asemenea, este important să se identifice posibilele limite ale acestor contribuții teoretice și să se
exploreze alternative sau abordări noi. Această abordare critică și independentă este esențială
pentru a obține o perspectivă mai amplă și echilibrată asupra subiectului studiat și pentru a putea
oferi soluții și recomandări adecvate în cadrul proiectului.

În plus, integrarea acestor contribuții teoretice ar trebui să se facă cu grijă, astfel încât să se evite
plagiatul și să se respecte drepturile de autor. Este important să se utilizeze surse credibile și să se
citeze corect și complet toate sursele folosite în proiect.

Analiza profunda a literaturii de specialitate la tema proiectului

Tema elaborării unui site web pentru o companie de programare se încadrează în domeniul
tehnologiei informației și al dezvoltării web. Există o mulțime de literatură de specialitate disponibilă
pe aceste subiecte, iar în continuare vom realiza o analiză profundă a câtorva dintre cele mai
relevante surse pentru acest proiect.

• "Web Development with Node and Express" de Ethan Brown - Această carte este o sursă
excelentă pentru elevii care doresc să își îmbunătățească cunoștințele în programarea web.
Cartea se concentrează pe utilizarea Node.js și Express pentru crearea de site-uri web și
oferă o perspectivă cuprinzătoare asupra procesului de dezvoltare a site-urilor web. Aceasta
include subiecte precum gestionarea cererilor și răspunsurilor HTTP, gestionarea bazelor de
date, utilizarea șabloanelor și multe altele.
• "Learning Web Design" de Jennifer Niederst Robbins - Această carte este o resursă utilă
pentru elevii care doresc să învețe cum să creeze site-uri web. Cartea acoperă subiecte
precum structura HTML, stilizarea cu CSS și utilizarea JavaScript pentru interacțiunea cu
utilizatorii. Aceasta oferă o perspectivă comprehensivă asupra dezvoltării web și poate fi
utilă pentru începători în domeniul programării web.
• "The Principles of Beautiful Web Design" de Jason Beaird și James George - Această carte se
concentrează pe designul site-urilor web și oferă o perspectivă asupra esteticii și designului
vizual. Cartea acoperă subiecte precum tipografia, culoarea, compoziția și utilizarea spațiului.
Aceasta poate fi utilă pentru elevii care doresc să înțeleagă mai bine cum să creeze site-uri
web atractive și funcționale.
• "Don't Make Me Think" de Steve Krug - Această carte este o sursă excelentă pentru elevii
care doresc să înțeleagă cum să creeze site-uri web ușor de utilizat și ușor de navigat. Cartea
se concentrează pe utilizarea principiilor de design UX și pe asigurarea unei experiențe bune
pentru utilizatorii site-ului web. Aceasta poate fi utilă pentru elevii care doresc să își
îmbunătățească abilitățile în designul experienței utilizatorului.

În concluzie, există o mulțime de surse de literatură de specialitate disponibile pentru tema


elaborării unui site web pentru o companie de programare. Aceste surse acoperă subiecte precum
programarea web, designul web, experiența utilizatorului și multe altele. Elevii ar trebui să utilizeze
aceste surse pentru a-și îmbunătăți abilitățile în dezvoltarea web și pentru a crea site-uri web
eficiente și atractive pentru companii de programare.
<!DOCTYPE html>

<html lang="en">

<head>

<!-- basic -->

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- mobile metas -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

<!-- site metas -->

<title>HiTech</title>

<meta name="keywords" content="">

<meta name="description" content="">

<meta name="author" content="">

<!-- bootstrap css -->

<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- style css -->

<link rel="stylesheet" href="css/style.css">

<!-- Responsive-->

<link rel="stylesheet" href="css/responsive.css">

<!-- fevicon -->

<link rel="icon" href="images/fevicon.png" type="image/gif" />

<!-- Scrollbar Custom CSS -->

<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">

<!-- Tweaks for older IEs-->

<link rel="stylesheet"
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/fontawesome.css">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"
media="screen">

<!--[if lt IE 9]>

</head>

<!-- body -->


<body class="main-layout">

<!-- loader -->

<div class="loader_bg">

<div class="loader"><img src="images/loading.gif" alt="#" /></div>

</div>

<!-- end loader -->

<div class="wrapper">

<!-- end loader -->

<div class="sidebar">

<!-- Sidebar -->

<nav id="sidebar">

<div id="dismiss">

<i class="fa fa-arrow-left"></i>

</div>

<ul class="list-unstyled components">

<li class="active"> <a href="#">Home</a> </li>

<li><a href="#about">About </a> </li>

<li><a href="#work">Work</a> </li>

<li><a href="#contact">Contact </a> </li>

</ul>

</nav>

</div>

<div id="content">

<!-- header -->

<header>

<!-- header inner -->

<div class="header">

<div class="container-fluid">

<div class="row">

<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">

<div class="full">

<div class="center-desk">
<div class="logo">

<a href="index.html"><img src="images/logo.png" alt="#" /></a>

</div>

</div>

</div>

</div>

<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">

<ul class="btn">

<li class="down_btn"><a href="#">Download</a></li>

<li><a href="#">Sign Up</a></li>

<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>

<li><button type="button" id="sidebarCollapse">

<img src="images/menu_icon.png" alt="#" />

</button>

</li>

</ul>

</div>

</div>

</div>

</div>

</header>

<!-- end header inner -->

<!-- end header -->

<!-- banner -->

<div id="myCarousel" class="carousel slide banner_main" data-ride="carousel">

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

<div class="carousel-inner">

<div class="carousel-item active">


<div class="container-fluid">

<div class="carousel-caption">

<div class="row">

<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">

<div class="text-bg">

<h1>Get<br> Thinking A <br>long time</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
<a class="read_more" href="#">Read more</a>

</div>

</div>

<div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">

<div class="images_box">

<figure><img src="images/img2.png"></figure>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="carousel-item">

<div class="container-fluid ">

<div class="carousel-caption">

<div class="row">

<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">

<div class="text-bg">

<h1>Get<br> Thinking A <br>long time</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>

<a class="read_more" href="#">Read more</a>

</div>

</div>

<div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">


<div class="images_box">

<figure><img src="images/img2.png"></figure>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="carousel-item">

<div class="container-fluid">

<div class="carousel-caption ">

<div class="row">

<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12">

<div class="text-bg">

<h1>Get<br> Thinking A <br>long time</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
<a class="read_more" href="#">Read more</a>

</div>

</div>

<div class="col-xl-7 col-lg-7 col-md-7 col-sm-12">

<div class="images_box">

<figure><img src="images/img2.png"></figure>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">

<i class="fa fa-long-arrow-left" aria-hidden="true"></i>

</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">

<i class="fa fa-long-arrow-right" aria-hidden="true"></i>

</a>

</div>

<!-- end banner -->

<!-- about -->

<div id="about" class="about">

<div class="container-fluid">

<div class="row d_flex">

<div class="col-md-5">

<div class="about_img">

<figure><img src="images/about_img.jpg" alt="#"/></figure>

</div>

</div>

<div class="col-md-7">

<div class="titlepage">

<h2>About <span class="blu">Software</span></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit </p>

<a class="read_more">Read More</a>

</div>

</div>

</div>

</div>

</div>

<!-- end about -->

<!-- choose section -->

<div class="choose ">

<div class="container">

<div class="row">

<div class="col-md-12">
<div class="titlepage">

<h2>Why <span class="blu"> Choose Us</span></h2>

</div>

</div>

</div>

</div>

<div class="choose_bg">

<div class="container">

<div class="row">

<div class="col-md-12">

<div class="row">

<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 padding_right0">

<ul class="easy">

<li class="active"><a href="#">Easy to cutomize</a></li>

<li><a href="#">More flexible</a></li>

<li><a href="#">Clean mode</a></li>

<li><a href="#">Ratinaready</a></li>

</ul>

</div>

<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 padding_left0">

<div class="choose_box">

<i><img src="images/admin.png" alt="#"/></i>

<h3> Ad Minim</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>

</div>

</div>

</div>

</div>

</div>

</div>
</div>

</div>

<!-- end choose section -->

<!-- work -->

<div id="work" class="work">

<div class="container-fluid">

<div class="row d_flex">

<div class="col-md-7">

<div class="titlepage">

<h2>How To <span class="blu">Works it</span></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit </p>

<a class="read_more">Read More</a>

</div>

</div>

<div class="col-md-5">

<div class="work_img">

<figure><img src="images/work_img.jpg" alt="#"/></figure>

</div>

</div>

</div>

</div>

</div>

<!-- end work -->

<!-- request -->

<div id="contact" class="request">

<div class="container">

<div class="row">

<div class="col-md-12">

<div class="titlepage">

<h2>Request <span class="white">A call Back</span></h2>


</div>

</div>

</div>

<div class="row">

<div class="col-md-6">

<form id="request" class="main_form">

<div class="row">

<div class="col-md-12 ">

<input class="contactus" placeholder="Full Name" type="type" name="Full Name">

</div>

<div class="col-md-12">

<input class="contactus" placeholder="Email" type="type" name="Email">

</div>

<div class="col-md-12">

<input class="contactus" placeholder="Phone Number" type="type" name="Phone


Number">

</div>

<div class="col-md-12">

<textarea class="textarea" placeholder="Message" type="type"


Message="Name">Message </textarea>

</div>

<div class="col-md-12">

<button class="send_btn">Send</button>

</div>

</div>

</form>

</div>

<div class="col-md-6">

<div id="map"></div>

</div>

</div>

</div>

</div>
<!-- end request -->

<!-- footer -->

<footer>

<div class="footer">

<div class="container">

<div class="row">

<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">

<div class="row">

<div class="col-md-8 col-sm-6">

<div class="address">

<h3>Address </h3>

</div>

<ul class="location_icon">

<li>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-
orless normal distribution of letters, </li>

</ul>

</div>

<div class="col-md-4 col-sm-6">

<div class="address">

<h3>Links</h3>

<ul class="Menu_footer">

<li class="active"> <a href="#">Home</a> </li>

<li><a href="#about">About </a> </li>

<li><a href="#work">Work</a> </li>

<li><a href="#contact">Contact </a> </li>

</ul>

</div>

</div>

</div>

</div>

<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12">

<div class="row">
<div class="col-md-5 col-sm-6">

<div class="address">

<h3>Follow Us</h3>

</div>

<ul class="social_icon">

<li><a href="#">Facebook <i class="fa fa-facebook"


ariahidden="true"></i></a></li>

<li><a href="#"> Twitter<i class="fa fa-twitter" aria-hidden="true"></i></a></li>

<li><a href="#"> Linkedin<i class="fa fa-linkedin-square"


ariahidden="true"></i></a></li>

<li><a href="#"> Youtube<i class="fa fa-youtube-play"


ariahidden="true"></i></a></li>

<li><a href="#"> Instagram<i class="fa fa-instagram"


ariahidden="true"></i></a></li>

</ul>

</div>

<div class="col-md-7 col-sm-6">

<div class="address">

<h3>Newsletter </h3>

</div>

<form class="bottom_form">

<input class="enter" placeholder="Enter Your Email" type="text" name="Enter


Your Email">

<button class="sub_btn">subscribe</button>

</form>

</div>

</div>

</div>

</div>

</div>

<div class="copyright">

<div class="container">

<div class="row">

<div class="col-md-12">
<p>Copyright 2023 All Right Reserved By <a href="#">Burcovschi Dorin</a></p>

</div>

</div>

</div>

</div>

</div>

</footer>

<!-- end footer -->

</div>

<div class="overlay"></div>

<!-- Javascript files-->

<script src="js/jquery.min.js"></script>

<script src="js/popper.min.js"></script>

<script src="js/bootstrap.bundle.min.js"></script>

<script src="js/jquery-3.0.0.min.js"></script>

<!-- sidebar -->

<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>

<script src="js/custom.js"></script>

<script type="text/javascript">

$(document).ready(function() { $

("#sidebar").mCustomScrollbar({ them

e: "minimal"

});

$('#dismiss, .overlay').on('click', function() {

$('#sidebar').removeClass('active');

$('.overlay').removeClass('active');

});

$('#sidebarCollapse').on('click', function() {

$('#sidebar').addClass('active');

$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');

$('a[aria-expanded=true]').attr('aria-expanded', 'false');

});

});

</script>

<script>

$(document).ready(function() {

(".fancybox").fancybox({ o

penEffect: "none",

closeEffect: "none"

});

$(".zoom").hover(function() {

$(this).addClass('transition');

}, function() {

$(this).removeClass('transition');

});

});

</script>

<script>

// This example adds a marker to indicate the position of Bondi Beach in Sydney,

// Australia.

function initMap() { var map = new

google.maps.Map(document.getElementById('map'), {

zoom: 11,

center: { lat:

40.645037, lng:

-73.880224

},

});
var image = 'images/maps-and-flags.png';

var beachMarker = new google.maps.Marker({

position: {

lat: 40.645037,

lng: -73.880224

},

map: map,

icon: image

});

</script>

<!-- google map js -->

<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8eaHt9Dh5H57Zh0xVTqxVdBFCvFMqFj
Q&callback=initMap"></script>

<!-- end google map js -->

</body>

</html>
@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');

@import
url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,
600,600i,700,700i,800,800i,900,900i');

@import
url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');

@import url(animate.min.css);

@import url(normalize.css);

@import url(icomoon.css);

@import url(font-awesome.min.css);

@import url(meanmenu.css);

@import url(owl.carousel.min.css);

@import url(swiper.min.css);

@import url(slick.css);

@import url(jquery.fancybox.min.css);

@import url(jquery-ui.css);

@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton -------------------------------------------------


--------------------*/

*{ box-sizing: border-box !

important;

html { scroll-behavior:

smooth;

body { color: #666666; font-

size: 14px; font-family:


'Poppins', sans-serif; line-height:

1.80857; font-weight: normal;

a{ color: #1f1f1f; text-

decoration: none !important;

outline: none !important;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out; -o-

transition: all .3s ease-in-out; transition: all

.3s ease-in-out;

h1,

h2, h3, h4, h5, h6

{ letter-spacing: 0;

font-weight: normal;

position: relative;

padding: 0 0 10px 0;

font-weight: normal;

line-height: normal;

color: #111111;

margin: 0

h1 { font-size:

24px;

h2 { font-size:

22px;
}

h3 { font-size:

18px;

h4 { font-size:

16px

h5 { font-size:

14px

h6 { font-size:

13px

*,

*::after,

*::before {

-webkit-box-sizing: border-box; -

moz-box-sizing: border-box; box-sizing:

border-box;

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a

{ color: #212121; text-

decoration: none!important;

opacity: 1

}
button:focus

{ outline: none;

ul,

li,

ol { margin:

0px; padding:

0px; list-style:

none;

p{ margin: 0px;

font-weight: 500;

font-size: 15px;

line-height: 24px;

a{ color: #222222;

text-decoration: none;

outline: none !important;

a, .btn { text-decoration: none !

important; outline: none !

important;

-webkit-transition: all .3s ease-in-out;

-moz-transition: all .3s ease-in-out;

-ms-transition: all .3s ease-in-out; -o-

transition: all .3s ease-in-out; transition: all

.3s ease-in-out;

}
img { max-width:

100%; height:

auto;

:focus

{ outline: 0;

.btn-custom { margin-top: 20px;

background-color: transparent !important;

border: 2px solid #ddd; padding: 12px

40px; font-size: 16px;

.lead { font-size:

18px; line-height:

30px; color:

#767676;

margin: 0;

padding: 0;

.form-control:focus { border-color: #ffffff !

important; box-shadow: 0 0 0 .2rem rgba(255,

255, 255, .25);

.navbar-form input

{ border: none !

important;

}
.badge { font-

weight: 500;

blockquote { margin:

20px 0 20px;

padding: 30px;

button {

border: 0;

margin: 0;

padding: 0;

cursor: pointer;

.full { float:

left; width:

100%;

.layout_padding { padding-

top: 90px; padding-bottom:

90px;

.layout_padding_2 { padding-top: 75px; padding-bottom: 75px;

.light_silver

{ background: #f9f9f9;

}
.theme_bg

{ background:

#38c8a8;

.margin_top_30 { margin-

top: 30px !important;

.full {

width: 100%;

float: left;

margin: 0;

padding: 0;

/**-- heading section --**/

/*---------------------------- preloader area ----------------------------*/

.loader_bg { position:

fixed; z-index:

9999999;

background: #fff;

width: 100%;

height: 100%;

.loader { height:

100%; width:
100%; position:

absolute;

left: 0; top: 0;

display: flex; justify-

content: center; align-

items: center;

.loader img

{ width: 280px;

/*-- menu_sitbar--*/

.menu_sitbar {

float: left; width: 120px;

height: 100vh;

background: #0808ff;

border-right: #fff solid 7px;

padding: 33px;

#sidebar { width: 200px; position: fixed;

top: 0; left: -280px; height: 100vh; z-

index: 1000; background: #fff; color:

#fff; transition: all 0.3s; overflow-y:

scroll; box-shadow: 3px 3px 3px rgba(0, 0,

0, 0.2);

#sidebar.active {
left: 0;

#dismiss { width:

35px; height:

35px; line-height:

34px; text-align:

center;

background: #000;

position: absolute;

top: 10px; right:

10px; cursor:

pointer;

-webkit-transition: all 0.3s;

-o-transition: all 0.3s;

transition: all 0.3s;

#dismiss:hover

{ background: #35bff8;

color: #fff;

.overlay { display: none;

position: fixed; width: 100vw;

height: 100vh; background:

rgba(0, 0, 0, 0.7); z-index: 998;

opacity: 0; transition: all 0.5s

ease-in-out;

}
.overlay.active

{ display: block;

opacity: 1;

#sidebarCollapse

{ background:

transparent; padding: 0;

border: none;

#sidebar .sidebar-header

{ padding: 20px;

background: #0808ff;

#sidebar ul.components

{ padding: 55px 0;

#sidebar ul p

{ color: #fff;

padding: 10px;

#sidebar ul li a

{ padding: 10px 25px;

font-size: 1.3em;

display: block; font-

weight: 500;

}
#sidebar ul li a:hover

{ color: #fff;

background: #35bff8;

#sidebar ul li.active>a,

a[aria-expanded="true"] {

color: #fff; background:

#35bff8;

a[data-toggle="collapse"]

{ position: relative;

.dropdown-toggle::after

{ display: block; position:

absolute; top: 50%; right:

20px; transform:

translateY(-50%);

ul ul a {

font-size: 0.9em !important; padding-

left: 30px !important; background:

#6d7fcc;

ul.CTAs

{ padding:

20px;

}
ul.CTAs a { text-align:

center; font-size: 0.9em !

important; display: block;

border-radius: 5px; margin-

bottom: 5px;

a.download

{ background: #fff;

color: #7386D5;

a.article,

a.article:hover { background:

#6d7fcc !important; color: #fff !

important;

/*--end menu_sitbar--*/

ul.btn

{ float:

right;

ul.btn li { display:

inline-block;

padding: 0 25px;

}
ul.btn li a

{ color: #fff;

font-size: 16px;

ul.btn li:last-child { padding-right:

0;

.down_btn { padding-

left: 50px;

.down_btn a { background-

color: #fff; display: inline-

block; padding: 7px 35px;

border-radius: 10px; color:

#010a05 !important; font-

size: 17px;

.down_btn a:hover

{ color: #fff !important;

background: #000;

/*-- header area --*/

/*--------------------------------------------------------------------- top banner area


--------------------------------------------------------------------*/
/*--------------------------------------------------------------------- layout new css -----------------------------------------
----------------------------*/

.header::after { background:

url(../images/cross_top.png); content: "";

position: absolute; width: 558px;

height: 228px; z-index: -1; top: 0;

left: 0; }

.header { width:

100%; background:

#11aeef; padding:

35px 30px; position:

relative; z-index: 960;

.logo a { font-size: 40px;

font-weight: bold; text-

transform: uppercase;

color: #fff; line-

height: 40px;

/** banner section **/

.banner_main

{ background: #11aeef;

padding: 75px 0 90px 0; }


.text-bg { text-

align: left; float:

right; width:

100%; max-width:

431px;

.text-bg h1 { color: #fff;

padding-top: 50px;

font-size: 71px; line-

height: 85px; padding-

bottom: 25px; font-

weight: bold;

.text-bg p { font-size:

17px; display: block;

color: #fff; line-height:

25px; padding-bottom:

50px; font-weight:

500;

.text-bg .read_more

{ border: #fff solid 5px;

.text-bg .read_more:hover

{ background: #000;

.images_box figure

{ margin: 0px;
}

.images_box figure img

{ width: 100%;

.carousel-indicators li {

background: #000;

width: 38px; height:

8px; border-radius:

10px;

.carousel-indicators

{ bottom: 45px;

.carousel-caption

{ position: inherit;

.carousel-control-

next, .carousel-control-prev {

display: none;

/** banner section **/

.titlepage { text-align:

center; padding-

bottom: 60px;
}

.titlepage h2 { font-

size: 50px; color:

#382d3c; line-

height: 55px;

padding: 0;

.d_flex { display:

flex; align-items:

center; flex-wrap:

wrap;

.blu { color:

#0eadef;

.read_more {

font-size: 17px; background-

color: transparent; border:

#00aeef solid 5px; color:

#010a05 !important; padding:

13px 0px; width: 100%; max-

width: 210px; text-align: center;

display: inline-block; transition:

ease-in all 0.5s; border-radius:

40px; font-weight: 500;

}
.read_more:hover

{ background: #00aeef;

color: #fff !important;

transition: ease-in all 0.5s;

/** about section **/

.about

{ background:

#fafafa; padding:

90px 0;

.about .titlepage

{ text-align: left;

padding: 0; max-

width: 669px;

width: 100%;

float: left;

.about .titlepage h2 { margin-

bottom: 40px;

.about .titlepage p

{ color: #010a05;

font-size: 17px; line-

height: 35px; font-


weight: 400; padding-

bottom: 50px;

.about .titlepage .read_more {

float: right;

.about_img figure

{ margin: 0;

.about_img figure img

{ width: 100%;

/** end about section **/

/** choose section **/

.blu2 { color:

#3a3aff; font-

weight: bold;

.choose_bg { background:

url(../images/why.jpg); padding:

120px 0;

}
.choose .choose_box {

background: #fff;

padding: 35px 35px;

text-align: center;

.choose .choose_box span {

color: #141629; display:

block; font-size: 70px;

font-weight: bold; text-

align: center;

.choose .choose_box h3 {

color: #00aeef; font-size:

25px; line-height: 28px;

font-weight: 500;

padding-bottom: 10px;

padding-top: 15px;

.choose .choose_box p

{ color: #010a05; font-

size: 17px; line-height:

30px; font-weight: 500;

.padding_right0 { padding-

right: 0;

.padding_left0 {
padding-left: 0;

ul.easy li a { font-size:

27px; padding: 18px

21px; width: 100%;

line-height: 36px;

margin-bottom: 35px;

display: block;

ul.easy li:last-child a { margin-

bottom: 0;

ul.easy li.active a { background: #060505;

color: #fff;

ul.easy li a:hover

{ background: #060505;

color: #fff;

/** end choose section **/

/** work section **/

.work

{ background:
#ffffff; padding:

90px 0;

.work .titlepage

{ text-align: left;

padding: 0; max-

width: 648px;

width: 100%; float:

right;

.work .titlepage h2 { margin-bottom:

40px;

.work .titlepage p

{ color: #010a05;

font-size: 17px; line-

height: 35px; font-

weight: 400; padding-

bottom: 50px;

.work_img { padding-

right: 30px;

.work_img figure {

margin: 0;

}
.work_img figure img

{ width: 100%;

/** end work section **/

/** request section **/

.request

{ background:

#0192c8; padding: 90px

0px;

}
.request .titlepage { text-

align: left;

.white

{ color:

#fff; }

.main_form .contactus {

border-radius: 35px;

padding: 0px 30px;

margin-bottom: 30px;

width: 100%; height:

60px; background:

#fff; color: #777977;

font-size: 18px; font-

weight: normal;

border: inherit;

.main_form .textarea

{ padding: 8px 30px;

padding-top: 63px;

margin-bottom: 30px;

width: 100%; background:

#fff; color: #777977; font-

font-
size: 18px; weight:

normal;

border: inherit; border-

radius: 20px;

.main_form .send_btn {

font-size: 17px;

transition: ease-in all 0.5s;

background-color: #fff;

color: #000; padding:

13px 0px; max-width:

200px; width: 100%;

display: block; border-

radius: 30px; margin: 0

auto;

.main_form .send_btn:hover

{ background-color: #191e20;

transition: ease-in all 0.5s; color:

#fff;

#request *::placeholder {

color: #777977; opacity:

1;

#map {
padding-

height: 425px;

overflow: hidden; bottom:

22.25%; padding-top:

30px;

position: relative;

/** end request section **/

/** footer **/

.footer { background:

#212120; padding-

top: 85px; text-align:

center;

.footer .titlepage

{ text-align: left;

padding-bottom: 0px;

font-
.footer .titlepage h2

{ color: #fff;

.footer .address h3

{ color: #fff; font-

size: 30px; line-

height: 35px;

weight: 500;
padding-

bottom: 20px;

text-align: left;

ul.location_icon li

{ font-size: 17px;

text-align: left;

padding-right: 40px;

ul.Menu_footer li

{ display: block;

color: #3e7f21;

position: relative;

ul.Menu_footer li:before {

content: ""; position:

absolute; width: 12px;

height: 12px; border-

radius: 20px;

background: #fff;

margin-top: 9px;

left: 0; }

font-
ul.Menu_footer li a

{ display: block;

color: #fcfbfb; size:

17px;

left: 30px; text-

align: left;

ul.Menu_footer li a:hover {

color: #0eadef;

ul.social_icon li

{ display: block;

padding-bottom: 11px;

ul.social_icon li a {

font-size: 18px;

color: #fff; display:

inherit;

ul.social_icon li a:hover {

color: #0eadef;

ul.social_icon li a i

{ background: #fff;

font-
padding-

width: 37px; height:

37px; display: flex; align-

items: center; justify-

content: center; size:

22px;

border-radius: 30px;

color: #000; margin-top:

-33px;

ul.social_icon li a i:hover {

color: #0eadef;

.bottom_form h3 {

font-weight: 600;

font-size: 20px;

text-align: left;

color: #fff;

padding-bottom: 15px;

.bottom_form .enter {

border: inherit;

padding: 0px 19px;

font-
width: 100%; height:

53px; background:

#fff; color: #828282;

font-size: 17px;

border-radius: 10px;

margin-bottom: 25px;

.sub_btn { size:

19px;

font-
transition: ease-in all 0.5s;

background-color: #0192c8;

color: #fff; padding:

11px 0px; max-width:

175px; width: 100%;

display: block; text-

transform: uppercase;

border-radius: 10px;

border: inherit; box-

shadow: inherit;

.sub_btn:hover

{ background-color:

#0156ed; transition: ease-in

all 0.5s; color: #fff;

.copyright { margin-

top: 85px; padding:

25px 0; background:

#0192c8;

.copyright p { color:

#fff; font-size: 17px;

line-height: 22px;

font-
text-align: center;

weight: normal;

.copyright a {

color: #fff; }

.copyright a:hover

{ color: #212120;

/** end footer **/

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