Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
🚀 Days 19–20 – Projects  ·  दिन 20

दिन 20: Major Project: पूरी Business Website Redesign

⏱ 5–7 hours📶 Major project🎯 100% self-study
दिन 20 / 20

✅ आज आप सीखेंगे

  • मौजूदा site का audit करके redesign brief लिखना
  • Brand system बनाना: palette, type scale, spacing, shadows
  • एक stylesheet से 6 असली pages style करना – HTML बदले बिना
  • Responsive, dark mode, reduced motion और print support
  • Redesign test, measure करके client को present करना

🏢 असली दुनिया में

Mr. Vikas Sharma फिर call करते हैं: “Website चल रही है, orders आ रहे हैं – अब Diwali से पहले इसे premium brand जैसा बना दो।” असली दुनिया में ज़्यादातर front-end काम यही है: मौजूदा site को सुरक्षित ढंग से बेहतर बनाना। आप HTML course की 6-page site लेकर लगभग 276 lines की एक CSS file से उसे निखरा brand experience बनाएँगे। HTML में एकमात्र बदलाव हर page पर एक Google Fonts link है।

पहले → बाद में

▶  Home page after the redesign (scroll inside; the narrow box shows the tablet layout)

पहले (HTML course की starter CSS)

  • System font, साधारण headings
  • सपाट cards, hover feedback नहीं
  • साधारण tables और lists
  • Dark mode नहीं, print styles नहीं
  • 53 lines, जल्दी में लिखी

बाद में (यह project)

  • Playfair Display + Lato जोड़ी, fluid type scale
  • उठते cards, image zoom, organic hero photo
  • Branded menu tables, timeline, testimonial, FAQ
  • अपने-आप dark mode, reduced motion, print
  • 13 documented sections में 276 lines

Phase 1: audit और brief

मिली समस्याRedesign फ़ैसला
Generic लगती है, “मिठाई” जैसी नहींगर्म cream background, केसरिया + सुनहरा palette, पारंपरिक मिठाई डिब्बों जैसी serif headings
Product photos साधारण आयतगोल cards, 4:3 cover crop, hover पर हल्का zoom
Menu page कच्ची tableगहरी header row, serif मिठाई नाम, दाएँ केसरिया prices
About page text की दीवारMilestones के लिए dots वाली timeline, वादा दो-column card में
Phone navigation तंगLogo के नीचे बग़ल में scroll होने वाले pill links
रात के visitorsउन्हीं tokens से अपने-आप dark palette
💡 HTML क्यों न छुएँ?

Client की site live है और Google में index है। सिर्फ़ CSS बदलने से content, links और SEO को शून्य ख़तरा, और एक file वापस रखकर redesign पलटा जा सकता है। यह भी साबित होता है कि अच्छी तरह बना semantic HTML कितना ताक़तवर है।

Phase 2: brand system

CSS – 1. design tokens
/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --brand: #c2410c;          /* deep saffron – main brand */
  --brand-600: #9a3412;
  --gold: #f59e0b;
  --gold-soft: #fef3c7;
  --on-brand: #ffffff;       /* text colour on brand backgrounds */
  --ink: #2b1a12;            /* headings */
  --text: #44342b;           /* body text */
  --muted: #7c6a5e;
  --line: #f0e2d4;
  --bg: #fffaf3;             /* warm cream page */
  --surface: #ffffff;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 12px 32px rgb(87 46 18 / 10%);
  --shadow-lg: 0 24px 48px rgb(87 46 18 / 18%);
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Lato", system-ui, "Segoe UI", Roboto, sans-serif;
  --container: 1120px;
  --gap: clamp(16px, 3vw, 28px);
}
🟠
केसरिया #c2410cButtons, prices, links – सफ़ेद पर 5.2:1
🟡
सुनहरा #f59e0bAccents, dividers, focus rings
🤎
Cocoa #2b1a12Headings, footer, table head
🍦
Cream #fffaf3Page background – सफ़ेद से गर्म
केसर, घी और मिठाई-डिब्बे के सुनहरे रंग से प्रेरित palette
CSS – 2. base and type scale
/* ---------- 2. BASE / RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}
img, video { display: block; max-width: 100%; height: auto; }
iframe { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
input, select, textarea, button { font: inherit; }
::selection { background: var(--gold-soft); }

/* Skip link (HTML class: .skip) */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

