Wad Casestudy 1

A Project Report submitted in partial fulfilment of the requirements for the award of
the degree of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING
Submitted by:
M.P. RAJU 322010302027
B S M Satyanarayana Reddy 322010302037
G. Sriram Sagar 322010302019
Under the esteemed

guidance of
Mr. GUNTI SPANDAN

Assistant Professor
Department of Computer
Science & Engineering,
GITAM SCHOOL OF
TECHNOLOGY
GANDHI INSTITUTE OF TECHNOLOGY AND MANAGEMENT

(Deemed to be University)
Bengaluru Campus.
April 2023
CERTIFICATE
This is to certify that the project report entitled “EVENT
ORGANIZER WEBSITE USING HTML & CSS & JAVASCRIPT”
is a Bonafede record of work carried out by Our Team
submitted in partial fulfillment of requirement for the award of degree of
Bachelors of Technology in Computer Science and Engineering
.
Project Guide.
SIGNATURE OF THE GUIDE
Mr GUNTI SPANDAN,
Assistant Professor.
DECLARATION
We, hereby declare that the project report entitled “EVENT

ORGANIZER WEBSITE USING HTML & CSS & JAVASCRIPT”
is an original work done in the Department of Computer Science
and Engineering, GITAM Institute of Technology, GITAM
(Deemed to be University) submitted in partial fulfillment of the
requirements for the award of the degree of B.Tech. in Computer
Science and Engineering. The work has not been submitted to any
other college or University for the award of any degree.
Date:
Registration No(s). Name(s) Signature(s)

322010302027 M.P. RAJU
322010302037 B S M SATYANARAYANA REDDY
322010302019 G. SRIRAM SAGAR

ACKNOWLEDGEMENT
We were able to complete our project successfully. However, it

would not have been possible without the kind support and help of
many individuals. We would like to extend our sincere thanks to all
of them.
We are highly indebted to GITAM (Deemed to be University),

Bangalore for their guidance and constant supervision as well as for
providing necessary information regarding the project and also for
their support in completing the project.
Would like to express our gratitude towards Mr. Gunti Spandan

(CSE, GST) and also to all the other supporting faculty and staff for
their kind cooperation and encouragement which helped us in the
completion of this project
.
M P RAJU - 322010302027
BSM SURYA– 322010302037
G. SRIRAM SAGAR – 32010302019
[ii]
Dept. of CSE, GITAM,
Bengaluru
ABSTRACT
A website that has been designed using some basic HTML, CSS,
JAVASCRIPT, that has About page, Index page, Services page to
allow user to register to learn in our website.
We allow anyone to our course to learn something new we always

support any kind of learner who are eager to learn something new in
their life to upgrade themselves. So, we think of an idea of a classes
that could conduct by our own students and been managed by our
own students.
We created a Index page it is the home page of our website it was

having a picture that have been used in the webpage and some styles
using some basic CSS styles.
We Created a About page it was having a details of group members in

it and then it has some CSS styles.
Services page has the Course details that are related to our Courses.
WAD CASESTUDY
TOPIC: SIMPLE BASIC WEBSITE USING HTML & CSS & JAVASCRIPT
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Simple web design">
<meta name="keywords" content="web design, affordable web design, professional web

design">
<meta name="author" content="Manideep ">
<title>Simple Web Design | Welcome</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<h1><span id="acme">Simple</span> Web Design</h1>
<nav>
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
</div>
</header>
<section class="showcase">
<h1>Simple Web Design for WAD</h1>
<p>This Simple Website was done by Lakshmi Narayana, Manideep, Loka Surya.</p>
</div>
</section>
<aside class="newsletter">
<p>Enter your Email Address</p>
<form>
<input for="email" type="email" placeholder="Enter Email">
<button type="submit" id="email">Subscribe</button>
</form>
</div>
</aside>
<section class="boxes">
<div class="box">
<img src="images\logo_html.png" width="90" height="90" alt="HTML5 Markup Logo">
<h3>HTML5 Markup</h3>
<p>We used HTML in this Website</p>
</div>
<div class="box">
<img src="images\logo_css.png" width="90" height="90" alt="CSS3 Styling Logo">
<h3>CSS3 Styling</h3>
<p>We used CSS in this Website</p>
</div>
<div class="box">
<img src="images\javascript.png" width="200" height="90" alt="Graphic Design Logo">

<h3>Graphic Design</h3>
<p>JavaScript was used in this Website</p>
</div>
</div>
</section>
<div style="clear:both"></div>
<footer>
<p>Simple Web Deisgn, Copyright © 2022</p>
</footer>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Affordable and professional web design">

