From 6a5721598d3a4f39fdfd6a9a0a2bbd6faf4e2260 Mon Sep 17 00:00:00 2001 From: akairatu Date: Tue, 29 Jul 2025 15:00:56 +0500 Subject: [PATCH] checkpoint --- src/css/style.css | 140 +++++++++++++++++++++++++++++++++++++++------- src/index.html | 84 +++++++++++++++++----------- 2 files changed, 171 insertions(+), 53 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 5cb9fdc..3bfac5b 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -8,12 +8,13 @@ --text-color: #1F2937; --text-light: #6B7280; --white: #ffffff; - --gradient-1: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%); + --gradient-1: linear-gradient(135deg, #4F46E5 0%, #4F46E5 100%); --gradient-2: linear-gradient(135deg, #FB7185 0%, #FFB1C1 100%); --gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%); --transition: all 0.3s ease; - --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow: 0 0px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + } /* Base Animations */ @@ -181,8 +182,8 @@ body { /* Hero Section */ .hero-section { - padding: 120px 0 60px; - background: var(--gradient-1); + padding: 143px 0 0; + background: var(--primary-color); position: relative; overflow: hidden; color: var(--white); @@ -246,6 +247,58 @@ body { animation: float 6s ease-in-out infinite; } +/* Wave Separator */ +.wave-separator { + position: relative; + width: 100%; + background: var(--primary-color); + height: 200px; + overflow: hidden; +} + +.wave-separator .wave { + position: absolute; + bottom: -2px; + left: -100%; + width: 300%; + height: 100%; + animation: wave 18s linear infinite; + transform: translate3d(0, 0, 0); + will-change: transform; +} + +.wave-separator .wave2 { + animation: wave 12s linear infinite; + opacity: 0.5; +} + +.wave-separator .wave3 { + animation: wave 8s linear infinite; + opacity: 0.2; +} + +.wave-separator .wave path { + fill: var(--white); +} + +@keyframes wave { + 0% { + transform: translateX(0); + } + 50% { + transform: translateX(33.33%); + } +} + +@keyframes swell { + 0%, 100% { + transform: translateY(-5px); + } + 50% { + transform: translateY(5px); + } +} + /* About Section */ .about-section { padding: 80px 0; @@ -463,43 +516,88 @@ body { display: inline-block; } -.methodology-grid { +/* Methodology Section renamed to Exam Types */ +.methodology-section { + background: var(--white); + padding: 80px 0; + position: relative; + margin-top: -2px; +} + +.exam-types-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } -.method-card { +.exam-type-card { background: var(--white); - padding: 2rem; - border-radius: 15px; + padding: 2.5rem; + border-radius: 20px; box-shadow: var(--shadow); transition: var(--transition); - text-align: center; + border: 1px solid rgba(79, 70, 229, 0.1); + position: relative; + overflow: hidden; } -.method-card:hover { +.exam-type-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--gradient-1); + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1; +} + +.exam-type-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); + border-color: var(--primary-color); } -.method-icon { - width: 80px; - height: 80px; - margin: 0 auto 1.5rem; +.exam-type-card:hover::before { + opacity: 0.03; +} + +.card-icon { + width: 60px; + height: 60px; background: var(--gradient-1); - border-radius: 50%; + border-radius: 15px; display: flex; align-items: center; justify-content: center; + margin-bottom: 1.5rem; + position: relative; + z-index: 2; } -.method-icon i { - font-size: 2rem; +.card-icon i { + font-size: 1.5rem; color: var(--white); } +.exam-type-card h3 { + color: var(--primary-color); + font-size: 1.5rem; + margin-bottom: 1rem; + position: relative; + z-index: 2; +} + +.exam-description { + color: var(--text-light); + line-height: 1.6; + position: relative; + z-index: 2; +} + .exam-features { list-style: none; margin: 1.5rem 0; @@ -689,6 +787,10 @@ body { grid-template-columns: repeat(2, 1fr); } + .exam-types-grid { + grid-template-columns: 1fr; + } + .footer-content { grid-template-columns: 1fr; gap: 2rem; @@ -763,4 +865,4 @@ body { .footer-links { grid-template-columns: 1fr; } -} \ No newline at end of file +} diff --git a/src/index.html b/src/index.html index ededb69..ad7ee6e 100644 --- a/src/index.html +++ b/src/index.html @@ -11,7 +11,7 @@