design-celebrate-tech
v1.0.5
Published
Welcome to the Celebrate Tech — your ultimate toolkit for crafting dynamic, responsive, and visually captivating web interfaces with ease. Whether you're a seasoned developer or just starting out, our framework empowers you to build stunning websites effo
Readme
🎨 Celebrate Tech
Welcome to the Celebrate Tech — your ultimate toolkit for crafting dynamic, responsive, and visually captivating web interfaces with ease. Whether you're a seasoned developer or just starting out, our framework empowers you to build stunning websites effortlessly.
🚀 Quick Start
📦 CDN Integration
To get started quickly, include the following CSS and JS files in your project:
CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/celebrate-style.css" integrity="sha384-xyz" crossorigin="anonymous">JavaScript:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/celebrate-script.js" integrity="sha384-xyz" crossorigin="anonymous"></script>🧪 Starter Template
Here's a basic HTML5 template to kickstart your project:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/celebrate-style.css" integrity="sha384-xyz" crossorigin="anonymous">
<title>Welcome to Celebrate Tech</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/celebrate-script.js" integrity="sha384-xyz" crossorigin="anonymous"></script>
</body>
</html>🧱 Core Concepts
Our framework offers a plethora of utility classes to streamline your development process:
- Layout & Spacing:
margin,padding,gap,width,height - Flexbox Utilities:
flex,flex-direction,align-items,justify-content,flex-grow,flex-shrink - Typography:
font-size,font-weight,line-height,text-align - Borders & Radius:
border,border-radius,border-style,border-color - Display & Positioning:
display,position,z-index,top,right,bottom,left - Colors:
background-color,text-color,border-color, with support for gradients
✨ UI Effects
Enhance user experience with our built-in animations and effects:
- Animations: Fade, Slide, Bounce, Zoom, Rotate
- Box Shadows: Outset and Inset shadows for depth
- Text Shadows: Highlight text with subtle or dramatic shadows
- 3D Effects: Create immersive 3D transformations
🧩 UI Components
Build interactive interfaces effortlessly with our pre-designed components:
- Accordions
- Buttons
- Calendars
- Cards
- Checkboxes & Radio Buttons
- Data Tables
- Dropdowns & Multi-selects
- Galleries
- Pagination Controls
- Pop-ups & Modals
- Progress Bars
- Skeleton Loaders
- Spinners
- Suggestion Boxes
- Tabs
- Toasts & Notifications
- Sliders
- Text Inputs & Editors
- Tooltips
- Icons
🎨 Color Utilities
Customize your design with our extensive color utilities:
- Text Colors: Apply single, double, or triple color gradients
- Background Colors: Solid colors and gradient backgrounds
- Border Colors: Define border colors with gradient options
📄 Additional Pages & Templates
Accelerate your development with our ready-to-use templates:
- Navigation Layouts: Top Nav, Side Nav
- Authentication Pages: Login, Forgot Password
- Application Pages: Dashboard, Data Entry Forms
🌐 Community & Support
Join our vibrant community to stay updated and seek support:
- Website: Celebrate Tech
- Design Framework: Celebrate Tech Design
- Email: [email protected]
- Phone: +91 8988 46 8989
We're based in Manali, Himachal Pradesh, India, and are always eager to collaborate and assist.
📄 License
This project is licensed under the MIT License. Feel free to use and modify it as per your needs.
Elevate your web development experience with the Celebrate Tech Design Framework — where innovation meets simplicity.