design">
<meta name="author" content="Lakshmi Narayana ">
<title>Acme Web Design | About US</title>
</head>
<body>
<header>
<h1><span id="acme">Acme</span> Web Design</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li class="current"><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
</div>
</header>
<p>Enter your Email</p>
<form>
</form>
</div>
</aside>
<section id="main-col">
<article class="about">
<h2>About Us</h2>
<p>We Btech Students from GITAM UNIVERSITY BANGALORE created a simple website by using
HTML, CSS, JAVASCRPIT as per our Knowledge for our mini project in our 6th Semester
</p>
<p>Created by-
<br>
Lakshmi Naryana
<br>
Manideep.Ch<br>
Loka Surya
</p>
</article>
<aside id="whatwedo">
<h3>Submitting to:</h3>
<p>Mrs Swastika Jain T J<br>
Mrs.Bhanu Jyothi
</p>
</aside>
</div>
</section>
<footer>
<p>Simple Web Deisgn,Copyright &copy ; 2022</p>
</footer>
</body>
</html>
Services.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Affordable and professional web design">

design">
<meta name="author" content="Loka Surya">
<title>Simple Web Design | Services</title>
</head>
<body>
<header>
<h1><span id="acme">Simple</span> Web Design</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="current"><a href="services.html">Services</a></li>
</ul>
</nav>
</div>
</header>
<p>Enter your Email</p>
<form>
</form>
</div>
</aside>
<section id="main-col">
<article class="services">
<h2>Services</h2>
<section class="serv-list">
<h3>Basics HTML</h3>
<p>We will explain from basics to advanced HTML.</p>
<p>Pricing: Rs1,000 - Rs3,000</p>
</section>
<h3>Basics of CSS</h3>
<p>We will explain from basics to advanced CSS.</p>

