Amirreza <!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>unlim.ir — نمونه صفحه</title>
<style>
:root {
--bg: #0b1b2a; /* پسزمینه تیره آبی */
--panel: #0f2336; /* پنلها */
--panel-2: #0c1f30; /* پنل متناوب */
--text: #e8f1f8; /* متن اصلی */
--muted: #a9bfd0; /* متن کمرنگ */
--accent: #27c2a3; /* لهجه */
--accent-2: #ffd166; /* لهجه دوم */
--card: #10273b; /* کارتها */
--border: #15344c; /* کادر */
}* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text);
font-family: system-ui, -apple-system, Segoe UI, Roboto, "Vazirmatn", "IRANSans", Tahoma, Arial, sans-serif;
line-height: 1.7;
}
/* هدر */
header {
position: sticky; top: 0; z-index: 10;
background: linear-gradient(180deg, #0c2234 0%, rgba(12,34,52,0.7) 100%);
border-bottom: 1px solid var(--border);
}
.wrap { width: min(1200px, 96%); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand a { display: inline-block; text-decoration: none; color: var(--text); font-weight: 800; }
.brand a span { color: var(--accent); }
nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; gap: 18px; }
nav a { text-decoration: none; color: var(--muted); }
nav a:hover { color: var(--text); text-decoration: underline; }
/* هرو */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 28px 0 10px; }
.hero .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.hero h1 { margin: 0 0 10px; font-size: 28px; }
.hero p { margin: 0 0 14px; color: var(--muted); }
.hero .cta { display: inline-block; background: var(--accent); color: #0b1b2a; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.snippet { background: var(--panel-2); border: 1px solid var(--border); border-radius: 18px; padding: 0; overflow: hidden; }
.snippet .snippet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.snippet .dots { display: inline-block; }
.snippet .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; background: var(--border); }
.snippet pre { margin: 0; padding: 16px; color: #cfe9ff; overflow: auto; }
.snippet code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
/* شبکه کارتها */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 18px 0 44px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px; position: relative; overflow: hidden; }
.badge { position: absolute; top: 12px; left: 12px; background: rgba(39,194,163,0.15); color: var(--accent); border: 1px solid rgba(39,194,163,0.4); font-size: 12px; padding: 4px 8px; border-radius: 9999px; }
.card h3 { margin: 16px 0 6px; font-size: 20px; }
.card p { margin: 0; color: var(--muted); }
.card a { display: inline-block; margin-top: 12px; color: var(--accent-2); text-decoration: none; }
.card a:hover { text-decoration: underline; }
/* فوتر */
footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); }
/* ریسپانسیو */
@media (max-width: 900px) {
.hero { grid-template-columns: 1fr; }
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<header>
<div class="wrap topbar">
<div class="brand">
<a href="https://unlim.ir" title="unlim.ir"><span>unlim</span>.ir</a>
</div>
<nav aria-label="ناوبری اصلی">
<ul>
<li><a href="#articles">مقالات</a></li>
<li><a href="#courses">دورهها</a></li>
<li><a href="#contact">ارتباط</a></li>
</ul>
</nav>
</div>
</header> <main class="wrap">
<section class="hero">
<article class="panel">
<h1>برای برنامهنویسها، کارها و آکادمیها</h1>
<p>در <b>unlim.ir</b> مقالهها، نکتهها و تمرینهای عملی را یکجا پیدا کنید. این صفحه فقط با تگها و مفاهیم جلسات ۱ تا ۸ ساخته شده است.</p>
<a class="cta" href="https://unlim.ir" target="_blank" rel="noopener">شروع کنید</a>
</article><aside class="snippet" aria-label="نمونه کد">
<div class="snippet-head">
<div class="dots" aria-hidden="true"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<small>How to code in Unlim</small>
</div>
<pre><code>def better_code() -> None:
print("tips to code like a pro")
better_code() </code></pre> </aside> </section>
<section id="cards" class="grid" aria-label="کارتها">
<article class="card">
<span class="badge">خبر</span>
<h3>برای برنامهنویسان</h3>
<p>یادداشتها، ترفندها و مثالهای عملی برای بهبود مهارت کدنویسی.</p>
<a href="#">بیشتر ببین</a>
</article>
<article class="card">
<span class="badge">خبر</span>
<h3>چرا گذاشتن <code>DEBUG=True</code> در جنگو خطرناک است؟</h3>
<p>گفتوگو درباره تنظیمات امن در محیط تولید.</p>
<a href="#">ادامه مطلب</a>
</article>
<article class="card">
<span class="badge">خبر</span>
<h3>برای کسبوکارها</h3>
<p>پیشنهادها و راهکارهای فنی برای تیمهای محصول و استارتاپها.</p>
<a href="#">شروع کنید</a>
</article>
<article class="card">
<span class="badge">خبر</span>
<h3>سه تمرین ساده برای بهبود کیفیت کد</h3>
<p>از بازبینی کد تا تستهای واحد در کمترین زمان.</p>
<a href="#">مطالعه</a>
</article>
<article class="card">
<span class="badge">خبر</span>
<h3>برای آکادمیها</h3>
<p>طرح درس، تمرینات کلاسی و منابع آموزشی برای مدرسان.</p>
<a href="#">دانلود منابع</a>
</article>
<article class="card">
<span class="badge">خبر</span>
<h3>چطور کد تمیز بنویسیم در تیمهای چابک</h3>
<p>اصول سادهای که کیفیت محصول را بالا میبرد.</p>
<a href="#">بیشتر بخوانید</a>
</article>
</section>
</main> <footer id="contact">
<div class="wrap">
<p>© 2025 <abbr title="Unlim">unlim.ir</abbr> — ساختهشده فقط با HTML و CSSِ جلسات ۱ تا ۸. برای تماس: <a href="mailto:info@unlim.ir">info@unlim.ir</a></p>
</div>
</footer>
</body>
</html>
