B62 Aniket CAP757 CA1

Practical Task 1 – CAP757
Name – Aniket Kumar

Registration No – 12108348
Roll No – RD2112B62
Q1. Design a web page using HTML andCSS for a Music store.
Add suitable background image.
1. Add links which can take to some description about song.
2. At the bottom mention the links for shopping, store, career and
contact details.
Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Store</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div class="container">
<div class="navbar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SHOPPING</a></li>
1
<li><a href="#">STORE</a></li>
<li><a href="#">CAREER</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<h1>Welcome to the Music Store!</h1>
<div class="gallery">
<img src="Heerranjha.jpg" height="200px"
width="250px">
<figcaption>
Heer Ranjha
</figcaption>
<h3><a href="#desc1">Description</a></h3>
</div>
<img src="Humari adhoori Kahaani Poster.jpg"
height="200px" width="250px">
<figcaption>Humari Adhoori Kahaani
</figcaption>
</div>
<img src="TeriMitti.jpg" height="200px"
width="250px">
<figcaption>Teri Mitti </figcaption>
</div>
<img src="mann-bharryaa-2.0-song.jpg"
height="200px" width="250px">
<figcaption>Mann Bharryaa-2.0</figcaption>
</div>
2
<img src="Shreshah.jpg" height="200px"
width="250px">
<figcaption>Raataan Lambiyan</figcaption>
</div>
<img src="Kesari.jpg" height="200px"
width="250px">
<figcaption>Kesari Re</figcaption>
</div>
<div id="desc1">
<h3>Song: Heer Ranjha</h3>
<li>Singer: Bhuam Bam</li>
<li>Writer: Bhuam Bam</li>
</div>
</div>
<div id="desc2">
<h3>Song: Humari Adhoori</h3>
<li>Singer: Jeet Gannguli</li>
<li>Writer: Sayeed Quadri</li>
</div>
</div>
<div id="desc3">
<h3>Song: Teri Mitti</h3>
<li>Singer: B Praak</li>
<li>Writer: Manoj Muntasir</li>
</div>
</div>
3
<div id="desc4">
<h3>Song: Mann Bharryaa-2</h3>
<li>Singer: B Praak</li>
<li>Writer: Jaani</li>
</div>
</div>
<div id="desc5">
<h3>Song: Raataan Lambiyan</h3>
<li>Singer: Jubin Nautiyal</li>
<li>Writer: Tanishk Bagchi</li>
</div>
</div>
<div id="desc6">
<h3>Song: Kesari Re</h3>
<li>Singer: Arjit Singh</li>
<li>Writer: Manoj Muntasir</li>
</div>
</div>
<div class="footer">
<ul>
<li>© 2022</li>
<li><a href="#">HOME</a></li>
<li><a href="#">SHOPPING</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">CAREER</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</body>
</html>
4
CSS:
html {
position: relative;
min-height: 100%;
}
body {
background-image: url("music.png");
color: aliceblue;
font-size: larger;
font-weight: bold;
/* background-repeat: repeat; */
}
.container {
height: 100vh;
margin-left: 10%;
margin-right: 10%;
/* width: 100%; */
background-size: cover;
background-position: center;
position: relative;
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #417fff;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 15px;
}
5
.navbar ul li a {
text-decoration: none;
color: aliceblue;
font-size: 18px;
font-weight: bolder;
}
.gallery {
padding: 55px;
float: left;
margin: 10px auto 10px auto;
margin-left: 2%;
}
h1 {
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow',
Arial, sans-serif;
color: red;
background-color: aliceblue;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
background-color: aliceblue;
}
figcaption {
text-align: center;
color: aliceblue;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: larger;
}
6
a:link {
text-decoration: solid;
color: red;
padding: 2px;
}
.footer {
position: relative;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
background-color: grey;
}
.footer ul li {
list-style: none;
display: inline-block;
margin: 15px;
}
.footer ul li a {
text-decoration: none;
color: aliceblue;
font-size: 16px;
font-weight: normal;
}
#desc1, #desc2, #desc3, #desc4, #desc5, #desc6 {

background-color: antiquewhite;
color: black;
list-style: none;
padding-top: 10px;
padding-left: 30px;
padding-right: 25px;
padding-bottom: 10px;
}
7
Screenshot:
8
9

B62 Aniket CAP757 CA1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

B62 Aniket CAP757 CA1

Uploaded by

Copyright:

Available Formats

Practical Task 1 – CAP757

Name – Aniket Kumar

#desc1, #desc2, #desc3, #desc4, #desc5, #desc6 {

You might also like