INTRODUCTION

1
 INTRODUCTION
The growing significance of websites for various organizations is well known. In
recognizing that a decision was made to develop a website for the college which
comprises all the required information about the college.

1.1 ABSTRACT

This project focuses on the development of a comprehensive website for the

College using HTML, CSS, MySQL, and PHP. The website serves as an online
platform to enhance communication and accessibility for students, faculty, and
administrators. Features include interactive pages, dynamic content, and a robust
database backend for efficient data management. The utilization of these
technologies ensures a seamless user experience and contributes to the
modernization of the college's online presence.

PURPOSE

The purpose of the project is to design, publish, and maintain a website for the
college which consists of all the information regarding the college like
infrastructure, faculty, transport facilities, etc.

ADVANTAGES
 Easy to navigate

 Provides all the comprehensive information about the college

2
 Flash items are provided wherever necessary

 All the nostalgic images are provided in the gallery

SYSTEM ANALYSIS

3
 2. SYSTEM ANALYSIS

2.1 EXISTING SYSTEM

The existing college website is static which makes it less interactive. It doesn't
have database connectivity. Moreover, students didn't have access to the details of
the college through the site, hence they were not updated about the latest events
and placement drives.

2.2 PROPOSED SYSTEM

In order to make the site dynamic and more interactive, a database link has been
included to the college website. Hence the recruiters have been provided with the
facility to post their eligibility criteria, vacancies and salary packages. In response,
a student can submit their willingness to appear for the drive along with their
personal details. Provision has also been made to display the latest events and
announcements associated with the college online. This project is developed using
the three-tier architecture which uses the following languages.

4
 SYSTEM
REQUIREMENTS

5
 3.1 SYSTEM REQUIREMENTS

3.1 HARDWARE REQUIREMENTS

 Processor: Celeron Dual Core

 RAM: 8 GB

 Hard disk: 128 GB

 Clock speed: 2.5 GHZ

3.2 SOFTWARE REQUIREMENTS

 Operating System: Windows 7

 Browser: Google Chrome

 Database: MYSQL

 Languages: HTML, PHP

6
 MODULE
DESCRIPTION
7
 4. MODULE DESCRIPTION

4.1 ADMIN
 Result

 Fees Details

 Course Registration

Description:
In the website admin can upload results, fee details, and online courses
provided by the college.

4.2 USER
 Login

 View Result

 View Fees Details

8
  View Course Registration

Description:

Users can access resources such as fees payment, examination results, and
online courses provided by the college.

9
 IMPLEMENTATION

4. IMPLEMENTATION

5.1 SOURCE CODE

