Scribd
Upload
3 views

HTML CSS Project

how to develop a webpage using html and css

Uploaded by

sumitgt01
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

HTML CSS Project

how to develop a webpage using html and css

Uploaded by

sumitgt01
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

ADDRESS: BANDRA,MUMBAI,MAHARASHTRA

PROJECT REPORT ON WEB DESIGN USING HTML & CSS


NAME: Sumit gupta
EMAIL ID:Sumitgt01@gmail.com

1
ACKNOWLEDGEMENT

I would like to express my sincere gratitude to everyone who has supported and guided me
throughout the completion of this HTML CSS project.

First and foremost, I would like to thank AZURE SKYNET for their valuable guidance and
feedback. Their expertise and advice were instrumental in shaping the direction and quality of
this project.

Additionally, I would like to extend my appreciation to the online communities and


resources, which provided a wealth of information and tutorials that greatly contributed to my
understanding and application of HTML and CSS.

Finally, I am profoundly thankful to my family and friends for their unwavering support and
encouragement throughout this journey. Their belief in my abilities kept me motivated and
focused.

This project would not have been possible without the collective efforts and support of all
these individuals. Thank you all.

SUMIT GUPTA

2
INDEX
SR NO. PROJECT NAME PAGE NO.
1 Project 1 4
2 Project 2 7
3 Project 3 10
4 Project 4 14
5 Project 5 18
6 Reference 22
7 Bibliography 22

3
PROJECT 1: SURVEY WEBPAGE
 AIM & OBJECTIVE :

A landing page.
• Should include a page including information about the survey
form.
• Survey form with following inputs:
• Name, Age, Email, Current role, what you like in particular
webpage, what features can we add to make webpage better.
• Footer.

 STEPS PERFORMED :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Survey Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
form {
margin-bottom: 20px;
}
label {
4
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Our Survey Webpage</h1>
</header>

<main>
<section>
<h2>About the Survey</h2>
<p>We appreciate your time to fill out this survey. Your feedback
helps us improve our webpage.</p>
</section>

5
<section>
<h2>Survey Form</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="current-role">Current Role:</label>


<select id="current-role" name="current-role" required>
<option value="">Select...</option>
<option value="Student">Student</option>
<option value="Professional">Professional</option>
<option value="Other">Other</option>
</select>

<label for="like-in-page">What do you like in particular about


our webpage?</label>
<textarea id="like-in-page" name="like-in-page" rows="4"
required></textarea>

<label for="features-to-add">What features can we add to


make our webpage better?</label>
<textarea id="features-to-add" name="features-to-add"
rows="4" required></textarea>

<button type="submit">Submit</button>
</form>
</section>
</main>

<footer>
<p>&copy; 2024 Our Survey Webpage. All rights reserved.</p>
</footer>
</body>
</html>

6
 PROJECT OUTPUT:

7
PROJECT 2: A DUMMY GOOGLE WEBSITE
 AIM & OBJECTIVE:
• Perfect google logo.
• A dummy search bar (input field).
• All button should be working.
• Links like Gmail, Images should be working directing to Gmail
and google images.
• Footer on google.com (refer google.com)
 STEPS PERFORMED :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Google</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
#logo {
width: 200px;
height: auto;
}
#search-bar {
width: 50%;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;

