Scribd
Upload
39 views

Web project on event management system

The document outlines an Event Management website project, detailing its objectives, tech stack, design, and implementation. It includes information on the website's features, such as event selection, user feedback, and various service pages. Additionally, it provides source code snippets and a layout of the website's structure and functionality.

Uploaded by

madhushreeparmesh061
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
39 views

Web project on event management system

The document outlines an Event Management website project, detailing its objectives, tech stack, design, and implementation. It includes information on the website's features, such as event selection, user feedback, and various service pages. Additionally, it provides source code snippets and a layout of the website's structure and functionality.

Uploaded by

madhushreeparmesh061
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/ 19

CONTENTS

Chapter no. Page no.

1. Introduction 1

1.1 Objectives

1.2 Project Module

2. Tech Stack 2

2.1 Front End

2.2 Back End

3. Project Design 3

3.1 Operations Performed

4. Implementation 4

4.1 Source Code

5. Snapshots 6

7. Conclusion and Future Enhancement 10

8. References 10
Event Management ISE 2022

Chapter 1
INTRODUCTION

1.1 Overview
This is a Event management website where the people can choose the
events which they wants to be done and customers can write comments
and feedbacks on the website.

1.2 Project Module

The website contains 7 webpages:

1. Home Page
2. Service Page
3. About Us Page
4. Gallery Page
5. Price Page
6. Review Page
7. Contact Us Page

ISE, SVCE, Bangalore Page | 1


Event Management ISE 2022

Chapter 2
Tech Stack

2.1 Front End:

1. HTML
2. CSS
3. Javascript

2.2 Back End:

1. Xampp
2. HTTP Server
3. Server Communication is promise based

The front end and back end are integrated by React (JS Framework).

ISE, SVCE, Bangalore Page | 2


Event Management ISE 2022

Chapter 3
PROJECT DESIGN

3.1 Operations Performed


✓ Showcases all the services provided on the Service page dynamically.
✓ The website has many animations and on scroll animations have also
beenadded.
✓ It has a rich UI/UX which provides a good browsing experience.
✓ Viewers of the website can post comments on the selected events.
✓ Viewers can send their feedback and the feedback is recorded.

ISE, SVCE, Bangalore Page | 3


Event Management ISE 2022

Chapter 4
IMPLEMENTATION

4.1 Source 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>Complete Responsive Event Organizer Website Design Tutorial</title>

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- font awesome cdn link -->


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- custom css file link -->


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

</head>
<body>

<!-- header section starts -->

<header class="header">

<a href="#" class="logo"><span>e</span>vento</a>

<nav class="navbar">
<a href="#home">home</a>
<a href="#service">service</a>
<a href="#about">about</a>
<a href="#gallery">gallery</a>
<a href="#price">price</a>
<a href="#review">review</a>
<a href="#contact">contact</a>
</nav>

<div id="menu-bars" class="fas fa-bars"></div>

</header>

<!-- header section ends -->

<!-- home section starts -->

<section class="home" id="home">

<div class="content">
<h3>its time to celebrate! the best <span> event organizers </span></h3>
<a href="#" class="btn">contact us</a>
</div>
ISE, SVCE, Bangalore Page | 4
Event Management ISE 2022

<div class="swiper-container home-slider">


<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/slide-1.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slide-2.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slide-3.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slide-4.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slide-5.jpg" alt=""></div>
<div class="swiper-slide"><img src="images/slide-6.jpg" alt=""></div>
</div>
</div>

</section>

<!-- home section ends -->

<!-- service section starts -->

<section class="service" id="service">

<h1 class="heading"> our <span>services</span> </h1>

<div class="box-container">

<div class="box">
<i class="fas fa-map-marker-alt"></i>
<h3>venue selection</h3>
<p></p>
</div>

<div class="box">
<i class="fas fa-envelope"></i>
<h3>invitation card</h3>
<p></p>
</div>

<div class="box">
<i class="fas fa-music"></i>
<h3>entertainment</h3>
<p></p>
</div>

<div class="box">
<i class="fas fa-utensils"></i>
<h3>food and drinks</h3>
<p></p>
</div>

<div class="box">
<i class="fas fa-photo-video"></i>
<h3>photos and videos</h3>
<p></p>
</div>

<div class="box">
<i class="fas fa-birthday-cake"></i>
<h3>custom food</h3>
<p></p>
</div>
ISE, SVCE, Bangalore Page | 5
Event Management ISE 2022

</div>

</section>

<!-- service section ends -->

<!-- about section starts -->

<section class="about" id="about">

<h1 class="heading"><span>about</span> us </h1>

