BUILD WITH ME · SEASON 2 · DAY 7 / 7

Landing Page

Season 2 ka aakhri project: ek poora Landing Page — navbar, hero, 3 feature cards aur email wala join form. Aur sabse zaroori: ye mobile par bhi sundar dikhega, ek @media query ki wajah se. Ye wahi page hai jo har startup apni website par lagata hai!

⏱ 50 min🎯 Intermediate → responsive design🛠 Season 2 ke skills ek page me

Page ko sections me todna: header, section — semantic HTML
flex navbar aur grid cards ek hi page par
Responsive design: @media (max-width: 600px) se phone ka layout
<input type="email" required> — browser khud email check karta hai
scroll-behavior: smooth — links par click karne par smooth scroll

Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1Dark basestyle.css

scroll-behavior: smooth — Features / Join link dabane par page jhatke se nahi, smooth scroll hoga.
Gehra background (#0f172a) aur halka safed text (#e2e8f0) poore page ke liye.

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0f172a;
  color: #e2e8f0;
  font-family: sans-serif;
}

2Navbar + hero ka HTMLindex.html

<header> me brand naam (<b>) aur do links. Links #features, #join — page ke andar ki id par le jaate hain.
Hero me bada heading. <span> sirf ek shabd ko alag rang dene ke liye.
class="btn" wala link button jaisa dikhega (CSS se).

  <header class="nav">
    <b>PadhaiPal</b>
    <nav>
      <a href="#features">Features</a>
      <a href="#join">Join</a>
    </nav>
  </header>
  <section class="hero">
    <h1>Padhai ko banao <span>mazedaar</span></h1>
    <p>Roz ka plan, quiz aur streak, sab ek app me.</p>
    <a class="btn" href="#join">Free try karo</a>
  </section>

3Navbar + hero ka stylestyle.css

display: flex + justify-content: space-between — brand left, links right.
text-align: center hero ko beech me laata hai.
.btn: border-radius: 999px se goli (pill) shape, text-decoration: none se underline hata.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
}
.nav b { color: #fff; font-size: 20px; }
.nav a {
  margin-left: 20px;
  color: #94a3b8;
  text-decoration: none;
}
.hero { padding: 40px 32px; text-align: center; }
.hero h1 { margin: 0 0 12px; color: #fff; font-size: 44px; }
.hero span { color: #ec4899; }
.hero p { margin: 0 0 24px; color: #94a3b8; }
.btn {
  padding: 12px 28px;
  border-radius: 999px;
  background: #6366f1;
  color: #fff;
  text-decoration: none;
}

43 feature cards ka HTMLindex.html

id="features" — navbar ka Features link yahin aayega.
Teen cards, har ek me emoji wala heading aur ek line.

  <section id="features" class="cards">
    <div class="card">
      <h3>📅 Plan</h3>
      <p>Roz ka time-table</p>
    </div>
    <div class="card">
      <h3>🧠 Quiz</h3>
      <p>Chhote test, turant result</p>
    </div>
    <div class="card">
      <h3>🔥 Streak</h3>
      <p>Roz padho, streak badhao</p>
    </div>
  </section>

5Cards ka gridstyle.css

repeat(3, 1fr) — teen barabar columns.
Har card gehre neele rang ka, gol kone.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 32px;
}
.card {
  padding: 20px;
  border-radius: 16px;
  background: #1e293b;
}
.card h3 { margin: 0 0 6px; color: #fff; }
.card p { margin: 0; color: #94a3b8; font-size: 14px; }

6Join form ka HTMLindex.html

type="email" + required — khaali ya galat email par browser khud rok dega.
#msg khaali paragraph — shukriya wala message JS yahan likhega.

  <section id="join" class="join">
    <h2>Pehle 100 me aao</h2>
    <form id="form">
      <input id="email" type="email" required
        placeholder="Email likho">
      <button>Join</button>
    </form>
    <p id="msg"></p>
  </section>

7Join form ka stylestyle.css

Input aur button ko pichle projects jaisa style.
#msg green — success ka rang.

.join { padding: 48px 32px; text-align: center; }
.join h2 { margin: 0 0 16px; color: #fff; }
.join input {
  padding: 10px 14px;
  border: 2px solid #334155;
  border-radius: 10px;
  background: #1e293b;
  color: #fff;
}
.join button {
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  background: #ec4899;
  color: #fff;
  cursor: pointer;
}
#msg { color: #22c55e; }

8@media — mobile designstyle.css

@media (max-width: 600px) — jab screen 600px se patli ho (phone) tabhi andar ke rules chalein.
Heading chhoti, grid-template-columns: 1fr se cards ek ke neeche ek, aur navbar ke links chhupa do.
Isi ek idea se ek hi page desktop aur phone dono par sundar dikhta hai.

@media (max-width: 600px) {
  .hero h1 { font-size: 30px; }
  .cards { grid-template-columns: 1fr; }
  .nav a { display: none; }
}

9Form submitscript.js

e.preventDefault() — page reload nahi hoga.
Template literal se message me user ka email daalo.
form.reset() — input saaf.

const form = document.querySelector('#form');
const email = document.querySelector('#email');
const msg = document.querySelector('#msg');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  msg.textContent = `Shukriya! ${email.value} 🎉`;
  form.reset();
});