INTERNSHIP REPORT

A report submitted in partial fulfillment of the requirements of

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
by

Name: Saurabh Kumar

Roll No: 1908390100056

Under Supervision of
Achintya Gaumat

Two waits Technologies Pvt. Ltd

(Duration:1st Aug to 31st Aug 2022)

Rajkiya Engineering College , Kannauj

Affiliated to

DR. A.P.J. ABDUL KALAM TECHNICAL UNIVERSITY,

LUCKNOW

2022-2023
 Rajkiya Engineering College , Kannauj
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that the “Internship report” submitted by Saurabh Kumar (Roll
No.1908390100056) is work done by him/her and submitted during 2022 – 2023 academic year, in
partial fulfillment of the requirements for the award of the degree of BACHELOR OF
TECHNOLOGY in COMPUTER SCIENCE AND ENGINEERING, at Two waits Technologies
Pvt. Ltd.

Mr. Abhishek Bajpayee Dr. BDK Patro

Internship Coordinator Head of the Department

Certificate of Internship
 ACKNOWLEDGEMENT

First I would like to thank Achintya Gaumat, Founder & chief Mentor of
Twowaits Technologies Pvt. Ltd. for giving me the opportunity to do an internship
within the organization.

I also would like to acknowledge all the people that worked along with me with
their patience and openness they created an enjoyable working environment.

It is indeed with a great sense of pleasure and immense sense of gratitude that I
acknowledge the help of these individuals.

I pay special thanks to my Head of the Department Dr. BDK Patro for his
constructive criticism throughout my internship.

I would like to thank Mr. Abhishek Bajpayee, Internship coordinator for his
support andadvise to get and complete internship in above said organization.

I am extremely great full to my department staff members and friends who helped
me in successful completion of this internship.

Saurabh Kumar

1908390100056

iv
 ABSTRACT

Website Design and learning HTML and CSS were the main objective of this internship. To
develop a web based application there are several programming languages that are in use.
Some of them are only used for the frontend and backend design of the software. For example,
HTML3, HTML4, HTML5, CSS, Bootstrap, JavaScript etc. There are also some other
programming languages that are used to develop the dynamic functions of the software or
application. For example-PHP, Java etc. Nowadays there are also some frameworks that use
vastly. Frameworks are basically structured programming by using Model, View and
Controller. It is also called as MVC. If we develop web based application that is very useful for
us because we can access it from anywhere in the world. It is very helpful for our daily life.
That is why I choose subject of my report as “WEB DESIGN”. Training in Universal
Informatics added huge experiences in my upcoming career. Solving real life problems was
another key issue. This report takes us through all the details of WEBSITE DESIGN
knowledge and experience gathered during this internship period.

In this Internship I have completed relevel frontend development test and have designed a
frontend of a website which can deliver food online using HTML, CSS and JavaScript. The
website is beautiful and is full of animations to make it more interesting.

v
 INDEX

S.no CONTENTS Page no

1. Introduction ........................................................................................................... 7

2. Analysis ...................................................................................................................8

3. Software requirements specifications ...................................................................... 8

4. Technology (for example) ........................................................................................ 9

4.1 HTML ................................................................................................................. 9

4.2 CSS .................................................................................................................... 9

4.3 JavaScript ............................................................................................................. 9

5. Coding… ...................................................................................................................... 9

6. Screenshots .................................................................................................................. 26

7. Conclusion .................................................................................................................... 28

8. Bibliography ................................................................................................................. 28

vi
 1. INTRODUCTION

As a full-time student at Rajkiya Engineering College , Kannauj, I was provided an opportunity to

undertake an internship at Two waits Technologies Pvt. Ltd.. The degree towards I am currently
studying is a Bachelor of Engineering in Computer Science and Technology. The programming
languages and development tools I was using were new for me, hence I had to quickly integrate not
only with my new living environment but also academically. This was very beneficial for me as at
the end I could compare what I’ve learnt with what I already knew and find a connection between
the two.

This report is a description of my 4 weeks internship carried out as a Tathastu Web Development
Intern at Two waits Technologies Pvt. Ltd. . In the following chapter details of tools and
technology used and an overview is given. Afterwards, I explain my role and tasks as a trainee and
give specific technical details about my main tasks. Finally, a conclusion is drawn from the
experience.

7
 2. ANALYSIS