Phase 3: layout और header

CSS – 3. layout + 4. header
/* ---------- 3. LAYOUT HELPERS ---------- */
/* <main> and the header/footer .bar share the same centred width */
main, .bar { width: min(var(--container), 100% - 32px); margin-inline: auto; }
main { padding-block: clamp(24px, 5vw, 48px) 64px; }
main > section, main > article { margin-top: clamp(40px, 7vw, 80px); }
main > section:first-child { margin-top: 0; }

/* ---------- 4. HEADER & NAVIGATION ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 250 243 / 88%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold-soft); }
header.site nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
header.site nav a {
  display: block; padding: 8px 16px; border-radius: 99px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: .95rem;
  transition: background-color .2s, color .2s;
}
header.site nav a:hover { background: var(--gold-soft); color: var(--brand-600); }
header.site nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
  • HTML में .container class नहीं थी, तो main, .bar एक centring rule साझा करते हैं – HTML बदलने की जगह जो है उसे दोबारा इस्तेमाल करें।
  • Sections के बीच spacing main > section पर clamp() से, तो phone से desktop तक smoothly बढ़ती है।
  • Active page pill मौजूदा aria-current="page" attribute से – accessibility और styling एक ही स्रोत से।

Phase 4: hero, buttons और product cards

CSS – 5. buttons & hero
/* ---------- 5. BUTTONS & HERO ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 99px; border: 2px solid var(--brand);
  background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px rgb(194 65 12 / 25%);
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.btn:hover { color: var(--on-brand); background: var(--brand-600); transform: translateY(-2px); box-shadow: 0 14px 30px rgb(194 65 12 / 30%); }
.btn:active { transform: translateY(0); }
.btn.alt { background: transparent; color: var(--brand); box-shadow: none; }
.btn.alt:hover { background: var(--gold-soft); color: var(--brand-600); }

.hero {
  display: grid; gap: clamp(24px, 5vw, 64px);
  grid-template-columns: 1.05fr .95fr; align-items: center;
  padding-block: clamp(32px, 6vw, 72px);
  position: relative;
}
.hero::before {                                   /* soft saffron glow behind the photo */
  content: ""; position: absolute; z-index: -1; right: 0; top: 0;
  width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(245 158 11 / 22%), transparent 65%);
}
.hero h1 { letter-spacing: -.01em; }
.hero p:first-of-type { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.hero p:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero picture img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;   /* organic “blob” shape */
  box-shadow: var(--shadow-lg);
  animation: settle 1s ease-out both;
}
@keyframes settle { from { opacity: 0; transform: scale(.94) rotate(-2deg); } }
🧠 Organic photo आकार

border-radius आठ values लेता है (हर कोने के horizontal / vertical radii)। 40% 60% 55% 45% / 45% 40% 60% 55% आयत को नरम “blob” बना देता है – बिना images या SVG के trendy, खाने जैसा रूप।

CSS – 6. cards & product grid
/* ---------- 6. CARDS & PRODUCT GRID ---------- */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.card:hover img { transform: scale(1.06); }
.card div { padding: 18px 20px 22px; position: relative; background: var(--surface); }
.card h3 { margin-bottom: 4px; }
.card p { margin: 0; color: var(--muted); }
.price { display: block; width: fit-content; margin-top: 10px; padding: 2px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--brand-600); font-weight: 700; }

/* Section headings get a small decorative divider */
main h2 { position: relative; padding-bottom: 14px; }
main h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); }

Phase 5: menu, about और order pages

