<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to Chitrali Stories</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: radial-gradient(circle at top, #0f172a, #020617);
color: #f9fafb;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.wrapper {
max-width: 960px;
width: 100%;
border-radius: 20px;
background: rgba(15, 23, 42, 0.96);
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(15, 23, 42, 0.9);
overflow: hidden;
display: grid;
grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 800px) {
.wrapper {
grid-template-columns: 1fr;
}
}
.content {
padding: 2.5rem 2.75rem;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.28rem 0.8rem;
border-radius: 999px;
background: rgba(56, 189, 248, 0.18);
color: #e0f2fe;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.badge-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 10px rgba(34, 197, 94, 0.9);
}
h1 {
font-size: clamp(2.1rem, 3vw, 2.7rem);
line-height: 1.1;
margin-bottom: 0.8rem;
}
h1 span.highlight {
background-image: linear-gradient(120deg, #38bdf8, #f97316, #facc15);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.subtitle {
font-size: 1rem;
color: #e5e7eb;
max-width: 32rem;
line-height: 1.7;
margin-bottom: 1.4rem;
}
.hello {
font-size: 0.95rem;
color: #cbd5f5;
margin-bottom: 1.2rem;
}
.hello strong {
color: #f97316;
}
.list-title {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #9ca3af;
margin-bottom: 0.35rem;
}
ul.features {
list-style: none;
margin-bottom: 1.6rem;
}
ul.features li {
font-size: 0.9rem;
color: #d1d5db;
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
ul.features li span.bullet {
width: 6px;
height: 6px;
border-radius: 50%;
margin-top: 0.4rem;
background: #38bdf8;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
flex-shrink: 0;
}
form {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.4rem;
}
input[type="email"] {
flex: 1 1 180px;
padding: 0.78rem 0.95rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
background: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
font-size: 0.9rem;
outline: none;
}
input[type="email"]::placeholder {
color: #9ca3af;
}
button.notify {
padding: 0.78rem 1.5rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
background: linear-gradient(135deg, #22c55e, #38bdf8);
color: #02101f;
box-shadow: 0 10px 25px rgba(34, 197, 94, 0.5);
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
white-space: nowrap;
}
button.notify:hover {
transform: translateY(-1px);
box-shadow: 0 16px 40px rgba(34, 197, 94, 0.7);
filter: brightness(1.05);
}
.meta {
font-size: 0.8rem;
color: #9ca3af;
}
.meta span {
opacity: 0.9;
}
.meta b {
color: #e5e7eb;
font-weight: 500;
}
.image-panel {
position: relative;
min-height: 260px;
overflow: hidden;
}
.image-panel::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 0, rgba(251, 113, 133, 0.16), transparent 55%),
radial-gradient(circle at 90% 100%, rgba(56, 189, 248, 0.16), transparent 55%),
linear-gradient(135deg, rgba(15, 23, 42, 1), rgba(15, 23, 42, 0.1));
z-index: 0;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
padding: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.teaser-card {
position: relative;
border-radius: 20px;
overflow: hidden;
width: 100%;
max-width: 360px;
aspect-ratio: 3 / 4;
border: 1px solid rgba(148, 163, 184, 0.5);
box-shadow:
0 25px 55px rgba(15, 23, 42, 0.9),
0 0 0 1px rgba(15, 23, 42, 0.9);
background: radial-gradient(circle at 30% 0, #020617, #020617 45%, #111827);
}
.teaser-card img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
filter: saturate(1.05) contrast(1.1);
display: block;
}
.teaser-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.94), transparent 45%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
gap: 0.4rem;
}
.tagline {
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #e5e7eb;
opacity: 0.96;
}
.hook {
font-size: 1rem;
color: #f9fafb;
font-weight: 600;
line-height: 1.4;
}
.pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.7);
font-size: 0.7rem;
color: #e5e7eb;
}
.pill-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #f97316;
box-shadow: 0 0 10px rgba(248, 150, 30, 0.95);
}
@media (max-width: 800px) {
.content {
padding: 2rem 1.6rem 2.3rem;
}
.image-panel {
order: -1;
}
.image-wrapper {
padding: 1.25rem;
}
}
</style>
</head>
<body>
<div class="wrapper">
<section class="content">
<div class="badge">
<span class="badge-dot"></span>
You arrived early
</div>
<h1>
Welcome to <span class="highlight">Chitrali</span>
</h1>
<p class="subtitle">
A cozy corner for Urdu and Hindi stories, gentle nights, and soft spoken tales that travel from your screen to your imagination.
We are getting everything ready for you.
</p>
<p class="hello">
Salaam and namaste. You are among the first guests here. While we prepare the first collection of stories, you are very welcome to relax, look around, and leave a small sign that you visited.
<strong>It will help us know who to invite first when the stories go live.</strong>
</p>
<div class="list-title">Soon you will find here</div>
<ul class="features">
<li>
<span class="bullet"></span>
Quiet, atmospheric Urdu and Hindi stories made for night listening.
</li>
<li>
<span class="bullet"></span>
Gentle narration on YouTube, with warm sound and soft visuals.
</li>
<li>
<span class="bullet"></span>
A simple place where families and friends can return whenever they need a little calm.
</li>
</ul>
<!-- Email form is visual only for now -->
<form onsubmit="return false;">
<input type="email" placeholder="Share your email if you want a friendly first invite">
<button class="notify" type="submit">Save me a front row seat</button>
</form>
<p class="meta">
<span>Behind the curtain we are working on</span>
<b> story scripts, soft music, Urdu and Hindi text pages, and YouTube story nights made just for you. </b>
</p>
</section>
<aside class="image-panel">
<div class="image-wrapper">
<figure class="teaser-card">
<!-- Replace teaser-image.jpg with your actual file name if needed -->
<img src="teaser-image.jpg" alt="A mysterious dimly lit scene hinting at a story that is about to begin">
<div class="teaser-overlay">
<div class="tagline">A quiet story is waiting</div>
<div class="hook">
Lights low, candle warm, a voice leans closer.
The first Chitrali night will begin with a single whispered line.
</div>
<div class="pill">
<span class="pill-dot"></span>
Stay close, the opening chapter is almost ready
</div>
</div>
</figure>
</div>
</aside>
</div>
</body>
</html>