Obj :- - Consider a small topic of your choice on which you can
develop static Webpages and try to implement all topics of html, CSS
and JS within the topic. Choose any one topic. 1. Your Own Portfolio
2. To-Do List 3. Survey Form 4. A Tribute Page 5.A Questionnaire.
A Tribute page
Tribute-page.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribute to [Person's Name]</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4cc8b;
margin: 0;
padding: 0;
box-sizing: border-box;
border: 1px black;
}
header {
background-color: #333;
color: white;
text-align: center;
/* padding: 1em; */
height: 5vh;
}
section {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img {
max-width: 100%;
height: auto;
}
h2 {
color: #333;
}
p {
line-height: 1.6;
color: #555;
}
footer {
text-align: center;
padding: 1em;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<header>
<h1>--|Tribute to Swami Vivekanand|--</h1>
</header>
<section>
<h2>Introduction:-</h2>
<p style="font-size: 17px;">Swami Vivekananda was a Hindu monk and one
of the most celebrated spiritual leaders of India. He was more than just a
spiritual mind; he was a prolific thinker, great orator and passionate patriot.
He carried on the free-thinking philosophy of his guru, Ramakrishna Paramhansa
forward into a new paradigm.</p>
<h2>Accomplishments:-</h2>
<p style="font-size: 17px;">1. Introduction of Hinduism to the Western
World<br>
2. Founder of the Ramakrishna Mission<br>
3. Promotion of Yoga and Vedanta<br>
5. Legacy as a Spiritual Leader</p>
<h2>Quotes:-</h2>
<p style="font-size: 17px;">1:We are responsible for what we are, and
whatever we wish ourselves to be, we have the power to make ourselves.<br>
2:All power is within you. Believe in that,do not believe that you
are weak... Stand up and express the Divinity within you.<br>
3:Everything can be sacrificed for truth, but truth cannot be sacrificed
for anything.</p>
<!-- Add more sections as needed -->
<h2>Gallery:-</h2>
<img src="image/Swami-Vivekananda-V1.jpg" style="width: 300px;margin-
left: 10PX;">
<img src="image/Swami-Vivekananda2.jpg" style="float:left;width:
361px;padding-left: 70px;">
</section>
<footer>
<p>Created by S.M. © 2024</p>
</footer>
<!-- Optional: Add JavaScript for interactivity -->
<script>
// You can add JavaScript code here for any interactive features.
</script>
</body>
</html>
OUTPUT:-
Obj :- Create a catalogue page which contain the detail of books
available in the website. The details should contain the following:
1.Snap shot of Cover Page. 2. Author Name. 3. Publisher. 4. Price.
5. Add to cart button.
BOOK--Catelogue1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalog</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #20b2c5;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 5px;
padding-left: 15px;
}
.book {
background-color: #fff;
border: 1px solid #ddd;
margin: 4px;
/* padding: 15px; */
width: 250px;
text-align: center;
img {
max-width: 100%;
height: auto;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
}
img{
width: 150px;
height: 15vh;
}
</style>
</head>
<body>
<header>
<h1>Book Catalogue</h1>
</header>
<section>
<div class="book">
<img src="image/61kuIz0XVhL._SY466_.jpg" alt="Book Cover" >
<h3>Book Title</h3>
<p>Author:V.K. Mehta</p>
<p>Publisher: S. Chand Publishing </p>
<p>Price: 598.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/41fH4cAKL1L._SY466_.jpg" alt="Book Cover">
<h3>Book Title</h3>
<p>Author: Premchand S. Nair</p>
<p>Publisher: CRC Press; 1st edition (29 June 2017)</p>
<p>Price: 9,100.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/81yNAPJoUYL._SY466_.jpg" alt="Book Cover" style="height:
13vh;">
<h3>Electrical Installation Calculations</h3>
<p>Author:Christopher Kitcher</p>
<p>Publisher:Taylor & Francis Ltd; 9th edition (16 June 2022) </p>
<p>Price: 2,424.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/61MZjQ6v6KL._SY466_.jpg" alt="Book Cover">
<h3>507 Mechanical Movements</h3>
<p>Author:Henry T. Brown</p>
<p> Ingram short title; Illustrated edition (1 January 2013)</p>
<p>Price: 535.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/41fH4cAKL1L._SY466_.jpg" alt="Book Cover">
<h3>Book Title</h3>
<p>Author: Premchand S. Nair</p>
<p>Publisher: CRC Press; 1st edition (29 June 2017)</p>
<p>Price: 9,100.00</p>
<button>Add to Cart</button>
</div>
</section>
<br>
<section>
<div class="book">
<img src="image/41fH4cAKL1L._SY466_.jpg" alt="Book Cover">
<h3>Book Title</h3>
<p>Author: Premchand S. Nair</p>
<p>Publisher: CRC Press; 1st edition (29 June 2017)</p>
<p>Price: 9,100.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/81yNAPJoUYL._SY466_.jpg" alt="Book Cover">
<h3>Electrical Installation Calculations</h3>
<p>Author:Christopher Kitcher</p>
<p>Publisher:Taylor & Francis Ltd; 9th edition (16 June 2022) </p>
<p>Price: 2,424.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/41fH4cAKL1L._SY466_.jpg" alt="Book Cover">
<h3>Book Title</h3>
<p>Author: Premchand S. Nair</p>
<p>Publisher: CRC Press; 1st edition (29 June 2017)</p>
<p>Price: 9,100.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/61kuIz0XVhL._SY466_.jpg" alt="Book Cover">
<h3>Book Title</h3>
<p>Author:V.K. Mehta</p>
<p>Publisher: S. Chand Publishing </p>
<p>Price: 598.00</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="image/61MZjQ6v6KL._SY466_.jpg" alt="Book Cover">
<h3>507 Mechanical Movements</h3>
<p>Author:Henry T. Brown</p>
<p> Ingram short title; Illustrated edition (1 January 2013)</p>
<p>Price: 535.00</p>
<button>Add to Cart</button>
</div>
</section>
</body>
</html>
OUTPUT:-
