diff --git a/index.html b/index.html index 584c0db..6df5cc8 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,27 @@ Tech Thursday Demo +
-

Welcome to Git Training Hub

+
+ +

Welcome to Git Training Hub

+

Master version control with our interactive training

+
+ + +
+
+
+
+
+
+
+ diff --git a/script.js b/script.js new file mode 100644 index 0000000..a43d348 --- /dev/null +++ b/script.js @@ -0,0 +1,75 @@ +// Add smooth scroll to buttons +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); + +// Add hover effect to buttons +const buttons = document.querySelectorAll('.btn'); +buttons.forEach(button => { + button.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-3px)'; + this.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.2)'; + }); + + button.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0)'; + this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.1)'; + }); +}); + +// Add click effect to buttons +buttons.forEach(button => { + button.addEventListener('mousedown', function() { + this.style.transform = 'translateY(1px)'; + }); + + button.addEventListener('mouseup', function() { + this.style.transform = 'translateY(-3px)'; + }); +}); + +// Add floating animation to shapes +const shapes = document.querySelectorAll('.shape'); +shapes.forEach((shape, index) => { + // Randomize initial position and animation + const randomX = Math.random() * 20 - 10; + const randomY = Math.random() * 20 - 10; + const randomDuration = 15 + Math.random() * 10; + const randomDelay = Math.random() * 5; + + shape.style.transform = `translate(${randomX}px, ${randomY}px)`; + shape.style.animation = `float ${randomDuration}s infinite ease-in-out ${randomDelay}s`; +}); + +// Add parallax effect on mouse move +document.addEventListener('mousemove', (e) => { + const x = (window.innerWidth / 2 - e.pageX) / 20; + const y = (window.innerHeight / 2 - e.pageY) / 20; + + document.querySelector('.welcome-box').style.transform = `translate(${x * 0.2}px, ${y * 0.2}px)`; + + shapes.forEach((shape, index) => { + const speed = (index + 1) * 0.5; + shape.style.transform = `translate(${x * speed}px, ${y * speed}px)`; + }); +}); + +// Add scroll reveal animation +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate'); + } + }); +}, { + threshold: 0.1 +}); + +document.querySelectorAll('.welcome-box > *').forEach((el) => { + observer.observe(el); +}); diff --git a/styles.css b/styles.css index 3e3bef5..7112d3d 100644 --- a/styles.css +++ b/styles.css @@ -1,48 +1,235 @@ -/* Reset default margin and padding */ +/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f5f5f5; - color: #333; - line-height: 1.6; +:root { + --primary: #4a6fa5; + --secondary: #6b4e71; + --accent: #ff6b6b; + --light: #f8f9fa; + --dark: #343a40; } +body { + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + color: var(--dark); + line-height: 1.6; + min-height: 100vh; + overflow-x: hidden; +} + +/* Container and Layout */ .container { max-width: 1200px; margin: 0 auto; padding: 2rem; - text-align: center; min-height: 100vh; display: flex; - flex-direction: column; justify-content: center; align-items: center; + position: relative; + overflow: hidden; } -h1 { - color: #2c3e50; - font-size: 3rem; +/* Welcome Box */ +.welcome-box { + background: rgba(255, 255, 255, 0.95); + padding: 3rem 2rem; + border-radius: 20px; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); + text-align: center; + max-width: 600px; + width: 100%; + position: relative; + z-index: 1; + backdrop-filter: blur(10px); + transform: translateY(20px); + opacity: 0; + animation: fadeInUp 0.8s ease-out forwards; + animation-delay: 0.3s; +} + +/* Logo */ +.logo { + font-size: 4rem; margin-bottom: 1.5rem; - background: linear-gradient(45deg, #3498db, #9b59b6); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - animation: gradient 3s ease infinite; - background-size: 200% 200%; + color: var(--primary); + transform: scale(0); + animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; + animation-delay: 0.5s; } -@keyframes gradient { - 0% { - background-position: 0% 50%; +/* Typography */ +.title { + font-size: 2.5rem; + margin-bottom: 1rem; + color: var(--dark); + background: linear-gradient(45deg, var(--primary), var(--secondary)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + opacity: 0; + transform: translateY(20px); + animation: fadeInUp 0.8s ease-out forwards; + animation-delay: 0.7s; +} + +.subtitle { + font-size: 1.2rem; + color: #6c757d; + margin-bottom: 2rem; + opacity: 0; + transform: translateY(20px); + animation: fadeInUp 0.8s ease-out forwards; + animation-delay: 0.9s; +} + +/* Buttons */ +.cta-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + opacity: 0; + transform: translateY(20px); + animation: fadeInUp 0.8s ease-out forwards; + animation-delay: 1.1s; +} + +.btn { + padding: 0.8rem 2rem; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; + position: relative; + overflow: hidden; +} + +.btn.primary { + background: linear-gradient(45deg, var(--primary), var(--secondary)); + color: white; + box-shadow: 0 5px 15px rgba(74, 110, 165, 0.4); +} + +.btn.secondary { + background: transparent; + color: var(--primary); + border: 2px solid var(--primary); +} + +.btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); +} + +/* Floating Shapes */ +.floating-shapes { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 0; +} + +.shape { + position: absolute; + border-radius: 50%; + background: linear-gradient(45deg, var(--primary), var(--secondary)); + opacity: 0.1; + animation: float 15s infinite linear; +} + +.shape-1 { + width: 150px; + height: 150px; + top: 10%; + left: 10%; + animation-delay: 0s; +} + +.shape-2 { + width: 250px; + height: 250px; + bottom: 10%; + right: 10%; + animation-delay: 5s; + animation-direction: reverse; +} + +.shape-3 { + width: 100px; + height: 100px; + top: 50%; + right: 20%; + animation-delay: 10s; +} + +/* Keyframe Animations */ +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); } - 50% { - background-position: 100% 50%; +} + +@keyframes popIn { + 0% { + transform: scale(0); + } + 70% { + transform: scale(1.1); } 100% { - background-position: 0% 50%; + transform: scale(1); + } +} + +@keyframes float { + 0%, 100% { + transform: translate(0, 0) rotate(0deg); + } + 25% { + transform: translate(20px, 20px) rotate(5deg); + } + 50% { + transform: translate(0, 40px) rotate(0deg); + } + 75% { + transform: translate(-20px, 20px) rotate(-5deg); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .title { + font-size: 2rem; + } + + .subtitle { + font-size: 1rem; + } + + .cta-buttons { + flex-direction: column; + gap: 0.8rem; + } + + .btn { + width: 100%; + } + + .shape { + display: none; } }