▶  menu.html – branded price tables and jump links
CSS – 7. tables, lists, FAQ, quotes, timeline
/* ---------- 7. TABLES, LISTS, FAQ, QUOTES ---------- */
/* "Why Jaipur trusts us" list → feature tiles */
section[aria-labelledby="why"] ul { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
section[aria-labelledby="why"] li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
section[aria-labelledby="why"] strong { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--brand); }

/* Testimonial */
figure { margin: 0; }
blockquote { margin: 0; position: relative; background: var(--surface); border-radius: var(--radius); padding: 32px 32px 24px 72px; box-shadow: var(--shadow); font-size: 1.15rem; color: var(--ink); }
blockquote::before { content: "“"; position: absolute; left: 22px; top: 6px; font-family: var(--font-head); font-size: 4.5rem; line-height: 1; color: var(--gold); }
blockquote p { margin: 0; }
figcaption { margin-top: 12px; padding-left: 72px; color: var(--muted); font-style: italic; }

/* FAQ accordion */
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; transition: box-shadow .2s; }
details[open] { box-shadow: var(--shadow); }
summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 20px 16px; margin: 0; color: var(--muted); }

/* Menu tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 8px; }
caption { text-align: left; font-weight: 700; color: var(--muted); padding: 0 4px 10px; caption-side: top; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { background: var(--ink); color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
tbody th { font-family: var(--font-head); color: var(--ink); }
tbody td:last-child { font-weight: 700; color: var(--brand); text-align: right; white-space: nowrap; }
thead th:last-child { text-align: right; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: #fffbeb; }
h2 small { font-family: var(--font-body); font-size: .95rem; color: var(--muted); font-weight: 400; }

/* In-page "Jump to" navigation on the menu page */
main nav[aria-label="Menu sections"] p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
main nav[aria-label="Menu sections"] a { padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--surface); }
main nav[aria-label="Menu sections"] a:hover { border-color: var(--brand); }

