From d50f9d405417cdaf3772ba50df737f8de52c7c1f Mon Sep 17 00:00:00 2001 From: KrishLalakiya Date: Tue, 28 Oct 2025 18:04:36 +0530 Subject: [PATCH 1/4] Add responsive navigation menu and improve styles Description: This PR fixes several mobile layout bugs and improves site usability. Changes Made: Responsive Header: Added display: flex to the desktop header to correctly align the logo and nav links. Implemented a CSS-only "hamburger menu" for mobile (using the "checkbox hack"). The menu is now functional and animates open and closed. Centered Gallery: Added align-items: center to the .card-grid media query. This now centers the cards properly when they stack on mobile. Accessibility Fix: Corrected the low-contrast text. The default body text is now dark, and color: #fff is only used on sections with dark backgrounds (like the header and footer). --- MineCraft-Builders/Html/index.html | 24 ++--- MineCraft-Builders/css/style.css | 135 +++++++++++++++++++++++++---- 2 files changed, 130 insertions(+), 29 deletions(-) diff --git a/MineCraft-Builders/Html/index.html b/MineCraft-Builders/Html/index.html index 4b39241c..415e390b 100644 --- a/MineCraft-Builders/Html/index.html +++ b/MineCraft-Builders/Html/index.html @@ -8,11 +8,16 @@ -

Minecraft Builders Club

-
-

Build. Create. Survive.

Join the community of creative builders crafting worlds block by block!

- Minecraft landscape + A sprawling Minecraft landscape build Join Now
-

About Our Club

@@ -48,31 +51,29 @@

About Our Club

- -

Join Our World

@@ -89,11 +90,10 @@

Join Our World

