Scribd
Upload
3 views

AssignmntQ4 (1)

Uploaded by

Hamza Waqas
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
3 views

AssignmntQ4 (1)

Uploaded by

Hamza Waqas
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/ 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