Waa dhammaadka safarkaaga barashada CSS! Casharkani waa mashruucii gabagabada ee aad ku dhisi lahayd mareeg (website) dhammaystiran adoo adeegsanaya dhammaan macluumaadkii aad ku baratay 20-kii cashar ee hore [1]. Halkan waxaan kuugu diyaarinay tusaale dhammaystiran oo ah bogga hore ee mareegta (Landing Page) kaas oo ay ku dhex jiraan: isbeddelayaasha CSS (CSS Custom Properties), baarka shaqada ee is-dajiya (sticky nav), qaybta sare ee leh midabada is-gudba (gradient hero), dhaqdhaqaaqa (animations), nidaamyada Flexbox iyo Grid, naqshadaynta la-jaanqaadda shaashadaha (Responsive Design), xaqiijinta foomamka (form validation), naqshadda dhalada ah (glassmorphism), iyo kuwo kale oo badan.
Mowduucyada Mashruucan ku dhex jira
Mashruucan tijaabada ah wuxuu si toos ah u adeegsanayaa sifo kasta oo aad ku baratay casharradii aad soo martay:
| # | Mowduuca Casharka | Sifada loo adeegsaday |
|---|---|---|
| 01 | Hordhaca CSS-ta | Dhib-u-dejinta (Reset), sanduuqa (box-model), iyo kala-sarreynta (cascading) |
| 02 | Xulayaasha CSS-ta | Isticmaalka :is(), :not(), :focus, iyo ::before |
| 03 | Midabyada & Gadaal-ka-buuxiyaha | Midabyada is-gudba ee linear-gradient |
| 04 | Hanaanka Qoraalka | Cabbirrada clamp(), dhererka xariiqda (line-height) |
| 05 | Qaabka Sanduuqa | Sanduuqa (box-sizing), masaafada gudaha iyo dibadda |
| 06 | Meelaynta Walxaha | Boosaynta relative, absolute, iyo sticky |
| 07 | Flexbox | Baarka shaqada, qaybaha sifooyinka, iyo baarka hoose |
| 08 | CSS Grid | Qaabaynta qaybta sare iyo kaadhadhka |
| 09 | Responsive Design | Media queries, clamp(), iyo weydiimaha weelka |
| 10 | Beddelayaasha CSS | Dejinta :root iyo isbeddelayaasha CSS |
| 11 | Wareegyada & Dhaqdhaqaaqa | Transitions, animations-ka @keyframes, iyo scale |
| 12 | U-beddelka Qaabka | U-beddelka qaabka ee translateY, scale, iyo rotate |
| 13 | Hadhka & Miirayaasha | Hadhka box-shadow iyo dhalada backdrop-filter |
| 14 | Liisaska & Jadwallada | Jadwalka nidaamsan ee dhammaan casharada |
| 15 | Foomamka CSS-ta | Contact form, focus-within, iyo saxnimada :valid/:invalid |
| 16 | Tilmaamaha Adag | Adeegsiga xulayaasha :has() iyo focus-within |
| 17 | Qaab-dhismeedka Bogga | Sticky footer iyo qaybaha full-bleed |
| 18 | Sifooyinka Horumarsan | Carousel is-waafajiya (scroll-snap) iyo smooth scroll |
| 19 | Nidaamka Naqshadaynta | Hannaanka BEM naming iyo nidaamka naqshadaynta |
| 20 | Mashruuca Gabagabada | Dhisidda iyo dhammaystirka website-ka guud |
Tusaale Koodhka Dhamaystiran
<!DOCTYPE html>
<html lang="so">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ereyle — Baro CSS Af-Soomaali</title>
<style>
/* ============ TOKENS ============ */
:root {
--primary: #3b82f6;
--primary-hover: #2563eb;
--primary-light: #eff6ff;
--secondary: #8b5cf6;
--text: #0f172a;
--text-secondary: #64748b;
--bg: #ffffff;
--bg-secondary: #f8fafc;
--border: #e2e8f0;
--success: #22c55e;
--error: #ef4444;
--radius: 12px;
--radius-full: 9999px;
--shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08);
--header-h: 64px;
--max-w: 1120px;
}
/* ============ DIB-U-DEJINTA (RESET) ============ */
*, *::before, *::after {
box-sizing: border-box; margin: 0; padding: 0;
}
html { scroll-behavior: smooth; }
body {
font-family: system-ui, -apple-system, sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* ============ CAAWIME-YAASHA (UTILITIES) ============ */
.container {
width: 100%; max-width: var(--max-w);
margin: 0 auto; padding: 0 20px;
}
/* ============ BAARKA SHAKHADA (NAV Flexbox) ============ */
nav {
position: sticky; top: 0; z-index: 100;
height: var(--header-h);
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
nav .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.logo { font-size: 1.2rem; font-weight: 800; color: var(--primary); letter-spacing: -0.03em; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--primary); }
.nav-cta {
background: var(--primary); color: white !important;
padding: 8px 18px; border-radius: var(--radius-full);
font-weight: 600 !important; font-size: 0.85rem !important;
transition: all 0.2s !important;
}
.nav-cta:hover { background: var(--primary-hover) !important; transform: translateY(-1px); }
/* ============ QAYBTA SARE (HERO Grid, Gradient, Animation) ============ */
.hero {
min-height: calc(100vh - var(--header-h));
display: flex; align-items: center;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
color: white; overflow: hidden; position: relative;
scroll-snap-align: start;
}
.hero::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 600px 400px at 80% 50%, rgba(59,130,246,0.12), transparent);
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px; align-items: center;
position: relative; z-index: 1;
}
.hero-content h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800; line-height: 1.15;
animation: fadeUp 0.8s ease-out;
}
.hero-content h1 span {
background: linear-gradient(135deg, #60a5fa, #8b5cf6);
background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-content p {
color: #94a3b8; font-size: 1.05rem;
margin: 16px 0 28px; max-width: 480px;
animation: fadeUp 0.8s ease-out 0.15s both;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; animation: fadeUp 0.8s ease-out 0.3s both; }
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 26px; border-radius: var(--radius-full);
font-weight: 600; font-size: 0.9rem;
border: none; cursor: pointer; text-decoration: none;
transition: all 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 8px 20px rgba(59,130,246,0.35); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,0.2); color: white; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
.hero-visual {
display: flex; justify-content: center; align-items: center;
animation: fadeUp 0.8s ease-out 0.4s both;
}
.hero-card {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px; padding: 32px;
width: 100%; max-width: 360px;
animation: float 4s ease-in-out infinite;
}
.hero-card .icon { font-size: 2.5rem; margin-bottom: 12px; }
.hero-card h3 { font-size: 1rem; margin-bottom: 6px; }
.hero-card p { font-size: 0.85rem; color: #94a3b8; }
.hero-card .badge {
display: inline-block; margin-top: 12px;
background: rgba(59,130,246,0.2); color: #93c5fd;
padding: 4px 12px; border-radius: var(--radius-full);
font-size: 0.75rem; font-weight: 600;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* ============ QAYBHA BOGGA (SECTION) ============ */
section { padding: 80px 0; }
.section-title {
text-align: center; font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 12px;
}
.section-subtitle {
text-align: center; color: var(--text-secondary);
margin-bottom: 48px; font-size: 1rem; max-width: 600px; margin-left: auto; margin-right: auto;
}
/* ============ QAYBTA SIFOOYINKA (FEATURES Grid) ============ */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.feature-card {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg); border-color: var(--primary);
}
.feature-card .icon { font-size: 2rem; margin-bottom: 12px; }
.feature-card h3 { font-size: 1rem; margin-bottom: 8px; }
.feature-card p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }
/* ============ QAYBTA CASHARADA (COURSES Flexbox) ============ */
#courses { background: var(--bg-secondary); }
.courses-grid {
display: flex; flex-wrap: wrap; gap: 20px;
}
.course-card {
flex: 1 1 300px;
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius); padding: 24px;
display: flex; flex-direction: column;
transition: all 0.3s ease;
}
.course-card:hover {
transform: translateY(-3px) scale(1.01);
box-shadow: var(--shadow-lg);
}
.course-card .tag {
align-self: flex-start;
font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
padding: 2px 10px; border-radius: var(--radius-full);
margin-bottom: 12px;
}
.tag-beginner { background: #dbeafe; color: #1e40af; }
.tag-intermediate { background: #fef3c7; color: #92400e; }
.tag-advanced { background: #fee2e2; color: #991b1b; }
.course-card h3 { font-size: 1rem; margin-bottom: 6px; }
.course-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.course-card .meta {
display: flex; gap: 16px; margin-top: 16px;
font-size: 0.8rem; color: #94a3b8;
}
/* ============ FOOMKA XIRIIRKA (CONTACT FORM) ============ */
#contact { background: var(--bg); }
.form-wrapper {
max-width: 560px; margin: 0 auto;
background: var(--bg); border: 1px solid var(--border);
border-radius: 16px; padding: 36px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
display: block; font-size: 0.85rem;
font-weight: 600; margin-bottom: 6px; color: var(--text);
}
.form-group input,
.form-group textarea {
width: 100%; padding: 10px 14px;
font-family: inherit; font-size: 0.9rem;
border: 1.5px solid var(--border);
border-radius: 10px; background: var(--bg);
color: var(--text); transition: all 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.form-group input:valid {
border-color: var(--success);
}
.form-group input:invalid:not(:focus):not(:placeholder-shown) {
border-color: var(--error);
}
.form-group textarea {
resize: vertical; min-height: 100px;
}
.form-group .error-msg {
display: none; font-size: 0.75rem;
color: var(--error); margin-top: 4px;
}
.form-group input:invalid:not(:focus):not(:placeholder-shown) ~ .error-msg {
display: block;
}
.btn-submit {
width: 100%; padding: 12px;
background: var(--primary); color: white;
border: none; border-radius: 10px;
font-size: 0.95rem; font-weight: 600;
cursor: pointer; transition: all 0.25s ease;
}
.btn-submit:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
/* ============ JADWALKA CASHARADA (TABLE) ============ */
#lessons { overflow-x: auto; }
table {
width: 100%; border-collapse: collapse;
font-size: 0.85rem;
}
thead th {
position: sticky; top: 0;
background: var(--bg-secondary); z-index: 2;
text-align: left; padding: 12px 16px;
font-size: 0.7rem; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-secondary);
border-bottom: 2px solid var(--border);
}
tbody td {
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
tbody tr:nth-child(even) { background: #fafbfc; }
tbody tr:hover { background: var(--primary-light); }
/* ============ BAARKA UGU HOOSEEYA (FOOTER Glassmorphism) ============ */
footer {
background: #0f172a; color: #94a3b8;
padding: 48px 0 32px;
backdrop-filter: blur(12px);
}
footer .container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 32px;
}
footer h3 { color: white; font-size: 1rem; margin-bottom: 12px; }
footer p { font-size: 0.85rem; line-height: 1.7; }
footer a { display: block; color: #64748b; font-size: 0.85rem; margin-bottom: 6px; transition: color 0.2s; }
footer a:hover { color: white; }
.footer-bottom {
grid-column: 1 / -1;
border-top: 1px solid #1e293b;
padding-top: 20px; margin-top: 20px;
text-align: center; font-size: 0.8rem;
}
/* ============ LA-JAANQAADKA SHAASHADAHA (RESPONSIVE DESIGN) ============ */
@media (max-width: 1023px) {
.hero .container {
grid-template-columns: 1fr;
text-align: center;
}
.hero-content p { margin-left: auto; margin-right: auto; }
.hero-btns { justify-content: center; }
.hero-visual { display: none; }
footer .container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.nav-links { display: none; }
nav .container { position: relative; }
.nav-links.open {
display: flex; flex-direction: column;
position: absolute; top: var(--header-h); left: 0;
width: 100%; background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 16px 20px; gap: 12px;
box-shadow: var(--shadow-lg);
}
.hamburger { display: flex !important; }
section { padding: 48px 0; }
.features-grid { grid-template-columns: 1fr; }
footer .container { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
.hamburger { display: none !important; }
}
.hamburger {
display: flex; flex-direction: column; gap: 5px;
cursor: pointer; background: none; border: none; padding: 4px;
}
.hamburger span {
display: block; width: 24px; height: 2px;
background: var(--text); border-radius: 2px;
transition: all 0.2s;
}
</style>
</head>
<body>
<!-- STICKY NAV -->
<nav>
<div class="container">
<span class="logo">✦ Ereyle</span>
<div class="nav-links" id="navMenu">
<a href="#">Hoyga</a>
<a href="#features">Features</a>
<a href="#courses">Casharrada</a>
<a href="#lessons">Liiska</a>
<a href="#contact" class="nav-cta">Nala Soo Xiriir</a>
</div>
<button class="hamburger" onclick="toggleMenu()" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- HERO -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1>Baro <span>CSS</span> Af-Soomaali</h1>
<p>20 cashar oo dhammaystiran — bilow ilaa heer sare. Baro sida loo qurxiyo bogagga internetka adigoo isticmaalaya luqaddaaga hooyo.</p>
<div class="hero-btns">
<a href="#courses" class="btn btn-primary">Ku Bilaab Maanta</a>
<a href="#lessons" class="btn btn-ghost">Eeg Dhammaan</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-card">
<div class="icon">🎨</div>
<h3>CSS Custom Properties</h3>
<p>Nidaamka naqshadaynta — variables, theming, iyo design tokens.</p>
<span class="badge">20 Cashar</span>
</div>
</div>
</div>
</section>
<!-- FEATURES GRID -->
<section id="features">
<div class="container">
<h2 class="section-title">Waa Maxay Sababta Ereyle?</h2>
<p class="section-subtitle">Waxaan ku barannaa CSS-ka luqaddaada hooyo, si fudud oo dhammaystiran.</p>
<div class="features-grid">
<div class="feature-card">
<div class="icon">🌍</div>
<h3>Af-Soomaali</h3>
<p>Dhammaan casharradu waxay ku qoran yihiin Af-Soomaali — fudud oo cad.</p>
</div>
<div class="feature-card">
<div class="icon">📐</div>
<h3>Flexbox & Grid</h3>
<p>Baro labada nidaam ee ugu muhiimsan ee CSS layout-ka.</p>
</div>
<div class="feature-card">
<div class="icon">✨</div>
<h3>Animations</h3>
<p>Transitions, keyframes, transforms — dhaqdhaqaaq qurux badan.</p>
</div>
<div class="feature-card">
<div class="icon">📱</div>
<h3>Responsive</h3>
<p>Website-yadu waxay u shaqaynayaan shaashad kasta — mobile ilaa desktop.</p>
</div>
<div class="feature-card">
<div class="icon">🎨</div>
<h3>Design System</h3>
<p>CSS custom properties, BEM, iyo nidaamka naqshadaynta.</p>
</div>
<div class="feature-card">
<div class="icon">🚀</div>
<h3>Dhammaystiran</h3>
<p>20 cashar oo dhammaystiran — bilow ilaa heer sare.</p>
</div>
</div>
</div>
</section>
<!-- COURSES -->
<section id="courses">
<div class="container">
<h2 class="section-title">Casharrada CSS-ta</h2>
<p class="section-subtitle">Dhammaan 20-ka cashar — laga bilaabo kuwa bilowga ah ilaa kuwa horumarsan.</p>
<div class="courses-grid">
<div class="course-card">
<span class="tag tag-beginner">Bilow</span>
<h3>Hordhaca CSS-ta</h3>
<p>Waa maxay CSS? Sida loo isticmaalo, syntax-ka, iyo sida CSS ugu shaqeeyo browser-ka.</p>
<div class="meta"><span>🎯 01</span><span>30 min</span></div>
</div>
<div class="course-card">
<span class="tag tag-beginner">Bilow</span>
<h3>Xulayaasha CSS-ta</h3>
<p>Selectors, pseudo-classes, combinators — si sax ah u xulo curiyayaasha.</p>
<div class="meta"><span>🎯 02</span><span>45 min</span></div>
</div>
<div class="course-card">
<span class="tag tag-beginner">Bilow</span>
<h3>Midabyada & Gadaal-ka-buuxiyaha</h3>
<p>Hex, RGB, HSL, gradients, iyo background-image.</p>
<div class="meta"><span>🎯 03</span><span>30 min</span></div>
</div>
<div class="course-card">
<span class="tag tag-intermediate">Dhexe</span>
<h3>Flexbox</h3>
<p>Nidaamka hal-jiho ee layout-ka — fudud oo dabacsan.</p>
<div class="meta"><span>🎯 07</span><span>60 min</span></div>
</div>
<div class="course-card">
<span class="tag tag-intermediate">Dhexe</span>
<h3>CSS Grid</h3>
<p>Nidaamka laba-jiho — tiirar, safo, areas, auto-fill.</p>
<div class="meta"><span>🎯 08</span><span>60 min</span></div>
</div>
<div class="course-card">
<span class="tag tag-advanced">Sare</span>
<h3>CSS Architecture</h3>
<p>BEM, design tokens, utility-first, iyo nidaamka CSS-ka.</p>
<div class="meta"><span>🎯 19</span><span>45 min</span></div>
</div>
</div>
</div>
</section>
<!-- LESSONS TABLE -->
<section id="lessons">
<div class="container">
<h2 class="section-title">Liiska Casharrada</h2>
<p class="section-subtitle">Dhammaan 20-ka cashar ee CSS-ta ah — mid kasta wuxuu leeyahay tusaale dhammaystiran.</p>
<table>
<thead>
<tr><th>#</th><th>Casharka</th><th>Qaybta</th><th>Heerka</th></tr>
</thead>
<tbody>
<tr><td>01</td><td>Hordhaca CSS-ta</td><td>Introduction</td><td>Bilow</td></tr>
<tr><td>02</td><td>Xulayaasha CSS-ta</td><td>Selectors</td><td>Bilow</td></tr>
<tr><td>03</td><td>Midabyada iyo Gadaasha</td><td>Colors</td><td>Bilow</td></tr>
<tr><td>04</td><td>Hanaanka Qoraalka</td><td>Typography</td><td>Bilow</td></tr>
<tr><td>05</td><td>Qaabka Sanduuqa</td><td>Box Model</td><td>Bilow</td></tr>
<tr><td>06</td><td>Meelaynta Walxaha</td><td>Positioning</td><td>Dhexe</td></tr>
<tr><td>07</td><td>Flexbox</td><td>Layout</td><td>Dhexe</td></tr>
<tr><td>08</td><td>CSS Grid</td><td>Layout</td><td>Dhexe</td></tr>
<tr><td>09</td><td>Naqshadaynta Iskubeddesha</td><td>Responsive</td><td>Dhexe</td></tr>
<tr><td>10</td><td>Beddelayaasha CSS</td><td>Theming</td><td>Sare</td></tr>
<tr><td>11</td><td>Wareegyada & Dhaqdhaqaaqa</td><td>Animation</td><td>Dhexe</td></tr>
<tr><td>12</td><td>U-beddelka Qaabka</td><td>Transforms</td><td>Dhexe</td></tr>
<tr><td>13</td><td>Hadhka & Miirayaasha</td><td>Shadow/Filter</td><td>Dhexe</td></tr>
<tr><td>14</td><td>Liisaska & Jadwallada</td><td>Lists/Tables</td><td>Dhexe</td></tr>
<tr><td>15</td><td>Foomamka CSS-ta</td><td>Forms</td><td>Dhexe</td></tr>
<tr><td>16</td><td>Tilmaamaha Adag</td><td>Selectors</td><td>Sare</td></tr>
<tr><td>17</td><td>Qaab-dhismeedka Bogga</td><td>Layout</td><td>Dhexe</td></tr>
<tr><td>18</td><td>Sifooyinka Horumarsan</td><td>Advanced</td><td>Sare</td></tr>
<tr><td>19</td><td>Nidaamka Naqshadaynta</td><td>Architecture</td><td>Sare</td></tr>
<tr><td>20</td><td>Mashruuca Gabagabada</td><td>Final Project</td><td>Sare</td></tr>
</tbody>
</table>
</div>
</section>
<!-- CONTACT FORM -->
<section id="contact">
<div class="container">
<h2 class="section-title">Nala Soo Xiriir</h2>
<p class="section-subtitle">Miyaad qabtaa su'aal ama faallo? Fadlan buuxi foomka hoose.</p>
<div class="form-wrapper">
<form onsubmit="event.preventDefault(); alert('Mahadsanid! Farriintaada si guul leh ayaa loo helay.');">
<div class="form-group">
<label for="name">Magacaaga</label>
<input type="text" id="name" placeholder="Magacaaga" required>
<div class="error-msg">Magac ayaa loo baahan yahay</div>
</div>
<div class="form-group">
<label for="email">Email-kaaga</label>
<input type="email" id="email" placeholder="email@tusaale.so" required>
<div class="error-msg">Fadlan geli email sax ah</div>
</div>
<div class="form-group">
<label for="message">Farriintaada</label>
<textarea id="message" placeholder="Ku qor farriintaada halkan..." required></textarea>
<div class="error-msg">Farriin ayaa loo baahan yahay</div>
</div>
<button type="submit" class="btn-submit">Dir Farriinta</button>
</form>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<div>
<h3>✦ Ereyle</h3>
<p>Baro CSS-ka Af-Soomaali — 20 cashar oo dhammaystiran oo bilaash ah. Waxaan ku barannaa luqaddaada hooyo si fudud oo cad.</p>
</div>
<div>
<h3>Casharrada</h3>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
<a href="#">Animations</a>
<a href="#">Responsive</a>
</div>
<div>
<h3>Ereyle</h3>
<a href="#">Hoyga</a>
<a href="#">Blog</a>
<a href="#">Koorsooyinka</a>
</div>
<div>
<h3>Caawimo</h3>
<a href="#">Su'aalaha</a>
<a href="#">Nala Soo Xiriir</a>
<a href="#">Shuruudaha</a>
</div>
<div class="footer-bottom">© 2026 Ereyle. Dhammaan xuquuqdu waa dhowran tahay. Waxaa dhoodhoobay CSS.</div>
</div>
</footer>
<script>
function toggleMenu() {
document.getElementById('navMenu').classList.toggle('open');
}
</script>
</body>
</html>Gabagabo iyo Hambalyo
Hambalyo sare oo mudan! Waxaad si guul leh u dhammaysatay dhammaan 20-kii cashar ee koorsada aasaaska CSS-ta. Hadda waxaad leedahay awood iyo aqoon ku filan oo aad ku dhoodhoobto mareego qurux badan, la-jaanqaada shaashadaha (responsive), muuqaal ahaanna aad u casriyeysan [1].
Safarka barashada CSS-tu marna ma joogsado — sababtoo ah had iyo jeer waxaa soo baxa sifooyin iyo farsamooyin cusub. Laakiin aasaaska adag ee aad halkaan ku baratay ayaa kugu filan inaad ku qaaddo tillaabo kasta oo xirfadeed.
Waad ku guulaysatay dhammaystirka koorsada aasaaska CSS-ta!