/* About page: timeline list and promise definitions */
article ol { list-style: none; padding: 0; margin: 0 0 32px; border-left: 3px solid var(--gold); }
article ol li { position: relative; padding: 4px 0 18px 24px; }
article ol li::before { content: ""; position: absolute; left: -10px; top: 10px; width: 17px; height: 17px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
article ol time { font-weight: 700; color: var(--brand); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
dl dt, dl dd { padding: 16px 20px; border-bottom: 1px solid var(--line); margin: 0; }
dl dt { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--brand); }
dl dd { color: var(--text); }
dl dt:last-of-type, dl dd:last-of-type { border-bottom: 0; }
dfn { font-style: normal; font-weight: 700; color: var(--brand); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
पहले से मौजूद HTMLइस्तेमाल हुआ selectorनतीजा
<section aria-labelledby="why"> <ul>section[aria-labelledby="why"] ulसाधारण list → grid में 4 feature tiles
<blockquote> + <figcaption>blockquote::beforeबड़ा सुनहरा quote चिह्न
Milestones की <ol> <time> के साथarticle ol li::beforeDots वाली vertical timeline
<dl> वादाdl { grid-template-columns: max-content 1fr }दो-column वादा card
<nav aria-label="Menu sections">attribute selectorJump links pills बनते हैं
<tbody> का आख़िरी <td>tbody td:last-childकेसरिया, दाएँ prices
⚠️ Structural selectors का समझौता

section[aria-labelledby="why"] ul जैसे selectors उस redesign के लिए ठीक हैं जहाँ HTML नहीं बदलना, पर ये markup से बँधे हैं। जब HTML बदलने की अनुमति हो, BEM classes (Day 17) लें – जैसे class="features"।

▶  about.html – story, video, timeline and promise card
▶  contact.html – try submitting with a wrong mobile number
CSS – 8. forms, 9. about media, 10. footer & utility pages
/* ---------- 8. FORMS (contact page) ---------- */
form { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); display: grid; gap: 18px; max-width: 620px; }
label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
input:not([type="radio"], [type="checkbox"]), select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(194 65 12 / 15%); }
input:user-invalid, select:user-invalid { border-color: #dc2626; }
input:user-valid:not([type="checkbox"], [type="radio"]) { border-color: #16a34a; }
small { color: var(--muted); font-size: .85rem; }
fieldset { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
legend { font-weight: 700; color: var(--ink); padding: 0 6px; }
fieldset label { display: inline; font-weight: 400; margin: 0; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); vertical-align: middle; }
form > div:has(input[type="checkbox"]) label { display: inline; font-weight: 400; }
form .btn { justify-self: start; border: 0; }
form + h2 { margin-top: 56px; }
iframe { width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- 9. ABOUT PAGE MEDIA ---------- */
article video { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: #000; }
article figure figcaption { padding-left: 0; text-align: center; }
article > p:first-of-type { font-size: 1.2rem; max-width: 60ch; }

/* ---------- 10. FOOTER & UTILITY PAGES ---------- */
footer.site { margin-top: 64px; background: var(--ink); color: #e9d8c8; }
footer.site .bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 40px; }
footer.site address { font-style: normal; line-height: 1.9; }
footer.site strong { font-family: var(--font-head); font-size: 1.3rem; color: #fff; }
footer.site a { color: var(--gold); }
footer.site small { color: #c9b8a8; }

/* thank-you.html and 404.html have no site header: centre their <main> */
body:not(:has(header.site)) > main { min-height: 90vh; display: grid; place-content: center; text-align: center; }
body:not(:has(header.site)) > main p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  • input:not([type="radio"], [type="checkbox"]) radios और checkboxes तोड़े बिना text fields style करता है।
  • :user-invalid / :user-valid customer के लिखने के बाद ही borders रंगते हैं (Day 15)।
  • body:not(:has(header.site)) > main thank-you और 404 pages पहचानता है (उनमें header नहीं) और उन्हें बीच में रखता है – कोई अतिरिक्त class नहीं।

Phase 6: responsive, dark mode, motion और print

CSS – 11 to 13
/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero picture { order: -1; }                       /* photo first on phones */
  header.site .bar { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 10px; }
  header.site nav ul { overflow-x: auto; scrollbar-width: none; }   /* pills scroll sideways */
  header.site nav a { white-space: nowrap; background: var(--surface); border: 1px solid var(--line); }
  blockquote { padding: 56px 22px 22px; }
  dl { grid-template-columns: 1fr; }
  dl dt { border-bottom: 0; padding-bottom: 0; }
  blockquote::before { top: 4px; }
  figcaption { padding-left: 0; }
}
@media (max-width: 520px) {
  th, td { padding: 12px; }
  tbody td:nth-child(2) { font-size: .9rem; color: var(--muted); }
}

/* ---------- 12. DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fdf2e6; --text: #e9dccf; --muted: #b9a797;
    --line: #3a2a20; --bg: #1a120d; --surface: #241912;
    --gold-soft: #3d2a12; --brand: #f97316; --brand-600: #fb923c; --on-brand: #1a120d;
    --shadow: 0 12px 32px rgb(0 0 0 / 40%); --shadow-lg: 0 24px 48px rgb(0 0 0 / 55%);
  }
  header.site { background: rgb(26 18 13 / 88%); }
  thead th { background: #3a2a20; }
  tbody tr:hover { background: #2d2017; }
  footer.site { background: #120c08; }
}

/* ---------- 13. MOTION & PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  header.site, footer.site, .btn, iframe, video { display: none !important; }
  body { background: #fff; color: #000; }
  .card, table, blockquote, form { box-shadow: none; border: 1px solid #ccc; }
}
Featureकैसे काम करता है
Phone layout (≤ 820px)Hero stack होता है, photo पहले (order: -1); nav pills बग़ल में scroll
छोटे phones (≤ 520px)तंग table cells, हल्के descriptions
Dark modeसिर्फ़ tokens बदलते हैं; --on-brand गहरे text पर जाता है ताकि orange buttons 6.6:1 contrast रखें
Reduced motionसभी animations और transitions व्यावहारिक रूप से बंद
PrintHeader, footer, buttons, map और video छिपे; shadows की जगह borders

Phase 7: test, measure और present

जाँचहमारे build का नतीजा
1280px और 375px पर horizontal overflow (सभी 6 pages)0px ✅
Body text contrast (light / dark)11.4:1 / 13.7:1 ✅
Button contrast (light / dark)5.2:1 / 6.6:1 ✅
Muted text contrast5.0:1 ✅
बदला गया HTMLहर page पर सिर्फ़ एक Google Fonts <link> ✅
KeyboardSkip link, हर link, field और button पर सुनहरे focus rings ✅
  1. 1हर page के phone और laptop पर before/after screenshots लें
  2. 2एक-page summary लिखें: मिली समस्याएँ → क्या बदला → मापे गए नतीजे
  3. 3पहले staging copy पर नई css/style.css upload करके client से approve करवाएँ
  4. 4पुरानी style.css का backup लेकर live site पर upload करें
  5. 5File नाम बदलें या link में ?v=2 जोड़ें ताकि browsers नई CSS लें
  6. 6Review / testimonial माँगें – और project अपने portfolio में जोड़ें
Redesign को professional ढंग से deliver करना

इसे बढ़ाएँ (homework challenges)

  1. data-theme से manual theme switch button जोड़ें (Day 12) – JS course पसंद save करेगा।
  2. <body> पर .diwali class में 4 tokens बदलकर त्योहारी “Diwali mode” बनाएँ।
  3. Products database से आने के समय के लिए product grid का skeleton loader जोड़ें (Day 14)।
  4. अब HTML बदल सकते हैं, तो structural selectors को BEM classes में बदलें।
  5. हर page पर Lighthouse चलाएँ और Accessibility व Best Practices में 95+ लाएँ।

पूरी stylesheet

पूरा project (6 HTML pages, images, video, robots.txt, sitemap.xml और यह stylesheet) मुफ़्त CSS course kit download में है।

CSS – css/style.css (complete)
/* =============================================================
   Sharma Sweets – complete redesign (CSS course, Day 20)
   The HTML from the HTML course is unchanged except for one
   Google Fonts <link>. Everything you see comes from this file.

   1. Design tokens        6. Cards & product grid
   2. Base / reset         7. Tables, lists, FAQ, quotes
   3. Layout helpers       8. Forms
   4. Header & navigation  9. About page media
   5. Buttons & hero      10. Footer, utility pages
                          11. Responsive  12. Dark mode  13. Motion & print
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --brand: #c2410c;          /* deep saffron – main brand */
  --brand-600: #9a3412;
  --gold: #f59e0b;
  --gold-soft: #fef3c7;
  --on-brand: #ffffff;       /* text colour on brand backgrounds */
  --ink: #2b1a12;            /* headings */
  --text: #44342b;           /* body text */
  --muted: #7c6a5e;
  --line: #f0e2d4;
  --bg: #fffaf3;             /* warm cream page */
  --surface: #ffffff;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 12px 32px rgb(87 46 18 / 10%);
  --shadow-lg: 0 24px 48px rgb(87 46 18 / 18%);
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Lato", system-ui, "Segoe UI", Roboto, sans-serif;
  --container: 1120px;
  --gap: clamp(16px, 3vw, 28px);
}

/* ---------- 2. BASE / RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}
img, video { display: block; max-width: 100%; height: auto; }
iframe { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
input, select, textarea, button { font: inherit; }
::selection { background: var(--gold-soft); }

/* Skip link (HTML class: .skip) */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- 3. LAYOUT HELPERS ---------- */
/* <main> and the header/footer .bar share the same centred width */
main, .bar { width: min(var(--container), 100% - 32px); margin-inline: auto; }
main { padding-block: clamp(24px, 5vw, 48px) 64px; }
main > section, main > article { margin-top: clamp(40px, 7vw, 80px); }
main > section:first-child { margin-top: 0; }

/* ---------- 4. HEADER & NAVIGATION ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 250 243 / 88%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold-soft); }
header.site nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
header.site nav a {
  display: block; padding: 8px 16px; border-radius: 99px;
  color: var(--text); text-decoration: none; font-weight: 700; font-size: .95rem;
  transition: background-color .2s, color .2s;
}
header.site nav a:hover { background: var(--gold-soft); color: var(--brand-600); }
header.site nav a[aria-current="page"] { background: var(--brand); color: var(--on-brand); }

/* ---------- 5. BUTTONS & HERO ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 99px; border: 2px solid var(--brand);
  background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px rgb(194 65 12 / 25%);
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.btn:hover { color: var(--on-brand); background: var(--brand-600); transform: translateY(-2px); box-shadow: 0 14px 30px rgb(194 65 12 / 30%); }
.btn:active { transform: translateY(0); }
.btn.alt { background: transparent; color: var(--brand); box-shadow: none; }
.btn.alt:hover { background: var(--gold-soft); color: var(--brand-600); }

.hero {
  display: grid; gap: clamp(24px, 5vw, 64px);
  grid-template-columns: 1.05fr .95fr; align-items: center;
  padding-block: clamp(32px, 6vw, 72px);
  position: relative;
}
.hero::before {                                   /* soft saffron glow behind the photo */
  content: ""; position: absolute; z-index: -1; right: 0; top: 0;
  width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(245 158 11 / 22%), transparent 65%);
}
.hero h1 { letter-spacing: -.01em; }
.hero p:first-of-type { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.hero p:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero picture img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;   /* organic “blob” shape */
  box-shadow: var(--shadow-lg);
  animation: settle 1s ease-out both;
}
@keyframes settle { from { opacity: 0; transform: scale(.94) rotate(-2deg); } }

/* ---------- 6. CARDS & PRODUCT GRID ---------- */
.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.card:hover img { transform: scale(1.06); }
.card div { padding: 18px 20px 22px; position: relative; background: var(--surface); }
.card h3 { margin-bottom: 4px; }
.card p { margin: 0; color: var(--muted); }
.price { display: block; width: fit-content; margin-top: 10px; padding: 2px 12px; border-radius: 99px; background: var(--gold-soft); color: var(--brand-600); font-weight: 700; }

/* Section headings get a small decorative divider */
main h2 { position: relative; padding-bottom: 14px; }
main h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); }

