PROJECT REPORT

ON
BEAUTY PARLOUR
WEBSITE

Submitted by:
NAME OF THE STUDENT: ROLL NO:

USHA 232580800059

MOHIT 232580800022

PRATI 232580800033

TANIYA 232580800057

SUBMITTED TO: GOURAV

CREATIVE NETWORKS
Add: Near Ambedkar Chowk, Ratia Road, Tohana, Haryana.
 DECLARATION
I am a student of Computer Science Diploma, session: 2023-2026 in your college.
We hereby declare that the work presented in this project is the outcome of our bona
fide word and is correct to the best of our knowledge and this work has been
undertaken taking care of Engineering Ethics. It contains no material previously
published or written by another person nor material which has been accepted for the
award of any other degree or diploma of the university or other institute of higher
learning, except where due acknowledgment has been made in the text.

Place: Creative Networks, Computer Institute Tohana.

 ACKNOWLEDGEMENT
I am highly grateful to the Mr. Surender Pal Garg HOD of CSE (Diploma) department
for providing this opportunity to carry out the four-week industrial training at Creative
Networks, Tohana. I would like to express my gratitude to other faculty members to
Computer Science Department for providing academic input, guidance &
encouragement throughout the training period. This major project would have not been
possible without help of many people. I would like to thank Creative Networks, Tohana
for their invaluable guidance, unwavering supervision and for providing essential
insights in the project. Their support played pivotal role in successfully completing the
project. I would like to express my gratitude towards my parents for their kind co-
operation and encouragement. My thanks and appreciation also goes to my
colleague’s in developing the project and people who have willingly helped me out with
their abilities
 ABSTRACT
I have done my training at Creative Networks, Computer Institute Tohana, to improve
my technical abilities in Computer and Programming.
 TABLE OF CONTENTS
CHAPTER NO TITLE
1 Introduction
1.1 Objective
2 System Specification
2.1 Hardware Requirements
2.2 Software Requirements
3 Project Description
3.1 HTML
3.2 CSS
3.3 JavaScript
4 Source code of website
5 Project final output
6 Conclusion
 1 Introduction

1.1 Objective

The objective of our beauty parlour website is to offer an easy, convenient,

and informative platform for clients seeking premium beauty and wellness
services. The website is designed to showcase our wide range of offerings,
including haircuts, facials, skincare treatments, makeup, manicures, pedicures,
and massages, all provided by highly skilled professionals. Our primary goal is
to deliver a user-friendly experience that enables customers to easily browse
services, view detailed information, and schedule appointments at their
convenience. By integrating an intuitive online booking system, we aim to
simplify the process for clients while also providing updates on special offers,
new services, and seasonal promotions. Our website will also feature customer
testimonials, service reviews, and a gallery of our work, creating a trustworthy
and engaging platform. Ultimately, we aim to enhance customer satisfaction,
build brand loyalty, and provide a convenient digital experience that
complements our commitment to exceptional beauty care.
 2. System Specification
1. HARDWARE REQUIREMENTS

 Minimum RAM:1GB
 Hard Disk:-128GB
 Processor:-Intel Dual Core(1.50GHZ)Or above
2. SOFTWARE REQUIREMENTS
 Operating System:- Windows 8,windows 10
 Front End Languages:-HTML,CSS,JAVASCRIPT
 Editor:-Notepad, Subline Text, Visual Studio Code (VS code)
3 PROJECT DESCRIPTION

HTML
HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our
HTML tutorial is developed for beginners and professionals. In our tutorial, every topic is
given step-by-step so that you can learn it in a very easy way. If you are new in learning
HTML, then you can learn HTML from basic to a professional level and after learning
HTML with CSS and JavaScript you will be able to create your own interactive and
dynamic website. But Now We will focus on HTML only in this tutorial.

The major points of HTML are given below:

o HTML stands for Hypertext Markup Language.

o HTML is used to create web pages and web applications.
o HTML is widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming language.

What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.

Hyper Text: Hypertext simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. Hypertext is a way to link two or more web pages (HTML
documents) with each other.

Markup language: A markup language is a computer language that is used to apply

layout and formatting conventions to a text document. Markup language makes text more
interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be
of the static or dynamic type. With the help of HTML only, we can create static web
pages.

HTML text Editors