<div class="row">

<div class="image">
<img src="images/about-img.jpg" alt="">
</div>

<div class="content">
<h3>we will give a very special celebration for you</h3>
<p>We are a bunch of fun loving, energetic and passionate people working towards the common goal of
providing exceptional services. From stunning productions, strong themes and creative programs, we do
everything to create memorable experiences and branding opportunities that exceed customer
expectations.</p>
<p>We offer a wide range of event management services. Be it a Virtual conference, Award ceremony,
Product launch, Family event, Wedding, Sport event and so on. We are a one stop solution to all your
corporate situations.</p>
<a href="#" class="btn">contact us</a>
</div>

</div>

</section>

<!-- about section ends -->

<!-- gallery section starts -->

<section class="gallery" id="gallery">

<h1 class="heading">our <span>gallery</span></h1>

<div class="box-container">

<div class="box">
<img src="images/g-1.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-2.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
ISE, SVCE, Bangalore Page | 6
Event Management ISE 2022
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-3.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-4.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-5.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-6.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-7.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-8.jpg" alt="">
<h3 class="title">photos and events</h3>
ISE, SVCE, Bangalore Page | 7
Event Management ISE 2022
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

<div class="box">
<img src="images/g-9.jpg" alt="">
<h3 class="title">photos and events</h3>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-share"></a>
<a href="#" class="fas fa-eye"></a>
</div>
</div>

</div>

</section>

<!-- gallery section ends -->

<!-- price section starts -->

<section class="price" id="price">

<h1 class="heading"> our <span>price</span> </h1>

<div class="box-container">

<div class="box">
<h3 class="title">for birthdays</h3>
<h3 class="amount">Rs.19,874</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li> <i class="fas fa-check"></i> decorations </li>
<li> <i class="fas fa-check"></i> music and photos </li>
<li> <i class="fas fa-check"></i> food and drinks </li>
<li> <i class="fas fa-check"></i> invitation card </li>
</ul>
<a href="#" class="btn">check out</a>
</div>

<div class="box">
<h3 class="title">for weddings</h3>
<h3 class="amount">Rs.35,709</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li> <i class="fas fa-check"></i> decorations </li>
<li> <i class="fas fa-check"></i> music and photos </li>
<li> <i class="fas fa-check"></i> food and drinks </li>
<li> <i class="fas fa-check"></i> invitation card </li>
</ul>
<a href="#" class="btn">check out</a>
</div>

<div class="box">
<h3 class="title">for concerts</h3>
ISE, SVCE, Bangalore Page | 8
Event Management ISE 2022
<h3 class="amount">Rs.51,545</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li> <i class="fas fa-check"></i> decorations </li>
<li> <i class="fas fa-check"></i> music and photos </li>
<li> <i class="fas fa-check"></i> food and drinks </li>
<li> <i class="fas fa-check"></i> invitation card </li>
</ul>
<a href="#" class="btn">check out</a>
</div>

<div class="box">
<h3 class="title">for others</h3>
<h3 class="amount">Rs.67,381</h3>
<ul>
<li><i class="fas fa-check"></i>full services</li>
<li> <i class="fas fa-check"></i> decorations </li>
<li> <i class="fas fa-check"></i> music and photos </li>
<li> <i class="fas fa-check"></i> food and drinks </li>
<li> <i class="fas fa-check"></i> invitation card </li>
</ul>
<a href="#" class="btn">check out</a>
</div>

</div>

</section>

<!-- price section ends -->

<!-- review section starts -->

<section class="reivew" id="review">

<h1 class="heading">client's <span>review</span></h1>

<div class="review-slider swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide box">


<i class="fas fa-quote-right"></i>
<div class="user">
<img src="images/pic-1.png" alt="">
<div class="user-info">
<h3>john deo</h3>
<span>happy clients</span>
</div>
</div>
<p>Really good.</p>
</div>

<div class="swiper-slide box">


<i class="fas fa-quote-right"></i>
<div class="user">
<img src="images/pic-2.png" alt="">
<div class="user-info">
<h3>john deo</h3>
ISE, SVCE, Bangalore Page | 9
Event Management ISE 2022
<span>happy clients</span>
</div>
</div>
<p>Really good.</p>
</div>

<div class="swiper-slide box">


<i class="fas fa-quote-right"></i>
<div class="user">
<img src="images/pic-3.png" alt="">
<div class="user-info">
<h3>john deo</h3>
<span>happy clients</span>
</div>
</div>
<p>Really good.</p>
</div>

<div class="swiper-slide box">


