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