o An HTML file is a text file, so to create an HTML file we can use any text editors.
o Text editors are the programs which allow editing in a written text, hence to create a
web page we need to write our code in some text editor.
 o There are various types of text editors available which you can directly download, but
for a beginner, the best text editor is Notepad (Windows) or Text Edit (Mac).
o After learning the basics, you can easily use other professional text editors which
are, Notepad++, Sublime Text, Vim, etc.
o In our tutorial, we will use Notepad and sublime text editor. Following are some easy
ways to create your first web page with Notepad, and sublime text.

A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in
all versions of Windows, from where you easily access it.

B. HTML code with Sublime Text-editor. (Recommended after

learning basics of HTML)
When you will learn the basics of HTML, then you can use some professional text editors,
which will help you to write an efficient and fast code. So to use Sublime Text editors, first
it needs to download and install from internet. You can easily download it from this
https://www.sublimetext.com/download link and can install in your PC. When installation
of Sublime text editor done then you can follow the simple steps to use it:

HTML Tags
HTML tags are like keywords which defines that how web browser will format and display
the content. With the help of tags, a web browser can distinguish between an HTML
content and a simple content. HTML tags contain three main parts: opening tag, content
and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and
left to right. HTML tags are used to create HTML documents and render their properties.
Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per your
code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except
some tags)

Syntax
<Tag> content </tag>

HTML Attribute
o HTML attributes are special words which provide additional information about the
elements or attributes are the modifier of the HTML element.
 o Each element or tag can have attributes, which defines the behavior of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and value pair.
o The Attributes name and values are case sensitive, and it is recommended by W3C
that it should be written in Lowercase only.
o You can add multiple attributes in one HTML element, but need to give space between
two attributes.

Syntax
1. <element attribute_name="value">content</element>

HTML Elements
An HTML file is made of elements. These elements are responsible for creating web pages
and define content in that webpage. An element in HTML usually consist of a start tag
<tag name>, close tag </tag name> and content inserted between them. Technically, an
element is a collection of start tag, attributes, end tag, content between them.

<p> Hello world!!! </p>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>

HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML provides
us ability to format text without using CSS. There are many formatting tags in HTML.
These tags are used to make text bold, italicized, or underlined. There are almost 14
options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.
Element name Description

This is a physical tag, which is used to bold the

<b>
text written between it.

This is a logical tag, which tells the browser that

<strong>
the text is important.

This is a physical tag which is used to make text

<i>
italic.

<em> This is a logical tag which is used to display

content in italic.

<mark> This tag is used to highlight text.

This tag is used to underline text written between

<u>
it.

This tag is used to appear a text in teletype. (not

<tt>
supported in HTML5)

This tag is used to draw a strikethrough on a

<strike>
section of text. (Not supported in HTML5)

It displays the content slightly above the normal

<sup>
line.

It displays the content slightly below the normal

<sub>
line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

This tag is used to increase the font size by one

<big>
conventional unit.

This tag is used to decrease the font size by one

<small>
unit from base font size.
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help
of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table
data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation
bar, body content, footer section etc. But it is recommended to use div tag over table to
manage the layout of the page .

HTML Table
 CSS
CSS Tutorial
CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology.
Our CSS tutorial is developed for beginners and professionals. The major points of CSS
are given below:

o CSS stands for Cascading Style Sheet.

o CSS is used to design HTML tags.
o CSS is a widely used language on the web.
o HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.

CSS Example with CSS Editor

1. <!DOCTYPE>
2. <html>
3. <head>
4. <style>
5. h1{
6. color:white;
7. background-color:red;
8. padding:5px;
9. }
10. p{
11. color:blue;
12. }
13. </style>
14. </head>
15. <body>
16. <h1>Write Your First CSS Example</h1>
17. <p>This is Paragraph.</p>
18. </body>
19. </html>

What is CSS?
CSS stands for Cascading style sheets. It describes to the user how to display HTML
elements on the screen in a proper format. CSS is the language that is used to style HTML
documents. In simple words, cascading style sheets are a language used to simplify the
process of making a webpage.

CSS is used to handle some parts of the webpage. With the help of CSS, we can control
the colour of text and style of fonts, and we can control the spacing between the paragraph
 and many more things. CSS is easy to understand but provides strong control on the Html
documents.CSS is combined with HTML.

Advantages of CSS
Here are the following advantages of CSS, such as:

