Scribd
Upload
21 views8 pages

WD Assignment

Uploaded by

ankit
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
21 views8 pages

WD Assignment

Uploaded by

ankit
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

ASSIGNMENT-

NAME: Ankit

CLASS: B1
ROLL no.: 2204920100022

Q1. Control the repetition of the image with the


background-repeat property.
<html>
<head>
<style
> body
{
background-image:
url("wp4051785.jpg"); background-
repeat:no-repeat ;
background-size:auto;
background-position: center;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT

Q2. Define styles for links using pseudo


classes:
•a:link
•a:visited
•a:active
•a:hover
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link
*/ a:link {
color: blue;
}
/* visited link
*/ a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: yellow;
}
/* selected link
*/ a:active {
color: red;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="https://www.codewithharry.com/"
target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in
the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition
in order to be effective.</p>
</body>
</html

OUTPUT

Q3. Design a website that contains a horizontal navigation bar


using an unordered list.
• Include the logo, the college name, and
links to the homepage, login page,
registration page, catalog page, and cart page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family:'Times New Roman', Times,
serif; margin: 0;
padding: 0;
background-color:#fff;
}
header {
display: flex;
justify-content:
center; align-items:
center;
gap: 800px;
background-color:
#333; color: #fff;
padding: 10px 0;
text-align: center;
}
h1{
background-color:
black; color: red;

}
nav {
background-color:
blue; text-align:
center;
}
form {
margin: 0;
padding: 0;
}
form button {
background-color:
blue; color: yellow;
border: none;
padding: 16px 20px;
text-decoration:
font-size:
15px; margin:
0;
cursor: pointer;
}
form button:hover {
background-color: #555;
}
.logo {
display: inline-
block; margin-right:
10px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="th.jpeg" alt="Logo" width="50">
</div>
<h1>KCC Institute of Technology and Management
</h1>
</header>
<nav>
<form>
<button type="button">Home</button>
<button type="button">Login</button>
<button type="button">Registration</button>
<button type="button">Catalogue</button>
<button type="button">Cart</button>
</form>
</nav>
<p>KCC Institute of Technology and Management is located in Greater
Noida,
Uttar Pradesh. It is one of the sister institutes for engineering and
management studies under KCC institutions. It has approvals from the All
India Council of
Technical Education (AICTE) and UGC and affiliation from Dr APJ
Abdul Kalam Technical University (AKTU).

KCC Institute of Technology and Management offers UG and PG-level


courses, namely, B.Tech., M. Tech., and MBA. KCC ITM BTech admissions
are based on JEE Main score followed by UPTAC Counselling. Check KCC ITM
Admissions

Every year, the placement cell of KCC Institute of Technology and


Management assists the students in getting job offers from top recruiters,
like
Cognizant, Indus Bank, Capgemini, Philips, etc. In the previous year, the
maximum placement was from IT, telecommunication, and power and energy
departments. The
B. Tech course also includes an internship in the pre-final year at
industries, like Unitech, Accenture, HCL, etc.</p>
</body>
</html>
OUTPUT

You might also like