- - + \ No newline at end of file diff --git a/MineCraft-Builders/css/style.css b/MineCraft-Builders/css/style.css index dc584405..5dcd763d 100644 --- a/MineCraft-Builders/css/style.css +++ b/MineCraft-Builders/css/style.css @@ -1,6 +1,5 @@ @import url('https://fonts.cdnfonts.com/css/minecraft-4'); -/* Basic Reset */ * { box-sizing: border-box; margin: 0; @@ -9,29 +8,35 @@ body { font-family: 'Minecraft', sans-serif; - background-color: #5c913b; - color: #fff; + background-color: #79c05a; + color: #2a2a2a; line-height: 1.6; } -/* Reusable */ .container { - width: 90%; max-width: 1100px; - margin: auto; + margin: 0 auto; + padding: 0 1.5rem; } h2 { text-align: center; margin-bottom: 1rem; - text-shadow: 2px 2px #2a2a2a; + text-shadow: 2px 2px #555; } -/* HEADER */ .site-header { background: url('../images/dirt-texture.png') repeat; padding: 1rem 0; border-bottom: 5px solid #3c2a0e; + color: #fff; +} + +.site-header .container { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; } .logo { @@ -42,7 +47,6 @@ h2 { .navbar ul { display: flex; - justify-content: flex-end; list-style: none; } @@ -57,13 +61,18 @@ h2 { background: #3c2a0e; border-radius: 4px; box-shadow: 2px 2px #222; + transition: background-color 0.3s ease; } .navbar a:hover { background: #745b32; } -/* HERO */ +.nav-toggle, +.nav-toggle-label { + display: none; +} + .hero { text-align: center; padding: 2rem 0; @@ -87,17 +96,18 @@ h2 { margin-top: 1rem; border: 3px solid #2a2a2a; box-shadow: 3px 3px #222; + transition: background-color 0.3s ease; } .btn:hover { background: #745b32; } -/* ABOUT */ .about { background: #3c2a0e; padding: 2rem 0; text-align: center; + color: #fff; } .about ul { @@ -107,9 +117,8 @@ h2 { margin-top: 1rem; } -/* GALLERY */ .gallery { - background: #79c05a; + background: #5c913b; padding: 2rem 0; } @@ -122,12 +131,20 @@ h2 { .card { background: #3c2a0e; + color: #fff; padding: 1rem; max-width: 300px; + width: 100%; text-align: center; border: 3px solid #2a2a2a; border-radius: 6px; box-shadow: 3px 3px #111; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.card:hover { + transform: scale(1.05); + box-shadow: 6px 6px #111; } .card img { @@ -135,10 +152,10 @@ h2 { border-radius: 4px; } -/* CONTACT */ .contact { background: #3c2a0e; padding: 2rem 0; + color: #fff; } .contact-form { @@ -154,23 +171,107 @@ textarea { border-radius: 4px; margin-bottom: 1rem; font-family: 'Minecraft', sans-serif; + font-size: 1rem; } -/* FOOTER */ .site-footer { text-align: center; padding: 1rem 0; background: #2a2a2a; + color: #fff; border-top: 5px solid #3c2a0e; } -/* RESPONSIVE */ @media (max-width: 768px) { + .nav-toggle-label { + display: block; + cursor: pointer; + width: 30px; + height: 25px; + position: relative; + } + + .nav-toggle-label span, + .nav-toggle-label span::before, + .nav-toggle-label span::after { + display: block; + background: #fff; + height: 4px; + width: 100%; + border-radius: 2px; + position: absolute; + transition: all 0.3s ease; + } + + .nav-toggle-label span::before { + content: ''; + top: -8px; + } + + .nav-toggle-label span::after { + content: ''; + top: 8px; + } + + .navbar { + position: absolute; + top: 100%; + left: 0; + width: 100%; + background: #3c2a0e; + max-height: 0; + overflow: hidden; + transition: max-height 0.5s ease-in-out; + } + .navbar ul { flex-direction: column; align-items: center; + padding: 1rem 0; + } + + .navbar li { + margin-left: 0; + width: 100%; + text-align: center; + } + + .navbar a { + display: block; + padding: 1rem; + background: none; + box-shadow: none; + border-radius: 0; + } + + .navbar a:hover { + background: #745b32; } + + .nav-toggle { + display: none; + } + + .nav-toggle:checked ~ .navbar { + max-height: 500px; + } + + .nav-toggle:checked + .nav-toggle-label span { + background: transparent; + } + + .nav-toggle:checked + .nav-toggle-label span::before { + transform: rotate(45deg); + top: 0; + } + + .nav-toggle:checked + .nav-toggle-label span::after { + transform: rotate(-45deg); + top: 0; + } + .card-grid { flex-direction: column; + align-items: center; } -} +} \ No newline at end of file From 100cc6abf6ee252d36176a55fa5ad6c61e009cf4 Mon Sep 17 00:00:00 2001 From: KrishLalakiya Date: Wed, 29 Oct 2025 03:07:14 +0530 Subject: [PATCH 2/4] Add card-wrapper for improved card structure Introduced a new .card-wrapper div to encapsulate the card container, improving the structure and separation of the 3D flipping card component. Updated CSS to reflect the new hierarchy and adjusted hover effect to target the container within the wrapper. --- 3D Flipping Card Component/index.html | 54 ++++++++++++++------------- 3D Flipping Card Component/style.css | 10 ++++- 2 files changed, 36 insertions(+), 28 deletions(-) diff --git a/3D Flipping Card Component/index.html b/3D Flipping Card Component/index.html index 4fb11b9a..7b4d22b2 100644 --- a/3D Flipping Card Component/index.html +++ b/3D Flipping Card Component/index.html @@ -10,38 +10,40 @@
-
-
-
- - -
+
+
+
+
+ + +
-
-
-
Card Number
-
1000 2000 0002 0001
-
Ayush Agrawal
-
+
+
+
Card Number
+
1000 2000 0002 0001
+
Ayush Agrawal
+
-
-
-
VALID
-
THRU
+
+
+
VALID
+
THRU
+
+
08/26
-
08/26
-
-
-
For customer service call +977 4343 3433 or email at mastercard@gmail.com
- -
056
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique cum unde labore sed molestiae placeat molestias enim error praesentium, quo temporibus facilis rerum quos nesciunt? Libero doloremque natus consectetur. Animi libero magni numquam soluta nobis. Deserunt incidunt quos hic, nesciunt dolorum facere in, expedita, asperiores accusamus iusto amet quo ullam.
+
+
For customer service call +977 4343 3433 or email at mastercard@gmail.com
+ +
056
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique cum unde labore sed molestiae placeat molestias enim error praesentium, quo temporibus facilis rerum quos nesciunt? Libero doloremque natus consectetur. Animi libero magni numquam soluta nobis. Deserunt incidunt quos hic, nesciunt dolorum facere in, expedita, asperiores accusamus iusto amet quo ullam.
+
diff --git a/3D Flipping Card Component/style.css b/3D Flipping Card Component/style.css index 76c71d86..3321cced 100644 --- a/3D Flipping Card Component/style.css +++ b/3D Flipping Card Component/style.css @@ -39,16 +39,22 @@ section::after { transform: translate(150px, 100px); } -.container { +.card-wrapper { height: 230px; width: 380px; position: relative; z-index: 10; +} + +.container { + height: 100%; + width: 100%; + position: relative; transition: 0.6s; transform-style: preserve-3d; } -.container:hover{ +.card-wrapper:hover .container { transform: rotateY(180deg); } From 0629ac1ee51a7cceb4f7a5215788fd151e8bbbbb Mon Sep 17 00:00:00 2001 From: KrishLalakiya Date: Thu, 30 Oct 2025 18:29:34 +0530 Subject: [PATCH 3/4] Update image paths in Signin.html Changed image source paths in Login/Signin.html from absolute to relative paths to ensure images load correctly regardless of deployment location. --- Login/Signin.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Login/Signin.html b/Login/Signin.html index 96beb8c6..d8ffef6f 100644 --- a/Login/Signin.html +++ b/Login/Signin.html @@ -26,14 +26,14 @@

Welcome back 👏

href="#" title="Use Google" > - Google + Google Log in with Google - Apple + Apple Log in with Apple @@ -51,7 +51,7 @@

Welcome back 👏

placeholder="Your Email" required > - +
@@ -65,7 +65,7 @@

Welcome back 👏

pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required > - Password Icon + Password Icon
From 43a7827322fa85f5bf16e2cef6b65d19f5e0d1bf Mon Sep 17 00:00:00 2001 From: KrishLalakiya Date: Thu, 30 Oct 2025 18:30:10 +0530 Subject: [PATCH 4/4] Revert "Update image paths in Signin.html" This reverts commit 0629ac1ee51a7cceb4f7a5215788fd151e8bbbbb. --- Login/Signin.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Login/Signin.html b/Login/Signin.html index d8ffef6f..96beb8c6 100644 --- a/Login/Signin.html +++ b/Login/Signin.html @@ -26,14 +26,14 @@

Welcome back 👏

href="#" title="Use Google" > - Google + Google Log in with Google - Apple + Apple Log in with Apple
@@ -51,7 +51,7 @@

Welcome back 👏

placeholder="Your Email" required > - +
@@ -65,7 +65,7 @@

Welcome back 👏

pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$" required > - Password Icon + Password Icon