Shri Shamrao Patil (Yadravkar) Educational & Charitable Trust’s

SHARAD INSTITUTE OF
TECHNOLOGY, POLYTECHNIC,
YADRAV

DEPARTMENT OF

COMPUTER ENGINEERING

INDUSTRIAL TRAINING REPORT

IN
WEB DEVELOPEMENT

NAME :Shubham Gopal Urane.

PROGRAME : Computer Engineering CLASS : TY

ROLL NO : 35135 ENROLLMENT NO : 2209680932

ACADEMIC YEAR : 2024-25 SEM : V

1
 An Implant Training on

Web Development
Submitted in Partial Fulfillment of the requirements for the

“DIPLOMA”

In

Computer Engineering

To,

M.S.B.T.E. MUMBAI.

By

Shubham Gopal Urane

UNDER THE GUIDANCE OF

Mr.Afsar Shaikh

( CYPHERSA SOFTWARES LLP. )

2
[Type here]

Shri Shamrao Patil (Yadravkar) Educational & Charitable Trust’s

SHARAD INSTITUTE OF
TECHNOLOGY POLYTECHNIC ,
YADRAV.

CERTIFICATE

This is to certify that Shubam Gopal Urane, has successfully completed the Implant
Training work entitled “Web Developement” under my supervision, in the partial
fulfillment of the requirements for the Diploma in Computer Engineering, and the report
submitted to M.S.B.T.E. MUMBAI. For an academic year 2024-2025.

Date:

Place: S.I.T. Polytechnic , Yadrav .

Mrs. P. A. Patil. Mr. R. M. Patil. Mr. B. S. TASHILDAR.

Mentor Head of Department Principal

3
 ABSTRACT
Industrial training course is introduced to all diploma programs with an objective to
develop the traits of industry culture among the students before they enter in to world of
industry. By exposing and interacting with the real-life industrial setting, student will
appreciate and understand the actual working of an industry, best practices adopted in
industry. The industrial skills like, soft skills, life skills and hands-on will be inculcated
among the student. This short association with industry will be instrumental in orienting
the students in transforming them into industry ready output after completion of
diploma program.

 Course Outcomes:-

a) Communicate effectively (verbal as well as written) the work carried out.

b) Prepare and present the report of the work carried out.

c) Exercise time management and safety in the work environment.

d) Working in an item.

e) Demonstrate various quality assurances.

f) Exhibit the work carried out.

4
[Type here]

ACKNOWLEDGMENT
It is my great pleasure to present the honor and sincere gratitude to my guide Mr.
Afsar Shaikh (Industry person) , helped in joining the hands in developing each and
every step of this project and for valuable guidance and constant encouragement
during completion of project work. It was my privilege and pleasure to work under
her valuable guidance. I am indeed gratefully to her for providing me helpful
suggestions. Due to her constant encouragement and inspiration I could complete
my project work.

I am very thankful to Principal, Sharad Institute of Technology Polytechnic, Yadrav.

My grateful thanks to Mr. Afsar Shaikh Sir which is guide of our training for
their valuable guidance, support and constant encouragement.

I express thanks to my family and friends for their support and encouragement at
every stage of successful completion of this project work.

My sincere thanks to all those who have directly or indirectly helped me to carry
out this work

5
 INDEX

SR.NO. CONTEXT Page

NO.

1) STRUCTURE OF INDUSTRY 7

2) INTRODUCTION TO INDUSTRY 8

3) EQUIPMENTS USED IN INDUSTRY 10

4) PRODUCTION PLANNING AND CONTROL METHODS 11

5) SOFTWARE TESTING PROCESS 12

6) SOFTWARE PROCEDURES 13

7) PARTICULARS OF PRACTICAL EXPERIENCES 13

8) DESCRIPTION ABOUT PROJECT 14

9) CHALLENGING EXPERIENCES IN TRAINING 63

10) CONCLUSION 63

6
[Type here]

Chapter No.1 :- Structure to Industry

• Industry Layout:-

Cyphersa Softwares LLP.

CEO and Founder :-

