BCA161-1: – INTRODUCTION TO WEB TECHNOLOGY
CSS PRACTICE ASSIGNMENT
BY
Khushi Aggarwal (25215028),1 BCA(A)
SUBMITTED TO-
Prof. Lata Yadav
SCHOOL OF
SCIENCES 2025-
2026
1. design a website with various sections:
Header (consisting of logo and website title)
Navbar (horizontal navigation menu)
Hero Section (A big banner)
Main Section (Consisting of 3 image cards)
Footer Section (With some social media links and contact us form)
Make at-least 4 pages in the website.
Make use of all three types of CSS.
Refer to the sample attached Page layout. Apply Necessary CSS and include
images to style your Webpage.CODE:
1ST PAGE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Delights Bakery - Home</title>
<link rel="stylesheet" href="style2.css">
<style>
.hero h2 { color: black; font-size: 24px; }
</style>
</head>
<body>
<header>
<div class="logo-title">
<img src="https://cdn-icons-png.flaticon.com/512/1046/1046784.png"
alt="logo" class="logo">
<h1 style="color:white;">Sweet Delights Bakery</h1>
</div>
</header>
<nav>
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section class="hero">
<h2>Freshly Baked Everyday!</h2>
</section>
<main>
<div class="card">
<img
src="https://imgs.search.brave.com/kN50qCU1O3PSLO3haPKJBTxys9m74-
Qz4pJCN2lTFSM/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly9tZWRp/
YS5pc3RvY2twaG90/by5jb20vaWQvMTgz/MDYwNTI0L3Bob3Rv/
L3RocmVlLWN1cGNh/a2VzLmpwZz9zPTYx/Mng2MTImdz0wJms9/
MjAmYz1uNlUtYkZy/anh2QmV4eXJzblMx/cnlVTEVab0tZd0gt/
dHVVOVBGWS0yaExB/PQ" alt="Cupcakes">
<h3>Cupcakes</h3>
<p>Delicious & Fresh</p>
</div>
<div class="card">
<img
src="https://imgs.search.brave.com/oJnJiTVfIny4H6HRavHMVsP2kMViu6FvvO
0gfQu5JmA/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly90aHVt/YnMuZHJlYW1zdGlt/
ZS5jb20vYi9ncm9z/LXBsYW4tZC11bi1k/JUMzJUE5bGljaWV1/
eC1jcm9pc3NhbnQt/ZGUtY2hvY29sYXQt/ZXQtdW5lLXRhc3Nl/
LWNhZiVDMyVBOS0z/OTA0MzY1NTUuanBn" alt="Croissants">
<h3>Croissants</h3>
<p>Delicious & Fresh</p>
</div>
<div class="card">
<img src="https://imgs.search.brave.com/zf9Y0MPYD3Zc7-
3BhzJ01YDuP42s8W3roh2fIO1xwII/rs:fit:500:0:1:0/g:ce/
aHR0cHM6Ly9kYmFr/ZXJzLnVzL2Nkbi9z/aG9wL2ZpbGVzL051/
dGVsbGFfVmFuaWxs/YV9DYWtlLnBuZz92/PTE3NTQ2MDY5MDAm/
d2lkdGg9e3dpZHRo/fQ" alt="Cakes">
<h3>Cakes</h3>
<p>Delicious & Fresh</p>
</div>
</main>
<footer>
<div class="footer-left">
<p>Follow Us:
<a href="#">Facebook</a> |
<a href="#">Instagram</a> |
<a href="#">Twitter</a>
</p>
</div>
<div class="footer-right">
<p>Contact Us: <br>
[email protected] <br>
+919389001412
</p>
</div>
</footer>
</body>
</html>
MENU.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Delights Bakery - Menu</title>
<link rel="stylesheet" href="style2.css">
<style>
.menu-section h2 { text-align: center; margin: 20px; color: #6b3e2e; }
</style>
</head>
<body>
<header>
<div class="logo-title">
<img src="https://cdn-icons-png.flaticon.com/512/1046/1046784.png"
alt="logo" class="logo">
<h1 style="color:white;">Sweet Delights Bakery</h1>
</div>
</header>
<nav>
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section class="menu-section">
<h2>Our Menu</h2>
<ul style="text-align:center; list-style:none;">
<li>Cupcakes - 100 Rupees</li>
<li>Croissants - 1000 Rupees</li>
<li>Cakes - 1500 Rupees</li>
<li>Cookies - 50 Rupees </li>
</ul>
</section>
<footer>
<div class="footer-left">
<p>Follow Us:
<a href="#">Facebook</a> |
<a href="#">Instagram</a> |
<a href="#">Twitter</a>
</p>
</div>
<div class="footer-right">
<p>Contact Us: <br>
[email protected] <br>
+919389001412
</p>
</div>
</footer>
</body>
</html>
GALLERY.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Delights Bakery - Gallery</title>
<link rel="stylesheet" href="style2.css">
<style>
.gallery { display: flex; justify-content: center; gap: 20px; margin: 20px; }
.gallery img { width: 250px; height: 180px; object-fit: cover; border-radius:
8px; }
</style>
</head>
<body>
<header>
<div class="logo-title">
<img src="https://cdn-icons-png.flaticon.com/512/1046/1046784.png"
alt="logo" class="logo">
<h1 style="color:white;">Sweet Delights Bakery</h1>
</div>
</header>
<nav>
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section class="gallery">
<img src="https://imgs.search.brave.com/IdmHki7yZ-
dgZPIk0VpeIuwgL5DoWQkIrUF4jl2c15U/rs:fit:500:0:1:0/g:ce/
aHR0cHM6Ly9wbHVz/LnVuc3BsYXNoLmNv/bS9wcmVtaXVtX3Bo/
b3RvLTE2NjM4NDAy/OTczODYtOGEzZTM4/MjcxYWM2P2ZtPWpw/
ZyZxPTYwJnc9MzAw/MCZpeGxpYj1yYi00/LjEuMCZpeGlkPU0z/
d3hNakEzZkRCOE1I/eHpaV0Z5WTJoOE5Y/eDhZM1Z3WTJGclpY/
TjhaVzU4TUh4OE1I/eDhmREE9" alt="Cupcake">
<img src="https://imgs.search.brave.com/4a_EpN3woA-
vTFkqidWu_Dj16rA82dVzXyK7r1tAjN8/rs:fit:500:0:1:0/g:ce/
aHR0cHM6Ly91cy4x/MjNyZi5jb20vNDUw/d20vZmFiaW9iYWxi/
aS9mYWJpb2JhbGJp/MTYxMi9mYWJpb2Jh/bGJpMTYxMjAwMjE0/
LzY5NzM1NjM2LWNh/ZiVDMyVBOS1vcmRp/bmF0ZXVyLXBvcnRh/
YmxlLWV0LWNyb2lz/c2FudC5qcGc_dmVy/PTY" alt="Croissant">
<img
src="https://imgs.search.brave.com/Uop8NCT7Ym9mywNZax2771z8AOWPqxy3
bYowV_NQs3g/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly9saXZm/
b3JjYWtlLmNvbS93/cC1jb250ZW50L3Vw/bG9hZHMvMjAxNS8w/
OC9tb2NoYV9jYWtl/X3RodW1iLTEtNDUw/eDQ1MC5qcGc" alt="Cake">
</section>
<footer>
<div class="footer-left">
<p>Follow Us:
<a href="#">Facebook</a> |
<a href="#">Instagram</a> |
<a href="#">Twitter</a>
</p>
</div>
<div class="footer-right">
<p>Contact Us: <br>
[email protected] <br>
+919389001412
</p>
</div>
</footer>
</body>
</html>
CONTACT.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Delights Bakery - Contact</title>
<link rel="stylesheet" href="style2.css">
<style>
.contact-form { text-align:center; margin:20px; }
.contact-form input, .contact-form textarea { width: 300px; margin: 10px;
padding: 10px; }
</style>
</head>
<body>
<header>
<div class="logo-title">
<img src="https://cdn-icons-png.flaticon.com/512/1046/1046784.png"
alt="logo" class="logo">
<h1 style="color:white;">Sweet Delights Bakery</h1>
</div>
</header>
<nav>
<ul>
<li><a href="index2.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section class="contact-form">
<h2>Contact Us</h2>
<form>
<input type="text" placeholder="Your Name"><br>
<input type="email" placeholder="Your Email"><br>
<textarea placeholder="Your Message"></textarea><br>
<button type="submit">Send Message</button>
</form>
</section>
<footer>
<div class="footer-left">
<p>Follow Us:
<a href="#">Facebook</a> |
<a href="#">Instagram</a> |
<a href="#">Twitter</a>
</p>
</div>
<div class="footer-right">
<p>Contact Us: <br>
[email protected] <br>
+919389001412
</p>
</div>
</footer>
</body>
</html>
OUTPUT:
(screenshot of the output)
