This tutorial builds a small "profile card + links" page from scratch with Nakshora 1.0. Follow along in a single HTML file.

The skeleton#

html
<body class="bg-mono-900 text-mono-100">
  <main class="max-w-md mx-auto p-6">
  </main>
</body>

Two concepts already at work: the spacing scale (0…96) powers p-6/py-16, and mx-auto + max-w-md center the column (centering patterns).

The card#

html
<div class="card-glass p-6 rounded-lg text-center">
  <img class="rounded-full mx-auto" src="avatar.jpg" alt="Profile photo" />
  <h1 class="text-neon-cyan-400 font-bold text-2xl mt-4">Ayesha Rahman</h1>
  <p class="text-mono-300">Frontend engineer · Dhaka</p>
</div>

Responsive without media queries#

You never write @media by hand: prefix utilities with screens instead. Stack two columns on tablets:

html
<div class="grid sm:grid-cols-2 gap-4">…</div>

Read responsive/index|Responsive design for the mobile-first model.

Ship it#

Upload the single HTML file anywhere — Netlify, GitHub Pages, Cloudflare Pages. There is nothing to build.

Pro tip. Stuck on a layout? The cookbook/index|Cookbook has 100+ one-line solutions — centering, sticky footers, full-bleed sections and friends.