WEB DESIGNING WORKSHOP
Branch CSE Semester III
Subject Code: BCS-353
Session: 2024-25
Submitted To: Submitted By:
SANTANU PANT VAISHNAVI
DRONACHARYA GROUP OF INSTITUTIONS
DEPARTMENT OF COMPUTER SCIECNE AND ENGINEERING
#27 KNOWLEDGE PARK 3 GREATER NOIDA
AFFILATED TO Dr. ABDUL KALAM TECHNICAL UNIVERSITY,
LUCKNOW
INDEX
S No. Practical Name Date Page No. Signature
1 Design a static webpage required for online
bookstore website (home page)
2 Design a static webpage required for online
bookstore website (login page)
3 Design a static webpage required for online
bookstore website (catalogue page)
4 Design a static webpage required for online
bookstore website (cart page)
5 Design a static webpage required for online
bookstore website (registration page)
6 Write JavaScript to validate the following
field of the above registration page.
1. Name
2. Password
7 Write JavaScript to validate the following
field of the above registration page
1. E-mail id
2. Phone Number
8 Design a webpage using CSS which include
the following:
1. Use different font, styles
2. Set a background image for both the
page and single elements on the page.
9 Design a web page using CSS which
includes the following:
Control the repetition of the image with
background-repeat property
Define styles for links
A: link
A: visited
A: active
A: hover
10 Using HTML, CSS and JS design your own
portfolio.
Experiment No.-10
Objective: Design your Portfolio own Using HTML, CSS and JS.
Code:
<!-- index.html -->
<!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>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<nav class="navbar">
<a href="#home" class="nav-logo">My Portfolio</a>
<ul class="nav-menu">
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
</nav>
</header>
<section id="home" class="hero">
<h1>Hi, I'm <span>VAISHNAVI CHOUDHARY</span></h1>
<p>A passionate <strong>Web Developer</strong> creating modern and responsive designs.</p>
<a href="#projects" class="btn">View My Work</a>
</section>
<section id="about" class="about">
<h2>About Me</h2>
<p>I'm a creative and dedicated developer with a love for clean and functional web design. I specialize in front-
end development but enjoy tackling full-stack challenges.</p>
</section>
<section id="projects" class="projects">
<h2>My Projects</h2>
<div class="project-card">
<h3>Project 1</h3>
<p>A brief description of the project.</p>
</div>
<div class="project-card">
<h3>Project 2</h3>
<p>A brief description of the project.</p>
</div>
</section>
<section id="contact" class="contact">
<h2>Contact Me</h2>
<form action="https://formspree.io/f/yourformid" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" rows="5" placeholder="Your Message" required></textarea>
<button type="submit" class="btn">Send</button>
</form>
</section>
<footer class="footer">
<p>© 2024 Your Name. All Rights Reserved.</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
<!---js/script.js--- >
const toggleButton = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');
toggleButton.addEventListener('click', () => {
navMenu.classList.toggle('nav-menu-visible');
});
<!--- css/style.css--- >
/* General Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.6;
color: #333;
background: #f4f4f4;
}
/* Header and Navigation */
.header {
background: #333;
color: #fff;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.nav-menu li {
.nav-menu {
display: flex;
list-style: none;
}
.nav-menu li {
margin: 0 1rem;
}
.nav-menu a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.nav-menu a:hover {
color: #ff6347;
}
.nav-toggle {
display: none;
}
/* Hero Section */
.hero {
text-align: center;
padding: 4rem 1rem;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: #fff;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero span {
color: #ff6347;
}
.hero p {
margin-bottom: 1.5rem;
}
.btn {
display: inline-block;
background: #333;
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 5px;
text-decoration: none;
transition: background 0.3s;
}
.btn:hover {
background: #ff6347;
}
/* Sections */
section {
padding: 4rem 1rem;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.about, .projects {
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.project-card {
background: #f4f4f4;
margin: 1rem;
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Footer */
.footer {
text-align: center;
padding: 1rem;
background: #333;
color: #fff;
margin-top: 2rem;
}
Output:
