Creating Simple Navigation Bar using Html,CSS & Java Script
This is the HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRT Infotech</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<h1>welcome to our home page</h1>
</section>
<section id="about">
<h1>GRT Infotech is a leading software and training development center dedicated to empowering individuals and organizations with cutting-edge technological skills and knowledge. We specialize in providing comprehensive training programs and software solutions designed to meet the needs of today's fast-paced digital world</h1>
</section>
<section id="services">
<h1>Our Services
Software Development:
Custom software solutions tailored to specific business needs.
Application development for various platforms including web, mobile, and desktop.
System integration and automation services.
Training Programs:
Technical Training: Courses in programming languages <span>(e.g., Python, Java, C++), web development (HTML, CSS, JavaScript), databases (SQL, NoSQL),</span> and more.
Certification Courses: Preparation for industry-recognized certifications such as AWS, Microsoft Azure, Cisco, CompTIA, etc.
Professional Development: Training in project management, agile methodologies, IT service management, and other professional skills.
Soft Skills Training: Enhancing communication, leadership, and interpersonal skills to complement technical expertise.</h1>
</section>
<section id="contact">
<h1>6385823242</h1>
</section>
<script src="script.js"></script>
</body>
</html>
This is the CSS Code
/* Basic reset for margin and padding */
body, ul {
margin: 0;
padding: 0;
}
.navbar {
background-color:gray;
overflow: hidden;
}
.nav-links {
list-style-type: none;
}
.nav-links li {
float: left;
}
.nav-links li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-links li a:hover {
background-color: burlywood;
color: black;
}
/* Styling for sections */
section {
padding: 60px;
margin: 20px;
border: 2px solid burlywood;
}
span{
color:sienna;
}
This is the Java Script Code
// Smooth scrolling effect for navigation links
document.querySelectorAll('.nav-links a').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});