From d1496d039188477b43ac1ab5fe10f5fa6a40a036 Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:01:59 +0530 Subject: [PATCH 01/13] Create demo.html --- submissions/examples/skew-active-modal/demo.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 submissions/examples/skew-active-modal/demo.html diff --git a/submissions/examples/skew-active-modal/demo.html b/submissions/examples/skew-active-modal/demo.html new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/submissions/examples/skew-active-modal/demo.html @@ -0,0 +1 @@ + From d0f4b8a282d006826c3af8af6876c05a286d4106 Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:03:05 +0530 Subject: [PATCH 02/13] Update demo.html --- .../examples/skew-active-modal/demo.html | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/submissions/examples/skew-active-modal/demo.html b/submissions/examples/skew-active-modal/demo.html index 8b137891791..cf70bfa61ca 100644 --- a/submissions/examples/skew-active-modal/demo.html +++ b/submissions/examples/skew-active-modal/demo.html @@ -1 +1,30 @@ + + + + + + Skew Active Modal + + + +
+

Creative Portfolio

+

Pure CSS Skew Active Modal Example

+ + View Project +
+ + + + + From 73df6b7e19a9a34b7f4f8fb3de7ed665f87067f7 Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:04:45 +0530 Subject: [PATCH 03/13] Add CSS for skew-active modal styling --- .../examples/skew-active-modal/style.css | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 submissions/examples/skew-active-modal/style.css diff --git a/submissions/examples/skew-active-modal/style.css b/submissions/examples/skew-active-modal/style.css new file mode 100644 index 00000000000..f3c9e655eba --- /dev/null +++ b/submissions/examples/skew-active-modal/style.css @@ -0,0 +1,72 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: #f4f4f4; +} + +.container { + text-align: center; + padding: 100px 20px; +} + +.btn, +.close-btn { + display: inline-block; + padding: 12px 24px; + background: #4f46e5; + color: white; + text-decoration: none; + border-radius: 8px; + transition: 0.3s; +} + +.btn:hover, +.close-btn:hover { + background: #3730a3; +} + +.modal { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.6); + display: none; + justify-content: center; + align-items: center; +} + +.modal:target { + display: flex; +} + +.modal-box { + background: white; + padding: 30px; + border-radius: 12px; + max-width: 400px; + width: 90%; + transform: skew(-10deg) scale(0.8); + animation: popup 0.4s forwards; +} + +.modal-box * { + transform: skew(10deg); +} + +@keyframes popup { + to { + transform: skew(0deg) scale(1); + } +} + +@media (max-width: 600px) { + .modal-box { + padding: 20px; + } +} + +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } +} From 8badbe6d1d4d010bd522bb668b049a574249227a Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:07:24 +0530 Subject: [PATCH 04/13] Add README for CSS Skew Active Modal project Added a README file for the CSS Skew Active Modal project, detailing features, usage, customization options, and browser support. --- .../examples/skew-active-modal/README.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 submissions/examples/skew-active-modal/README.md diff --git a/submissions/examples/skew-active-modal/README.md b/submissions/examples/skew-active-modal/README.md new file mode 100644 index 00000000000..d08ffec36ad --- /dev/null +++ b/submissions/examples/skew-active-modal/README.md @@ -0,0 +1,34 @@ +# CSS Skew Active Modal + +A simple, responsive modal built using only HTML and CSS. + +## Features + +- Pure HTML and CSS +- No JavaScript required +- Smooth skew animation +- Responsive design +- Accessible with `prefers-reduced-motion` support + +## Files + +- demo.html +- style.css +- README.md + +## Usage + +Open `demo.html` in a browser to view the demo. + +## CSS Custom Properties + +You can customize: + +- Background color +- Button color +- Border radius +- Animation duration + +## Browser Support + +Works in all modern browsers. From a3a52256e395cbb7b60fbb57057eb1386f72c1a8 Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:13:04 +0530 Subject: [PATCH 05/13] Add demo.html for skew active modal example This HTML file contains a creative portfolio example with a skew active modal implemented using only HTML and CSS. --- .../examples/skew-active-modal-ss/demo.html | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 submissions/examples/skew-active-modal-ss/demo.html diff --git a/submissions/examples/skew-active-modal-ss/demo.html b/submissions/examples/skew-active-modal-ss/demo.html new file mode 100644 index 00000000000..cf70bfa61ca --- /dev/null +++ b/submissions/examples/skew-active-modal-ss/demo.html @@ -0,0 +1,30 @@ + + + + + + Skew Active Modal + + + + +
+