The objective of the web design is to handle the entire design of a website. The software keeps track
of all the information about the entire website. The system contains database where all the
information will be stored safely.

This internship provided us essential skills and knowledge one requires in the field of web
designing. The crucial tools used during the tenure helped us in gaining knowledge about
programming languages.

By taking this training we enhanced our knowledge in Web designing and got insight in how the
websites are designed using HTML and CSS.

By interacting with my trainee and classmates I got to learn a lot. It helped me to enhance my
communicative skills and represent my work with confidence. It boosted my confidence to design
more webpages and create some great designs just for fun.

First we learned the theory aspect and then we put that into practice. By doing the practical work,
our concept got clearer and it was easy to code into HTML once we got familiar with it. By putting
our theoretical knowledge into practical, coding became more fun.

3. SOFTWARE REQUIREMENTS SPECIFICATIONS

 Code Editor: Visual Studion Code 1.73.1+

 Languages: HTML, CSS, JavaScript
 Operating System: Windows 10
 Browser: Google Chrome Version 108.0.5359.125 +

8
 4.TECHNOLOGY

This project majorly required the HTML, CSS and JAVASCRIPT in the minor use.

HTML
Html is the building block of a website. Html offers a lot of tags that helps to build a strong skeleton
of a website. In our project many tags like <h1>---<h6>,<br>, <p>, <div>, <class>, <nav>,
<script>.

CSS
When is came to styling the document, we have used CSS. CSS helped us to format, color the text
as well as images and gif etc. CSS also helped the website look beautiful and smooth.

JavaScript
Javascript was like the brain of the site. It tells where to go when I click on any section and many
other features.

5. CODING

HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yummy</title>
<!-- custom css file link -->
<link rel="stylesheet" href="index.css">
</head>
<body>

<!-- header section starts -->

<header>
<a href="#" class="logo"><i class="fas fa-utensils"></i>Yummy</a>
<div id="menu-bar" cla ss="fas fa-bars"></div>
9
 <nav class="navbar">
<a href="#home">home</a>
<a href="#speciality">Speciality</a>
<a href="#popular">Popular</a>
<a href="#gallery">Gallery</a>
<a href="#review">Review</a>
<a href="#order">Order</a>
</nav>
</header>

<!-- home section starts -->

<section class="home" id="home">
<div class="content">
<h3>FOOD WITH PERFECTION</h3>
<p>We are here to provide you the best quality and service food because
here we are belive in perfection . So,what are you waiting for just
<strong>Order</strong> it now and get amazing offers for the first <strong>5
orders</strong>.</p>
<a href="#order" class="btn">Order now</a>
</div>
<div class="image">
<img src="images/home.png" alt="home image">
</div>
</section>

<!-- speciality section starts -->

<section class="speciality" id="speciality">
<h1 class="heading"> Our <span>Speciality</span> </h1>
<div class="box-container">
<div class="box">
<div class="content">
<img src="images/s-1.png" alt="">
<h3>Tasty burger</h3>
<p>Regular bun crown, Tom-Mayo sauce, Sliced tomatoes, Shredded
onion, Aloo tikki patty, Regular bun heel</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/s-2.png" alt="">
<h3>Tasty pizza</h3>
<p>A pizza loaded with crunchy onions, crisp capsicum, juicy
tomatoes and jalapeno with a liberal sprinkling of exotic Mexican herbs.</p>
</div>
</div>
<div class="box">
10
 <div class="content">
<img src="images/s-3.png" alt="">
<h3>Ice-cream</h3>
<p>A pizza loaded with crunchy onions, crisp capsicum, juicy
tomatoes and jalapeno with a liberal sprinkling of exotic Mexican
herbs. </p>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/s-4.png" alt="">
<h3>Cold drinks</h3>
<p>A blend of aromatic tea and the fruity flavour of lemon, and so
many drinks. </p>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/s-5.png" alt="">
<h3>Tasty sweets</h3>
<p>The authentic Indian sweets from Mathura right to your
doorstep </p>
</div>
</div>
<div class="box">
<div class="content">
<img src="images/s-6.png" alt="">
<h3>Healty breakfast</h3>
<p>Quick meal, for your healthy and energetic day. </p>
</div>
</div>
</div>
</section>

<!-- popular section starts -->

<section class="popular" id="popular">
<h1 class="heading"> Most <span>popular</span> foods </h1>
<div class="box-container">
<div class="box">
<img src="images/burger.jpg" alt="">
<h3>Burger</h3>
<a href="#order" class="btn">Order now</a>
</div>
<div class="box">
<img src="images/cake.jpg" alt="">
<h3>tasty cakes</h3>
11
 <a href="#order" class="btn">order now</a>
</div>
<div class="box">
<img src="images/sweets.jpg" alt="">
<h3>tasty sweets</h3>
<a href="#order" class="btn">order now</a>
</div>
<div class="box">
<img src="images/cup_cake.jpg" alt="">
<h3>tasty cupcakes</h3>
<a href="#order" class="btn">order now</a>
</div>
<div class="box">
<img src="images/cold_drink.jpg" alt="">
<h3>cold drinks</h3>
<a href="#order" class="btn">order now</a>
</div>
<div class="box">
<img src="images/ice_cream.jpg" alt="">
<h3>cold ice-cream</h3>
<a href="#order" class="btn">order now</a>
</div>
</div>
</section>

<!-- steps section starts -->

<div class="step-container">
<h1 class="heading">how it <span>works</span></h1>
<section class="steps">
<div class="box">
<img src="images/step-1.jpg" alt="">
<h3>choose your favorite food</h3>
</div>
<div class="box">
<img src="images/step-2.jpg" alt="">
<h3>free and fast delivery</h3>
</div>
<div class="box">
<img src="images/step-3.jpg" alt="">
<h3>easy payments methods</h3>
</div>
<div class="box">
<img src="images/step-4.jpg" alt="">
<h3>and finally, enjoy your food</h3>
</div>
</section>
12
</div>

<!-- gallery section starts -->

<section class="gallery" id="gallery">
<h1 class="heading"><strong>OUR FOOD</strong><span> gallery </span> </h1>
<div class="box-container">
<div class="box">
<img src="images/newburger2.jpg" alt="">
<div class="content">
<h3><strong>BURGER</strong></h3>
<p>Triple layer burger with full of veggii and with loaded
chesse.Starting from just Rs.59/-</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/g-2.jpg" alt="">
<div class="content">
<h3><strong>SANDWICH</strong></h3>
<p>Crispy,full loaded sandwich with Low calories best for
diet.Starting from just Rs.69/-</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/g-3.jpg" alt="">
<div class="content">
<h3><strong>ROLLS</strong></h3>
<p>All varities of rolls veg and non-veg starting from just Rs.99/-
</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/cupi.jpg" alt="">
<div class="content">
<h3><strong>CUPCAKES</strong></h3>
<p>Varities of cupcake here with less sugar starting at just only
Rs.89/-</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/gulab.jfif" alt="">
<div class="content">
<h3><strong>SWEETS</strong></h3>
13
 <p>Less sweetner sweets starting from just only Rs.10/- per
piece</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/non-veg.jfif" alt="">
<div class="content">
<h3><strong>CHICKEN</strong></h3>
<p>Varities of chicken varities starting at just only Rs.100/-</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/eggu.jpg" alt="">
<div class="content">
<h3><strong>EGGITERIAN</strong></h3>
<p>Simple omellete and boiled egg avaliable only starting at just
Rs.49/-.</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/g-8.jpg" alt="">
<div class="content">
<h3><strong>CHOCOLATES</strong></h3>
<p>Free 1 packet chocalate when your order is above Rs 999/-
otherwise charges as per the menu.</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
<div class="box">
<img src="images/g-9.jpg" alt="">
<div class="content">
<h3>HANDMADE-BREADS</h3>
<p>Special hand-made breads avaliable just try now starting at just
only Rs.39/- per peice.</p>
<a href="#order" class="btn">order now</a>
</div>
</div>
</div>
</section>

<!-- review section starts -->

<section class="review" id="review">
14
 <h1 class="heading"> our customers <span>reviews</span> </h1>
<div class="box-container">
<div class="box">
<img src="images/SIMPLE.png" alt="">
<h3>Mr.Ravi Singh</h3>
<p>Best Quality of Food with minimum expensive.Thank You! ZING</p>
</div>
<div class="box">
<img src="images/RIYA.jpg" alt="">
<h3>Ms.Riya</h3>
<p>Discount are too good and you are just a worthy time and money.</p>
</div>
<div class="box">
<img src="images/granny.jpg" alt="">
<h3>Mrs.Lily roy</h3>
<p>Awesome taste and Fast delivery i never seen and value of time.</p>
</div>
</div>
</section>

