Scribd
Upload
3 views

AssignmntQ4 (1)

Uploaded by

Hamza Waqas
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

AssignmntQ4 (1)

Uploaded by

Hamza Waqas
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Assignmnt#04

Q) Create navbar and its elements by using Google source step by step.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Navbar with Google Fonts</title>

<!-- Link to Google Fonts (you can choose any font you like) -->
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- Link to your CSS file (we'll define this later) -->
<link rel="stylesheet" href="styles.css">
<style>
/* Apply Google Font */
body {
font-family: 'Roboto', sans-serif; /* Google Font applied here */
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Navbar Styling */
.navbar {
background-color: #333; /* Dark background for the navbar */
padding: 10px 20px;
}

/* Navbar List Styling */


.nav-list {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center; /* Centers the navbar items */
}

/* Navbar Item Styling */


.nav-list li {
margin: 0 15px;
}

/* Link Styling */
.nav-list a {
color: #fff; /* White color for the links */
text-decoration: none; /* Remove underline */
font-weight: 700; /* Bold links */
font-size: 18px;
padding: 10px 15px;
transition: background-color 0.3s ease; /* Smooth transition on hover
*/
}

/* Hover Effect */
.nav-list a:hover {
background-color: #555; /* Slightly lighter background on hover */
border-radius: 5px; /* Rounded corners on hover */
}

</style>
</head>

<body>
<!-- Navbar Section -->
<nav class="navbar">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>

You might also like