Afsar Shikh

HR :- Aquib Shaikh

Trainer :- Afsar Shaikh

7
Chapter No.2:-Introduction to

Industry About Industry –

● Name of Industry:- Cyphersa Softwares LLP, Nashik.

● Industry Introduction:-

In November 2016, we started custom software and website development business with the brand name
of LiveSoft in Manmad, Nashik. Since then we continued the business under same name until we decided
to register our company. And then Cyphersa Softwares LLP came into existence and we registered our
company under the name of CHYPERSA on 30th of January, 2018. Since then we are continuing to
deliver better quality of custome softwares, websites and android mobile applications for any kind of
start-up business or an established business. Cyphersa is now located in Yeola, Nashik in state
of Maharashtra, India and we are ideally positioned to provide better software services for
clients.

● Products and

Services:-

Product:-

o School management Software .

o Hotel management Software.
o Gym management Software.
o Medical Plus.
o

Services:-
o Website development.

o Software Development.
8
o Social Media Marketing.

9
 o Graphic Design.

o Domain Registration & Web Hosting

 Some Projects of company:-

1) Applications:-

1. Website Development.

2. Software Development.

3. Graphic Design.

4. Social Media Marketing.

2) Some Services Provided By Company:-

Company is working on various kinds of technology like Software Development, Website

Development, Graphic Design , Social Media Marketing, Domain Registration, Web Hosting, AI.

● No of Employees:-

12 (Remotely)

1
Chapter No.3:-Types of major equipment is used in industry with
their specification.

1) Desktop Computers:-

Processor – Inter(R) Core(TM) i3-8100 CPU @

3.60GHz RAM-4.00GB (3.84 GB usable)

System Type-64bit OS, x64-based processor

2) Laptops:-

Processor – Inter(R) Core(TM) i3-8100 CPU @

3.60GHz RAM-8.00GB

System Type-64bit OS (Windows-10), x64-based processor 3) Server:-

3) Server:-
Cloud Computing .

1
Chapter No.4:- Manufacturing processes along with
production planning and control methods.

● Software Planning Process Model

Used Processing Model:-

Agile software development is an approach to software development under which requirements

and solutions evolve through the collaborative effort of self – organizing and cross- functional
team and their customer end. It advocates adaptive planning , evolutionary development , early
delivery , and Continual improvement and it encourages rapid and flexible response to change.

The meaning of Agile is swift or versatile. “Agile process model" refers to software Development
approach based on iterative development. Agile methods break tasks into smaller Iterations or parts do
not directly involve long term planning. The project scope and requirements are laid down at the
beginning of the development process. Plans regarding the number of iterations, the duration and the
scope of each iteration are clearly defined in advance.

Agile describes the methodology of agile project management as well as the methods and processes
of agile software development. This Company is firmly convinced of the advantages of agile methods.

IMG 1 – AGILE SOFTWARE DEVELOPEMENT

1
Chapter No.5:- Software testing process

 Software testing:

Software Testing is a method to check whether the actual software product matches expected
requirements and to ensure that software product is defect free. It involves execution of
software/system components using manual or automated tools to evaluate one or more properties of
interest. The purpose of software testing is to identify errors, gaps or missing requirements in contrast
to actual requirements.

Software testing is a set of processes aimed at investigating, evaluating and ascertaining the
completeness and quality of computer software. Software testing ensures the compliance of a
software product in relation with regulatory, business, technical, functional and user requirements.

 Agile testing:-

Agile testing is a software testing process that follows the principles of agile software development.
Agile testing methodology aligns with iterative Development Methodology in which requirements
develop gradually from customers and testing teams. The development is aligned with customer
requirements.

Agile testing process is a continuous process rather than being sequential. The testing begins at the start
of the project and there is ongoing integration between testing and development. The Common
objective of agile development and testing is to achieve a high product quality.

The agile testing life cycle includes the following 5 phases:-

1) Impact assessment
2) Agile Testing Planning
3) Release Readiness
4) Daily Scrums
5) Test Agility Review