<p>Pricing: $2500 </p>
</section>
<h3>Website Hosting</h3>
<p>We will explain from basics to advanced JAVASCRIPT.</p>
<p>Pricing: Rs2500 </p>
</section>
</article>
<aside id="whatwedo">
<h3>Enter you Details</h3>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Name">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email Address">
<label for="message">Message</label>
<input type="textarea" id="message" placeholder="Message">
<button type="button" id="button" name="button">Send</button>
</aside>
</div>
</section>
<footer>
<p>Simple Web Deisgn, Copyright © 2022</p>
</footer>
</body>
</html>
Styles.css
/*Global Style */
*{
margin: 0;
padding: 0;
.container {
width: 80%;
margin:auto;
overflow:hidden;
/*Header Style*/
header {
margin:0;
padding: 32px 0px;
color: #ffffff;
background-color: #35424a;
border-bottom:#e8491d 3px solid;
#acme {
color:#e8491d;
header h1 {
float:left;
font-size: 32px;
font-weight: bold;
header nav {
float: right;
padding-top: 10px;
li {
display:inline;
padding-right: 25px;
li a {
font-size: 22px;
color: #ffffff;
text-decoration: none;
.current a{
color:#e8491d;
a:hover{
color:#e8491d;
/*ShowCase Area Style*/
.showcase {
text-align: center;
color:#ffffff;
height: 400px;
background-image:url(../images/showcase.jpg);
background-repeat: no-repeat;
background-position:center;
background-size: cover;
.showcase h1 {
padding: 60px 0 20px 0;
font-size: 60px;
.showcase p {
padding: 10px;
font-size: 20px;
}
/*Newsletter Area Style*/
.newsletter {
padding: 32px 0;
background:#35424a;
color:#ffffff;
.newsletter p {
font-weight: bold;
font-size: 25px;
float: left;
width: 65%;
input{
width: 250px;
border: 0;
padding: 10px 0px;
button {
border: 0;
padding: 10px;
color:#ffffff;
background:#e8491d;
.boxes {
background:#f4f4f4;
.box {
height: 300px;
width: 30%;
float:left;
text-align: center;
.box img {
padding: 20px 0;
.box h3 {
font-size: 20px;
padding: 10px 0;
.box p {
padding: 10px 10px;
#main-col {
background:#f4f4f4;
/*About Page Style*/
.about {
float:left;
width: 65%;
padding:20px 0px;
.about h2 {
font-size: 20px;
padding: 10px 0px;
.about p {
font-size: 17px;
padding: 10px 0px;
line-height: 23px;
}
#whatwedo {
margin-top: 15px;
padding: 25px 10px;
float: right;
width: 30%;
color: #ffffff;
background-color: #35424a;
#whatwedo h3 {
font-size: 20px;
padding: 15px 10px;
#whatwedo p {
line-height: 23px;
font-size: 17px;
padding: 10px 10px;
#whatwedo input {
width: 300px;
margin: 5px 0px;
#button {
width: 70px;
margin-top: 10px;
.services {
float:left;
width: 65%;
padding:20px 0px;
}
.services h2 {
font-size: 21px;
padding: 10px 0px;
.serv-list {
margin-bottom: 5px;
background:#e6e6e6;
padding: 20px;
border: 1px solid darkgray;
.serv-list h3 {
font-size: 18px;
font-weight: bold;
padding: 15px 0px;
.serv-list p {
font-size: 17px;
padding: 7px 0px;
line-height: 24px;
/*Footer Style */
footer {
padding: 27px;
text-align: center;
font-size: 16px;
background-color:#e8491d;
color: #ffffff;
}
/*Media Queries*/
@media(max-width: 768px){
header h1, nav {
float: none;
text-align: center;
width: 100%;
li {
padding-right: 10px;
.showcase h1 {
padding: 60px 0 20px 0;
font-size: 35px;
.showcase p {
padding: 10px;
.newsletter p {
padding: 10px 0px;
text-align: center;
font-size: 20px;
float: none;
width: 100%;
input{
width: 100%;
margin: 10px 0px;
button {
width: 100%;
.box {
height: 300px;
width: 100%;
float:none;
text-align: center;
.about {
float:none;
width: 100%;
padding:20px 0px;
text-align: center;
.about p {
font-size: 16px;
padding: 10px 10px;
line-height: 20px;
#whatwedo {
text-align: center;
margin-top: 15px;
padding: 25px 5px;
float: none;
width: 100%;
#whatwedo input {
width: 100%;
margin: 5px 0px;
#button {
width: 100%;
margin-top: 10px;
.services {
text-align: center;
float:none;
width: 100%;
padding:20px 0px;
}
M. P RAJU
B SURYA
G SAGAR
Thank you

Wad Casestudy 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wad Casestudy 1

Uploaded by

Copyright:

Available Formats

A Project Report submitted in partial fulfilment of the requirements for the award of

COMPUTER SCIENCE AND ENGINEERING

Under the esteemed

Mr. GUNTI SPANDAN

GANDHI INSTITUTE OF TECHNOLOGY AND MANAGEMENT

SIGNATURE OF THE GUIDE

We, hereby declare that the project report entitled “EVENT

Registration No(s). Name(s) Signature(s)

322010302037 B S M SATYANARAYANA REDDY

322010302019 G. SRIRAM SAGAR

We were able to complete our project successfully. However, it

We are highly indebted to GITAM (Deemed to be University),

Would like to express our gratitude towards Mr. Gunti Spandan

We allow anyone to our course to learn something new we always

We created a Index page it is the home page of our website it was

We Created a About page it was having a details of group members in

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Simple web design">

<meta name="keywords" content="web design, affordable web design, professional web

<meta name="author" content="Manideep ">

<title>Simple Web Design | Welcome</title>

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

<h1><span id="acme">Simple</span> Web Design</h1>

<li class="current"><a href="index.html">Home</a></li>

<h1>Simple Web Design for WAD</h1>

<p>Enter your Email Address</p>

<input for="email" type="email" placeholder="Enter Email">

<button type="submit" id="email">Subscribe</button>

<img src="images\logo_html.png" width="90" height="90" alt="HTML5 Markup Logo">

<p>We used HTML in this Website</p>

<img src="images\logo_css.png" width="90" height="90" alt="CSS3 Styling Logo">

<p>We used CSS in this Website</p>

<img src="images\javascript.png" width="200" height="90" alt="Graphic Design Logo">

<p>JavaScript was used in this Website</p>

<p>Simple Web Deisgn, Copyright &copy; 2022</p>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Affordable and professional web design">

<meta name="keywords" content="web design, affordable web design, professional web

<meta name="author" content="Lakshmi Narayana ">

<title>Acme Web Design | About US</title>

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

<h1><span id="acme">Acme</span> Web Design</h1>

<li class="current"><a href="about.html">About</a></li>

<p>Enter your Email</p>

<input for="email" type="email" placeholder="Enter Email">

<button type="submit" id="email">Subscribe</button>

<p>Mrs Swastika Jain T J<br>

<p>Simple Web Deisgn,Copyright &copy ; 2022</p>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Affordable and professional web design">

<meta name="keywords" content="web design, affordable web design, professional web

<meta name="author" content="Loka Surya">

<title>Simple Web Design | Services</title>

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

<li class="current"><a href="services.html">Services</a></li>

<p>Enter your Email</p>

<input for="email" type="email" placeholder="Enter Email">

<button type="submit" id="email">Subscribe</button>

<p>We will explain from basics to advanced HTML.</p>

<p>Pricing: Rs1,000 - Rs3,000</p>

<p>We will explain from basics to advanced CSS.</p>

<p>We will explain from basics to advanced JAVASCRIPT.</p>

<p>Pricing: Rs2500 </p>

<p>Simple Web Deisgn, Copyright © 2022</p>

<p>Simple Web Deisgn, Copyright © 2022</p>

/ShowCase Area Style/

/Newsletter Area Style/

/About Page Style/