From 3e0d189d001d8b5ee45bb63f0a0adce243d239c4 Mon Sep 17 00:00:00 2001 From: Yasir Akhlaque Date: Wed, 15 Jan 2025 17:20:58 +0530 Subject: [PATCH] Improved About UI --- about.css | 91 ++++++++--- about.html | 450 +++++++++++++++++++++-------------------------------- 2 files changed, 249 insertions(+), 292 deletions(-) diff --git a/about.css b/about.css index f9997e6..346ca57 100644 --- a/about.css +++ b/about.css @@ -310,36 +310,85 @@ html .dark { display: flex; flex-wrap: wrap; justify-content: center; - gap: 20px; - margin-top: 30px; - } + gap: 30px; + margin-top: 40px; +} - .feature-card { +.feature-card { background: var(--card-bg); - border: 2px solid #ffd465; - border-radius: 8px; - padding: 20px; - width: 250px; + border: 2px solid var(--border-color); + border-radius: 16px; + padding: 25px; + width: 280px; text-align: center; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - transition: transform 0.3s ease; - } + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; +} - .feature-card:hover { - transform: translateY(-10px); - cursor: pointer; - } +.feature-card:hover { + transform: translateY(-10px) scale(1.05); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); + background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); +} - .feature-card i { - font-size: 40px; +.feature-card i { + font-size: 50px; color: var(--icons-color); - margin-bottom: 10px; - } + margin-bottom: 15px; + transition: color 0.3s ease, transform 0.3s ease; +} - .feature-card h3 { +.feature-card:hover i { + transform: scale(1.2); + color: var(--highlight-color); +} + +.feature-card h3 { color: var(--heading-color); + font-size: 1.5rem; margin-bottom: 10px; - } + font-weight: bold; +} + +.feature-card p { + color: var(--card-text); + font-size: 1rem; + line-height: 1.5; +} + +@media (prefers-color-scheme: dark) { + :root { + --card-bg: #1a1a1a; + --border-color: #333; + --icons-color: #ffd700; + --highlight-color: #ff4500; + --heading-color: #ffeb3b; + --card-text: #d4d4d4; + } + .feature-card:hover{ + --card-text: #000000; + } +} + +@media (prefers-color-scheme: light) { + :root { + --card-bg: #858074; + --border-color: #ffd465; + --icons-color: #d6a52b; + --highlight-color: #ff8c00; + --heading-color: #8b4513; + --card-text: #333; + } +} + +@media (max-width: 768px) { + .feature-card { + width: 90%; + } +} + .image-button1 { position: fixed; left: 0px; /* Aligns the button to the left side */ diff --git a/about.html b/about.html index 6c3a1a1..4e19738 100644 --- a/about.html +++ b/about.html @@ -1,182 +1,161 @@ - - - - - - - - - About Us - Ajivika - - - - - - - + + + + + + - + - - + + - + +
+
+ + -
-
- - - + +

- About Us + About Us

@@ -252,53 +231,47 @@

🌍 Access to Jobs in Smaller Areas

} - + crossorigin="anonymous" referrerpolicy="no-referrer"> - + - - + + + \ No newline at end of file