Update index.html

index.html

@@ -491,4 +491,173 @@
     
     <div class="section-divider"></div>
     
-    <section id
+    <section id="contact" class="py-20 bg-black">
+        <div class="max-w-6xl mx-auto px-6">
+            <h2 class="text-4xl font-bold mb-16 tech-font text-center">
+                <span class="gold-accent">//</span> GET IN <span class="red-accent">TOUCH</span>
+            </h2>
+            
+            <div class="grid md:grid-cols-2 gap-12">
+                <div>
+                    <h3 class="text-2xl font-bold mb-6 tech-font">
+                        LET'S <span class="red-accent">CONNECT</span>
+                    </h3>
+                    <p class="mb-8 text-gray-300">
+                        Interested in collaborating or have questions about my work? Feel free to reach out through this form or connect with me on social media.
+                    </p>
+                    
+                    <div class="space-y-4">
+                        <div class="flex items-center">
+                            <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mr-4">
+                                <i class="fas fa-envelope gold-accent"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Email</h4>
+                                <p class="text-gray-400">adamqab.18@gmail.com</p>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center">
+                            <div class="w-12 h-12 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center mr-4">
+                                <i class="fas fa-map-marker-alt gold-accent"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Location</h4>
+                                <p class="text-gray-400">United States</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-8">
+                        <h4 class="font-bold mb-4">Follow Me</h4>
+                        <div class="flex space-x-4">
+                            <a href="https://www.instagram.com/adhamqab" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-red-500 transition" aria-label="Instagram profile">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                            <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-blue-600 transition" aria-label="LinkedIn profile">
+                                <i class="fab fa-linkedin-in"></i>
+                            </a>
+                            </a>
+<a href="https://github.com/adhamqabban37" target="_blank" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-gray-600 transition" aria-label="GitHub profile">                                 <i class="fab fa-github"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div>
+                    <form class="space-y-6">
+                        <div>
+                            <label for="name" class="block mb-2 text-sm font-medium">Your Name</label>
+                            <input type="text" id="name" name="name" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500" required>
+                        </div>
+                        
+                        <div>
+                            <label for="email" class="block mb-2 text-sm font-medium">Your Email</label>
+                            <input type="email" id="email" name="email" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500" required>
+                        </div>
+                        
+                        <div>
+                            <label for="subject" class="block mb-2 text-sm font-medium">Subject</label>
+                            <input type="text" id="subject" name="subject" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500">
+                        </div>
+                        
+                        <div>
+                            <label for="message" class="block mb-2 text-sm font-medium">Message</label>
+                            <textarea id="message" name="message" rows="5" class="contact-input w-full px-4 py-3 rounded-lg focus:ring-2 focus:ring-gold-500" required></textarea>
+                        </div>
+                        
+                        <button type="submit" class="w-full py-3 bg-red-500 hover:bg-red-600 text-white font-bold rounded-lg transition flex items-center justify-center">
+                            SEND MESSAGE <i class="fas fa-paper-plane ml-2"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <footer class="bg-black border-t border-gray-800 py-8">
+        <div class="max-w-6xl mx-auto px-6 text-center">
+            <div class="flex justify-center mb-6">
+                <a href="#" class="text-2xl font-bold tech-font">
+                    <span class="red-accent">A</span>DHAM <span class="gold-accent">Q</span>AB
+                </a>
+            </div>
+            <p class="text-gray-500 mb-6">
+                &copy; <span id="currentYear">2025</span> Adham Qab. All rights reserved.
+            </p>
+            <div class="flex justify-center space-x-6">
+                <a href="https://www.instagram.com/adhamqab" target="_blank" class="text-gray-500 hover:text-red-500 transition" aria-label="Instagram profile">
+                    <i class="fab fa-instagram"></i>
+                </a>
+                <a href="https://www.linkedin.com/in/adam-qab-620856187/" target="_blank" class="text-gray-500 hover:text-blue-400 transition" aria-label="LinkedIn profile">
+                    <i class="fab fa-linkedin-in"></i>
+                </a>
+<a href="https://github.com/adhamqabban37" target="_blank" class="text-gray-500 hover:text-white transition" aria-label="GitHub profile">     
+</a>    
+<a href="https://github.com/adhamqabban37" target="_blank" class="text-gray-500 hover:text-white transition" aria-label="GitHub profile">    <i class="fab fa-github"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+    
+    <script>
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetElement = document.querySelector(this.getAttribute('href'));
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                }
+                
+                // Close mobile menu if open and it exists
+                const mobileMenu = document.getElementById('mobile-menu');
+                if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
+                    mobileMenu.classList.add('hidden');
+                }
+            });
+        });
+        
+        // Mobile menu toggle
+        const mobileMenuButton = document.querySelector('.mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+
+        if (mobileMenuButton && mobileMenu) {
+            mobileMenuButton.addEventListener('click', function() {
+                mobileMenu.classList.toggle('hidden');
+            });
+        }
+        
+        // Animate elements when they come into view
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fadeIn');
+                    observer.unobserve(entry.target); // Optional: unobserve after animation
+                }
+            });
+        }, { threshold: 0.1 });
+        
+        document.querySelectorAll('.project-card, .achievement-card').forEach(card => {
+            observer.observe(card);
+        });
+        
+        // Typewriter effect - ensure border is removed
+        const typewriterElement = document.querySelector('.typewriter');
+        if (typewriterElement) {
+            // Ensure animation completes before removing border if animation-duration is known
+            // For this example, using a timeout matching CSS animation
+            setTimeout(() => {
+                typewriterElement.style.borderRight = 'none';
+            }, 3500); // Match the 'typing' animation duration in CSS
+        }
+
+        // Update copyright year dynamically
+        document.getElementById('currentYear').textContent = new Date().getFullYear();
+
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=adamqab/https-huggingface-co-spaces-adamqab-myweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>
+</body>
+</html>