From 48d4f17eb0750917d2343cf16233b41b48aaa42a Mon Sep 17 00:00:00 2001 From: srujana Date: Mon, 13 Jul 2026 17:58:47 +0000 Subject: [PATCH 1/2] Add shadow pop newsletter popup for banking --- .../shadow-pop-newsletter-popup/README.md | 39 ++++++ .../shadow-pop-newsletter-popup/demo.html | 42 ++++++ .../shadow-pop-newsletter-popup/style.css | 122 ++++++++++++++++++ 3 files changed, 203 insertions(+) create mode 100644 submissions/examples/shadow-pop-newsletter-popup/README.md create mode 100644 submissions/examples/shadow-pop-newsletter-popup/demo.html create mode 100644 submissions/examples/shadow-pop-newsletter-popup/style.css diff --git a/submissions/examples/shadow-pop-newsletter-popup/README.md b/submissions/examples/shadow-pop-newsletter-popup/README.md new file mode 100644 index 0000000000..f739000e75 --- /dev/null +++ b/submissions/examples/shadow-pop-newsletter-popup/README.md @@ -0,0 +1,39 @@ +# Shadow Pop Newsletter Popup + +A responsive newsletter popup featuring a smooth shadow-pop animation inspired by modern banking interfaces. + +## Features + +- Pure HTML & CSS +- No JavaScript required +- Shadow Pop entrance animation +- Responsive design +- Accessible form controls +- Easy to customize + +## Folder Structure + +``` +shadow-pop-newsletter-popup-srujana/ +├── demo.html +├── style.css +└── README.md +``` + +## Usage + +1. Open `demo.html` in any modern browser. +2. The popup automatically displays with the Shadow Pop animation. +3. Customize colors and spacing using the CSS variables. + +## Technologies + +- HTML5 +- CSS3 +- EaseMotion-style animation classes + +## Accessibility + +- Keyboard accessible inputs +- Visible focus states +- Responsive layout for mobile and desktop \ No newline at end of file diff --git a/submissions/examples/shadow-pop-newsletter-popup/demo.html b/submissions/examples/shadow-pop-newsletter-popup/demo.html new file mode 100644 index 0000000000..ad1ee40c03 --- /dev/null +++ b/submissions/examples/shadow-pop-newsletter-popup/demo.html @@ -0,0 +1,42 @@ + + + + + +Shadow Pop Newsletter Popup + + + + +
+ +
+ +
🏦
+ +

Stay Updated

+ +

+ Subscribe to receive banking news, financial insights, + security alerts and exclusive offers. +

