alvin/challenge-11
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/challenge-11.git synced 2026-03-06 11:06:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update index.html and script.js to enhance website template with new sections, improved navigation, and smooth scrolling functionality. Modify title and branding, and implement form handling and mobile menu toggle in JavaScript.

Browse Source
This commit is contained in:
Alvin
2025-06-04 09:46:25 +02:00
parent f0a1a657a3
commit 508bf307a5
2 changed files with 203 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title> <title>Website Template</title>
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Tailwind CSS --> <!-- Tailwind CSS -->
@@ -12,39 +12,162 @@
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body class="bg-gray-100"> <body class="bg-gray-100">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#">My Website</a> <a class="navbar-brand" href="#">Your Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#">Home</a> <a class="nav-link active" href="#home">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#about">About</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Contact</a> <a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<main class="container py-8"> <!-- Hero Section -->
<div class="row"> <section id="home" class="py-5">
<div class="col-md-8 mx-auto"> <div class="container">
<div class="bg-white rounded-lg shadow-md p-6"> <div class="row">
<h1 class="text-3xl font-bold mb-4">Welcome to My Website</h1> <div class="col-md-8 mx-auto text-center">
<p class="text-gray-600">This is a basic website using both Bootstrap and Tailwind CSS for styling.</p> <h1 class="text-4xl font-bold mb-4">Welcome to Your Website</h1>
<button class="btn btn-primary mt-4">Learn More</button> <p class="text-gray-600 mb-4">A clean, modern template for your next project</p>
<button class="btn btn-primary me-2">Get Started</button>
<button class="btn btn-outline-secondary">Learn More</button>
</div> </div>
</div> </div>
</div> </div>
</main> </section>
<!-- About Section -->
<section id="about" class="py-5 bg-white">
<div class="container">
<h2 class="text-3xl font-bold text-center mb-5">About Us</h2>
<div class="row">
<div class="col-md-6">
<p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-6">
<p class="text-gray-600">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-5">
<div class="container">
<h2 class="text-3xl font-bold text-center mb-5">Our Services</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-xl font-bold mb-3">Service 1</h3>
<p class="text-gray-600">Description of your first service goes here.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-xl font-bold mb-3">Service 2</h3>
<p class="text-gray-600">Description of your second service goes here.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-xl font-bold mb-3">Service 3</h3>
<p class="text-gray-600">Description of your third service goes here.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-5 bg-white">
<div class="container">
<h2 class="text-3xl font-bold text-center mb-5">Portfolio</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
<h3 class="text-xl font-bold mb-2">Project 1</h3>
<p class="text-gray-600">Brief description of your first project.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
<h3 class="text-xl font-bold mb-2">Project 2</h3>
<p class="text-gray-600">Brief description of your second project.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="bg-gray-100 rounded-lg p-4">
<div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
<h3 class="text-xl font-bold mb-2">Project 3</h3>
<p class="text-gray-600">Brief description of your third project.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container">
<h2 class="text-3xl font-bold text-center mb-5">Contact Us</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<form class="bg-white rounded-lg shadow-md p-6">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" placeholder="Your name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4" placeholder="Your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>&copy; 2024 Your Brand. All rights reserved.</p>
</div>
<div class="col-md-6 text-end">
<a href="#" class="text-white me-3">Privacy Policy</a>
<a href="#" class="text-white me-3">Terms of Service</a>
<a href="#" class="text-white">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS Bundle with Popper --> <!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

81
js/script.js
View File

@@ -1,20 +1,73 @@
// Add fade-in animation to main content // Add fade-in animation to all sections
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const mainContent = document.querySelector('main'); const pageSections = document.querySelectorAll('section');
mainContent.classList.add('fade-in'); pageSections.forEach(section => {
section.classList.add('fade-in');
// Add click event to the Learn More button
const learnMoreBtn = document.querySelector('.btn-primary');
learnMoreBtn.addEventListener('click', () => {
alert('Thanks for your interest! This is a demo website.');
}); });
// Add active class to current nav item // Smooth scrolling for navigation links
const navLinks = document.querySelectorAll('.nav-link'); document.querySelectorAll('a[href^="#"]').forEach(anchor => {
navLinks.forEach(link => { anchor.addEventListener('click', function (e) {
link.addEventListener('click', (e) => { e.preventDefault();
navLinks.forEach(l => l.classList.remove('active')); const target = document.querySelector(this.getAttribute('href'));
e.target.classList.add('active'); if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
}); });
}); });
// Form submission handling
const contactForm = document.querySelector('form');
if (contactForm) {
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Add your form submission logic here
alert('Thank you for your message! This is a demo form.');
contactForm.reset();
});
}
// Active navigation highlighting
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('section');
function setActiveLink() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= (sectionTop - sectionHeight / 3)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === current) {
link.classList.add('active');
}
});
}
window.addEventListener('scroll', setActiveLink);
setActiveLink(); // Initial call
// Mobile menu toggle
const navbarToggler = document.querySelector('.navbar-toggler');
const navbarCollapse = document.querySelector('.navbar-collapse');
if (navbarToggler && navbarCollapse) {
navbarToggler.addEventListener('click', () => {
navbarCollapse.classList.toggle('show');
});
// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
if (!navbarToggler.contains(e.target) && !navbarCollapse.contains(e.target)) {
navbarCollapse.classList.remove('show');
}
});
}
}); });