Fresh Roasted Coffee
\nOur beans are sourced from small farms in Colombia and Ethiopia.
\nEach batch is roasted weekly to ensure peak freshness.
\nproperty: value;
This text should turn coral.
", "previewBaseCSS": "body { font-family: system-ui; padding: 20px; } .text { font-size: 1.25rem; }", "sandboxCSS": "", "codePrefix": ".text {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "solution": "color: coral;", "validations": [ { "type": "property_value", "value": { "property": "color", "expected": "coral" }, "message": "أضف color: coral;" } ] }, { "id": "multiple-properties", "title": "خصائص متعددة", "description": "يمكن أن تحتوي القاعدة على إعلانات متعددة. كل واحدة تذهب في سطرها الخاص، وكل واحدة تحتاج فاصلة منقوطة في النهاية:.box {
background: gold;
color: navy;
padding: 1rem;
}p {
color: steelblue;
}Our beans are sourced from small farms in Colombia and Ethiopia.
\nEach batch is roasted weekly to ensure peak freshness.
\n.badge {
background: coral;
}You have new notifications waiting.
", "previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } h1 { margin: 0; font-size: 1.5rem; } .badge { color: white; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.875rem; } p { color: #555; margin: 0; }", "sandboxCSS": "", "codePrefix": "", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": ".badge {\n background: tomato;\n}", "validations": [ { "type": "regex", "value": "\\.badge\\s*\\{", "message": "ابدأ بـ .badge { (لا تنسَ النقطة!)" }, { "type": "property_value", "value": { "property": "background", "expected": "tomato" }, "message": "اضبط background: tomato" } ] }, { "id": "button-variants", "title": "متغيرات الأزرار", "description": "يمكن أن تحتوي العناصر على فئات متعددة. عندما تسلسل محددات الفئة بدون مسافات، تستهدف العناصر التي لديها جميع تلك الفئات:.btn.primary {
background: steelblue;
}a.btn {
text-decoration: none;
}h1, h2, h3 {
color: steelblue;
}Introduction paragraph with some text.
More content here.
Final paragraph.
.nav a {
color: white;
}Read more in our documentation.
", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; margin: 0; } .nav { background: steelblue; padding: 1rem; display: flex; gap: 1rem; border-radius: 8px; margin-bottom: 1rem; } .nav a { text-decoration: none; } p a { color: steelblue; }", "sandboxCSS": "", "codePrefix": "", "initialCode": "", "codeSuffix": "", "previewContainer": "preview-area", "solution": ".nav a {\n color: white;\n}", "validations": [ { "type": "regex", "value": "\\.nav\\s+a\\s*\\{", "message": "استخدم .nav a { (مسافة بين .nav و a)" }, { "type": "property_value", "value": { "property": "color", "expected": "white" }, "message": "اضبط color: white" } ] }, { "id": "nested-styling", "title": "الأنماط المتداخلة", "description": "محددات الأحفاد تتيح لك إنشاء أنماط سياقية. نفس العنصر يمكن أن يبدو مختلفًا حسب مكان ظهوره.This is a regular article paragraph with normal-sized text for comfortable reading.
Card paragraphs should be slightly smaller to fit the compact design.
Back to regular article text here.