1
Chapter No.6:- Safety Procedures

 Safety procedures used in company:-

All the machines of company are working, company didn’t require any safety measures.

Chapter No.7:-Particulars of Practical Experiences

In the industrial training, we got the skills, which will, help us for our future life and our
professional career also.

 Soft Skills:-
Knowledge about all new trending technology.

 Life Skills:-
We the cover gap between academic and industry.

 Hands-On:-
The whole Web Developement is hands on.

 Our other some developed skills are:-

Html
JavaScrip

t CSS

1
Chapter No 8-Description about project

 TITLE – Restaurant Management

 About Project:-

A restaurant website is a business website that aims to provide information on their

menu, service, location, and other services. It also provides directions to the restaurant.

It may also offer promotional discounts and special offers from the restaurants along
with recipes created by chefs. The goal of a restaurant website is to help consumers find
an establishment that best fits their needs.

 Aim of the project -

To Develop a website for Restaurant Management .

 Code of Project –

HTML Code :-

<!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.0" />
<title>Restraunt</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"

1
 integrity="sha512-
iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35
VZc2oM/gI1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T
" crossorigin="anonymous">

<script src="https://kit.fontawesome.com/e5d5559194.js" crossorigin="anonymous"></script>

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

</head>

<body>
<nav class="navbar">
<div class="navbar-container container">
<input type="checkbox" name="" id="">
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<ul class="menu-items">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#food">Category</a></li>
<li><a href="#food-menu">Menu</a></li>
<li><a href="#testimonials">Testimonial</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h1 class="logo">jACSON</h1>
</div>
</nav>
<section class="showcase-area" id="showcase">
<div class="showcase-container">
<h1 class="main-title" id="home">Eat Right Food</h1>
<p>Eat Healty, it is good for our health.</p>
<a href="#food-menu" class="btn btn-primary">Menu</a>
</div>
</section>

1
 <section id="about">
<div class="about-wrapper container">
<div class="about-text">
<p class="small">About Us</p>
<h2>We've beem making healthy food last for 10 years</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse
ab eos omnis, nobis dignissimos perferendis et officia
architecto, fugiat possimus eaque qui ullam excepturi suscipit
aliquid optio, maiores praesentium soluta alias asperiores saepe
commodi consequatur? Perferendis est placeat facere
aspernatur!
</p>
</div>
<div class="about-img">
<img src="https://i.postimg.cc/mgpwzmx9/about-photo.jpg" alt="food" />
</div>
</div>
</section>
<section id="food">
<h2>Types of food</h2>
<div class="food-container container">
<div class="food-type fruite">
<div class="img-container">
<img src="https://i.postimg.cc/yxThVPXk/food1.jpg" alt="error" />
<div class="img-content">
<h3>fruite</h3>
<a href="https://en.wikipedia.org/wiki/Fruit" class="btn btn-
primary" target="blank">learn
more</a>
</div>
</div>
</div>
<div class="food-type vegetable">
<div class="img-container">
<img src="https://i.postimg.cc/Nffm6Rkk/food2.jpg" alt="error" />
<div class="img-content">
<h3>vegetable</h3>
<a href="https://en.wikipedia.org/wiki/Vegetable" class="btn btn-
primary" target="blank">learn
more</a>
</div>
</div>
</div>
<div class="food-type grin">

1
<div class="img-container">

1
 <img src="https://i.postimg.cc/76ZwsPsd/food3.jpg" alt="error" />
<div class="img-content">
<h3>grin</h3>
<a href="https://en.wikipedia.org/wiki/Grain" class="btn btn-
primary" target="blank">learn
more</a>
</div>
</div>
</div>
</div>
</section>
<section id="food-menu">
<h2 class="food-menu-heading">Food Menu</h2>
<div class="food-menu-container container">
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/wTLMsvSQ/food-menu1.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Non, quae.
</p>
<p class="food-price">Price: &#8377; 250</p>
</div>
</div>

<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/sgzXPzzd/food-menu2.jpg" alt="error" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Non, quae.
</p>
<p class="food-price">Price: &#8377; 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/8zbCtYkF/food-menu3.jpg" alt="" />
</div>

