Techno Fest’s Website

DEERWALK SIFAL SCHOOL

TECHNO FEST’S WEBSITE

Submitted to
Santosh Shah
Deerwalk Sifal School

Submitted by
Binayak Kumar Mahato
22025
11/ Nilgiri
May,2021
Techno Fest’s Website

ABSTRACT

Nowadays the world has been changed. In every field the computer has been used. For

all sorts of information, the people go with the laptop and the internet. The people prefer the

laptop and mobile for the information than other medium. People want to save the time by

exacting searching for the news and event they want.

TECHNO FEST’S Website is the type of website that could be used to provide all the

information about the events and the time schedule of the upcoming events. The website as the

feature of filling and registering in the event it has made the user easy to know and be informed

about the everyday events and activity.

HTML, CSS, JavaScript, jQuery, and Bootstrap Template has been used to prepare the

project. HTML and CSS has been used to prepare the frontend layout of the project. Bootstrap

has been used for the responsiveness of the website. JavaScript has been used in the button

section to scroll up and down. For the testing purpose the website has been used and it has also

all the feature working.

Keywords: Techno Fest, Website, HTML, CSS, Responsiveness

Techno Fest’s Website

TABLE OF CONTENTS

CHAPTER 1: INTRODUCTION...................................................................... 1
1.1 Background ...................................................................................................................... 1
1.2 Problem Statement……………...……………………………………...… 2
1.3 Objective ...................................................................................................... 2

CHAPTER 2: SYSTEM DESIGN ..................................................................... 3

2.1 Development Phase .......................................................................................................... 3

CHAPTER 3: FIGURES……………………………………….……………..4
3.1: Online CDN code for bootstrap………………………………………………………..3
3.2: Social media icon code……………………………………………………...…………3
4.1: Homepage of the website…………………………………………………...…………5
4.2: About us section……………………………………………………………..………...5
4.3: Register form…………………………………………………………………..………6
4.4: Contact us form…………………………………………………………………..……6
4.5: Parallax Section…………………………………………………………………..……7

CHAPTER 4: CONCLUSION………………………………………………. 7
Techno Fest’s Website

CHAPTER 1: INTRODUCTION

1.1 Background

All in the twenty-first century revolves around technology. In every sector there has

been the use of technology for the various purpose. In grocery the computer has been used for

the selling of the product and keeping the record. In the same way the computer has been used

to replace the paperwork of the organization and make the data transparent. The various shop

have their website to advertise their new product and in the same way various institution has

been using the website to keep their the people updated about all the activities going on their

institution.

Nowadays, Most Probably all the shop, school and institution have their own website

and the management system. The website of the organization has been used to keep the

information publicly about the organization. This website also helps in the same way it has a

feature of adding the event and the time schedule for the event. It has a feature of showing the

number of student and the teacher in the institution and it also has the feature for showing the

number of events in the fest.

The system helps in the data transparency. The system has a feature of filling the form

to register in the event and it has the all the contact detail of the event. It has a feedback section

where the user can give their feedback about the event and their suggestion regarding the events

and the organization.

1
Techno Fest’s Website

1.2 Problem Statement

As of now in every school, institution, and organization there is the need of their

personal website. They have used their personal website to keep their staff, students and the

other people updated about the activities going on.

Techno Fest solves the problem of the data transparency. This website help in replacing

the paper work as it has the feature of fill the register form. Instead of getting the form from

the institution and filling it, the user can simply go onto the techno fest website and register

themself. It has also solved the problem of keeping the user updated about the time schedule

of the event. It has a feature of viewing the number of students, teachers and the total

participants.

It has a map on the footer section which help the user easy finding the institution. It has

all the contact detail so that the user may not have problem for reaching to them. Techno Fest

website help the institution to keep updated their every event and the photo regarding the event.

1.3 Objective

1. To implement HTML, CSS and JavaScript.

2. To present the information in fair and balanced way using Website.

3. To improve the satisfaction of the user.

2
Techno Fest’s Website

CHAPTER 2: SYSTEM DESIGN

2.1 Development Phase

The system has been developed in the two phases. Firstly, the research was done and

was decided to implement the HTML, CSS, JavaScript, jQuery, and bootstrap. The website

has a complete single page as a website. HTML has been used to design the frontend part and

the CSS has been used to customize it styles.

The whole website is based on the bootstrap so it is responsive for all the device.

There is a fixed navbar on left side of the website and there is the slider on the homepage

when the user enters the website. The system has been designed using the three main file one

is index.html for the implementation of html code, another is style.css for the implementation

of CSS code and the last one is script.js for the implementation of JavaScript and jQuery

code. All the file is linked with index.html.

Fig 3.1: Online CDN code for bootstrap

Code for the social media icon has been used in the website to place the social media
icon on the left fixed bar.

Fig 3.2: Social media icon code

3
Techno Fest’s Website

At the second part the website has the about us section which include the bit

knowledge about them. Then after there is an events section which all the event listed

in rows and column form and it also has the animation on page scrolling. So the

events comes one after another on scrolling the page. Then the parallax section has

been used which include the image in background and include some detail about the

number of colleges, number of events, seats available and the information about the

day left for the event. The main attraction include the three image which have the

transformation effect so it rotate when the mouse is hovered over the image. Fest

schedule include the detail about the time and table of the events included in the fest.

Then there is the register form where the user can register themselves into the events

and get participated. After that there is a what we love section which include the

image and the some text about the certain image and the image has an transformation

effect so it looks bit attractive. At last part of the website there is the contact section

which include the maps and the contact us form and the footer at the last part of the

website.

CHAPTER 3: FIGURES

4
Techno Fest’s Website

Fig. 4.1: Homepage of the website

Fig. 4.2: About us section

5
Techno Fest’s Website

Fig. 4.3: Register form

Fig. 4.4: Contact us form

6
Techno Fest’s Website

Fig. 4.5: Parallax Section

CHAPTER 4: CONCLUSION

This website could solve the problem for all the management of publishing the

information to the public in any techno fest. This website mostly comes in use when

any organization is organizing the techno fest and they have problem regarding the

advertising their event. The system is fully based on bootstrap and the skill of

JavaScript and jQuery has also been used which make the website load time faster. To

implement this website the employee of the respective organization does not need

much training so that it can be easier for the implementation.