<!-- order section starts -->

<section class="order" id="order">
<h1 class="heading"> <span>ORDER</span> NOW </h1>
<div class="row">
<div class="image">
<div style="width:100%;height:0;padding-
bottom:100%;position:relative;"><iframe
src="https://giphy.com/embed/YPEOcXlXCbWMif2KHi" width="100%" height="100%"
style="position:absolute" frameBorder="0" class="giphy-embed"
allowFullScreen></iframe></div><p><a"images/ordernow.gif"></a></p>
</div>
<form action="">
<div class="inputBox">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
</div>
<div class="inputBox">
<input type="number" placeholder="Number">
<input type="text" placeholder="Food Name">
</div>
<textarea placeholder="Address" name="" id="" cols="30"
rows="10"></textarea>
<input type="submit" value="Order Now" class="btn">
</form>
</div>
</section>
15
<!-- footer section -->
<section class="footer">
<div class="share">
<a href="https://facebook.com" class="btn">facebook</a>
<a href="#" class="btn">twitter</a>
<a href="https://https://www.instagram.com" class="btn">instagram</a>
<a href="#" class="btn">pinterest</a>
<a href="https://www.linkedin.com/feed/" class="btn">linkedin</a>
</div>
</section>

CSS File:
@import
url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&displ
ay=swap');

:root {
--red:#ff3838;
}

*{
font-family: ui-sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition:all .2s linear;
}

*::selection {
background:var(--red);
color:#fff;
}

html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}

16
body {
background:#e3caca;
}

section {
padding:2rem 9%;
}

.heading {
text-align: center;
font-size: 3.5rem;
padding:1rem;
color:#666;
}

.heading span {
color:var(--red);
}

.btn {
display: inline-block;
padding:.8rem 3rem;
border:.2rem solid var(--red);
color:var(--red);
cursor: pointer;
font-size: 1.7rem;
border-radius: .5rem;
position: relative;
overflow: hidden;
z-index: 0;
margin-top: 1rem;
}

.btn::before {
content: '';
position: absolute;
top:0; right: 0;
width:0%;
height:100%;
background:var(--red);
transition: .3s linear;
z-index: -1;
}

.btn:hover::before {
width:100%;
17
 left: 0;
}

.btn:hover {
color:#fff;
}

header {
position: fixed;
top:0; left: 0; right:0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background:#fff;
padding:2rem 9%;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

header .logo {
font-size: 3.4rem;
font-weight: 200;
color: #ef476f;
font-family:fantasy;
padding-right: .5rem;
color:var(--red);
}

header .navbar a {
font-size: 2rem;
margin-left: 2rem;
color:#666;
}

header .navbar a:hover {

color:var(--red);
}

#menu-bar {
font-size: 3rem;
cursor: pointer;
color:#666;
border:.1rem solid #666;
border-radius: .3rem;
padding:.5rem 1.5rem;
display: none;
18
}

.home {
display: flex;
flex-wrap: nowrap;
gap:1.5rem;
min-height: 100vh;
align-items: center;
background-size: cover;
background-position: center;
}

.home .content {
padding-top: 6.5rem;
}

.home .image img {

width:140%;
padding:2rem;
}

.home .content h3 {
font-size: 4rem;
color:#a92f2f;
}

.home .content p {
font-size: 1.7rem;
color:#666;
padding:1rem 0;
}

.speciality .box-container {
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

.speciality .box-container .box {

flex:1 1 30rem;
position: relative;
overflow: hidden;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border:.1rem solid rgba(0,0,0,.3);
cursor: pointer;
border-radius: .5rem;
19
}

.speciality .box-container .box .image {

height:100%;
width:100%;
object-fit: cover;
position: absolute;
top:-100%; left:0;
}

.speciality .box-container .box .content {

text-align: center;
background:#fff;
padding:2rem;
}

.speciality .box-container .box .content img {

margin:1.5rem 0;
}

.speciality .box-container .box .content h3 {

font-size: 2.5rem;
color:#333;
}

.speciality .box-container .box .content p {

font-size: 1.6rem;
color:#666;
padding:1rem 0;
}

.speciality .box-container .box:hover .image {

top:0;
}

.popular{
margin-left: auto;
margin-right: auto;

}
.popular .box-container {
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

20
.popular .box-container .box {
padding:2rem;
background:#fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border:.1rem solid rgba(0,0,0,.3);
border-radius: .5rem;
text-align: center;
flex:1 1 30rem;
position: relative;
}

.popular .box-container .box img {

height:25rem;
object-fit: cover;
width:100%;
border-radius: .5rem;
}

.popular .box-container .box .price {

position: absolute;
top:3rem; left:3rem;
background:var(--red);
color:#fff;
font-size: 2rem;
padding:.5rem 1rem;
border-radius: .5rem;
}

.popular .box-container .box h3 {

color:#333;
font-size: 2.5rem;
padding-top: 1rem;
}

.steps {
display: flex;
flex-wrap: wrap;
gap:1.5rem;
padding:1rem;
}

.steps .box {
flex:1 1 25rem;
padding:1rem;
text-align: center;
}
21
.steps .box img {
border-radius: 50%;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.steps .box h3 {
font-size: 3rem;
color:#333;
padding:1rem;
}

.gallery .box-container {
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

.gallery .box-container .box {

height:25rem;
flex:1 1 30rem;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border-radius: .5rem;
position: relative;
overflow:hidden;
}

.gallery .box-container .box img {

height:100%;
width:100%;
object-fit: cover;
}

.gallery .box-container .box .content {

position: absolute;
top:-100%; left:0;
height: 100%;
width:100%;
background:rgba(255,255,255,.9);
padding:2rem;
padding-top: 5rem;
text-align: center;
}

22
.gallery .box-container .box .content h3 {
font-size: 2.5rem;
color:#333;
}

.gallery .box-container .box .content p {

font-size: 1.5rem;
color:#666;
padding:1rem 0;
}

.review .box-container {
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

.review .box-container .box {

text-align: center;
padding:2rem;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
border-radius: .5rem;
flex:1 1 30rem;
background:#333;
margin-top: 6rem;
}

.review .box-container .box img {

height: 12rem;
width:12rem;
border-radius: 50%;
border:1rem solid #fff;
margin-top: -8rem;
object-fit: cover;
}

.review .box-container .box h3 {

font-size: 2.5rem;
color:#fff;
padding:.5rem 0;
}

.review .box-container .box .stars i {

23
 font-size: 2rem;
color:var(--red);
padding:.5rem 0;
}

.review .box-container .box p {

font-size: 1.5rem;
color:#eee;
padding:1rem 0;
}

.order .row {
padding:2rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
background:#fff;
display: flex;
flex-wrap: wrap;
gap:1.5rem;
border-radius: .5rem;
}

.order .row .image {

flex:1 1 30rem;
}

.order .row .image img {

height: 100%;
width:100%;
object-fit: cover;
border-radius: .5rem;
}

.order .row form {

flex:1 1 50rem;
padding:1rem;
}

.order .row form .inputBox {

display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.order .row form .inputBox input, .order .row form textarea {

padding:1rem;
margin:1rem 0;
24
 font-size: 1.7rem;
color:#333;
text-transform: none;
border:.1rem solid rgba(0,0,0,.3);
border-radius: .5rem;
width:49%;
}

.order .row form textarea {

width:100%;
resize: none;
height:15rem;
}

.order .row form .btn {

background:none;
}

.order .row form .btn:hover {

background:var(--red);
}

.footer {
background:#000;
text-align: center;
}

.footer .share {
display: flex;
gap:1.5rem;
justify-content: center;
flex-wrap: wrap;
}

JavaScript File:
let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');

menu.onclick = () => {
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}

window.onscroll = () => {
25
 menu.classList.remove('fa-times');
navbar.classList.remove('active');
if(window.scrollY > 60) {
document.querySelector('#scroll-top').classList.add('active');
}
else {
document.querySelector('#scroll-top').classList.remove('active');
}
}

function loader() {
document.querySelector('.loader-container').classList.add('fade-out');
}

function fadeOut() {
setInterval(loader, 3000);
}

window.onload = fadeOut();

6. SCREENSHOTS
Home Page:

26
Speciality Section

Order Page:

27
 7. CONCLUSION
Website Design and learning HTML and CSS were the main objective of this internship.
The project i work under this internship help me to learn frontend development by using HTML,
CSS and JavaScript.

8. BIBLIOGRAPHY
 http://www.w3schools.com
 -http://www.wikipidea.com
 -http://www.w3.org/standards/semanticweb/
 -http://developer.mozilla.org/en/docs
 -http://sioc-project.org/ontology

28