Learn CSS
🔥 1 | ❤️ 200 | ⭐ 1
Progress and Achievements
Points: 0
Completed: 0/298 Challenges
Using 303 CSS rules and 210 properties, style a functional, professional website by completing 298 coding challenges!
Challenge 1:
Take Tour
Take TourIntroduction
Your Task
Great Job!
Up Next: Thinking...
Efiwe can make mistakes.
Your Code So Far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Properties Showcase - Modern Business Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header with Navigation -->
<header class="header">
<nav class="nav">
<a href="#" class="logo">CSS Showcase</a>
<ul class="nav-links">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>
</header>
<!-- Floating Elements -->
<div class="floating-element"></div>
<div class="position-fixed"></div>
<!-- Sidebar Toggle -->
<button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<h3>Quick Navigation</h3>
<ul class="footer-links">
<li><a href="#hero">Hero Section</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#stats">Statistics</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</aside>
<!-- Hero Section -->
<section id="hero" class="hero">
<div class="hero-content">
<h1 class="hero-title">Modern CSS Properties Showcase</h1>
<p class="hero-subtitle">Demonstrating 250+ CSS properties in a beautiful, responsive design</p>
<a href="#features" class="cta-button">Explore Features</a>
</div>
</section>
<!-- Features Section -->
<section id="features" class="section">
<div class="features">
<h2 class="responsive-text">Comprehensive CSS Features</h2>
<div class="features-grid">
<div class="feature-card">
<span class="feature-icon">🎨</span>
<h3>Visual Effects</h3>
<p>Advanced filters, transforms, and animations</p>
</div>
<div class="feature-card">
<span class="feature-icon">📱</span>
<h3>Responsive Design</h3>
<p>Grid, flexbox, and media queries</p>
</div>
<div class="feature-card">
<span class="feature-icon">⚡</span>
<h3>Performance</h3>
<p>Hardware acceleration and optimization</p>
</div>
</div>
</div>
</section>
<!-- Statistics Section -->
<section id="stats" class="section stats-section">
<h2>Impressive Numbers</h2>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number">250+</div>
<p>CSS Properties</p>
</div>
<div class="stat-item">
<div class="stat-number">100%</div>
<p>Responsive</p>
</div>
<div class="stat-item">
<div class="stat-number">∞</div>
<p>Possibilities</p>
</div>
</div>
</section>
<!-- Text Effects Showcase -->
<section class="section">
<div class="text-showcase">
<h2>Typography & Text Effects</h2>
<div class="text-effects">
<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. This paragraph demonstrates various text properties including <span class="highlight">text highlighting</span>, letter spacing, word spacing, line height, and text justification. The first letter is styled as a drop cap using float and special formatting.
</div>
<!-- Writing Mode Demo -->
<div class="writing-mode-showcase">
<h3>Writing Modes</h3>
<div class="writing-vertical">
This text is written vertically using writing-mode: vertical-rl and demonstrates text orientation properties.
</div>
</div>
<!-- Quotes Demo -->
<div class="quotes-showcase">
<h3>Custom Quotes</h3>
<p class="quotes-custom">This text demonstrates custom quotation marks using the quotes property and pseudo-elements.</p>
</div>
<!-- Unicode BiDi Demo -->
<div class="unicode-bidi-showcase">
<h3>Unicode BiDi</h3>
<p class="unicode-bidi-override">This text demonstrates unicode-bidi override with RTL direction.</p>
</div>
</div>
</section>
<!-- List Showcase -->
<section class="section">
<div class="list-showcase">
<h2>Custom Lists & Counters</h2>
<ol class="custom-list">
<li>First item with custom counter</li>
<li>Second item showing counter increment</li>
<li>Third item demonstrating counter styles</li>
<li>Fourth item with custom symbols</li>
</ol>
</div>
</section>
<!-- Table Section -->
<section class="section">
<div class="table-section">
<h2>Table Properties</h2>
<table class="data-table">
<caption>CSS Properties Data Table</caption>
<thead>
<tr>
<th>Property</th>
<th>Category</th>
<th>Support</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>display</td>
<td>Layout</td>
<td>Universal</td>
<td>Essential</td>
</tr>
<tr>
<td>grid</td>
<td>Layout</td>
<td>Modern</td>
<td>Responsive</td>
</tr>
<tr>
<td>transform</td>
<td>Visual</td>
<td>Wide</td>
<td>Animation</td>
</tr>
<tr>
<td>filter</td>
<td>Effects</td>
<td>Modern</td>
<td>Enhancement</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Progress Section -->
<section class="section">
<div class="progress-section">
<h2>Progress Indicators</h2>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<p>Progress: 75% complete</p>
</div>
</section>
<!-- Filter Effects Showcase -->
<section class="section">
<div class="filter-showcase">
<h2>Filter Effects</h2>
<div class="filter-grid">
<div class="filter-item blur">Blur</div>
<div class="filter-item brightness">Bright</div>
<div class="filter-item contrast">Contrast</div>
<div class="filter-item grayscale">Grayscale</div>
<div class="filter-item hue-rotate">Hue</div>
<div class="filter-item invert">Invert</div>
<div class="filter-item saturate">Saturate</div>
<div class="filter-item sepia">Sepia</div>
</div>
</div>
</section>
<!-- Transform Showcase -->
<section class="section">
<div class="transform-showcase">
<h2>Transform Properties</h2>
<div class="transform-grid">
<div class="transform-item translate">Translate</div>
<div class="transform-item rotate">Rotate</div>
<div class="transform-item scale">Scale</div>
<div class="transform-item skew">Skew</div>
<div class="transform-item perspective">3D</div>
</div>
</div>
</section>
<!-- Flexbox Showcase -->
<section class="section">
<div class="flex-showcase">
<h2>Flexbox Properties</h2>
<div class="grid-container">
<div class="flex-item">Flex 1</div>
<div class="flex-item">Grow 2</div>
<div class="flex-item">Shrink</div>
<div class="flex-item">Start</div>
</div>
</div>
</section>
<!-- Border Showcase -->
<section class="section">
<div class="border-showcase">
<h2>Border Properties</h2>
<div class="border-grid">
<div class="border-item border-solid">Solid</div>
<div class="border-item border-dashed">Dashed</div>
<div class="border-item border-dotted">Dotted</div>
<div class="border-item border-gradient">Gradient</div>
</div>
</div>
</section>
<!-- Column Layout -->
<section class="section">
<div class="column-showcase">
<h2>Multi-Column Layout</h2>
<div class="column-text">
<h3 class="column-span">Column Spanning Header</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>
</section>
<!-- Scroll Container -->
<section class="section">
<div class="progress-section">
<h2>Scroll Properties</h2>
<div class="scroll-container">
<div class="scroll-item">Scroll Item 1</div>
<div class="scroll-item">Scroll Item 2</div>
<div class="scroll-item">Scroll Item 3</div>
<div class="scroll-item">Scroll Item 4</div>
<div class="scroll-item">Scroll Item 5</div>
</div>
</div>
</section>
<!-- Clip Path Demo -->
<section class="section">
<div class="filter-showcase">
<h2>Clip Path</h2>
<div class="clip-path-element">Triangle</div>
</div>
</section>
<!-- Gallery Grid -->
<section class="section">
<div class="filter-showcase">
<h2>Image Gallery Grid</h2>
<div class="gallery-grid">
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
<div class="gallery-item"></div>
</div>
</div>
</section>
<!-- Position Showcase -->
<section class="section">
<div class="position-showcase">
<h2>Position Properties</h2>
<div class="position-relative">
Relative
<div class="position-absolute">Absolute</div>
</div>
</div>
</section>
<!-- User Select Showcase -->
<section class="section">
<div class="user-select-showcase">
<h2>User Select Properties</h2>
<p class="user-select-none">This text cannot be selected (user-select: none)</p>
<p class="user-select-all">Click anywhere in this paragraph to select all text (user-select: all)</p>
</div>
</section>
<!-- Cursor Showcase -->
<section class="section">
<div class="cursor-showcase">
<h2>Cursor Types</h2>
<div class="cursor-grid">
<div class="cursor-item cursor-pointer">Pointer</div>
<div class="cursor-item cursor-crosshair">Crosshair</div>
<div class="cursor-item cursor-move">Move</div>
<div class="cursor-item cursor-text">Text</div>
<div class="cursor-item cursor-wait">Wait</div>
<div class="cursor-item cursor-help">Help</div>
<div class="cursor-item cursor-not-allowed">Not Allowed</div>
<div class="cursor-item cursor-grab">Grab</div>
</div>
</div>
</section>
<!-- Animation Showcase -->
<section class="section">
<div class="animation-showcase">
<h2>Animation Properties</h2>
<div class="animation-item animation-rotate"></div>
</div>
</section>
<!-- Transition Showcase -->
<section class="section">
<div class="transition-showcase">
<h2>Transition Properties (Hover Me)</h2>
<div class="transition-item"></div>
</div>
</section>
<!-- White Space & Word Break -->
<section class="section">
<div class="white-space-showcase">
<h2>Text Wrapping Properties</h2>
<p class="white-space-nowrap">This is a very long line of text that will not wrap due to white-space: nowrap property and will show ellipsis if it overflows</p>
<div class="white-space-pre">This text preserves spaces and
line breaks using white-space: pre</div>
<div class="word-break-all">ThisIsAVeryLongWordThatWillBreakEvenInTheMiddleOfTheWordDueToWordBreakAll</div>
<div class="hyphens-auto">This is a paragraph with automatic hyphenation enabled for better text justification and readability</div>
</div>
</section>
<!-- Form Elements with Accent Color -->
<section class="section">
<div class="accent-color-showcase">
<h2>Form Controls with Accent Color</h2>
<form>
<input type="checkbox" class="accent-color-custom" id="checkbox1">
<label for="checkbox1">Custom accent color checkbox</label><br><br>
<input type="radio" class="accent-color-custom" id="radio1" name="radio">
<label for="radio1">Custom accent color radio</label><br><br>
<input type="range" class="accent-color-custom" min="0" max="100"><br><br>
<input type="text" class="caret-color-custom" placeholder="Custom caret color input">
</form>
</div>
</section>
<!-- Resize Demo -->
<section class="section">
<div class="resize-showcase">
<h2>Resizable Element</h2>
<div class="resize-both">
This element can be resized by dragging the corner. Try it!
</div>
</div>
</section>
<!-- Accordion -->
<section class="section">
<div class="list-showcase">
<h2>Interactive Elements</h2>
<div class="accordion" onclick="toggleAccordion(this)">
<div class="accordion-header">Click to expand</div>
<div class="accordion-content">
<p>This content is hidden by default and shows when the accordion is expanded.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="section testimonials">
<h2>What Our Users Say</h2>
<div class="testimonial-card">
<blockquote>
"This CSS showcase is incredibly comprehensive and educational. It demonstrates every property beautifully!"
</blockquote>
<cite>- Sarah Johnson, Web Developer</cite>
</div>
</section>
<!-- Contact Form -->
<section id="contact" class="section">
<div class="contact-form">
<h2>Get In Touch</h2>
<form>
<div class="form-group">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" class="form-input" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Email<//Odiv>
<input type="email" id="email" class="form-input" required>
</div>
<div class="form-group">
<label for="message" class="form-label">Message</label>
<textarea id="message" class="form-input form-textarea" required></textarea>
</div>
<button type="submit" class="submit-button">Send Message</button>
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3>CSS Showcase</h3>
<p>Demonstrating the power and beauty of modern CSS properties.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Resources</h3>
<ul class="footer-links">
<li><a href="#">Documentation</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
<p>© 2024 CSS Properties Showcase. All rights reserved.</p>
</footer>
<script>
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('active');
}
function toggleAccordion(element) {
element.classList.toggle('active');
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Close sidebar when clicking outside
document.addEventListener('click', function(event) {
const sidebar = document.getElementById('sidebar');
const toggle = document.querySelector('.sidebar-toggle');
if (!sidebar.contains(event.target) && !toggle.contains(event.target)) {
sidebar.classList.remove('active');
}
});
</script>
</body>
</html>
or