Creative Portfolio

+

Pure CSS Skew Active Modal Example

+ + View Project +
+ + + + + From 2456bd8c8a571f8734f7a9cd37e17191a3d387a7 Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:14:11 +0530 Subject: [PATCH 06/13] Add CSS for skewed modal styling --- .../examples/skew-active-modal-ss/style.css | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 submissions/examples/skew-active-modal-ss/style.css diff --git a/submissions/examples/skew-active-modal-ss/style.css b/submissions/examples/skew-active-modal-ss/style.css new file mode 100644 index 00000000000..f3c9e655eba --- /dev/null +++ b/submissions/examples/skew-active-modal-ss/style.css @@ -0,0 +1,72 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: #f4f4f4; +} + +.container { + text-align: center; + padding: 100px 20px; +} + +.btn, +.close-btn { + display: inline-block; + padding: 12px 24px; + background: #4f46e5; + color: white; + text-decoration: none; + border-radius: 8px; + transition: 0.3s; +} + +.btn:hover, +.close-btn:hover { + background: #3730a3; +} + +.modal { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.6); + display: none; + justify-content: center; + align-items: center; +} + +.modal:target { + display: flex; +} + +.modal-box { + background: white; + padding: 30px; + border-radius: 12px; + max-width: 400px; + width: 90%; + transform: skew(-10deg) scale(0.8); + animation: popup 0.4s forwards; +} + +.modal-box * { + transform: skew(10deg); +} + +@keyframes popup { + to { + transform: skew(0deg) scale(1); + } +} + +@media (max-width: 600px) { + .modal-box { + padding: 20px; + } +} + +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } +} From 76bee4cab59726c562286841807bb5374424a52f Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:15:04 +0530 Subject: [PATCH 07/13] Add README for CSS Skew Active Modal example Added README.md for CSS Skew Active Modal with features, usage, and customization details. --- .../examples/skew-active-modal-ss/README.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 submissions/examples/skew-active-modal-ss/README.md diff --git a/submissions/examples/skew-active-modal-ss/README.md b/submissions/examples/skew-active-modal-ss/README.md new file mode 100644 index 00000000000..d08ffec36ad --- /dev/null +++ b/submissions/examples/skew-active-modal-ss/README.md @@ -0,0 +1,34 @@ +# CSS Skew Active Modal + +A simple, responsive modal built using only HTML and CSS. + +## Features + +- Pure HTML and CSS +- No JavaScript required +- Smooth skew animation +- Responsive design +- Accessible with `prefers-reduced-motion` support + +## Files + +- demo.html +- style.css +- README.md + +## Usage + +Open `demo.html` in a browser to view the demo. + +## CSS Custom Properties + +You can customize: + +- Background color +- Button color +- Border radius +- Animation duration + +## Browser Support + +Works in all modern browsers. From 915aa5b2e266c7f0117d01b7a31e2a93feddc1cc Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:15:35 +0530 Subject: [PATCH 08/13] Delete submissions/examples/skew-active-modal/style.css --- .../examples/skew-active-modal/style.css | 72 ------------------- 1 file changed, 72 deletions(-) delete mode 100644 submissions/examples/skew-active-modal/style.css diff --git a/submissions/examples/skew-active-modal/style.css b/submissions/examples/skew-active-modal/style.css deleted file mode 100644 index f3c9e655eba..00000000000 --- a/submissions/examples/skew-active-modal/style.css +++ /dev/null @@ -1,72 +0,0 @@ -body { - margin: 0; - font-family: Arial, sans-serif; - background: #f4f4f4; -} - -.container { - text-align: center; - padding: 100px 20px; -} - -.btn, -.close-btn { - display: inline-block; - padding: 12px 24px; - background: #4f46e5; - color: white; - text-decoration: none; - border-radius: 8px; - transition: 0.3s; -} - -.btn:hover, -.close-btn:hover { - background: #3730a3; -} - -.modal { - position: fixed; - inset: 0; - background: rgba(0,0,0,0.6); - display: none; - justify-content: center; - align-items: center; -} - -.modal:target { - display: flex; -} - -.modal-box { - background: white; - padding: 30px; - border-radius: 12px; - max-width: 400px; - width: 90%; - transform: skew(-10deg) scale(0.8); - animation: popup 0.4s forwards; -} - -.modal-box * { - transform: skew(10deg); -} - -@keyframes popup { - to { - transform: skew(0deg) scale(1); - } -} - -@media (max-width: 600px) { - .modal-box { - padding: 20px; - } -} - -@media (prefers-reduced-motion: reduce) { - * { - animation: none !important; - transition: none !important; - } -} From 6f2b91a05b08926a5e0579ff0d872a516402a440 Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:16:01 +0530 Subject: [PATCH 09/13] Delete submissions/examples/skew-active-modal/demo.html --- .../examples/skew-active-modal/demo.html | 30 ------------------- 1 file changed, 30 deletions(-) delete mode 100644 submissions/examples/skew-active-modal/demo.html diff --git a/submissions/examples/skew-active-modal/demo.html b/submissions/examples/skew-active-modal/demo.html deleted file mode 100644 index cf70bfa61ca..00000000000 --- a/submissions/examples/skew-active-modal/demo.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - Skew Active Modal - - - - -
-