About:
.but button{
background-color: #0275d8;
width: 80%;
color: white;
padding: 15px;
border-radius: 8px;
border: none;
text-align: center;
margin-left: 5px;
margin-right: 40px;

10
 font-size: 20px;
}
header {
background-color: #070e16;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 60px;
margin-left:50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 15px;
}
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.3s ease;
11
}
nav ul li a:hover {
color: #ff0000;
}
.about {
display: flex;
align-items: center;
padding: 80px 0;
}
.about-content {
flex: 1;
max-width: 600px;
padding-right: 50px;
color: #fff;
margin-left: 5%;
}
.about h2 {
font-size: 36px;
margin-bottom: 20px;
}
.about p {
font-size: 18px;
margin-bottom: 20px;
}
.about-image {
max-width: 50%;
margin-right: 5%;
12
}
.about-image img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
.dark-theme {
background-color: #070e16;
}
Contact:
.but button{
background-color: #0275d8;
width: 80%;
color: white;
padding: 15px;
border-radius: 8px;
border: none;
text-align: center;
margin-left: 5px;
margin-right: 40px;
font-size: 20px;
}
header {
background-color: #070e16;
padding: 20px;
display: flex;
align-items: center;
13
 justify-content: space-between;
}
.logo img {
height: 60px;
margin-left:50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 15px;
}
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #ff0000;
}
.contact {
background-color: #333;
padding: 80px 0;
14
 text-align: center;
color: #fff;
}
.contact-container {
max-width: 600px;
margin: 0 auto;
}
.contact h2 {
font-size: 36px;
margin-bottom: 40px;
}
.contact-info {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.info-item {
margin: 0 20px;
text-align: center;
}
.info-item i {
font-size: 24px;
margin-bottom: 10px;
}
.contact-form input,
.contact-form textarea {
display: block;
15
 width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
.contact-form textarea {
resize: vertical;
}
.contact-form button {
display: inline-block;
background-color: #ff0000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.contact-form button:hover {
background-color: #e60000;
}
Menu:
.but button{
background-color: #0275d8;
width: 80%;
color: white;
16
 padding: 15px;
border-radius: 8px;
border: none;
text-align: center;
margin-left: 5px;
margin-right: 40px;
font-size: 20px;
}
header {
background-color: #070e16;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 60px;
margin-left:50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 15px;
17
}
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #ff0000;
}
.menu {
padding: 80px 0;
text-align: center;
background-color: #070e16;
}
.menu h2 {
font-size: 36px;
margin-bottom: 40px;
color: #ffffff;
}
.menu-items {
display: flex;
justify-content: center;
}
.menu-item {
max-width: 300px;
margin: 0 20px;
18
 text-align: left;
}
.menu-item img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
}
.menu-item h3 {
font-size: 24px;
margin-bottom: 10px;
color: #ffffff;
}
.menu-item p {
font-size: 16px;
margin-bottom: 20px;
color: #ffffff;
}
Reserve
.but button{
background-color: #0275d8;
width: 80%;
color: white;
padding: 15px;
border-radius: 8px;
border: none;
text-align: center;
19
 margin-left: 5px;
margin-right: 40px;
font-size: 20px;
}
header {
background-color: #070e16;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 60px;
margin-left:50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 15px;
}
nav ul li a {
text-decoration: none;
color: white;
20
 font-weight: bold;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #ff0000;
}
.reservations {
background-color: #1f1f1f;
padding: 80px 0;
text-align: center;
}
.reservation-form {
max-width: 500px;
margin: 0 auto;
background-color: #333;
padding: 40px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.reservation-form h2 {
color: #fff;
font-size: 28px;
margin-bottom: 20px;
}
.reservation-form form input,
.reservation-form form textarea {
display: block;
21
 width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
.reservation-form form button {
display: inline-block;
background-color: #ff0000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.reservation-form form button:hover {
background-color: #e60000;
}
Styles
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
}
/*header*/
.but button{
22
 background-color: #0275d8;
width: 80%;
color: white;
padding: 15px;
border-radius: 8px;
border: none;
text-align: center;
margin-left: 5px;
margin-right: 40px;
font-size: 20px;
}
header {
background-color: #070e16;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 60px;
margin-left:50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
23
nav ul li {
display: inline-block;
margin-right: 15px;
}
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #ff0000;
}

/*hero*/
.hero {
background-image: url("hero-background1.jpg.jpeg");
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
text-align: left;
color: #fff;
}
.hero-content {
max-width: 600px;
padding: 20px;
24
 margin-top :50px;
margin-left: 4%;
}
.hero-content h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero-content p {
font-size: 24px;
margin-bottom: 30px;
}
.btn {
display: inline-block;
background-color: #ff0000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #e60000;
}
/*about*/
.about {
display: flex;
25
 align-items: center;
padding: 80px 0;
}
.about-content {
flex: 1;
max-width: 600px;
padding-right: 50px;
color: #fff;
margin-left: 5%;
}
.about h2 {
font-size: 36px;
margin-bottom: 20px;
}
.about p {
font-size: 18px;
margin-bottom: 20px;
}
.about-image {
max-width: 50%;
margin-right: 5%;
}
.about-image img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
26
.dark-theme {
background-color: #070e16;
}
/* menu*/
.menu {
padding: 80px 0;
text-align: center;
background-color: #070e16;
}
.menu h2 {
font-size: 36px;
margin-bottom: 40px;
color: #ffffff;
}
.menu-items {
display: flex;
justify-content: center;
}
.menu-item {
max-width: 300px;
margin: 0 20px;
text-align: left;
}
.menu-item img {
max-width: 100%;
height: auto;
border-radius: 5px;
27
 margin-bottom: 10px;
}
.menu-item h3 {
font-size: 24px;
margin-bottom: 10px;
color: #ffffff;
}
.menu-item p {
font-size: 16px;
margin-bottom: 20px;
color: #ffffff;
}
/* reservations*/
.reservations {
background-color: #1f1f1f;
padding: 80px 0;
text-align: center;
}
.reservation-form {
max-width: 500px;
margin: 0 auto;
background-color: #333;
padding: 40px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.reservation-form h2 {
28
 color: #fff;
font-size: 28px;
margin-bottom: 20px;
}
.reservation-form form input,
.reservation-form form textarea {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
.reservation-form form button {
display: inline-block;
background-color: #ff0000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.reservation-form form button:hover {
background-color: #e60000;
}
/* Testimonials Section*/
29
.testimonials {
padding: 80px 0;
text-align: center;
background-color: #070e16;
}
.testimonials h2 {
font-size: 36px;
margin-bottom: 40px;
color: #fff;
}
.testimonial {
max-width: 600px;
margin: 0 auto 40px;
text-align: left;
}
.testimonial img {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 20px;
}
.testimonial p {
font-size: 18px;
margin-bottom: 20px;
color: #fff;
}
30
.testimonial h4 {
font-size: 20px;
font-weight: bold;
color: #fff;
}
/* Gallery Section*/
.gallery {
padding: 80px 0;
text-align: center;
background-color: #070e16;
}
.gallery h2 {
font-size: 36px;
margin-bottom: 40px;
color: #fff;
}
.image-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
margin-left: 5%;
margin-right: 5%;
}
.image-item img {
width: 100%;
height: auto;
border-radius: 5px;
31
}
/* Contact Section*/
.contact {
background-color: #333;
padding: 80px 0;
text-align: center;
color: #fff;
}
.contact-container {
max-width: 600px;
margin: 0 auto;
}
.contact h2 {
font-size: 36px;
margin-bottom: 40px;
}
.contact-info {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.info-item {
margin: 0 20px;
text-align: center;
}
.info-item i {
font-size: 24px;
32
 margin-bottom: 10px;
}
.contact-form input,
.contact-form textarea {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
}
.contact-form textarea {
resize: vertical;
}
.contact-form button {
display: inline-block;
background-color: #ff0000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.contact-form button:hover {
background-color: #e60000;
}
33
/* Footer*/
.footer {
background-color: #070e16;
padding: 40px 0;
color: #fff;
text-align: center;
}

.footer-content {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
}
.footer-logo img {
max-width: 150px;
}
.footer-links a {
color: #fff;
margin: 0 10px;
text-decoration: none;
}
.footer-social a {
color: #fff;
margin: 0 5px;
text-decoration: none;
}
34
.footer-text {
font-size: 14px;
}

5.2 SCREENSHOTS

Home:

35
36
37
Contact Details:

38
Reservation Details:

39
40
CONCLUSION

6. CONCLUSION

41
The Burger Hut website project aimed to design and develop an interactive and
user-friendly online platform for customers to explore the restaurant's menu,
services, and promotions. Through the creation of this website, this project has
demonstrated the importance of having a strong online presence in the competitive
fast-food industry. The website, including online ordering, reservation systems, and
social media integration, provide customers with a seamless and engaging
experience. The website's responsive design ensures that it is accessible on various
devices, catering to a wide range of customers.

42
 FUTURE
ENHANCEMENT

43
 7. FUTURE ENHANCEMENT

 Search Engine Optimization (SEO): Implement SEO strategies to improve

the website's visibility in search engine results.

 Content updates: Regularly update the website's content, including menu

items, promotions, and events.

 Analytics integration: Track website analytics to monitor user behavior and

make data-driven decisions.

 Integrate payment gateways: Allow customers to pay online through

credit/debit cards, net banking, or digital wallets.

 Implement order tracking: Provide customers with real-time updates on their

order status.

 Develop a mobile app: Create a mobile app for Android and iOS devices to
provide a seamless ordering experience.

 Push notifications: Send personalized offers, promotions, and updates to

customers through push notifications.

44
BIBLIOGRAPHY

45
 8. BIBLIOGRAPHY

1. Books
- Kotler, P., & Keller, K. L. (2016). Marketing management. Pearson
Education.
- Laudon, K. C., & Laudon, J. P. (2017). Management information systems:
Managing the digital firm. Pearson Education.

2. Journals
- Kumar, N., & Mirchandani, R. (2017). E-commerce and digital marketing: A
review of literature. Journal of Marketing Management, 32(1-2), 1-25.
- Sharma, A., & Gadenne, D. (2017). The impact of social media on consumer
behavior. Journal of Consumer Behaviour, 16(2), 147-156.

3. Online Resources
- Burger King. (2022). About Us. Retrieved from (link unavailable)
- McDonald's. (2022). Our Story. Retrieved from (link unavailable)

4. Websites
- W3Schools. (2022). HTML Tutorial. Retrieved from (link unavailable)
- WordPress. (2022). (link unavailable) Retrieved from (link unavailable)

5. Reports
- Euromonitor International. (2022). Fast Food in the US. Retrieved from (link
unavailable)

46
 - Grand View Research. (2022). Fast Food Market Size, Share & Trends
Analysis Report. Retrieved from (link unavailable)

47