Scribd
Upload
15 views23 pages

Final Report

The document describes a mini project report on an event management website. It outlines the objectives to allow customers to book banquet halls and decorations online. It discusses the technologies used including HTML, CSS and JavaScript. It then provides screenshots of the output and source code for some of the pages.

Uploaded by

iti jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views23 pages

Final Report

The document describes a mini project report on an event management website. It outlines the objectives to allow customers to book banquet halls and decorations online. It discusses the technologies used including HTML, CSS and JavaScript. It then provides screenshots of the output and source code for some of the pages.

Uploaded by

iti jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

MINI PROJECT REPORT

On

“EVENT MANAGEMENT WEBSITE”

BACHELOR OF TECHNOLOGY IN COMPUTER SCIENCE


AND ENGINEERING

Submitted to-
Ms. SHWETA SAXENA
(Department of Computer Science & Engineering)

Submitted by-
ITI JAIN (2100680100167)

PAVITRA GUPTA (2100680130037)


3RD SEMESTER
DEPARTMENT OF COMPUTER
SCIENCE AND ENGINEERING/IT/EC/EE/BT/ME
MEERUT INSTITUTE OF ENGINEERING AND TECHNOLOGY, MEERUT
DECLARATION
We hereby declare that the project entitled -“EVENT MANAGEMENT WEBSITE”, which is being
submitted as Mini Project in department of Computer Science and engineering to Meerut Institute of
Engineering and

Technology, Meerut (U.P.) is an authentic record of our genuine work done under the guidance of
Assistant Prof “Ms. SHWETA SAXENA” of Computer Science and Engineering, Meerut Institute of
Engineering and Technology, Meerut.

Date: ITI JAIN & PAVITRA GUPTA

Place: MEERUT (2100680100167)(2100680130037)


CERTIFICATE

This is to certify that mini project report entitled – “EVENT MANAGEMENT WEBSITE”
submitted by “ITI JAIN” & “PAVITRA GUPTA” (2100680100167) (21000680130037) has been
carried out under the guidance of Assistant Prof “Ms. SHWETA SAXENA” of Computer Science
and Engineering, Meerut Institute of Engineering and Technology, Meerut. This project report is
approved for Mini Project (KCN 354) in 3rd semester in “COMPUTER SCIENCE AND
ENGINEERING” from Meerut Institute of Engineering and Technology, Meerut.

MS. SHWETA SAXENA

Date:

.
ACKNOWLEDGEMENT

I express my sincere indebtedness towards our guide Assistant Prof “MS. SHWETA SAXENA” of
Computer Science and Engineering, Meerut Institute of Engineering and Technology, Meerut for
her valuable suggestion, guidance and supervision throughout the work. Without her king patronage
and guidance the project would not have taken shape. I would also like to express my gratitude and
sincere regards for his kind approval of the project. Time to time counselling and advises.

I would also like to thank to our HOD Dr (Prof) “MR MUKESH RAWAT”, Department of
Computer Science and engineering, Meerut Institute of Engineering and Technology, Meerut for
his expert advice and counselling from time to time.

I owe sincere thanks to all the faculty members in the department of Computer Science and engineering for
their kind guidance and encouragement time to time.

Date - ITI JAIN & PAVITRA GUPTA

(2100680100167) (2100680130037)
TABLE OF CONTENTS

Description

Chapter 1 Introduction
Chapter 2 System Design
Technology Bucket
Chapter 3
3.1 Description of HTML

3.3 Description of CSS

3.4 Description of Java Script

Output screens
Chapter 4

Appendices Implementation code

References
CHAPTER-1 INTRODUCTION

➢ An online event managing website is a place where customers can directly


book banquet hall and decorations from our websites instead of going
through a local management office. It is a webbased booking system where
customers using a mobile app can use the online user interface to book
online.
Objectives :-

➢ Booking through a website is a modern and flexible way of managing event


and you can also see the places virtually.

➢ Through this website you can explore different location, decors and you can
compare the prices of decors and can book the cheaper and the best ones.
CHAPTER-2 SYSTEM DESIGN
CHAPTER-3 TECHNOLOGY BUCKET

