-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/script.js b/js/script.js
index f095e57..289e34f 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,20 +1,73 @@
-// Add fade-in animation to main content
+// Add fade-in animation to all sections
document.addEventListener('DOMContentLoaded', () => {
- const mainContent = document.querySelector('main');
- mainContent.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.');
+ const pageSections = document.querySelectorAll('section');
+ pageSections.forEach(section => {
+ section.classList.add('fade-in');
});
- // Add active class to current nav item
- const navLinks = document.querySelectorAll('.nav-link');
- navLinks.forEach(link => {
- link.addEventListener('click', (e) => {
- navLinks.forEach(l => l.classList.remove('active'));
- e.target.classList.add('active');
+ // Smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ 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');
+ }
+ });
+ }
});
Welcome to My Website
-This is a basic website using both Bootstrap and Tailwind CSS for styling.
- + +
+
-
+
+
+
Welcome to Your Website
+A clean, modern template for your next project
+ +
+
+ About Us
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+ Our Services
+
+
+
+
+
+
+ Service 1
+Description of your first service goes here.
+
+
+
+
+ Service 2
+Description of your second service goes here.
+
+
+
+
+ Service 3
+Description of your third service goes here.
+
+
+ Portfolio
+
+
+
+
+
+
+
+ Project 1
+Brief description of your first project.
+
+
+
+
+
+ Project 2
+Brief description of your second project.
+
+
+
+
+
+ Project 3
+Brief description of your third project.
+
+
+ Contact Us
+
+
+
+
+
+