From df64cbd86d461f2175d5f0c4758691469c4bd96b Mon Sep 17 00:00:00 2001 From: JoshmithaKonda Date: Sat, 4 Oct 2025 16:26:15 +0530 Subject: [PATCH] feat(ui): added Explore more modals --- frontendChallenges.html | 114 +++++++++++++++++++++++++------- uiChallenges.html | 143 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 229 insertions(+), 28 deletions(-) diff --git a/frontendChallenges.html b/frontendChallenges.html index da4ef3cf..45b793dd 100644 --- a/frontendChallenges.html +++ b/frontendChallenges.html @@ -4,6 +4,61 @@ Frontend Challenges +

Frontend Challenges

@@ -13,48 +68,61 @@

Frontend Challenges

+
Responsive Navbar
Build a responsive navigation bar with a hamburger menu for mobile view.
-
Explore more
+
Explore more
-
-
Pricing Card
-
- Design and code a modern pricing card layout using flexbox or grid. + + +
-
Login Form UI
+
Pricing Card
- Create a stylish login/signup form with smooth transitions. + Design and code a modern pricing card layout using flexbox or grid.
-
Explore more
+
Explore more
-
-
Landing Page
-
- Design a hero section with a call-to-action button and a background - image. + + -
-
Image Gallery
-
- Make a responsive image gallery that adjusts across devices using CSS - Grid. -
-
Explore more
-
+
+ + diff --git a/uiChallenges.html b/uiChallenges.html index 601609e9..0ef376d3 100644 --- a/uiChallenges.html +++ b/uiChallenges.html @@ -38,6 +38,42 @@ .explorebtn:hover { background-color: #034081; } +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; top: 0; + width: 100%; height: 100%; + background: rgba(0,0,0,0.6); + display: flex; + align-items: center; + justify-content: center; +} +.modal-content { + background: #fff; + padding: 20px; + border-radius: 12px; + width: 90%; + max-width: 600px; + box-shadow: 0 5px 15px rgba(0,0,0,0.3); + position: relative; + animation: fadeIn 0.28s ease-in-out; + outline: none; +} +.close { + position: absolute; + top: 10px; right: 15px; + font-size: 22px; + font-weight: bold; + cursor: pointer; + color: #555; +} +.close:hover { color: #000; } +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-14px); } + to { opacity: 1; transform: translateY(0); } +} + @@ -49,29 +85,126 @@

UI Design Tasks

Profile Card UI
Design and build a profile card with image, name, and social links.
-
Explore more
+
Explore more
+
Pricing Table
Create a clean and responsive pricing component for a SaaS app.
-
Explore more
+
Explore more
+
Login Page UI
Design a modern login form with input validation UI.
-
Explore more
+
Explore more
+
Navbar with Dropdown
Build a responsive navigation bar with dropdown support.
-
Explore more
+
Explore more
+
Dark Mode Toggle
Add a dark mode toggle switch with a smooth transition effect.
-
Explore more
+
Explore more
+ +
+
+ + + + + + + + + + + +