<i class="fas fa-quote-right"></i>
<div class="user">
<img src="images/pic-4.png" alt="">
<div class="user-info">
<h3>john deo</h3>
<span>happy clients</span>
</div>
</div>
<p>Really good.</p>
</div>

</div>

</div>

</section>

<!-- review section ends -->

<!-- contact section starts -->

<section class="contact" id="contact">

<h1 class="heading"> <span>contact</span> us </h1>

<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="subject">
</div>
<textarea name="" placeholder="your message" id="" cols="30" rows="10"></textarea>
<input type="submit" value="send message" class="btn">
</form>

</section>

ISE, SVCE, Bangalore Page | 10


Event Management ISE 2022
<!-- contact section ends -->

<!-- footer section starts -->

<section class="footer">

<div class="box-container">

<div class="box">
<h3>branches</h3>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Mysore </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Banglore </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Kolar </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Hyderabad </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Chennai </a>
</div>

<div class="box">
<h3>quick links</h3>
<a href="#"> <i class="fas fa-arrow-right"></i> home </a>
<a href="#"> <i class="fas fa-arrow-right"></i> service </a>
<a href="#"> <i class="fas fa-arrow-right"></i> about </a>
<a href="#"> <i class="fas fa-arrow-right"></i> gallery </a>
<a href="#"> <i class="fas fa-arrow-right"></i> price </a>
<a href="#"> <i class="fas fa-arrow-right"></i> reivew </a>
<a href="#"> <i class="fas fa-arrow-right"></i> contact </a>
</div>

<div class="box">
<h3>contact info</h3>
<a href="#"> <i class="fas fa-phone"></i> +91 8431024822 </a>
<a href="#"> <i class="fas fa-phone"></i> +91 9353357731 </a>
<a href="#"> <i class="fas fa-envelope"></i> harshithas@gmail.com </a>
<a href="#"> <i class="fas fa-envelope"></i> madhushree@gmail.com </a>
<a href="#"> <i class="fas fa-map-marker-alt"></i> Banglore, india - 560001 </a>
</div>

<div class="box">
<h3>follow us</h3>
<a href="#"> <i class="fab fa-facebook-f"></i> facebook </a>
<a href="#"> <i class="fab fa-twitter"></i> twitter </a>
<a href="#"> <i class="fab fa-instagram"></i> instagram </a>
<a href="#"> <i class="fab fa-linkedin"></i> linkedin </a>
</div>

</div>

<div class="credit"> created by <span>MHK</span> | all rights reserved </div>

</section>

<!-- footer section ends -->

<!-- theme toggler -->

<div class="theme-toggler">

<div class="toggle-btn">
<i class="fas fa-cog"></i>
ISE, SVCE, Bangalore Page | 11
Event Management ISE 2022
</div>

<h3>choose color</h3>

<div class="buttons">
<div class="theme-btn" style="background: #3867d6;"></div>
<div class="theme-btn" style="background: #f7b731;"></div>
<div class="theme-btn" style="background: #ff0033;"></div>
<div class="theme-btn" style="background: #20bf6b;"></div>
<div class="theme-btn" style="background: #fa8231;"></div>
<div class="theme-btn" style="background: #FC427B;"></div>
</div>

</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- custom js file link -->


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

</body>
</html>

ISE, SVCE, Bangalore Page | 12


Event Management ISE 2022

Chapter 5
SNAPSHOTS

Home Page

ISE, SVCE, Bangalore Page | 13


Event Management ISE 2022

Service Page

About Us Page

ISE, SVCE, Bangalore Page | 14


Event Management ISE 2022

Gallery Page

ISE, SVCE, Bangalore Page | 15


Event Management ISE 2022

Pricing Page

Review Page

ISE, SVCE, Bangalore Page | 16


Event Management ISE 2022

Contact Us Page

ISE, SVCE, Bangalore Page | 17


Event Management ISE 2022

Chapter 6
CONCLUSIONS

This website is made for customers to view different events, concerts and check out the
pricing for the services provided, post comments and send feedbacks. The website has a
rich UI and UX to make it user friendly. The event owner can even add more events by
updating the database. Animation on scroll is used in all pages to enhance the user
experience.

FUTURE ENHANCEMENT

• More Services can be added.


• Creating an admin panel to add new events.
• Creating a login system.

REFERENCES

• W3 Schools (https://www.w3schools.com/w3css/defaulT.asp)
• Stack Over Flow (Debugging and error solutions)
• Coursera (React Tutorial)
• Animation On Scroll Library for React (https://michalsnik.github.io/aos/)

ISE, SVCE, Bangalore Page | 18

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy