From ef962f417cd9520a8d28007a4526417337e788aa Mon Sep 17 00:00:00 2001 From: Dhanush Date: Thu, 21 Aug 2025 11:34:26 +0530 Subject: [PATCH 1/6] added welcome page --- index.html | 14 ++++++++++++++ styles.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..584c0db --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Tech Thursday Demo + + + +
+

Welcome to Git Training Hub

+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3e3bef5 --- /dev/null +++ b/styles.css @@ -0,0 +1,48 @@ +/* Reset default margin and padding */ +* { + 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; +} + +.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; +} + +h1 { + color: #2c3e50; + font-size: 3rem; + 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%; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} From 081df1b62539fe3d72e6f5a7ea5a4d180fe82039 Mon Sep 17 00:00:00 2001 From: Dhanush Date: Thu, 21 Aug 2025 11:48:39 +0530 Subject: [PATCH 2/6] added animated welcome page --- index.html | 19 ++++- script.js | 75 +++++++++++++++++ styles.css | 231 ++++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 302 insertions(+), 23 deletions(-) create mode 100644 script.js 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; } } From 31a0ab577604e26af187718e3c230200b31f10d3 Mon Sep 17 00:00:00 2001 From: Januson Date: Thu, 21 Aug 2025 12:10:30 +0530 Subject: [PATCH 3/6] Title tag changes to h2 --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6df5cc8..f282f38 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ -

Welcome to Git Training Hub

+

Welcome to Git Training Hub !

Master version control with our interactive training

From 901863e99548b5f56d22eb8a5258c9aa03c6146b Mon Sep 17 00:00:00 2001 From: Jebin J Date: Sat, 30 Aug 2025 10:37:54 +0530 Subject: [PATCH 4/6] feat(ui): enhance subtitle text for clarity and detail - Updated the subtitle on the welcome page to better describe the purpose of the training sessions - Text now specifies hands-on, interactive Git training for all skill levels - Improves user understanding of the offering at a glance --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f282f38..da369cc 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@

Welcome to Git Training Hub !

-

Master version control with our interactive training

+

Master version control and collaboration with our hands-on, interactive Git training sessions designed for all skill levels.

From 01b1a1694f008db792afbbaac1385836020cb853 Mon Sep 17 00:00:00 2001 From: Jebin J Date: Sat, 30 Aug 2025 11:04:44 +0530 Subject: [PATCH 5/6] file name update --- Readme.md => README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Readme.md => README.md (100%) diff --git a/Readme.md b/README.md similarity index 100% rename from Readme.md rename to README.md From 3fe71095852da9f4e502b4475ca09b0ead3d31fb Mon Sep 17 00:00:00 2001 From: Jebin J Date: Sat, 30 Aug 2025 11:07:51 +0530 Subject: [PATCH 6/6] docs(readme): add missing space in heading --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 77eeba8..42c2a11 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -#Welcome to Git Training Hub \ No newline at end of file +# Welcome to Git Training Hub \ No newline at end of file