दिन 15: Major Project: Multi-page Business Website
✅ आज आप सीखेंगे
- असली client website plan: pages, content, folders
- एक header और footer साझा करने वाले 6 pages बनाना
- सब कुछ इस्तेमाल: SEO head, schema, picture, tables, forms, video, map, details
- Professional की तरह test: validator, keyboard, Lighthouse, phone
- Publish करके client को सौंपना
🏢 असली दुनिया में
Sharma Sweets के मालिक श्री Vikas Sharma आपको call करते हैं: “Diwali 3 हफ़्ते में है। मुझे ऐसी website चाहिए जहाँ लोग menu और prices देखें, हमारी कहानी जानें, दुकान ढूँढें और bulk orders दें। Budget ₹8,000।” India में freelancers को हर हफ़्ते ठीक ऐसे projects मिलते हैं। चलिए deliver करें।
तैयार website
Phase 1: requirements और planning
| Client की ज़रूरत | हमारा HTML हल | किस Day सीखा |
|---|---|---|
| Menu और prices दिखाना | Caption वाली tables के साथ menu.html | 5 |
| Google पर भरोसेमंद दिखना | Titles, descriptions, canonical, LocalBusiness schema | 9 |
| सुंदर WhatsApp previews | Open Graph tags | 9 |
| Bulk orders | Validation वाला contact.html form | 6–7 |
| Customers दुकान ढूँढें | Embedded Google Map, पता, tel: link | 3, 12 |
| परिवार की कहानी | Video, ol timeline, dl वादा वाला about.html | 2, 4, 5 |
| सबके लिए काम करे | Skip link, labels, alt, focus, lang | 10 |
| 4G पर तेज़ | WebP, srcset, lazy loading, width/height | 4, 13 |
sharma-sweets/
├── index.html ← home
├── menu.html
├── about.html
├── contact.html ← order form
├── thank-you.html ← form result (noindex)
├── 404.html
├── robots.txt
├── sitemap.xml
├── css/
│ └── style.css ← ready-made (you will write CSS in the next course)
└── images/
├── logo.png
├── kaju-katli.webp kaju-katli-400.webp
├── ghewar.webp ghewar-400.webp
├── rasmalai.webp rasmalai-400.webp
├── ladoo.webp ladoo-400.webp
├── shop.mp4
└── shop-poster.jpgसाझा हिस्से (head, header, footer) index.html पर एक बार लिखें, test करें, फिर उसी file को copy करके बाक़ी pages बनाएँ और सिर्फ़ title, description, canonical, aria-current और main content बदलें। इससे हर page एक जैसा रहता है।
Phase 2: head (हर page)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sharma Sweets Jaipur – Fresh Mithai & Gift Boxes Since 1985</title>
<meta name="description" content="Fresh kaju katli, ghewar, rasmalai and ladoo made daily in pure ghee at Johari Bazaar, Jaipur. Diwali gift boxes, wedding orders and home delivery.">
<link rel="canonical" href="https://sharmasweets.in/">
<meta property="og:type" content="website">
<meta property="og:title" content="Sharma Sweets Jaipur – Fresh Mithai Since 1985">
<meta property="og:description" content="Diwali gift boxes, wedding orders and home delivery in Jaipur.">
<meta property="og:image" content="https://sharmasweets.in/images/kaju-katli.webp">
<meta property="og:url" content="https://sharmasweets.in/">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="images/logo.png" type="image/png">
<meta name="theme-color" content="#e34f26">
<link rel="stylesheet" href="css/style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Bakery",
"name": "Sharma Sweets",
"image": "https://sharmasweets.in/images/shop-poster.jpg",
"telephone": "+91-98290-12345",
"priceRange": "₹₹",
"address": {
"@type": "PostalAddress",
"streetAddress": "Shop 14, Johari Bazaar",
"addressLocality": "Jaipur",
"postalCode": "302003",
"addressCountry": "IN"
},
"openingHours": "Mo-Su 08:00-22:00",
"url": "https://sharmasweets.in/"
}
</script>
</head>| Line | क्यों है |
|---|---|
| title (58 chars) | Brand + मुख्य keywords + वादा; हर page का अलग |
| meta description (≈150 chars) | क्या बेचते हैं, सबूत (pure ghee, since 1985), action |
| canonical | ?utm=… से link हो तब भी एक official URL |
| og:* + twitter:card | WhatsApp पर share होने पर बड़ी image preview |
| icon + theme-color | Browser tabs पर logo; नारंगी mobile address bar |
| application/ld+json | Bakery schema: Google पता, phone, समय जानता है |
Phase 3: साझा header और footer
<a class="skip" href="#main">Skip to main content</a>
<!-- ===== HEADER ===== -->
<header class="site">
<div class="bar">
<a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
<nav aria-label="Main">
<ul>
<li><a href="index.html" aria-current="page">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Order</a></li>
</ul>
</nav>
</div>
</header>- Skip link पहला focusable item है – keyboard users सीधे <main id="main"> पर पहुँचते हैं।
- Logo image का
alt=""है क्योंकि ठीक बगल का text “Sharma Sweets” link का नाम पहले ही बताता है। aria-label="Main"navigation landmark का नाम है;aria-current="page"बताता है आप कहाँ हैं (और CSS उसे highlight करती है)। menu.html पर aria-current Menu link पर जाता है।
<footer class="site">
<div class="bar">
<address>
<strong>Sharma Sweets</strong><br>
Shop 14, Johari Bazaar, Jaipur 302003<br>
<a href="tel:+919829012345">+91 98290 12345</a> ·
<a href="mailto:order@sharmasweets.in">order@sharmasweets.in</a>
</address>
<p>Open daily 8 am – 10 pm<br><small>© 2026 Sharma Sweets. All rights reserved.</small></p>
</div>
</footer>tel:+919829012345 mobile पर phone dialer खोलता है – sweet shop के लिए यह एक link किसी भी दूसरे feature से ज़्यादा orders लाता है। हमेशा पूरा international format लें।
Phase 4: home page content
<section class="hero" aria-labelledby="hero-title">
<div>
<h1 id="hero-title">Fresh mithai from Johari Bazaar, every morning since 1985</h1>
<p>Made in small batches with pure desi ghee and no preservatives. Pick up from our shop or get it delivered anywhere in Jaipur within 2 hours.</p>
<p><a class="btn" href="contact.html">Order now</a> <a class="btn alt" href="menu.html">See the menu</a></p>
</div>
<picture>
<source srcset="images/kaju-katli.webp 800w, images/kaju-katli-400.webp 400w" sizes="(max-width: 600px) 100vw, 480px" type="image/webp">
<img src="images/kaju-katli-400.webp" alt="Silver-topped kaju katli on a brass plate" width="800" height="600">
</picture>
</section>- हर page पर ठीक एक <h1>, page का वर्णन करता हुआ।
- <picture> + srcset: phones 400 px image, बड़ी screens 800 px वाली लेती हैं।
- Hero image पर loading="lazy" नहीं क्योंकि यह तुरंत दिखती है (यही LCP image है)।
- दो साफ़ calls to action: “Order now” (मुख्य) और “See the menu”।
<section aria-labelledby="best">
<h2 id="best">Our best sellers</h2>
<div class="grid">
<article class="card">
<img src="images/kaju-katli-400.webp" alt="Kaju katli" width="400" height="300" loading="lazy">
<div><h3>Kaju Katli</h3><p>Cashew fudge with silver vark. <span class="price">₹900/kg</span></p></div>
</article>
<article class="card">
<img src="images/ghewar-400.webp" alt="Round malai ghewar topped with nuts" width="400" height="300" loading="lazy">
<div><h3>Malai Ghewar</h3><p>Jaipur’s Teej special. <span class="price">₹650/kg</span></p></div>
</article>
<article class="card">
<img src="images/rasmalai-400.webp" alt="Rasmalai in saffron milk" width="400" height="300" loading="lazy">
<div><h3>Rasmalai</h3><p>Soft paneer discs in kesar milk. <span class="price">₹700/kg</span></p></div>
</article>
<article class="card">
<img src="images/ladoo-400.webp" alt="Besan ladoo" width="400" height="300" loading="lazy">
<div><h3>Besan Ladoo</h3><p>Roasted gram flour and ghee. <span class="price">₹500/kg</span></p></div>
</article>
</div>
</section>हर product एक <article> है क्योंकि वह अकेले भी समझ आता है; hero के नीचे की images पर loading="lazy"। “Why us” list, review (<figure> + <blockquote> + <figcaption>) और FAQ (<details name="faq">) Days 2, 8 और 11 से हैं।
Phase 5: tables वाला menu page
<section id="milk" aria-labelledby="h-milk">
<h2 id="h-milk">Milk sweets <small>(eat within 2 days)</small></h2>
<table>
<caption>Milk sweets – price per kg</caption>
<thead>
<tr><th scope="col">Sweet</th><th scope="col">Description</th><th scope="col">Price</th></tr>
</thead>
<tbody>
<tr><th scope="row">Rasmalai</th><td>Paneer discs in saffron milk</td><td>₹700</td></tr>
<tr><th scope="row">Malai Ghewar</th><td>Honeycomb disc with rabri</td><td>₹650</td></tr>
<tr><th scope="row">Kalakand</th><td>Grainy milk cake</td><td>₹600</td></tr>
<tr><th scope="row">Rasgulla</th><td>Spongy, in light syrup</td><td>₹400</td></tr>
</tbody>
</table>
</section>- <caption> table का नाम screen readers और Google को बताता है।
- Column headers पर
scope="col", हर मिठाई का नामscope="row"वाला row header। - Page के अंदर “Jump to” nav #ids से – लंबे pages और Google sitelinks के लिए बढ़िया।
Phase 6: about page – कहानी, video, timeline
<figure>
<video controls preload="none" poster="images/shop-poster.jpg" width="640" height="360">
<source src="images/shop.mp4" type="video/mp4">
Your browser does not play video. <a href="images/shop.mp4">Download the shop video</a>.
</video>
<figcaption>A morning in our kitchen – ghewar being made by hand.</figcaption>
</figure>
<dl>
<dt>Pure ghee</dt><dd>Only desi cow ghee – no vanaspati.</dd>
<dt>No preservatives</dt><dd>Milk sweets are made fresh every morning.</dd>
<dt>Honest weight</dt><dd>Box weight is never counted in your sweets.</dd>
</dl>preload="none"+ poster: 1 MB video तभी download होता है जब कोई play दबाए।- <video> के अंदर download link वाला fallback text।
- <time datetime> सालों को machine-readable बनाता है; <dfn> और <abbr> शब्द समझाते हैं।
- <dl> “term → explanation” lists जैसे वादे के लिए perfect।
Phase 7: order form
<form action="thank-you.html" method="get">
<div>
<label for="name">Full name</label>
<input id="name" name="name" autocomplete="name" required minlength="2">
</div>
<div>
<label for="phone">Mobile number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" required
pattern="[6-9][0-9]{9}" inputmode="numeric" aria-describedby="phone-help">
<small id="phone-help">10 digits, starting with 6–9.</small>
</div>
<div>
<label for="sweet">Sweet</label>
<select id="sweet" name="sweet" required>
<option value="">– Choose –</option>
<optgroup label="Milk sweets">
<option>Rasmalai</option>
<option>Malai Ghewar</option>
</optgroup>
<optgroup label="Dry sweets">
<option>Kaju Katli</option>
<option>Besan Ladoo</option>
</optgroup>
</select>
</div>
<div>
<label for="kg">Quantity (kg)</label>
<input id="kg" name="kg" type="number" min="0.25" max="200" step="0.25" value="1" required>
</div>
<fieldset>
<legend>Delivery or pick-up?</legend>
<input type="radio" id="del" name="mode" value="delivery" checked> <label for="del">Home delivery</label>
<input type="radio" id="pick" name="mode" value="pickup"> <label for="pick">Pick up from shop</label>
</fieldset>
<div>
<label for="date">Date needed</label>
<input id="date" name="date" type="date" required>
</div>
<div>
<label for="note">Message (optional)</label>
<textarea id="note" name="note" rows="3" maxlength="300" placeholder="e.g. 20 boxes of 500 g for a wedding"></textarea>
</div>
<div>
<input type="checkbox" id="ok" name="ok" required style="width:auto">
<label for="ok" style="display:inline;font-weight:400">I agree to be contacted on this number about my order.</label>
</div>
<button class="btn" type="submit">Send order</button>
</form>| Field | Validation | क्यों |
|---|---|---|
| name | required, minlength="2", autocomplete="name" | Phone अपने-आप भरता है |
| phone | type="tel", pattern="[6-9][0-9]{9}", inputmode="numeric" | Indian mobile format; numeric keypad |
| sweet | खाली पहले option वाला select required | असली चुनाव ज़रूरी |
| kg | type="number" min 0.25 max 200 step 0.25 | सिर्फ़ समझदार मात्रा |
| mode | fieldset + legend में radio group | एक चुनाव, accessible group नाम |
| date | type="date" required | Calendar picker |
| ok | checkbox required | Call से पहले सहमति |
सिर्फ़ HTML data store या e-mail नहीं कर सकता। इस project में form thank-you.html पर जाता है ताकि flow पूरा हो। असली दुकान के लिए: Netlify पर data-netlify="true", GitHub Pages पर Formspree action URL, या Hostinger पर action को PHP script पर। Server पर हमेशा दोबारा validate करें।
<iframe title="Map: Sharma Sweets, Johari Bazaar, Jaipur"
src="https://www.google.com/maps?q=Johari+Bazaar+Jaipur&output=embed"
width="600" height="320" style="border:0;max-width:100%" loading="lazy"
referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>Phase 8: thank-you, 404, robots और sitemap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thank You for Your Order | Sharma Sweets</title>
<meta name="robots" content="noindex">
<link rel="icon" href="images/logo.png" type="image/png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main id="main">
<h1>Thank you! 🙏</h1>
<p>We have received your order. Our team will call you within <strong>30 minutes</strong> to confirm the details.</p>
<p>In a hurry? Call <a href="tel:+919829012345">+91 98290 12345</a>.</p>
<p><a class="btn" href="index.html">Back to home</a></p>
</main>
</body>
</html>- thank-you.html और 404.html पर
<meta name="robots" content="noindex">– ये Google में नहीं दिखने चाहिए। - 404.html root-relative paths (
/css/style.css) लेता है क्योंकि यह किसी भी गहराई के टूटे URL पर दिख सकता है। - robots.txt sitemap की ओर इशारा करता है; sitemap.xml Search Console के लिए 4 public pages बताता है।
User-agent: * Disallow: /thank-you.html Sitemap: https://sharmasweets.in/sitemap.xml <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url><loc>https://sharmasweets.in/</loc></url> <url><loc>https://sharmasweets.in/menu.html</loc></url> <url><loc>https://sharmasweets.in/about.html</loc></url> <url><loc>https://sharmasweets.in/contact.html</loc></url> </urlset>
Phase 9: professional की तरह test
| जाँच | Tool | पास कब |
|---|---|---|
| HTML errors | validator.w3.org/nu | सभी 6 pages पर 0 errors |
| Keyboard | Tab / Shift+Tab / Enter | पहले skip link; focus हमेशा दिखे; form चले |
| Mobile | DevTools Ctrl+Shift+M + असली phone | Side scroll नहीं; tap करना आसान |
| Speed और SEO | Lighthouse (mobile) | चारों categories में 90+ |
| Links | हर link click | कोई 404 नहीं; tel: dialer खोले |
| Schema | Rich Results Test | Bakery detected, कोई error नहीं |
| Sharing | WhatsApp में link paste | Image, title और description दिखें |
हमने इस project के छहों pages पर W3C Nu validator चलाया: 0 HTML errors (सिर्फ़ type="date" और inputmode के लिए “सभी browsers में test करें” वाले info notes)।
Phase 10: live करें और सौंपें
- 1sharmasweets.in domain ख़रीदें (≈ ₹600/साल) या Netlify पर मुफ़्त शुरू करें
- 2पूरा folder upload करें (Netlify: drag-and-drop; Hostinger: File Manager → public_html)
- 3HTTPS चालू करें (मुफ़्त SSL)
- 4असली form endpoint लगाएँ और test order भेजें
- 5Google Search Console: site verify, sitemap.xml submit
- 6उसी नाम, पते, phone के साथ Google Business Profile बनाएँ/claim करें
- 7सौंपें: login details, 1-page “prices कैसे बदलें” note, और invoice
menu.html खोलें, Ctrl+F से मिठाई का नाम ढूँढें, उसके <td> में संख्या बदलें, save करें, सिर्फ़ वह file upload करें। Client को यह सिखाने से भरोसा बनता है – और दोबारा काम मिलता है।
इसे बढ़ाएँ (homework challenges)
- /hi/ में lang="hi" और दोनों ओर hreflang links वाला Hindi version जोड़ें।
- rowspan/colspan से price-slab table वाला “Wedding orders” page जोड़ें।
- Home-page FAQ के लिए FAQPage schema जोड़ें।
- figure/figcaption में 8 lazy-loaded images वाला gallery page जोड़ें।
- CSS course के बाद: redesign; JS course के बाद: live cart जोड़ें।
पूरा source code
सारी files नीचे हैं और मुफ़्त HTML course kit download में भी (images, video और README के साथ)।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sharma Sweets Jaipur – Fresh Mithai & Gift Boxes Since 1985</title>
<meta name="description" content="Fresh kaju katli, ghewar, rasmalai and ladoo made daily in pure ghee at Johari Bazaar, Jaipur. Diwali gift boxes, wedding orders and home delivery.">
<link rel="canonical" href="https://sharmasweets.in/">
<meta property="og:type" content="website">
<meta property="og:title" content="Sharma Sweets Jaipur – Fresh Mithai Since 1985">
<meta property="og:description" content="Diwali gift boxes, wedding orders and home delivery in Jaipur.">
<meta property="og:image" content="https://sharmasweets.in/images/kaju-katli.webp">
<meta property="og:url" content="https://sharmasweets.in/">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="images/logo.png" type="image/png">
<meta name="theme-color" content="#e34f26">
<link rel="stylesheet" href="css/style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Bakery",
"name": "Sharma Sweets",
"image": "https://sharmasweets.in/images/shop-poster.jpg",
"telephone": "+91-98290-12345",
"priceRange": "₹₹",
"address": {
"@type": "PostalAddress",
"streetAddress": "Shop 14, Johari Bazaar",
"addressLocality": "Jaipur",
"postalCode": "302003",
"addressCountry": "IN"
},
"openingHours": "Mo-Su 08:00-22:00",
"url": "https://sharmasweets.in/"
}
</script>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<!-- ===== HEADER ===== -->
<header class="site">
<div class="bar">
<a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
<nav aria-label="Main">
<ul>
<li><a href="index.html" aria-current="page">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Order</a></li>
</ul>
</nav>
</div>
</header>
<!-- ===== MAIN ===== -->
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<div>
<h1 id="hero-title">Fresh mithai from Johari Bazaar, every morning since 1985</h1>
<p>Made in small batches with pure desi ghee and no preservatives. Pick up from our shop or get it delivered anywhere in Jaipur within 2 hours.</p>
<p><a class="btn" href="contact.html">Order now</a> <a class="btn alt" href="menu.html">See the menu</a></p>
</div>
<picture>
<source srcset="images/kaju-katli.webp 800w, images/kaju-katli-400.webp 400w" sizes="(max-width: 600px) 100vw, 480px" type="image/webp">
<img src="images/kaju-katli-400.webp" alt="Silver-topped kaju katli on a brass plate" width="800" height="600">
</picture>
</section>
<section aria-labelledby="best">
<h2 id="best">Our best sellers</h2>
<div class="grid">
<article class="card">
<img src="images/kaju-katli-400.webp" alt="Kaju katli" width="400" height="300" loading="lazy">
<div><h3>Kaju Katli</h3><p>Cashew fudge with silver vark. <span class="price">₹900/kg</span></p></div>
</article>
<article class="card">
<img src="images/ghewar-400.webp" alt="Round malai ghewar topped with nuts" width="400" height="300" loading="lazy">
<div><h3>Malai Ghewar</h3><p>Jaipur’s Teej special. <span class="price">₹650/kg</span></p></div>
</article>
<article class="card">
<img src="images/rasmalai-400.webp" alt="Rasmalai in saffron milk" width="400" height="300" loading="lazy">
<div><h3>Rasmalai</h3><p>Soft paneer discs in kesar milk. <span class="price">₹700/kg</span></p></div>
</article>
<article class="card">
<img src="images/ladoo-400.webp" alt="Besan ladoo" width="400" height="300" loading="lazy">
<div><h3>Besan Ladoo</h3><p>Roasted gram flour and ghee. <span class="price">₹500/kg</span></p></div>
</article>
</div>
</section>
<section aria-labelledby="why">
<h2 id="why">Why Jaipur trusts us</h2>
<ul>
<li><strong>38+ years</strong> – three generations of halwais.</li>
<li><strong>Pure desi ghee</strong> – no vanaspati, no preservatives.</li>
<li><strong>Made today</strong> – milk sweets are never sold the next day.</li>
<li><strong>4.6 ★</strong> on Google from 2,300+ reviews.</li>
</ul>
</section>
<section aria-labelledby="say">
<h2 id="say">What customers say</h2>
<figure>
<blockquote><p>“We ordered 40 kg for my sister’s wedding – every box arrived on time and fresh.”</p></blockquote>
<figcaption>— A customer from Malviya Nagar, Jaipur</figcaption>
</figure>
</section>
<section aria-labelledby="faq">
<h2 id="faq">Quick questions</h2>
<details name="faq">
<summary>Are your sweets eggless?</summary>
<p>Yes, everything we make is 100% vegetarian and eggless.</p>
</details>
<details name="faq">
<summary>Do you ship outside Jaipur?</summary>
<p>We courier dry sweets such as kaju katli across India in 3–5 days.</p>
</details>
<details name="faq">
<summary>Can I order for a wedding?</summary>
<p>Yes – <a href="contact.html">send us your requirement</a> at least 3 days ahead for bulk orders.</p>
</details>
</section>
</main>
<!-- ===== FOOTER ===== -->
<footer class="site">
<div class="bar">
<address>
<strong>Sharma Sweets</strong><br>
Shop 14, Johari Bazaar, Jaipur 302003<br>
<a href="tel:+919829012345">+91 98290 12345</a> ·
<a href="mailto:order@sharmasweets.in">order@sharmasweets.in</a>
</address>
<p>Open daily 8 am – 10 pm<br><small>© 2026 Sharma Sweets. All rights reserved.</small></p>
</div>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweets Menu & Prices – Kaju Katli, Ghewar | Sharma Sweets</title>
<meta name="description" content="Today’s prices at Sharma Sweets Jaipur: kaju katli ₹900/kg, rasmalai ₹700/kg, ghewar ₹650/kg, ladoo ₹500/kg. Gift boxes and bulk rates for weddings.">
<link rel="canonical" href="https://sharmasweets.in/menu.html">
<link rel="icon" href="images/logo.png" type="image/png">
<meta name="theme-color" content="#e34f26">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header class="site">
<div class="bar">
<a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
<nav aria-label="Main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html" aria-current="page">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Order</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<h1>Our menu</h1>
<p>Prices are per kilogram and include GST. Minimum order 250 g.</p>
<nav aria-label="Menu sections">
<p>Jump to: <a href="#milk">Milk sweets</a> · <a href="#dry">Dry sweets</a> · <a href="#boxes">Gift boxes</a></p>
</nav>
<section id="milk" aria-labelledby="h-milk">
<h2 id="h-milk">Milk sweets <small>(eat within 2 days)</small></h2>
<table>
<caption>Milk sweets – price per kg</caption>
<thead>
<tr><th scope="col">Sweet</th><th scope="col">Description</th><th scope="col">Price</th></tr>
</thead>
<tbody>
<tr><th scope="row">Rasmalai</th><td>Paneer discs in saffron milk</td><td>₹700</td></tr>
<tr><th scope="row">Malai Ghewar</th><td>Honeycomb disc with rabri</td><td>₹650</td></tr>
<tr><th scope="row">Kalakand</th><td>Grainy milk cake</td><td>₹600</td></tr>
<tr><th scope="row">Rasgulla</th><td>Spongy, in light syrup</td><td>₹400</td></tr>
</tbody>
</table>
</section>
<section id="dry" aria-labelledby="h-dry">
<h2 id="h-dry">Dry sweets <small>(stay fresh up to 15 days)</small></h2>
<table>
<caption>Dry sweets – price per kg</caption>
<thead>
<tr><th scope="col">Sweet</th><th scope="col">Description</th><th scope="col">Price</th></tr>
</thead>
<tbody>
<tr><th scope="row">Kaju Katli</th><td>Cashew fudge with silver vark</td><td>₹900</td></tr>
<tr><th scope="row">Besan Ladoo</th><td>Roasted gram flour and ghee</td><td>₹500</td></tr>
<tr><th scope="row">Soan Papdi</th><td>Flaky, melt-in-mouth</td><td>₹380</td></tr>
</tbody>
</table>
</section>
<section id="boxes" aria-labelledby="h-box">
<h2 id="h-box">Festival gift boxes</h2>
<div class="grid">
<article class="card">
<img src="images/kaju-katli-400.webp" alt="Gift box of kaju katli" width="400" height="300" loading="lazy">
<div><h3>Classic Box</h3><p>500 g kaju katli in a printed box. <span class="price">₹480</span></p></div>
</article>
<article class="card">
<img src="images/ladoo-400.webp" alt="Assorted ladoo gift box" width="400" height="300" loading="lazy">
<div><h3>Assorted Box</h3><p>1 kg of four dry sweets. <span class="price">₹720</span></p></div>
</article>
</div>
<p><a class="btn" href="contact.html">Order a gift box</a></p>
</section>
<p><a href="#main">Back to top ↑</a></p>
</main>
<footer class="site">
<div class="bar">
<address>
<strong>Sharma Sweets</strong><br>
Shop 14, Johari Bazaar, Jaipur 302003<br>
<a href="tel:+919829012345">+91 98290 12345</a>
</address>
<p><small>© 2026 Sharma Sweets</small></p>
</div>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Sharma Sweets – Three Generations of Halwais, Jaipur</title>
<meta name="description" content="The story of Sharma Sweets, Johari Bazaar: started in 1985 with one kadhai, now run by the third generation. See how we make ghewar and why we use only pure ghee.">
<link rel="canonical" href="https://sharmasweets.in/about.html">
<link rel="icon" href="images/logo.png" type="image/png">
<meta name="theme-color" content="#e34f26">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header class="site">
<div class="bar">
<a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
<nav aria-label="Main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html" aria-current="page">About</a></li>
<li><a href="contact.html">Order</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<article>
<h1>Our story</h1>
<p>In <time datetime="1985">1985</time>, Ramesh Sharma opened a 10-foot shop in Johari Bazaar with one kadhai and a promise: <em>sell only what was made today</em>. Today his grandchildren run the kitchen – and the promise has not changed.</p>
<figure>
<video controls preload="none" poster="images/shop-poster.jpg" width="640" height="360">
<source src="images/shop.mp4" type="video/mp4">
Your browser does not play video. <a href="images/shop.mp4">Download the shop video</a>.
</video>
<figcaption>A morning in our kitchen – ghewar being made by hand.</figcaption>
</figure>
<h2>Milestones</h2>
<ol>
<li><time datetime="1985">1985</time> – shop opens in Johari Bazaar</li>
<li><time datetime="1998">1998</time> – famous for malai ghewar during Teej</li>
<li><time datetime="2012">2012</time> – second kitchen for wedding orders</li>
<li><time datetime="2020">2020</time> – home delivery across Jaipur</li>
<li><time datetime="2026">2026</time> – this website 🎉</li>
</ol>
<h2>How we make ghewar</h2>
<p>Batter of maida, ghee and chilled water is poured in a thin stream into hot ghee inside a round mould. It forms a <dfn>honeycomb disc</dfn>, which is soaked in syrup and topped with <abbr title="thickened sweetened milk">rabri</abbr>.</p>
<h2>Our promise</h2>
<dl>
<dt>Pure ghee</dt><dd>Only desi cow ghee – no vanaspati.</dd>
<dt>No preservatives</dt><dd>Milk sweets are made fresh every morning.</dd>
<dt>Honest weight</dt><dd>Box weight is never counted in your sweets.</dd>
</dl>
</article>
</main>
<footer class="site">
<div class="bar">
<address>
<strong>Sharma Sweets</strong><br>
Shop 14, Johari Bazaar, Jaipur 302003<br>
<a href="tel:+919829012345">+91 98290 12345</a>
</address>
<p><small>© 2026 Sharma Sweets</small></p>
</div>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Sweets Online – Delivery in Jaipur | Sharma Sweets</title>
<meta name="description" content="Order fresh mithai, gift boxes or bulk wedding sweets from Sharma Sweets. Home delivery across Jaipur in 2 hours. Call, WhatsApp or fill the order form.">
<link rel="canonical" href="https://sharmasweets.in/contact.html">
<link rel="icon" href="images/logo.png" type="image/png">
<meta name="theme-color" content="#e34f26">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header class="site">
<div class="bar">
<a class="brand" href="index.html"><img src="images/logo.png" alt="" width="44" height="44">Sharma Sweets</a>
<nav aria-label="Main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" aria-current="page">Order</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<h1>Place an order</h1>
<p>Call <a href="tel:+919829012345">+91 98290 12345</a>,
<a href="https://wa.me/919829012345?text=Hello%20Sharma%20Sweets">chat on WhatsApp</a>
or fill this form – we confirm every order by phone within 30 minutes.</p>
<!-- On GitHub Pages use Formspree/Netlify Forms; on Hostinger use a PHP script. -->
<form action="thank-you.html" method="get">
<div>
<label for="name">Full name</label>
<input id="name" name="name" autocomplete="name" required minlength="2">
</div>
<div>
<label for="phone">Mobile number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" required
pattern="[6-9][0-9]{9}" inputmode="numeric" aria-describedby="phone-help">
<small id="phone-help">10 digits, starting with 6–9.</small>
</div>
<div>
<label for="sweet">Sweet</label>
<select id="sweet" name="sweet" required>
<option value="">– Choose –</option>
<optgroup label="Milk sweets">
<option>Rasmalai</option>
<option>Malai Ghewar</option>
</optgroup>
<optgroup label="Dry sweets">
<option>Kaju Katli</option>
<option>Besan Ladoo</option>
</optgroup>
</select>
</div>
<div>
<label for="kg">Quantity (kg)</label>
<input id="kg" name="kg" type="number" min="0.25" max="200" step="0.25" value="1" required>
</div>
<fieldset>
<legend>Delivery or pick-up?</legend>
<input type="radio" id="del" name="mode" value="delivery" checked> <label for="del">Home delivery</label>
<input type="radio" id="pick" name="mode" value="pickup"> <label for="pick">Pick up from shop</label>
</fieldset>
<div>
<label for="date">Date needed</label>
<input id="date" name="date" type="date" required>
</div>
<div>
<label for="note">Message (optional)</label>
<textarea id="note" name="note" rows="3" maxlength="300" placeholder="e.g. 20 boxes of 500 g for a wedding"></textarea>
</div>
<div>
<input type="checkbox" id="ok" name="ok" required style="width:auto">
<label for="ok" style="display:inline;font-weight:400">I agree to be contacted on this number about my order.</label>
</div>
<button class="btn" type="submit">Send order</button>
</form>
<h2>Visit the shop</h2>
<iframe title="Map: Sharma Sweets, Johari Bazaar, Jaipur"
src="https://www.google.com/maps?q=Johari+Bazaar+Jaipur&output=embed"
width="600" height="320" style="border:0;max-width:100%" loading="lazy"
referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
</main>
<footer class="site">
<div class="bar">
<address>
<strong>Sharma Sweets</strong><br>
Shop 14, Johari Bazaar, Jaipur 302003<br>
<a href="tel:+919829012345">+91 98290 12345</a>
</address>
<p><small>© 2026 Sharma Sweets</small></p>
</div>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Not Found | Sharma Sweets</title>
<meta name="robots" content="noindex">
<link rel="icon" href="/images/logo.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<main id="main">
<h1>Oops! This sweet box is empty 🍬</h1>
<p>The page you wanted has moved or never existed.</p>
<p><a class="btn" href="/">Back to home</a> <a class="btn alt" href="/menu.html">See today’s menu</a></p>
</main>
</body>
</html>/* Sharma Sweets – starter stylesheet.
This file is ready-made so the HTML project looks good.
You will learn to write every line of it in the CSS course. */
:root { --brand: #e34f26; --gold: #f59e0b; --ink: #2b1a12; --cream: #fff8f1; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--cream); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 10; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
header.site { background: #fff; border-bottom: 3px solid var(--gold); }
.bar { max-width: 1000px; margin: auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.2rem; }
.brand img { width: 44px; height: 44px; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
nav a { display: block; padding: 6px 12px; border-radius: 20px; text-decoration: none; color: var(--ink); }
nav a:hover, nav a[aria-current="page"] { background: var(--brand); color: #fff; }
main { max-width: 1000px; margin: auto; padding: 16px; }
.hero { display: grid; gap: 20px; align-items: center; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 24px 0; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; margin: 0 0 10px; }
.hero img { border-radius: 16px; }
.btn { display: inline-block; background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 8px; text-decoration: none; font-weight: 600; border: 0; font-size: 1rem; cursor: pointer; }
.btn.alt { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px #0001; }
.card div { padding: 10px 14px; }
.card h3 { margin: 0; }
.price { color: var(--brand); font-weight: 700; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid #f1e3d6; text-align: left; }
thead th { background: var(--brand); color: #fff; }
caption { text-align: left; font-weight: 700; padding: 6px 0; }
details { background: #fff; border-radius: 8px; padding: 8px 14px; margin: 8px 0; }
summary { cursor: pointer; font-weight: 600; }
blockquote { margin: 0; background: #fff; padding: 14px; border-left: 4px solid var(--gold); border-radius: 8px; }
form { background: #fff; padding: 16px; border-radius: 12px; display: grid; gap: 12px; max-width: 520px; }
label { font-weight: 600; display: block; }
input, select, textarea { width: 100%; padding: 8px; font: inherit; border: 1px solid #d6c3b3; border-radius: 6px; }
fieldset { border: 1px solid #f1e3d6; border-radius: 8px; }
fieldset label { font-weight: 400; display: inline; }
fieldset input { width: auto; }
footer.site { background: var(--ink); color: #f5e6d8; margin-top: 30px; }
footer.site .bar { align-items: flex-start; padding: 20px 16px; }
footer.site a { color: var(--gold); }
footer.site address { font-style: normal; }🏅 आज के Job Skills
Practice tasks
🏋️ Practice – ख़ुद करें
Solution देखें
<table border="1" cellpadding="6">
<caption>Wedding bulk rates (₹ per kg)</caption>
<thead>
<tr><th scope="col" rowspan="2">Quantity</th><th scope="colgroup" colspan="2">Sweet</th></tr>
<tr><th scope="col">Kaju Katli</th><th scope="col">Besan Ladoo</th></tr>
</thead>
<tbody>
<tr><th scope="row">10–49 kg</th><td>₹860</td><td>₹470</td></tr>
<tr><th scope="row">50–99 kg</th><td>₹830</td><td>₹450</td></tr>
<tr><th scope="row">100+ kg</th><td>₹800</td><td>₹430</td></tr>
</tbody>
</table>Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
Interview corner
💼 Interview Corner
आपने शुरू से अंत तक बनाया कोई website project बताइए।
STAR लें: Situation (Diwali से पहले sweet shop को orders चाहिए थे), Task (3 हफ़्ते में 6-page site), Action (requirements से pages plan, semantic HTML, SEO head + schema, validated form, map, performance काम, accessibility tests, HTTPS और Search Console के साथ deploy), Result (0 validator errors, Lighthouse 90+, client ख़ुद prices बदल सकता है)।
बिना framework के pages में header और footer एक जैसे कैसे रखें?
Pure HTML में: एक बार बनाकर test करें, फिर page को template की तरह copy करके सिर्फ़ page-specific हिस्से बदलें। असली projects में duplication से बचने के लिए server includes (PHP include), static site generator या framework components लें।
सारांश
- Code से पहले requirements → page plan → folder plan।
- साझा head, header और footer; अलग titles और descriptions।
- एक site में हर HTML skill: picture, tables, video, form, map, details, schema।
- Validate, test, HTTPS के साथ deploy, sitemap submit और handover।
🎉 HTML course पूरा! अगला: 20-day CSS course – आप style.css ख़ुद लिखेंगे और इस site को शानदार, responsive design में बदलेंगे।