+ +
+ + + +
+ +
+ +
+ + + \ No newline at end of file diff --git a/submissions/examples/shadow-pop-newsletter-popup/style.css b/submissions/examples/shadow-pop-newsletter-popup/style.css new file mode 100644 index 0000000000..18d888e585 --- /dev/null +++ b/submissions/examples/shadow-pop-newsletter-popup/style.css @@ -0,0 +1,122 @@ +:root{ + --ease-primary:#0b5ed7; + --ease-bg:#eef3fb; + --ease-card:#ffffff; + --ease-text:#222; + --ease-radius:18px; + --ease-duration:.6s; +} + +*{ + margin:0; + padding:0; + box-sizing:border-box; +} + +body{ + font-family:Arial,Helvetica,sans-serif; + background:var(--ease-bg); +} + +.overlay{ + min-height:100vh; + display:flex; + justify-content:center; + align-items:center; + padding:20px; +} + +.popup{ + width:100%; + max-width:420px; + background:var(--ease-card); + padding:35px; + border-radius:var(--ease-radius); + text-align:center; + animation:ease-shadow-pop var(--ease-duration) ease forwards; +} + +.icon{ + font-size:48px; + margin-bottom:18px; +} + +h2{ + margin-bottom:12px; + color:var(--ease-text); +} + +p{ + color:#555; + line-height:1.6; + margin-bottom:25px; +} + +input{ + width:100%; + padding:14px; + border:1px solid #ccc; + border-radius:10px; + margin-bottom:15px; + font-size:15px; +} + +input:focus{ + outline:none; + border-color:var(--ease-primary); +} + +button{ + width:100%; + padding:14px; + border:none; + border-radius:10px; + cursor:pointer; + background:var(--ease-primary); + color:#fff; + font-size:16px; + transition:.3s; +} + +button:hover{ + transform:translateY(-2px); +} + +button:focus-visible, +input:focus-visible{ + outline:3px solid rgba(11,94,215,.25); +} + +@keyframes ease-shadow-pop{ + + 0%{ + opacity:0; + transform:scale(.75); + box-shadow:0 0 0 rgba(0,0,0,0); + } + + 60%{ + opacity:1; + transform:scale(1.05); + box-shadow:0 20px 45px rgba(0,0,0,.18); + } + + 100%{ + opacity:1; + transform:scale(1); + box-shadow:0 18px 35px rgba(0,0,0,.15); + } + +} + +@media(max-width:480px){ + +.popup{ + padding:25px; +} + +h2{ + font-size:1.5rem; +} + +} \ No newline at end of file From d291989f2b21881c2e36945a0e7632cd37a12b0c Mon Sep 17 00:00:00 2001 From: srujana Date: Mon, 13 Jul 2026 18:33:59 +0000 Subject: [PATCH 2/2] Add clip path calendar component --- .../examples/clip-path-calendar/README.md | 39 ++++++++ .../examples/clip-path-calendar/demo.html | 71 ++++++++++++++ .../examples/clip-path-calendar/style.css | 94 +++++++++++++++++++ 3 files changed, 204 insertions(+) create mode 100644 submissions/examples/clip-path-calendar/README.md create mode 100644 submissions/examples/clip-path-calendar/demo.html create mode 100644 submissions/examples/clip-path-calendar/style.css diff --git a/submissions/examples/clip-path-calendar/README.md b/submissions/examples/clip-path-calendar/README.md new file mode 100644 index 0000000000..a31953b62b --- /dev/null +++ b/submissions/examples/clip-path-calendar/README.md @@ -0,0 +1,39 @@ +# Clip Path Calendar + +A responsive retro-inspired calendar component with a smooth clip-path reveal animation using pure HTML and CSS. + +## Features + +- Pure HTML & CSS +- No JavaScript required +- Clip-path reveal animation +- Responsive layout +- Retro-inspired design +- Accessible structure + +## Folder Structure + +``` +clip-path-calendar-srujana/ +├── demo.html +├── style.css +└── README.md +``` + +## Usage + +1. Open `demo.html` in any modern browser. +2. The calendar appears with a clip-path reveal animation. +3. Hover over calendar dates for an interactive effect. + +## Technologies + +- HTML5 +- CSS3 +- EaseMotion-style animation classes + +## Accessibility + +- Semantic HTML structure +- Responsive layout +- Keyboard-friendly design \ No newline at end of file diff --git a/submissions/examples/clip-path-calendar/demo.html b/submissions/examples/clip-path-calendar/demo.html new file mode 100644 index 0000000000..3915b3b5eb --- /dev/null +++ b/submissions/examples/clip-path-calendar/demo.html @@ -0,0 +1,71 @@ + + + + + +Clip Path Calendar + + + + +
+ +
+

July 2026

+
+ +
+ Sun + Mon + Tue + Wed + Thu + Fri + Sat +
+ +
+ + + + 1 + 2 + 3 + 4 + + 5 + 6 + 7 + 8 + 9 + 10 + 11 + + 12 + 13 + 14 + 15 + 16 + 17 + 18 + + 19 + 20 + 21 + 22 + 23 + 24 + 25 + + 26 + 27 + 28 + 29 + 30 + 31 +
+ +
+ + + \ No newline at end of file diff --git a/submissions/examples/clip-path-calendar/style.css b/submissions/examples/clip-path-calendar/style.css new file mode 100644 index 0000000000..1aca85dd49 --- /dev/null +++ b/submissions/examples/clip-path-calendar/style.css @@ -0,0 +1,94 @@ +:root{ + --ease-bg:#f7f3e9; + --ease-card:#fff8ea; + --ease-primary:#d35400; + --ease-text:#2c2c2c; + --ease-radius:18px; +} + +*{ + margin:0; + padding:0; + box-sizing:border-box; +} + +body{ + min-height:100vh; + display:flex; + justify-content:center; + align-items:center; + background:var(--ease-bg); + font-family:Arial,Helvetica,sans-serif; + padding:20px; +} + +.calendar{ + width:360px; + background:var(--ease-card); + border-radius:var(--ease-radius); + overflow:hidden; + box-shadow:0 12px 30px rgba(0,0,0,.12); + animation:ease-clip-path .7s ease; +} + +.calendar-header{ + background:var(--ease-primary); + color:white; + padding:20px; + text-align:center; +} + +.weekdays, +.days{ + display:grid; + grid-template-columns:repeat(7,1fr); +} + +.weekdays span{ + padding:14px; + font-weight:bold; + text-align:center; + background:#ffe4c4; +} + +.days span{ + height:48px; + display:flex; + justify-content:center; + align-items:center; + border:1px solid #f0e2c5; + transition:.3s; +} + +.days span:hover{ + background:var(--ease-primary); + color:white; + clip-path:circle(45%); +} + +@keyframes ease-clip-path{ + +0%{ + opacity:0; + clip-path:circle(0% at 50% 50%); +} + +100%{ + opacity:1; + clip-path:circle(150% at 50% 50%); +} + +} + +@media(max-width:420px){ + +.calendar{ + width:100%; +} + +.weekdays span, +.days span{ + font-size:14px; +} + +} \ No newline at end of file