diff --git a/public/consolidated/css.json b/public/consolidated/css.json
index b759c611..339e3fc2 100644
--- a/public/consolidated/css.json
+++ b/public/consolidated/css.json
@@ -38,6 +38,19 @@
],
"contributors": [],
"code": ".button {\n font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;\n background: #0a85ff;\n color: #fff;\n padding: 8px 12px;\n border: none;\n margin: 4px;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.button:hover {\n background: #0974ee;\n color: #fff\n}\n"
+ },
+ {
+ "title": "Switch Button",
+ "description": "A switch button with a beautiful style and effect.",
+ "author": "Haider-Mukhtar",
+ "tags": [
+ "button",
+ "switch",
+ "toggle",
+ "slider"
+ ],
+ "contributors": [],
+ "code": "/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background: #d4acfb;\n border-radius: 50px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n border-radius: 50px;\n box-shadow: 0 0px 20px rgba(0,0,0,0.4);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch input:checked + .slider {\n background: #b84fce;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #b84fce;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.6em);\n width: 2em;\n height: 2em;\n bottom: 0;\n}\n\n/* HTML */\n\n"
}
]
},
diff --git a/public/data/css.json b/public/data/css.json
new file mode 100644
index 00000000..601a9ca2
--- /dev/null
+++ b/public/data/css.json
@@ -0,0 +1,297 @@
+[
+ {
+ "categoryName": "Typography",
+ "snippets": [
+ {
+ "title": "Responsive Font Sizing",
+ "description": "Adjusts font size based on viewport width.",
+ "code": ["h1 {", " font-size: calc(1.5rem + 2vw);", "}"],
+ "tags": ["css", "font", "responsive", "typography"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "Letter Spacing",
+ "description": "Adds space between letters for better readability.",
+ "code": ["p {", " letter-spacing: 0.05em;", "}"],
+ "tags": ["css", "typography", "spacing"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "Text Transformation",
+ "description": "It can be used to turn text into uppercase or lowercase letters, or capitalize the first letter of each word",
+ "code": [
+ "p.uppercase {",
+ " text-transform: uppercase;",
+ "}",
+ "",
+ "p.lowercase {",
+ " text-transform: lowercase;",
+ "}",
+ "",
+ "p.capitalize {",
+ " text-transform: capitalize;",
+ "}"
+ ],
+ "tags": ["css", "typography", "text"],
+ "author": "Haider-Mukhtar"
+ }
+ ]
+ },
+ {
+ "categoryName": "Layouts",
+ "snippets": [
+ {
+ "title": "Grid layout",
+ "description": "Equal sized items in a responsive grid",
+ "code": [
+ ".grid-container {",
+ " display: grid",
+ " grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));",
+ "/* Explanation:",
+ "- `auto-fit`: Automatically fits as many columns as possible within the container.",
+ "- `minmax(250px, 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space).",
+ "*/",
+ "}",
+ ""
+ ],
+ "tags": ["css", "layout", "grid"],
+ "author": "xshubhamg"
+ },
+ {
+ "title": "Sticky Footer",
+ "description": "Ensures the footer always stays at the bottom of the page.",
+ "code": [
+ "body {",
+ " display: flex;",
+ " flex-direction: column;",
+ " min-height: 100vh;",
+ "}",
+ "",
+ "footer {",
+ " margin-top: auto;",
+ "}"
+ ],
+ "tags": ["css", "layout", "footer", "sticky"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "Equal-Width Columns",
+ "description": "Creates columns with equal widths using flexbox.",
+ "code": [
+ ".columns {",
+ " display: flex;",
+ " justify-content: space-between;",
+ "}",
+ "",
+ ".column {",
+ " flex: 1;",
+ " margin: 0 10px;",
+ "}"
+ ],
+ "tags": ["css", "flexbox", "columns", "layout"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "CSS Reset",
+ "description": "Resets some default browser styles, ensuring consistency across browsers.",
+ "code": [
+ "* {",
+ " margin: 0;",
+ " padding: 0;",
+ " box-sizing: border-box",
+ "}"
+ ],
+ "tags": ["css", "reset", "browser", "layout"],
+ "author": "AmeerMoustafa"
+ },
+ {
+ "title": "Responsive Design",
+ "description": "The different responsive breakpoints.",
+ "code": [
+ "/* Phone */",
+ ".element {",
+ " margin: 0 10%",
+ "}",
+ "",
+ "/* Tablet */",
+ "@media (min-width: 640px) {",
+ " .element {",
+ " margin: 0 20%",
+ " }",
+ "}",
+ "",
+ "/* Desktop base */",
+ "@media (min-width: 768px) {",
+ " .element {",
+ " margin: 0 30%",
+ " }",
+ "}",
+ "",
+ "/* Desktop large */",
+ "@media (min-width: 1024px) {",
+ " .element {",
+ " margin: 0 40%",
+ " }",
+ "}",
+ "",
+ "/* Desktop extra large */",
+ "@media (min-width: 1280px) {",
+ " .element {",
+ " margin: 0 60%",
+ " }",
+ "}",
+ "",
+ "/* Desktop bige */",
+ "@media (min-width: 1536px) {",
+ " .element {",
+ " margin: 0 80%",
+ " }",
+ "}"
+ ],
+ "tags": ["css", "responsive"],
+ "author": "kruimol"
+ }
+ ]
+ },
+ {
+ "categoryName": "Buttons",
+ "snippets": [
+ {
+ "title": "Button Hover Effect",
+ "description": "Creates a hover effect with a color transition.",
+ "code": [
+ ".button {",
+ " background-color: #007bff;",
+ " color: white;",
+ " padding: 10px 20px;",
+ " border: none;",
+ " border-radius: 5px;",
+ " cursor: pointer;",
+ " transition: background-color 0.3s ease;",
+ "}",
+ "",
+ ".button:hover {",
+ " background-color: #0056b3;",
+ "}"
+ ],
+ "tags": ["css", "button", "hover", "transition"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "3D Button Effect",
+ "description": "Adds a 3D effect to a button when clicked.",
+ "code": [
+ ".button {",
+ " background-color: #28a745;",
+ " color: white;",
+ " padding: 10px 20px;",
+ " border: none;",
+ " border-radius: 5px;",
+ " box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);",
+ " transition: transform 0.1s;",
+ "}",
+ "",
+ ".button:active {",
+ " transform: translateY(2px);",
+ " box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);",
+ "}"
+ ],
+ "tags": ["css", "button", "3D", "effect"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "MacOS Button",
+ "description": "A macOS-like button style, with hover and shading effects.",
+ "code": [
+ ".button {",
+ " font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;",
+ " background: #0a85ff;",
+ " color: #fff;",
+ " padding: 8px 12px;",
+ " border: none;",
+ " margin: 4px;",
+ " border-radius: 10px;",
+ " cursor: pointer;",
+ " box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/",
+ " font-size: 14px;",
+ " display: flex;",
+ " align-items: center;",
+ " justify-content: center;",
+ " text-decoration: none;",
+ " transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);",
+ "}",
+ ".button:hover {",
+ " background: #0974ee;",
+ " color: #fff",
+ "}"
+ ],
+ "tags": ["css", "button", "macos", "hover", "transition"],
+ "author": "e3nviction"
+ }
+ ]
+ },
+ {
+ "categoryName": "Effects",
+ "snippets": [
+ {
+ "title": "Blur Background",
+ "description": "Applies a blur effect to the background of an element.",
+ "code": [
+ ".blur-background {",
+ " backdrop-filter: blur(10px);",
+ " background: rgba(255, 255, 255, 0.5);",
+ "}"
+ ],
+ "tags": ["css", "blur", "background", "effects"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "Hover Glow Effect",
+ "description": "Adds a glowing effect on hover.",
+ "code": [
+ ".glow {",
+ " background-color: #f39c12;",
+ " padding: 10px 20px;",
+ " border-radius: 5px;",
+ " transition: box-shadow 0.3s ease;",
+ "}",
+ "",
+ ".glow:hover {",
+ " box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);",
+ "}"
+ ],
+ "tags": ["css", "hover", "glow", "effects"],
+ "author": "dostonnabotov"
+ },
+ {
+ "title": "Hover to Reveal Color",
+ "description": "A card with an image that transitions from grayscale to full color on hover.",
+ "code": [
+ ".card {",
+ " height: 300px;",
+ " width: 200px;",
+ " border-radius: 5px;",
+ " overflow: hidden;",
+ "}",
+ "",
+ ".card img{",
+ " height: 100%;",
+ " width: 100%;",
+ " object-fit: cover;",
+ " filter: grayscale(100%);",
+ " transition: all 0.3s;",
+ " transition-duration: 200ms;",
+ " cursor: pointer;",
+ "}",
+ "",
+ ".card:hover img {",
+ " filter: grayscale(0%);",
+ " scale: 1.05;",
+ "} "
+ ],
+ "tags": ["css", "hover", "image", "effects"],
+ "author": "Haider-Mukhtar"
+ }
+ ]
+ }
+]
diff --git a/snippets/css/buttons/switch-button.md b/snippets/css/buttons/switch-button.md
new file mode 100644
index 00000000..d90263c9
--- /dev/null
+++ b/snippets/css/buttons/switch-button.md
@@ -0,0 +1,68 @@
+---
+title: Switch Button
+description: A switch button with a beautiful style and effect.
+author: Haider-Mukhtar
+tags: button,switch,toggle,slider
+---
+
+```css
+/* The switch - the box around the slider */
+.switch {
+ font-size: 17px;
+ position: relative;
+ display: inline-block;
+ width: 3.5em;
+ height: 2em;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ inset: 0;
+ background: #d4acfb;
+ border-radius: 50px;
+ transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 1.4em;
+ width: 1.4em;
+ left: 0.3em;
+ bottom: 0.3em;
+ background-color: white;
+ border-radius: 50px;
+ box-shadow: 0 0px 20px rgba(0,0,0,0.4);
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.switch input:checked + .slider {
+ background: #b84fce;
+}
+
+.switch input:focus + .slider {
+ box-shadow: 0 0 1px #b84fce;
+}
+
+.switch input:checked + .slider:before {
+ transform: translateX(1.6em);
+ width: 2em;
+ height: 2em;
+ bottom: 0;
+}
+
+/* HTML */
+
+```
\ No newline at end of file