Scribd
Upload
4 views4 pages

File 2

Uploaded by

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

File 2

Uploaded by

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

Question : To create a webpage for a department with a dropdown navigation menu and

implement it using CSS for styling, I'll provide an example that includes the
following sections: Faculty, Courses, Activities, and Contact Us. We will use a
dropdown navigation menu for better user experience.

Ans.HTML (Department Webpage)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Department Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="logo">
<h1>Department of Computer Science</h1>
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>

<!-- Dropdown Menu for Faculty -->


<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Faculty</a>
<div class="dropdown-content">
<a href="#">Faculty 1</a>
<a href="#">Faculty 2</a>
<a href="#">Faculty 3</a>
</div>
</li>

<!-- Dropdown Menu for Courses -->


<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Courses</a>
<div class="dropdown-content">
<a href="#">Course 1</a>
<a href="#">Course 2</a>
<a href="#">Course 3</a>
</div>
</li>

<!-- Dropdown Menu for Activities -->


<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Activities</a>
<div class="dropdown-content">
<a href="#">Activity 1</a>
<a href="#">Activity 2</a>
<a href="#">Activity 3</a>
</div>
</li>

<li><a href="#contact">Contact Us</a></li>


</ul>
</nav>
</header>
<!-- Main Content -->
<div class="content">
<section id="home">
<h2>Welcome to the Department of Computer Science</h2>
<p>Our department offers a variety of courses and activities to enhance your
learning experience.</p>
</section>

<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions, feel free to reach out to us at
<strong>[email protected]</strong>.</p>
</section>
</div>

<footer>
<p>&copy; 2024 Department of Computer Science. All Rights Reserved.</p>
</footer>

</body>
</html>

CSS (styles.css)

/* Basic styling for the body */


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}

header h1 {
margin: 0;
font-size: 2em;
}

nav {
background-color: #333;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

nav ul li {
float: left;
width: 150px;
}
nav ul li a {
display: block;
text-align: center;
padding: 14px;
color: white;
text-decoration: none;
background-color: #333;
font-size: 1.2em;
}

nav ul li a:hover {
background-color: #ddd;
color: black;
}

/* Dropdown Menu */
.dropdown {
position: relative;
}

.dropdown .dropbtn {
display: block;
padding: 14px;
color: white;
background-color: #333;
text-align: center;
font-size: 1.2em;
width: 150px;
cursor: pointer;
text-decoration: none;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 150px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: white;
padding: 12px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}
/* Content Section */
.content {
padding: 20px;
}

.content h2 {
color: #333;
}

.content p {
font-size: 1.1em;
color: #555;
}

/* Footer Section */
footer {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}

You might also like