Font size
A-
A
A+
Site color
R
A
A
A
Skip to main content
Side panel
Home
Courses
Courses
Mathematics
Science
Physics
Development
Francais
Concours
Search
Pages
About Us
Gallery
FAQ
Review
Login
Register
Blog
More
Search
Close
Search
Toggle search input
English (en)
English (en)
Français (fr)
العربية (ar)
You are currently using guest access
Log in
SeeDocx
Home
Courses
Collapse
Expand
Courses
Mathematics
Science
Physics
Development
Francais
Concours
Search
Pages
Collapse
Expand
About Us
Gallery
FAQ
Review
Login
Register
Blog
Expand all
Collapse all
test online
css
New section
test online
Open course index
Completion requirements
Éditeur HTML/CSS/JS complet
Testez votre code HTML, CSS et JavaScript en temps réel
📝 Éditeur multi-langages
📄 HTML
<div class="card"> <h1>Ma carte interactive</h1> <p>Ceci est un exemple de carte stylisée avec CSS.</p> <div class="counter"> <button id="decrement">-</button> <span id="count">0</span> <button id="increment">+</button> </div> <p id="message" class="message"></p> </div>
🎨 CSS
.card { background: linear-gradient(135deg, #2c3e66, #1a2a4a); padding: 25px; border-radius: 16px; color: white; text-align: center; max-width: 500px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .card h1 { font-size: 1.8em; margin-bottom: 10px; } .card p { font-size: 1em; margin-bottom: 20px; opacity: 0.9; } .counter { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 20px 0; } .counter button { background: #f1c40f; color: #2c3e66; border: none; width: 45px; height: 45px; font-size: 24px; font-weight: bold; border-radius: 12px; cursor: pointer; transition: all 0.3s; } .counter button:hover { background: #e67e22; transform: scale(1.1); } #count { font-size: 36px; font-weight: bold; min-width: 60px; } .message { font-size: 14px; margin-top: 15px; opacity: 0.8; }
⚡ JavaScript
let count = 0; const countElement = document.getElementById('count'); const messageElement = document.getElementById('message'); document.getElementById('increment').onclick = () => { count++; countElement.textContent = count; messageElement.textContent = '✨ Incrémenté !'; messageElement.style.opacity = '1'; setTimeout(() => messageElement.style.opacity = '0', 800); }; document.getElementById('decrement').onclick = () => { count--; countElement.textContent = count; messageElement.textContent = '📉 Décrémenté !'; messageElement.style.opacity = '1'; setTimeout(() => messageElement.style.opacity = '0', 800); };
✨ Aperçu en temps réel
▶ Exécuter le code
🔄 Réinitialiser
Last modified: Tuesday, 16 June 2026, 12:07 AM
Previous activity
css6
Jump to...
Jump to...
Announcements
Qu'est-ce que le CSS ?
Syntaxe de base
introduction a css
maîtrisez tous les sélecteurs CSS
css1
css2
css3
css4
css4
css5
css5
css6
exmple
de
cdc
sfsqf
Next activity
exmple
You are currently using guest access (
Log in
)
Data retention summary
Haut