o Faster page speed: It has a faster page speed than other code's page speeds.
With the help of the CSS rule, we can apply it to all occurrences of certain tags
in HTML documents.
o Better user experience: CSS makes a webpage very attractive to the eyes.
Also, CSS makes it user-friendly. When the button or text is in a proper format,
it improves the user experience.
o Quicker Development time: With the help of CSS, we can specify the format
and style the multiple pages into one code string. In cascading style sheet, we
can make a duplicate copy of several website pages.
If we make a webpage, it has the same formatting, looks, and feel, so with the
help of the CSS rule for one page, and it is sufficient for all the pages.
o Easy Formatting changes: In CSS, if we need to make changes in the format,
it is very easy; we only need to change the one-page format it will automatically
apply to the other pages of CSS.
There is no need to correct individual pages in a CSS style sheet. If we fix a
CSS style sheet, it will automatically update the other CSS style sheet.
o Compatibility: Compatibility is very important in today's age. If we create any
webpage, it should be very responsive and user-friendly. CSS is used with Html
to make webpage design responsive.

Types of CSS
There are three types of CSS:

1. Inline CSS
Inline CSS is used to style the elements of HTML documents. It is used in HTML to style
the attributes without using the selectors. It is challenging to manage the inline function in
websites compared to other types. It is very helpful in Html in some situations.

Example of inline CSS:

1. p style="color: orange; font-size: 25px;">Here is my first paragraph.</p>

2. lt;p>Here is my second paragraph.</p>

2. Internal CSS
Internal CSS is used to design the style single page effectively. It is more time-consuming
because we can only work on one page or we need to style each web page. In internal
CSS, we style a single webpage uniquely.

Example of internal CSS:

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8" />
5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7. <style>
8. body {
9. background-color: black;
10. }
11. h1 {
12. color: mediumvioletred;
13. }
14. h2 {
15. color: powder blue;
16. }
17. </style>
18. </head>
19. <body>
20. <h1>Welcome!!</h1>
21. <h2>Good Morning!</h2>
22. </body>
23. </html>
3. External CSS
External CSS is used to link all webpage with an external file. CSS, which can be created
in a text file. It is more efficient for styling an extensive webpage. It also increases the
readability of the CSS files.

Syntax:

1. <head>
2. //if the CSS file is in another folder, then
3. //the href must contain the path to the file
4. <link rel="stylesheet" href="nameOfTheSheet.css">
5. </head>

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the
pages.

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.
 JAVASCRIPT
JavaScript Tutorial
Our JavaScript Tutorial is designed for beginners and professionals both. JavaScript is
used to create client-side dynamic pages.

JavaScript is an object-based scripting language which is lightweight and cross-platform.

JavaScript is not a compiled language, but it is a translated language. The JavaScript

Translator (embedded in the browser) is responsible for translating the JavaScript code
for the web browser.

What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other graphical web
browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses js to provide several
forms of interactivity and simplicity.

JavaScript Example
Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript
code: within body tag, within head tag and external JavaScript file.

Let’s create the first JavaScript example

1. <script type="text/javascript">
2. document.write("JavaScript is a simple language for javatpoint learners");
3. </script>

External JavaScript file

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several html
pages.

An external JavaScript file must be saved by .js extension. It is recommended to embed

all JavaScript files into a single file. It increases the speed of the webpage.

Advantages of External JavaScript

 There will be following benefits if a user creates an external javascript:

1. It helps in the reusability of code in more than one HTML file.

2. It allows easy code readability.
3. It is time-efficient as web browsers cache the external js files, which further reduces the
page loading time.
4. It enables both web designers and coders to work with html and js files parallelly and
separately, i.e., without facing any code conflictions.
5. The length of the code reduces as only we need to specify the location of the js file.

Disadvantages of External JavaScript

There are the following disadvantages of external files:

1. The stealer may download the coder's code using the url of the js file.
2. If two js files are dependent on one another, then a failure in one file may affect the
execution of the other dependent file.
3. The web browser needs to make an additional http request to get the js code.
4. A tiny to a large change in the js code may cause unexpected results in all its dependent
files.
5. We need to check each file that depends on the commonly created external javascript file.
6. If it is a few lines of code, then better to implement the internal javascript code.

JavaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )

sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.

Correct JavaScript variables

1. var x = 10;
2. var _value="sonoo";

Incorrect JavaScript variables

1. var 123=30;
2. var *aa=320;

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within the
function or block only. For example:
1. <script>
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e. declared
outside the function or declared with window object is known as global variable. For
example:

1. <script>
2. var data=200;//gloabal variable
3. function a(){
4. document.writeln(data);
5. }
6. function b(){
7. document.writeln(data);
8. }
9. a();//calling JavaScript function
10. b();
11. </script>

Javascript Data Types

JavaScript provides different data types to hold different types of values. There are two
types of data types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of the
variable because it is dynamically used by JavaScript engine. You need to use var here
to specify the data type. It can hold any type of values such as numbers, strings etc. For
example:

1. var a=40;//holding number

2. var b="Rahul";//holding string

JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands. For
example:

1. var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.

There are following types of operators in JavaScript.

1. Arithmetic Operators
 2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function
many times to reuse the code.

Advantage of JavaScript function

Functions are useful in organizing the different parts of a script into the several tasks that
must be completed. There are mainly two advantages of JavaScript functions.

1. Code reusability: We can call a function several times in a script to perform their tasks so
it saves coding.
2. Less coding: It makes our program compact. We don't need to write many lines of code
each time to perform a common task.

Rules for naming functions:

o It must be case sensitive.
o It must be start with alphabetical character (A-Z) or an underscore symbol.
o It cannot contain spaces.
o It cannot be use as a reserve words.

How to declare a Function:

To declare a function we have to use the reserved keyword "function", followed by its
name, and a set of arguments.
 4 Source Code OF Web Site

Beauty Parlour Web Site

<!DOCTYPE html>
<html lang="en">
<head>
<!-- basic -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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>Beautiflie</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- style css -->
<link rel="stylesheet" type="text/css" 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/font-awesome.css">
<!-- fonts -->
<link
href="https://fonts.googleapis.com/css?family=Great+Vibes|Open+Sans:400,700&display=s
wap&subset=latin-ext" rel="stylesheet">
<!-- owl stylesheets -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"
media="screen">
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<!-- header section start -->
<div class="header_section">
<div class="container-fluid">
<nav class="navbar navbar-light bg-light justify-content-between">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="about.html">About</a>
<a href="client.html">Client</a>
<a href="contact.html">Contact</a>
</div>
<span class="toggle_icon" onclick="openNav()"><img src="images/toggle-
icon.png"></span>
 <a class="logo" href="index.html"><img src="images/logo.png"></a></a>
<form class="form-inline ">
<div class="login_text">
<ul>
<li><a href="#"><img src="images/user-icon.png"></a></li>
<li><a href="#"><img src="images/bag-icon.png"></a></li>
<li><a href="#"><img src="images/search-icon.png"></a></li>
</ul>
</div>
</form>
</nav>
</div>
</div>
<!-- header section end -->
<!-- banner section start -->
<div class="banner_section layout_padding">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
<div class="banner_img"><img src="images/banner-img.png"></div>
 </div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
<div class="banner_img"><img src="images/banner-img.png"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
 <div class="banner_img"><img src="images/banner-img.png"></div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1 class="banner_taital">Beauty <br>Kit</h1>
<p class="banner_text">Ncididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo</p>
<div class="read_bt"><a href="#">Buy Now</a></div>
</div>
<div class="col-sm-6">
<div class="banner_img"><img src="images/banner-img.png"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- banner section end -->
<!-- product section start -->
<div class="product_section layout_padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
 <h1 class="product_taital">Our Products</h1>
<p class="product_text">incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation</p>
</div>
</div>
<div class="product_section_2 layout_padding">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-1.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-2.png" class="image_1">
 <div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-3.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
 <h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-4.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-5.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
 <h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-6.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-7.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
 <li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-8.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
 <p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-9.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-10.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
 </div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-11.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="product_box">
<h4 class="bursh_text">Beauty Bursh</h4>
<p class="lorem_text">incididunt ut labore et dolore magna aliqua. Ut enim
</p>
<img src="images/img-12.png" class="image_1">
<div class="btn_main">
<div class="buy_bt">
<ul>
<li class="active"><a href="#">Buy Now</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
 </div>