/* ---------- 7. TABLES, LISTS, FAQ, QUOTES ---------- */
/* "Why Jaipur trusts us" list → feature tiles */
section[aria-labelledby="why"] ul { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 0; }
section[aria-labelledby="why"] li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
section[aria-labelledby="why"] strong { display: block; font-family: var(--font-head); font-size: 1.3rem; color: var(--brand); }

/* Testimonial */
figure { margin: 0; }
blockquote { margin: 0; position: relative; background: var(--surface); border-radius: var(--radius); padding: 32px 32px 24px 72px; box-shadow: var(--shadow); font-size: 1.15rem; color: var(--ink); }
blockquote::before { content: "“"; position: absolute; left: 22px; top: 6px; font-family: var(--font-head); font-size: 4.5rem; line-height: 1; color: var(--gold); }
blockquote p { margin: 0; }
figcaption { margin-top: 12px; padding-left: 72px; color: var(--muted); font-style: italic; }

/* FAQ accordion */
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; transition: box-shadow .2s; }
details[open] { box-shadow: var(--shadow); }
summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--brand); font-size: 1.4rem; line-height: 1; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 20px 16px; margin: 0; color: var(--muted); }

/* Menu tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 8px; }
caption { text-align: left; font-weight: 700; color: var(--muted); padding: 0 4px 10px; caption-side: top; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { background: var(--ink); color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
tbody th { font-family: var(--font-head); color: var(--ink); }
tbody td:last-child { font-weight: 700; color: var(--brand); text-align: right; white-space: nowrap; }
thead th:last-child { text-align: right; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: #fffbeb; }
h2 small { font-family: var(--font-body); font-size: .95rem; color: var(--muted); font-weight: 400; }

/* In-page "Jump to" navigation on the menu page */
main nav[aria-label="Menu sections"] p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
main nav[aria-label="Menu sections"] a { padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 99px; text-decoration: none; font-weight: 700; background: var(--surface); }
main nav[aria-label="Menu sections"] a:hover { border-color: var(--brand); }

/* About page: timeline list and promise definitions */
article ol { list-style: none; padding: 0; margin: 0 0 32px; border-left: 3px solid var(--gold); }
article ol li { position: relative; padding: 4px 0 18px 24px; }
article ol li::before { content: ""; position: absolute; left: -10px; top: 10px; width: 17px; height: 17px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
article ol time { font-weight: 700; color: var(--brand); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
dl dt, dl dd { padding: 16px 20px; border-bottom: 1px solid var(--line); margin: 0; }
dl dt { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--brand); }
dl dd { color: var(--text); }
dl dt:last-of-type, dl dd:last-of-type { border-bottom: 0; }
dfn { font-style: normal; font-weight: 700; color: var(--brand); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* ---------- 8. FORMS (contact page) ---------- */
form { background: var(--surface); border-radius: var(--radius); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); display: grid; gap: 18px; max-width: 620px; }
label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
input:not([type="radio"], [type="checkbox"]), select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(194 65 12 / 15%); }
input:user-invalid, select:user-invalid { border-color: #dc2626; }
input:user-valid:not([type="checkbox"], [type="radio"]) { border-color: #16a34a; }
small { color: var(--muted); font-size: .85rem; }
fieldset { border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
legend { font-weight: 700; color: var(--ink); padding: 0 6px; }
fieldset label { display: inline; font-weight: 400; margin: 0; }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); vertical-align: middle; }
form > div:has(input[type="checkbox"]) label { display: inline; font-weight: 400; }
form .btn { justify-self: start; border: 0; }
form + h2 { margin-top: 56px; }
iframe { width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- 9. ABOUT PAGE MEDIA ---------- */
article video { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: #000; }
article figure figcaption { padding-left: 0; text-align: center; }
article > p:first-of-type { font-size: 1.2rem; max-width: 60ch; }

/* ---------- 10. FOOTER & UTILITY PAGES ---------- */
footer.site { margin-top: 64px; background: var(--ink); color: #e9d8c8; }
footer.site .bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 40px; }
footer.site address { font-style: normal; line-height: 1.9; }
footer.site strong { font-family: var(--font-head); font-size: 1.3rem; color: #fff; }
footer.site a { color: var(--gold); }
footer.site small { color: #c9b8a8; }

/* thank-you.html and 404.html have no site header: centre their <main> */
body:not(:has(header.site)) > main { min-height: 90vh; display: grid; place-content: center; text-align: center; }
body:not(:has(header.site)) > main p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero picture { order: -1; }                       /* photo first on phones */
  header.site .bar { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 10px; }
  header.site nav ul { overflow-x: auto; scrollbar-width: none; }   /* pills scroll sideways */
  header.site nav a { white-space: nowrap; background: var(--surface); border: 1px solid var(--line); }
  blockquote { padding: 56px 22px 22px; }
  dl { grid-template-columns: 1fr; }
  dl dt { border-bottom: 0; padding-bottom: 0; }
  blockquote::before { top: 4px; }
  figcaption { padding-left: 0; }
}
@media (max-width: 520px) {
  th, td { padding: 12px; }
  tbody td:nth-child(2) { font-size: .9rem; color: var(--muted); }
}

/* ---------- 12. DARK MODE ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fdf2e6; --text: #e9dccf; --muted: #b9a797;
    --line: #3a2a20; --bg: #1a120d; --surface: #241912;
    --gold-soft: #3d2a12; --brand: #f97316; --brand-600: #fb923c; --on-brand: #1a120d;
    --shadow: 0 12px 32px rgb(0 0 0 / 40%); --shadow-lg: 0 24px 48px rgb(0 0 0 / 55%);
  }
  header.site { background: rgb(26 18 13 / 88%); }
  thead th { background: #3a2a20; }
  tbody tr:hover { background: #2d2017; }
  footer.site { background: #120c08; }
}

/* ---------- 13. MOTION & PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  header.site, footer.site, .btn, iframe, video { display: none !important; }
  body { background: #fff; color: #000; }
  .card, table, blockquote, form { box-shadow: none; border: 1px solid #ccc; }
}

🏅 आज के Job Skills

✔ Live site का audit करके सुरक्षित redesign plan करना✔ Tokens और type scale से brand system✔ एक stylesheet से पूरी multi-page sites style करना✔ Professional की तरह redesign test, document और deliver करना

Practice tasks

🏋️ Practice – ख़ुद करें

Task 1: <body> पर class="diwali" जोड़कर और .diwali में --brand, --gold, --bg और --ink बदलकर “Diwali mode” बनाएँ।
Task 2: 404 page को बड़े animated 🍬 (keyframes bounce) के साथ restyle करें जो reduced-motion users के लिए रुक जाए।
Task 3: अपने पास का कोई असली local business चुनें, Phase 1 table से उसकी website का audit करें और redesign brief लिखें।

Quick quiz

🧠 Quick Quiz – ख़ुद को जाँचें

1. सिर्फ़ CSS से redesign क्यों?
ज़िम्मेदारियाँ अलग रखने का फ़ायदा।
2. Active nav pill को style कैसे मिलती है?
Accessibility markup दोबारा।
3. Dark-mode orange buttons पढ़ने लायक क्यों रहते हैं?
6.6:1 contrast।
4. body:not(:has(header.site)) > main किसे चुनता है?
Parent selector के रूप में :has()।
5. नई style.css upload करने पर visitors को पुराना design दिखता है। इलाज?
Browser cache।

Interview corner

💼 Interview Corner

ऐसा project बताइए जिसमें आपने मौजूदा website सुधारी।

STAR: Situation – त्योहार से पहले चलती पर साधारण 6-page business site; Task – SEO जोखिम बिना premium रूप; Action – audit, brand tokens, type scale, मौजूदा semantic hooks (aria-current, landmarks) से component styles, responsive + dark + print, contrast और overflow testing, staging approval; Result – एक documented stylesheet, 0 overflow, ≥ 5:1 contrast, HTML अछूता, आसान rollback।

CSS बदलाव सुरक्षित ढंग से कैसे deploy करें?

Staging copy पर काम, पुरानी file का backup, मुख्य pages और devices पर test, cache तोड़ने के लिए asset URL में version, कम traffic के समय deploy, और production में DevTools से जाँच (Network: सही file load हुई)।

सारांश

  • Audit → brief → tokens → base → layout → components → pages → responsive → dark → print।
  • मौजूदा semantic HTML hooks दोबारा लें; markup नहीं, एक file बदलें।
  • मापें: overflow, contrast, keyboard, Lighthouse।
  • Staging, backups, cache-busting और छोटी report के साथ deliver करें।
➡️ आगे

🎉 CSS course पूरा! अगला: 30-day JavaScript course – cart, filters, form validation और APIs से data के साथ इस website को interactive बनाएँ।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

आगे क्या सीखूँ?
JavaScript – 30-day course इन्हीं pages में live cart, theme switch की याद, form messages और APIs से data जोड़ता है।
क्या यह design असली client के लिए इस्तेमाल कर सकता हूँ?
हाँ – code सीखने और ढालने के लिए आपका है। Sample business details, photos और text की जगह client के अपने डालें।
← CSS (20 Days)
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

Course पूरा! आगे सीखेंJavaScript (30 Days) आपकी प्रगति: 20 / 20 (100%) · अगला course आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें
RDBMS भाग 3 – Class XI Commerce IT – video thumbnailRDBMS भाग 3 – Class XI Commerce IT