3.1 HTML:
Hyper Text Markup Language (HTML) is a type of markup language It is used to make webpages.
Webpages can include writing, links, pictures, and even sound and video. HTML tells web
browsers what webpages should look like. HTML also adds meta information to webpages. Meta
information is information about a webpage e.g., the name of the person who created the page.
Web browsers usually do not show meta information. HTML is often used with cascading style
sheet (CSS) and java script. CSS is used to change the way HTML looks. JavaScript tells
websites how to behave. It can also change HTML and CSS.

• The <!DOCTYPE html>declaration defines this document to be HTML. • The < html> tag
encloses the complete html file and contains the header i.e.
<head>….</head> tag and the body tag i.e.<body>….</body>.
• The <head> tag contains the header of the file and also contains the <title>….</title> tag and the
<style>….</style> tag of CSS.
• The <title> tag contains the title of the html file which shows in the header of the browser. • The
<body> tag contains all the contents of an html document such as headings, paragraphs,
images, hyperlinks, tables, lists etc. The <h1> tag in html indicates a heading on a website. Html
has six different heading tags – h1, h2, h3, h4, h5, h6. • The <div> tag in html defines a division
or a section in an html document.
• The <form>Top of Form tag is used to create an html form for user input. The <input> tag is used
to create interactive controls for web-based forms in order to accept data from the user. • The
<button> tag is used to create a clickable button within html form on your webpage.
CSS:
• The CSS stands for Cascading Style Sheets and it is used for describing the presentation of a
document written in a markup language like html.
• The background-image property is used for set the image in the background. Syntax: body
{background-image: url (‘file name’);}
• In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name
preceded by a hash character (“#”).

• ID is used to identify one element and class is used to identify more than one element . • Margin
and padding are the two most commonly used properties for spacing out elements. Margin is the
space outside something and padding is the space inside something.
• The: hover selector is used to change the style of a button when you move mouse over them.
The border radius property defines the radius of the element’s corners. This property allows you to add
rounded corners to element
JAVASCRIPT:

• Alongside HTML and CSS, JAVASCRIPT is one of the core technologies of the World Wide
Web. • JavaScript enables interactive web pages and is an essential part of web applications.
• Validating input values of a web form to make sure that they are acceptable before being
submitted to the server.
• Animation of page elements such as fading them in and out resizing and moving them.
• Interactive content, such as games and videos. Loading new page content without reloading the
page.
.
OUTPUT SCREENS
SOURCE CODE
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>Best event organisers in India | Eventwithus.com</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="Eventwithus.com">
</div>
<ul>
<li class="item"><a href="#home">Home</a></li>
<li class="item"><a href="#services-container">Services</a></li>
<li class="item"><a href="#client-section">Our Clients</a></li>
<li class="item"><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<section id="home">
<h1 class="h-primary">Welcome to Eventwithus</h1>
<p>Welcome you all! This is our event organising webiste. we feel very
lucky to celebrate your Happy day </p>
<p>we peomise you that you will never regret on your decision of choosing
Eventwithus. </p>
<button class="btn">Book Now</button>
</section>
<section id="services-container">
<h1 class="h-primary center">Our Services</h1>
<div id="services">
<div class="box">
<img src="img/1.png" alt="">
<h2 class="h-secondary center">Food Catering</h2>
<p class="center">We take the catering of wedding ,
burthday,engagement..etc. we provide tasty food at reasonable price</p>
</div>
<div class="box">
<img src="img/2.png" alt="">
<h2 class="h-secondary center">Banquet hall booking and
decoration</h2>
<p class="center">we also offers packages for whole arrangements
from banquet hall to hotels with all theme based decorationsas per your choice.</p>
</div>
<div class="box">
<img src="img/3.png" alt="">
<h2 class="h-secondary center">photos and wedding dresses</h2>
<p class="center">we have service of photography and wedding dresses based on
the theme and jewellary also. On a whole we manages all your preaparation.
</p> </div>
</div>
</section>
<section id="client-section">
<h1 class="h-primary center">Our Gallery</h1>
<div id="clients">
<div class="client-item">
<img src="1.jpg" alt="Our Gallery">
</div>
<div class="client-item">
<img src="2.jpg" alt="Our Gallery">
</div>

<div class="client-item">
<img src="3.jpg" alt="Our Gallery">
</div>
<div class="client-item">
<img src="4.jpg" alt="Our Gallery">
</div>
</div>

</section>
<section id="contact">
<h1 class="h-primary center">Contact Us</h1>
<div id="contact-box">
<form action="">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" id="name" placeholder="Enter
your name">
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="email" name="name" id="email" placeholder="Enter
your email">
</div>
<div class="form-group">
<label for="phone">Phone Number: </label>
<input type="phone" name="name" id="phone" placeholder="Enter
your phone">
</div>
<div class="form-group">
<label for="message">Message: </label>
<textarea name="message" id="message" cols="30"
rows="10"></textarea> </div>
</form>
</div>
</section>
<footer>
<div class="center"> copyright &copy;
www.Eventwithus.com. All rights reserved!
</div>
</footer>
</body>
</html>

CSS CODE
/* CSS Reset */
*{ margin:
0; padding:
0;
}
html{
scroll-behavior: smooth;
}

/* CSS Variables */
:root{
--navbar-height: 59px;
}

/* Navigation Bar */
#navbar{ display:
flex; align-items:
center; position:
sticky; top: 0px;
}