<h3 class="price_text">Price $30</h3>
</div>
</div>
</div>
</div>
<div class="seemore_bt"><a href="#">See More</a></div>
</div>
</div>
</div>
<!-- product section end -->
<!-- about section start -->
<div class="about_section layout_padding">
<div class="container">
<div class="about_section_main">
<div class="row">
<div class="col-md-6">
<div class="about_taital_main">
<h1 class="about_taital">About Our beauty sotore</h1>
<p class="about_text">labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequatlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatlabore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat</p>
<div class="readmore_bt"><a href="#">Read More</a></div>
</div>
</div>
<div class="col-md-6">
<div><img src="images/about-img.png" class="image_3"></div>
</div>
 </div>
</div>
</div>
</div>
<!-- about section end -->
<!-- customer section start -->
<div class="customer_section layout_padding">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="customer_taital">What says customers</h1>
</div>
</div>
<div id="main_slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="client_section_2">
<div class="client_main">
<div class="client_left">
<div class="client_img"><img src="images/client-img.png"></div>
</div>
<div class="client_right">
<h3 class="name_text">Jonyro</h3>
<p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation eu </p>
</div>
</div>
</div>
</div>
 <div class="carousel-item">
<div class="client_section_2">
<div class="client_main">
<div class="client_left">
<div class="client_img"><img src="images/client-img.png"></div>
</div>
<div class="client_right">
<h3 class="name_text">Jonyro</h3>
<p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation eu </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="client_section_2">
<div class="client_main">
<div class="client_left">
<div class="client_img"><img src="images/client-img.png"></div>
</div>
<div class="client_right">
<h3 class="name_text">Jonyro</h3>
<p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation eu </p>
</div>
</div>
</div>
</div>
</div>
 <a class="carousel-control-prev" href="#main_slider" role="button" data-
slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control-next" href="#main_slider" role="button" data-
slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
<!-- customer section end -->
<!-- contact section start -->
<div class="contact_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="contact_taital">Get In Touch</h1>
<p class="contact_text">Consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation eu </p>
</div>
<div class="col-md-6">
<div class="contact_main">
<div class="contact_bt"><a href="#">Contact Form</a></div>
<div class="newletter_bt"><a href="#">Newletter</a></div>
</div>
</div>
</div>
</div>
<div class="map_main">
 <div class="map-responsive">
<iframe
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-
UE7m4qP-z21pH0eSc&amp;q=Eiffel+Tower+Paris+France" width="600" height="400"
frameborder="0" style="border:0; width: 100%;" allowfullscreen=""></iframe>
</div>
</div>
</div>
<!-- contact section end -->
<!-- footer section start -->
<div class="footer_section layout_padding">
<div class="container">
<div class="footer_logo"><a href="index.html"><img src="images/footer-
logo.png"></a></div>
<div class="contact_section_2">
<div class="row">
<div class="col-sm-4">
<h3 class="address_text">Contact Us</h3>
<div class="address_bt">
<ul>
<li>
<a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i><span
class="padding_left10">Address : Loram Ipusm</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-phone" aria-hidden="true"></i><span
class="padding_left10">Call : +01 1234567890</span>
</a>
 </li>
<li>
<a href="#">
<i class="fa fa-envelope" aria-hidden="true"></i><span
class="padding_left10">Email : [email protected]</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="footer_logo_1"><a href="index.html"><img src="images/footer-
logo.png"></a></div>
<p class="dummy_text">commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non</p>
</div>
<div class="col-sm-4">
<div class="main">
<h3 class="address_text">Best Products</h3>
<p class="ipsum_text">dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non</p>
</div>
</div>
</div>
</div>
<div class="social_icon">
<ul>
<li>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
 <li>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</div>
<!-- footer section end -->
<!-- copyright section start -->
<div class="copyright_section">
<div class="container">
<p class="copyright_text">2020 All Rights Reserved. Design by <a
href="https://html.design">Free html Templates</a></p>
</div>
</div>
<!-- copyright section end -->
<!-- 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>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
 <script src="js/custom.js"></script>
<!-- javascript -->
<script src="js/owl.carousel.js"></script>
<script
src="https:cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js"
type="text/javascript"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>

5 Project Final Output

 6 Conclusion
In conclusion, our beauty parlour website aims to provide a seamless, user-
friendly experience, offering a wide range of high-quality beauty services. With
easy appointment booking, detailed service information, and a focus on
customer satisfaction, we strive to enhance your beauty and wellness journey,
ensuring a delightful and rejuvenating experience.