1
 <div class="food-description">
<h2 class="food-titile">Food Menu Item 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Non, quae.
</p>
<p class="food-price">Price: &#8377; 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/Yq98p5Z7/food-menu4.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Non, quae.
</p>
<p class="food-price">Price: &#8377; 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/KYnDqxkP/food-menu5.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Non, quae.
</p>
<p class="food-price">Price: &#8377; 250</p>
</div>
</div>
<div class="food-menu-item">
<div class="food-img">
<img src="https://i.postimg.cc/Jnxc8xQt/food-menu6.jpg" alt="" />
</div>
<div class="food-description">
<h2 class="food-titile">Food Menu Item 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Non, quae.
</p>

2
 <p class="food-price">Price: &#8377; 250</p>
</div>
</div>
</div>
</section>
<section id="testimonials">
<h2 class="testimonial-title">What Our Customers Say</h2>
<div class="testimonial-container container">
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="https://i.postimg.cc/5Nrw360Y/male-photo1.jpg" alt="" />
<p class="customer-name">Ross Lee</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit voluptas cupiditate aspernatur odit doloribus non.
</p>

</div>
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="https://i.postimg.cc/sxd2xCD2/female-photo1.jpg" alt="" />
<p class="customer-name">Amelia Watson</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit voluptas cupiditate aspernatur odit doloribus non.

2
 </p>

</div>
<div class="testimonial-box">
<div class="customer-detail">
<div class="customer-photo">
<img src="https://i.postimg.cc/fy90qvkV/male-photo3.jpg" alt="" />
<p class="customer-name">Ben Roy</p>
</div>
</div>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit voluptas cupiditate aspernatur odit doloribus non.
</p>

</div>
</div>
</section>
<section id="contact">
<div class="contact-container container">
<div class="contact-img">
<img src="https://i.postimg.cc/1XvYM67V/restraunt2.jpg" alt="" />
</div>

<div class="form-container">
<h2>Contact Us</h2>
<input type="text" placeholder="Your Name" />
<input type="email" placeholder="E-Mail" />
<textarea cols="30" rows="6" placeholder="Type Your Message"></textarea>
<a href="#" class="btn btn-primary">Submit</a>
</div>
</div>
</section>
<div class="jumbotron"style="background-color:gray;">

<h2 style="color: Black; text-align: center; text-decoration: none; font-weight: bold;"> jACSON
</h2>
<h4 style="color: black; padding-left: 40px;"> Follow Us : -</h4>

2
 <a href="https://www.instagram.com/jaksoninns?igsh=MW16YW9xNmNuMzJjcw==">
<i class="fa-brands fa-instagram"></i></a>
<a href="https://www.facebook.com/jaksonhotels"> <i class="fa-brands fa-facebook"></i> </a>
<a href="https://api.whatsapp.com/send?phone=07774090289"><i class="fa-brands
fa- whatsapp"></i> </a>
<a href="https://x.com/jhplpvtltd"><i class="fa-brands fa-twitter"></i> </a>
<a href="https://youtube.com/@jaksoninns5917?si=MLgNS9xzkfuI-T5J"><i class="fa-brands
fa- youtube"></i></a><br><br>

<P style="color:black; font-family: Arial, Helvetica, sans-serif;text-align: center;font-weight:

bold;">JACSON RESTARUNT | JACSON HOSPITALITY | FACILITIES | PRESS & MEDIA |
ABOUT US | <br> BLOG | BUSINESS HOTEL</P><br>

<a href="" style="text-decoration: none;"> <h5 style=" color: black;padding-left: 40px;

text- decoration: none;"> Email :- [email protected]</h5></a>
<p style="color:black; padding-left: 40px;"> Jacson Hospitality (P) Ltd.
A-09, A-Wing, 4th Floor, Art Guild House,
Phoenix Market City, LBS Road, Near Kamani Bus Stop, Kurla – West, Mumbai – 400
070, Maharashtra, India.</p>
<hr style="color: black;">
<h5 style="color:white; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida
Sans Unicode', Geneva, Verdana, sans-serif;padding-left: 40px;">© jACSON Inns Hospitality | A part
of jacson Group.www.jakson.com All rights Reserved. Designed by Team Inertia Techologies.<br>
Thank You For Visiting us ...!!</h5>

