Scribd
Upload
2 views

WD file format (2)

The document outlines a web designing workshop for CSE Semester III, detailing practical assignments focused on creating static webpages for an online bookstore and personal portfolios using HTML, CSS, and JavaScript. It includes a structured index of practical tasks, objectives, and sample code for a portfolio webpage. The workshop is part of the curriculum at Dronacharya Group of Institutions, affiliated with Dr. Abdul Kalam Technical University.

Uploaded by

choudharyvaishnavi312
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

WD file format (2)

The document outlines a web designing workshop for CSE Semester III, detailing practical assignments focused on creating static webpages for an online bookstore and personal portfolios using HTML, CSS, and JavaScript. It includes a structured index of practical tasks, objectives, and sample code for a portfolio webpage. The workshop is part of the curriculum at Dronacharya Group of Institutions, affiliated with Dr. Abdul Kalam Technical University.

Uploaded by

choudharyvaishnavi312
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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>&copy; 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:

You might also like