#navbar::before{
content: ""; background-
color: black; position:
absolute; top:0px;
left:0px; height: 100%;
width:100%; z-index: -1;
opacity: 0.7;
}

/* Navigation Bar: Logo and Image */


#logo{
margin: 10px 34px;
}
#logo img{
height: 59px;
margin: 3px 6px;
}

/* Navigation Bar: List Styling */

#navbar ul{
display: flex;
font-family: 'Baloo Bhai', cursive;
}

#navbar ul li{ list-


style: none; font-size:
1.3rem;
}

#navbar ul li a{
color: white; display:
block; padding: 3px
22px; border-radius:
20px; text-decoration:
none;
}

#navbar ul li a:hover{
color: black; background-
color: white;
}

/* Home Section */
#home{ display: flex;
flex-direction: column;
padding:3px 200px;
height: 550px; justify-
content: center; align-
items: center;
}

#home::before{
content: "";
position: absolute;
background: url('../6.jpg') no-repeat center center/cover;
height: 642px; top:0px; left:0px; width: 100%;
z-index: -1;
opacity:0.89;
}
#home h1{ color:white; text-
align: center; font-family: 'Bree
Serif', serif;
}
#home p{ color:white; text-
align: center; font-size: 1.5rem;
font-family: 'Bree Serif', serif;
}
/* Services Section */
#services{ margin: 34px;
display: flex; } #services
.box{ border: 2px solid
brown; padding: 34px;
margin: 2px 55px;
border-radius: 28px;
background: #f2f2f2;
margin-bottom: 20px;
}

#services .box img{


height: 160px; margin:
auto; display: block;
}
#services .box
p{
font-family: 'Bree Serif', serif;

/* Clients Section */
#client-section{
position: relative;
}

#client-section::before{
content: ""; position:
absolute; background:
url('../bg.jpg'); width:
100%; height: 100%; z-index:
-1;
opacity: 0.3;
}
#clients{ display:
flex; justify-content:
center; align-items:
center;
}

.client-item{
padding: 34px;
}

#clients img{
height: 124px;
}

/* Contact Section */
#contact{
position: relative;
}
#contact::before{
content: "";
position: absolute;
width: 100%; height:
100%; z-index: -1;
opacity: 0.7;
background: url('../contact.jpg') no-repeat center center/cover;

}
#contact-box{ display:
flex; justify-content:
center; align-items:
center; padding-bottom:
34px;
}
#contact-box input,
#contact-box textarea{
width: 100%; padding:
0.5rem; border-
radius: 9px; font-
size: 1.1rem;
}

#contact-box form{
width: 40%;
}

#contact-box label{ font-


size: 1.3rem; font-family:
'Bree Serif', serif;

}
footer{
background: black;
color: white;
padding: 9px 20px;
}

/* Utility Classes */ .h-primary{


font-family: 'Bree Serif', serif;
font-size: 3.8rem; padding: 12px;
}
.h-secondary { font-family:
'Bree Serif', serif; font-size:
2.3rem; padding: 12px;
}
. btn { padding: 6px
20px; border: 2px solid
white; background-color:
brown; color: white;
margin: 17px; font-size:
1.5rem; border-radius:
10px; cursor: pointer;
}
. center { text-
align: center;
}
REFERENCES

 https://www.w3schools.com

 https://www.wikipedia.org

 https://www.google.co.in

You might also like