</div>

<footer id="footer">
<h2>Restraunt &copy; all rights reserved</h2>
</footer>

</html>

</body>

</html>

 CSS Code :-

*,

*::after,

*::before {
2
 box-sizing: border-

box; padding: 0;

margin: 0;

.html {

font-size: 62.5%;

body {

font-family: "Poppins", sans-serif;

/* ///////////..utility classes../////////// */

.container {

max-width:

1200px; width:

90%; margin: auto;

.btn {

display: inline-block;

padding: 0.5em

1.5em; text-
2
decoration: none;

2
 border-radius:

50px; cursor:

pointer; outline:

none; margin-top:

1em;

text-transform:

uppercase; font-weight:

small;

.btn-primary

{ color: #fff;

background: #16a083;

.btn-primary:hover {

background: #117964;

transition: background 0.3s ease-in-out;

/* ............/navbar/.............*

/* desktop mode............/// */

.navbar input[type="checkbox"],

}
2
.navbar .hamburger-lines

{ display: none;

}
2
.navbar {

box-shadow: 0px 5px 10px 0px

#aaa; position: fixed;

width: 100%;

background:

#fff; color: #000;

opacity:

0.85; height:

50px; z-

index: 12;

.navbar-container

{ display: flex;

justify-content: space-

between; height: 64px;

align-items: center;

.menu-items {

order: 2;

}
2
display:

flex;

}
2
.menu-items li {

list-style:

none;

margin-left: 1.5rem;

margin-bottom:

0.5rem; font-size:

1.2rem;

.menu-items a {

text-decoration:

none; color: #444;

font-weight: 500;

transition: color 0.3s ease-in-out;

.menu-items a:hover

{ color: #117964;

transition: color 0.3s ease-in-out;

.logo {

font-weight:

bold; order: 1;
3
font-size: 2.3rem;

margin-bottom: 0.5rem;

3
}

/* ............//// Showcase styling ////.........*/

.showcase-area

{ height: 50vh;

background: linear-gradient(

rgba(240, 240, 240, 0.144),

rgba(255, 255, 255, 0.336)

),

url("https://i.postimg.cc/wT3TQS3V/header-

image2.jpg"); background-size: cover;

background-position: center;

background-repeat: no-

repeat;

.showcase-container

{ display: flex;

flex-direction:

column; align-items:

center; justify-content:

center; height: 100%;

3
font-size: 1.6rem;

3
}

.main-title {

text-transform:

uppercase; margin-top:

1.5em;

/* ......//about us//.......*/

#about {

padding: 50px 0;

background: #f5f5f7;

.about-wrapper {

display: flex;

flex-wrap:

wrap;

#about h2 {

font-size: 2.3rem;

#about p {
3
font-size:

1.2rem; color:

#555;

3
}

#about .small {

font-size:

1.2rem; color:

#666;

font-weight: 600;

.about-img {

flex: 1 1

400px;

padding: 30px;

animation: about-img-animation 1s ease-in-out forwards;

.about-text {

flex: 1 1

400px;

padding: 30px;

margin: auto;

transform: translate(-150%);

animation: about-text-animation 1s ease-in-out forwards;

}
3
@keyframes about-text-animation

{ 100% {

transform: translate(0);

3
 }

.about-img img {

display: block;

height: 400px;

max-width:

100%; margin:

auto; object-fit:

cover;

object-position: right;

/* ..........////Food category///...........*/

#food {

padding: 5rem 0 10rem 0;

#food h2 {

text-align: center;

font-size: 2.5rem;

font-weight: 400;
3
margin-bottom:

40px;

3
 text-transform:

uppercase; color: #555;

.food-container

{ display: flex;

justify-content: space-between;

.food-container img

{ display: block;

width: 100%;

margin: auto;

max-height: 300px;

object-fit: cover;

object-position:

center;

.img-container {

margin: 0 1rem;

position: relative;

.img-content {
4
position: absolute;

4
 top: 70%;

left: 50%;

transform: translate(-50%, -50%);

opacity: 0;

z-index: 2;

text-align: center;

transition: all 0.3s ease-in-out 0.1s;

.img-content h3

{ color: #fff;

font-size: 2.2rem;

.img-content a {

font-size:

1.2rem;

.img-container::after

{ content: "";

display: block;

position:

absolute; top: 0;
4
left: 0;

4
 width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.871);

opacity: 0;

z-index: 1;

transform:

scaleY(0);

transform-origin: 100%

100%; transition: all 0.3s

ease-in-out;

.img-container:hover::after

{ opacity: 1;

transform: scaleY(1);

.img-container:hover .img-content

{ opacity: 1;

top: 40%;

/* .........../Food Menu/............*/
4
.food-menu-heading

{ text-align: center;

4
 font-size:

3.4rem; font-

weight: 400;

color: #666;

.food-menu-container

{ display: flex;

flex-wrap: wrap;

padding: 50px 0px 30px 0px;

.food-menu-container img

{ display: block;

width: 250px;

height: 250px;

border-radius:

50%; object-fit:

cover;

object-position: center;

.food-menu-item

{ display: flex;
4
flex: 1 1 600px;

justify-content: space-evenly;

4
 margin-bottom: 3rem;

.food-description {

margin: auto 1.5rem;

.font-title {

font-size:

1.8rem; font-

weight: 400;

color: #444;

.food-description p

{ font-size:

1.4rem; color:

#555;

font-weight: 500;

.food-description .food-price

{ color: #117964;

font-weight: 700;
4
}

4
/* ........./ Testimonial /..........*/

#testimonials {

padding: 5rem

0;

background: rgba(243, 243, 243);

.testimonial-title {

text-align:

center; font-size:

2.8rem; font-

weight: 400;

color: #555;

.testimonial-container

{ display: flex;

justify-content: space-

between; font-size: 1.4rem;

padding: 1rem;

.testimonial-box .checked

{ color: #ff9529;
5
}

.testimonial-box .testimonial-text {

5
 margin: 1rem 0;

color: #444;

.testimonial-box {

text-align:

center; padding:

1rem;

.customer-photo img

{ display: block;

width: 150px;

height: 150px;

object-fit: cover;

object-position:

center; border-radius:

50%; margin: auto;

/* ........ Contact Us...........*/

#contact {

padding: 5rem
5
0;

background: rgb(226, 226, 226);

5
}

.contact-container

{ display: flex;

background: #fff;

.contact-img

{ width:

50%;

.contact-img img

{ display: block;

height: 400px;

width: 100%;

object-position:

center; object-fit:

cover;

.form-container

{ padding:

1rem; width:

50%; margin:
5
 auto;

.form-container input {

5
 display:

block; width:

100%; border:

none;

border-bottom: 2px solid

#ddd; padding: 1rem 0;

box-shadow:

none; outline:

none;

margin-bottom:

1rem; color: #444;

font-weight: 500;

.form-container textarea

{ display: block;

width:

100%;

border: none;

border-bottom: 2px solid

#ddd; color: #444;

outline: none;
5
 padding: 1rem

0; resize: none;

5
.form-container h2

{ font-size:

2.7rem; font-

weight: 500;

color: #444;

margin-bottom:

1rem; margin-top: -

1.2rem;

.form-container a

{ font-size:

1.3rem;

#footer h2 {

text-align:

center; font-size:

1.8rem; padding:

2.6rem; font-

weight: 500;

color: #fff;
5
 background: rgb(65, 65, 65);

/* ......../ media query /..........*/

5
@media (max-width: 768px) {

.navbar {

opacity: 0.95;

.navbar-container input[type="checkbox"],

.navbar-container .hamburger-lines

{ display: block;

.navbar-container

{ display: block;

position: relative;

height: 64px;

.navbar-container input[type="checkbox"]

{ position: absolute;

display:

block; height:

32px; width:

30px; top:

20px; left:

20px;
6
z-index: 5;

6
 opacity: 0;

.navbar-container .hamburger-lines

{ display: block;

height: 23px;

width: 35px;

position:

absolute; top:

17px;

left: 20px;

z-index:

2;

display: flex;

flex-direction: column;

justify-content: space-between;

.navbar-container .hamburger-lines .line

{ display: block;

height: 4px;

width: 100%;

border-radius:
6
 10px; background:

#333;

6
 .navbar-container .hamburger-lines .line1

{ transform-origin: 0% 0%;

transition: transform 0.4s ease-in-out;

.navbar-container .hamburger-lines .line2

{ transition: transform 0.2s ease-in-out;

.navbar-container .hamburger-lines .line3

{ transform-origin: 0% 100%;

transition: transform 0.4s ease-in-out;

.navbar .menu-items {

padding-top:

100px; background:

#fff; height: 100vh;

max-width: 300px;

transform: translate(-

150%); display: flex;

flex-direction: column;

margin-left: -40px;
6
 padding-left: 50px;

transition: transform 0.5s ease-in-

out; box-shadow: 5px 0px 10px 0px

#aaa;

.navbar .menu-items li {

margin-bottom:

1.5rem; font-size:

1.3rem;

font-weight: 500;

.logo {

position:

absolute; top:

5px;

right: 15px;

font-size:

2rem;

.navbar-container input[type="checkbox"]:checked ~ .menu-items

}
6
 { transform: translateX(0);

.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1

{ transform: rotate(35deg);

}
6
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2

{ transform: scaleY(0);

.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3

{ transform: rotate(-35deg);

/* ......./ food /..........*/

.food-container {

flex-direction:

column; align-items:

stretch;

.food-type:not(:last-child)

{ margin-bottom: 3rem;

.food-type {

box-shadow: 5px 5px 10px 0 #aaa;

.img-container

{ margin: 0;

}
6
}

}
6
@media (max-width: 500px)

{ html {

font-size: 65%;

.navbar .menu-items li

{ font-size: 1.6rem;

.testimonial-container {

flex-direction:

column; text-align:

center;

.food-menu-container img

{ margin: auto;

.food-menu-item {

flex-direction:

column; text-align:

center;

}
6
.form-container

{ width: 90%;

}
7
.contact-container

{ display: flex;

flex-direction: column;

.contact-img {

width: 90%;

margin: 3rem

auto;

.logo {

position:

absolute; top:

06px;

right: 15px;

font-size:

3rem;

.navbar .menu-items li {

margin-bottom:

2.5rem; font-size:

1.8rem;
7
 font-weight: 500;

i{

7
 color: black;

padding-left:

20px;

.fa-instagram{

color:black;

font-size:

25px;

margin-left: 35px;

.fa-twitter{

color:black;

font-size: 25px;

margin-

left:2px;

.fa-youtube{

color:black;

font-size:

25px;

margin-left: 2px;
7
}

.fa-facebook{

color:black;

font-size:

25px;

7
margin-left: 2px;

.fa-whatsapp{

color:black;

font-size:

25px;

margin-left:

2px; } i:hover{

color: white;

7
  Output :-

IMG 1. Home Page

IMG 2. About Page

7
IMG 3. Category Page

IMG 4. Menu Page

7
IMG 5. Testimonial Page

IMG 6. Contact Page

7
IMG 7. Footer Page

7
 CHAPTER NO. 9 – Challenging experiences encountered during
training.

 Challenging and special experiences in industry –

Overall at challenging knowledge about industrial and Real time

Working. CHAPTER NO.

 CHAPTER NO.10 – Conclusion :-

Industrial training in the metal parts manufacturing industry is an invaluable experience that
provides participants with practical knowledge and skills necessary for a successful career
in this field. This training encompasses various aspects of the developing website, using the
different Computer languages like React JS,CSS,HTML etc.