8
}
#buttons {
text-align: center;
}
.button {
background-color: #f2f2f2;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
#footer {
background-color: #f2f2f2;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="header">
<img id="logo"
src="https://www.google.com/images/branding/googlelogo/2x/googlelog
o_color_272x92dp.png" alt="Google Logo">
<br>
<input type="text" id="search-bar" placeholder="Search...">
<br>
<div id="buttons">
<button class="button"
onclick="window.location.href='https://www.google.com/search?
q=dummy'">Google Search</button>
<button class="button"
onclick="window.location.href='https://www.google.com/imghp'">I'm
Feeling Lucky</button>
</div>
</div>

9
<div id="footer">
<a href="https://mail.google.com/">Gmail</a> -
<a href="https://www.google.com/imghp">Images</a> -
<a
href="https://www.google.com/intl/en/about/products">About</a>
</div>
</body>
</html>

 PRROJECT OUTPUT:

10
PROJECT 3 : PERSONAL PORTFOLIO
 AIM & OBJECTIVE:
• Landing page.
• What you are.
• Qualifications.
• Contact Form.
• Achievements.
• Footer.
 STEPS PERFORMED:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
section {
margin-bottom: 30px;
}
h2 {
color: #333;
}
footer {
background-color: #333;

11
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
form {
max-width: 500px;
margin: 0 auto;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
</header>

<main>
<section>

12
<h2>Who I Am</h2>
<p>I am a passionate and dedicated individual with expertise in
web development and design.</p>
</section>

<section>
<h2>Qualifications</h2>
<p>I hold a Bachelor's degree in Computer Science and have
completed various online courses in front-end and back-end
development.</p>
</section>

<section>
<h2>Contact Me</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
required></textarea>

<input type="submit" value="Send Message">


</form>
</section>

<section>
<h2>Achievements</h2>
<p>Some of my notable achievements include developing a
responsive e-commerce website and contributing to open-source
projects.</p>
</section>
</main>

<footer>
<p>&copy; 2024 My Portfolio. All rights reserved.</p>
</footer>

13
</body>
</html>
 PROJECT OUTPUT:

14
PROJECT 4:A BASIC E-COMMERCE WEBPAGE

 AIMS & OBJECTIVE:


• Navigation bar with dummy search bar.
• Landing page of what your webpage sells.
• Information on the product page.
• A dummy product display page build with grid system.
• Contact Form.
• Footer.
 STEPS PERFORMED:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Basic E-commerce Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color:rebeccapurple;
color: white;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar input[type="text"] {
padding: 5px;
width: 200px;
}
.landing-page {
text-align: center;

15
padding: 50px;
background-color: #f4f4f4;
}
.product-page {
padding: 50px;
background-color: #fff;
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.product-item {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}
.contact-form {
padding: 50px;
background-color: #f4f4f4;
}
.contact-form form {
max-width: 600px;
margin: auto;
}
.contact-form input, .contact-form textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>

16
<div class="navbar">
<div>My E-commerce</div>
<input type="text" placeholder="Search...">
</div>

<div class="landing-page">
<h1>Welcome to My E-commerce Store</h1>
<p>Find the best products here!</p>
</div>

<div class="product-page">
<h2>Our Products</h2>
<div class="product-grid">
<div class="product-item">
<h3>Product 1</h3>
<p>Description of Product 1</p>
</div>
<div class="product-item">
<h3>Product 2</h3>
<p>Description of Product 2</p>
</div>
<div class="product-item">
<h3>Product 3</h3>
<p>Description of Product 3</p>
</div>
<!-- Add more products as needed -->
</div>
</div>

<div class="contact-form">
<h2>Contact Us</h2>
<form action="#">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" rows="5"
required></textarea>
<input type="submit" value="Send">
</form>
</div>

17
<div class="footer">
<p>&copy; 2024 My E-commerce Store</p>
</div>

</body>
</html>
 PROJECT OUTPUT:

18
PROJECT 5:IT COMPANY WEBPAGE
 AIMS & OBJECTIVE;
• Landing page.
• Navigation bar with Company logo, Careers, Location, Contact Form.
• Company core practices page.
• Careers section.
• Qualification for joining company.
• Contact form.
• Footer
 STEPS PERFORMED:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>IT Company Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background: red;
color: #fff;
padding: 10px 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.navbar a {
color: #fff;
text-decoration: none;
padding: 0 15px;
}

19
.navbar a:hover {
text-decoration: underline;
}
.container {
padding: 20px;
}
.footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
.contact-form input, .contact-form textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<a href="#">IT Company Logo</a>
</div>
<nav>
<a href="#core-practices">Core Practices</a>
<a href="#careers">Careers</a>
<a href="#location">Location</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<section id="landing-page" class="container">


<h1>Welcome to Our IT Company</h1>
<p>Leading innovation in technology solutions.</p>

20
</section>

<section id="core-practices" class="container">


<h2>Our Core Practices</h2>
<p>We specialize in software development, cloud computing, and
IT consulting.</p>
</section>

<section id="careers" class="container">


<h2>Careers</h2>
<p>Join our team of experts and innovators.</p>
<h3>Qualifications for Joining</h3>
<ul>
<li>Bachelor's degree in Computer Science or related field</li>
<li>Experience with software development</li>
<li>Strong problem-solving skills</li>
<li>Excellent communication abilities</li>
</ul>
</section>

<section id="location" class="container">


<h2>Our Location</h2>
<p>123 Tech Avenue, Innovation City, TX 75001</p>
</section>

<section id="contact" class="container contact-form">


<h2>Contact Us</h2>
<form action="/submit-form" method="POST">
<input type="text" name="name" placeholder="Your Name"
required>
<input type="email" name="email" placeholder="Your Email"
required>
<textarea name="message" placeholder="Your Message"
rows="5" required></textarea>
<button type="submit">Submit</button>
</form>
</section>

<footer class="footer">
<p>&copy; 2024 IT Company. All rights reserved.</p>

21
</footer>
</body>
</html>
 PROJECT OUTPUT :

22
 REFERENCE:
https://developer.mozilla.org/en-US/docs/Web/HTML
https://css-tricks.com/

 BIBLIOGRAPHY:
https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.w3schools.com/css/

23

You might also like