SAPTARSHI-coder · SAPTARSHI-coder · Jul 25, 2026 · Jul 25, 2026 · Jul 25, 2026 · Jul 25, 2026
@@ -0,0 +1,96 @@
+# CSS Skew Active Modal
+
+A modern **Skew Active Modal** built using only **HTML** and **CSS** for creative portfolio layouts. The modal features a smooth skew entrance animation, responsive design, CSS custom properties for easy customization, and accessibility support with `prefers-reduced-motion`.
+
+---
+
+## Features
+
+- 🎨 Pure HTML & CSS (No JavaScript required)
+- ✨ Smooth skew entrance animation
+- 📱 Fully responsive (Desktop, Tablet & Mobile)
+- ♿ Accessible with `prefers-reduced-motion`
+- 🎯 Modern portfolio-style layout
+- 🎭 CSS custom properties for easy theme customization
+- 🚀 Lightweight and easy to integrate
+
+---
+
+## Folder Structure
+
+```
+skew-active-modal-ss/
+├── demo.html
+├── style.css
+└── README.md
+```
+
+---
+
+## Usage
+
+1. Open `demo.html` in any modern web browser.
+2. Click the **View Project** button to open the skew animated modal.
+3. Click the **Close (✕)** button to close the modal.
+
+No additional setup or JavaScript is required.
+
+---
+
+## CSS Custom Properties
+
+The following variables can be customized in `style.css`:
+
+```css
+:root{
+  --bg: #070b17;
+  --surface: #111827;
+  --surface-2: #1f2937;
+  --text: #f8fafc;
+  --muted: #94a3b8;
+  --primary: #6366f1;
+  --secondary: #06b6d4;
+  --radius: 22px;
+  --transition: .45s cubic-bezier(.2,.8,.2,1);
+}
+```
+
+You can modify these variables to change colors, border radius, and animation timing without editing the rest of the stylesheet.
+
+---
+
+## Accessibility
+
+This example supports the following accessibility features:
+
+- `prefers-reduced-motion` to reduce animations.
+- Semantic HTML structure.
+- Keyboard-friendly links and buttons.
+- Responsive layout for different screen sizes.
+
+---
+
+## Browser Support
+
+Works in all modern browsers including:
+
+- Google Chrome
+- Microsoft Edge
+- Mozilla Firefox
+- Safari
+
+---
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- CSS Variables
+- CSS Transitions
+- CSS Keyframe Animations
+
+---
+
+## Preview
+
+This example showcases a creative portfolio card that opens a stylish skew animated modal using only HTML and CSS.
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Skew Active Modal</title>
+
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+
+<section class="portfolio">
+
+    <div class="heading">
+        <span class="tag">Creative Portfolio</span>
+
+        <h1>CSS Skew Active Modal</h1>
+
+        <p>
+            A modern portfolio layout featuring a stylish skew animated modal
+            built entirely with HTML and CSS. Lightweight, responsive and
+            accessible.
+        </p>
+    </div>
+
+    <div class="project-card">
+
+        <div class="project-image"></div>
+
+        <div class="project-content">
+
+            <span class="category">
+                UI / Portfolio
+            </span>
+
+            <h2>Creative Agency Landing Page</h2>
+
+            <p>
+                Click the button below to preview the project details inside
+                a smooth skew animated modal without using JavaScript.
+            </p>
+
+            <a href="#portfolio-modal" class="btn">
+                View Project
+            </a>
+
+        </div>
+
+    </div>
+
+</section>
+
+<div id="portfolio-modal" class="modal">
+
+    <div class="modal-box">
+
+        <a href="#" class="close-btn">
+            ✕
+        </a>
+
+        <div class="modal-image"></div>
+
+        <span class="modal-tag">
+            Featured Project
+        </span>
+
+        <h2>
+            Creative Portfolio Concept
+        </h2>
+
+        <p>
+            This portfolio modal demonstrates a modern skew entrance animation,
+            clean typography, responsive layout and smooth interactions using
+            only HTML and CSS.
+        </p>
+
+        <div class="button-group">
+
+            <a href="#">
+                Live Demo
+            </a>
+
+            <a href="#">
+                Source Code
+            </a>
+
+        </div>
+
+    </div>
+
+</div>
+
+</body>
+</html>