Creative Portfolio

-

Pure CSS Skew Active Modal Example

- - View Project -
- - - - - From b1a190930f946f02ad17f7a4791a713e85d7e199 Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:16:15 +0530 Subject: [PATCH 10/13] Delete submissions/examples/skew-active-modal/README.md --- .../examples/skew-active-modal/README.md | 34 ------------------- 1 file changed, 34 deletions(-) delete mode 100644 submissions/examples/skew-active-modal/README.md diff --git a/submissions/examples/skew-active-modal/README.md b/submissions/examples/skew-active-modal/README.md deleted file mode 100644 index d08ffec36ad..00000000000 --- a/submissions/examples/skew-active-modal/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# CSS Skew Active Modal - -A simple, responsive modal built using only HTML and CSS. - -## Features - -- Pure HTML and CSS -- No JavaScript required -- Smooth skew animation -- Responsive design -- Accessible with `prefers-reduced-motion` support - -## Files - -- demo.html -- style.css -- README.md - -## Usage - -Open `demo.html` in a browser to view the demo. - -## CSS Custom Properties - -You can customize: - -- Background color -- Button color -- Border radius -- Animation duration - -## Browser Support - -Works in all modern browsers. From 1acf44ba62025185c537b711a54ba8e40e26c38f Mon Sep 17 00:00:00 2001 From: samrin1502 Date: Sat, 25 Jul 2026 11:21:33 +0530 Subject: [PATCH 11/13] Refactor demo.html for improved structure and content Updated the demo HTML file to enhance structure and content, including new sections and improved accessibility. --- .../examples/skew-active-modal-ss/demo.html | 103 +++++++++++++++--- 1 file changed, 86 insertions(+), 17 deletions(-) diff --git a/submissions/examples/skew-active-modal-ss/demo.html b/submissions/examples/skew-active-modal-ss/demo.html index cf70bfa61ca..a1d72453c06 100644 --- a/submissions/examples/skew-active-modal-ss/demo.html +++ b/submissions/examples/skew-active-modal-ss/demo.html @@ -1,29 +1,98 @@ - - - Skew Active Modal - + + + Skew Active Modal + + + + + + + -
-

Creative Portfolio

-

Pure CSS Skew Active Modal Example

+
- View Project -
+
+ Creative Portfolio + +

CSS Skew Active Modal

+ +

+ A modern portfolio layout featuring a stylish skew animated modal + built entirely with HTML and CSS. Lightweight, responsive and + accessible. +

+
+ +
+ +
+ +
+ + + UI / Portfolio + + +

Creative Agency Landing Page

+ +

+ Click the button below to preview the project details inside + a smooth skew animated modal without using JavaScript. +

+ + + View Project + + +
+ +
+ + + +