Day 15: Major Project: Multi-page Business Website
✅ Today you will learn
- Plan a real client website: pages, content, folders
- Build 6 pages that share one header and footer
- Use everything: SEO head, schema, picture, tables, forms, video, map, details
- Test like a professional: validator, keyboard, Lighthouse, phone
- Publish it and hand it over to the client
🏢 In the real world
Mr. Vikas Sharma, owner of Sharma Sweets, calls you: “Diwali is in 3 weeks. I want a website where people can see our menu and prices, know our story, find the shop and place bulk orders. Budget ₹8,000.” This is exactly the kind of project freelancers in India get every week. Let’s deliver it.
The finished website
Phase 1: requirements and planning
| Client need | Our HTML solution | Day learnt |
|---|---|---|
| Show menu and prices | menu.html with captioned tables | 5 |
| Look trustworthy on Google | Titles, descriptions, canonical, LocalBusiness schema | 9 |
| Nice WhatsApp previews | Open Graph tags | 9 |
| Bulk orders | contact.html form with validation | 6–7 |
| Customers find the shop | Embedded Google Map, address, tel: link | 3, 12 |
| Tell the family story | about.html with video, ol timeline, dl promise | 2, 4, 5 |
| Works for everyone | Skip link, labels, alt, focus, lang | 10 |
| Fast on 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.jpgWrite the shared parts (head, header, footer) once on index.html, test them, then copy the file to create the other pages and change only the title, description, canonical, aria-current and main content. That keeps every page consistent.
Phase 2: the head (every 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 | Why it is there |
|---|---|
| title (58 chars) | Brand + main keywords + promise; unique on every page |
| meta description (≈150 chars) | What you sell, proof (pure ghee, since 1985), action |
| canonical | One official URL even if someone links ?utm=… |
| og:* + twitter:card | Big image preview when the link is shared on WhatsApp |
| icon + theme-color | Logo on browser tabs; orange mobile address bar |
| application/ld+json | Bakery schema: Google learns address, phone, hours |
Phase 3: shared header and 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>- The skip link is the first focusable item – keyboard users jump straight to <main id="main">.
- The logo image has
alt=""because the text “Sharma Sweets” right next to it already names the link. aria-label="Main"names the navigation landmark;aria-current="page"marks where you are (and the CSS highlights it). On menu.html, aria-current moves to the 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 opens the phone dialer on mobiles – for a sweet shop, this one link brings more orders than any other feature. Always use the full 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>- Exactly one <h1> per page, describing the page.
- <picture> + srcset: phones download the 400 px image, big screens the 800 px one.
- The hero image has no loading="lazy" because it is visible immediately (it is the LCP image).
- Two clear calls to action: “Order now” (primary) and “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>Each product is an <article> because it makes sense on its own; images below the hero use loading="lazy". The “why us” list, the review (<figure> + <blockquote> + <figcaption>) and the FAQ (<details name="faq">) reuse Days 2, 8 and 11.
Phase 5: menu page with tables
<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> names the table for screen readers and Google.
- Column headers use
scope="col", each sweet name is a row header withscope="row". - An in-page “Jump to” nav uses #ids – great on long pages and for Google sitelinks.
Phase 6: about page – story, 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: the 1 MB video downloads only when someone presses play.- Fallback text with a download link inside <video>.
- <time datetime> makes years machine-readable; <dfn> and <abbr> explain terms.
- <dl> is perfect for “term → explanation” lists like the promise.
Phase 7: the 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 used | Why |
|---|---|---|
| name | required, minlength="2", autocomplete="name" | Phone autofills it |
| phone | type="tel", pattern="[6-9][0-9]{9}", inputmode="numeric" | Indian mobile format; numeric keypad |
| sweet | select required with an empty first option | Forces a real choice |
| kg | type="number" min 0.25 max 200 step 0.25 | Only sensible quantities |
| mode | radio group in fieldset + legend | One choice, accessible group name |
| date | type="date" required | Calendar picker |
| ok | checkbox required | Consent before calling |
HTML alone cannot store or e-mail data. In this project the form goes to thank-you.html so the flow is complete. For the real shop: on Netlify add data-netlify="true", on GitHub Pages use a Formspree action URL, or on Hostinger point action to a PHP script. Always validate again on the server.
<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 and 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 and 404.html carry
<meta name="robots" content="noindex">– they must not appear in Google. - 404.html uses root-relative paths (
/css/style.css) because it can be shown for any broken URL at any depth. - robots.txt points to the sitemap; sitemap.xml lists the 4 public pages for Search Console.
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: test like a professional
| Check | Tool | Pass when |
|---|---|---|
| HTML errors | validator.w3.org/nu | 0 errors on all 6 pages |
| Keyboard | Tab / Shift+Tab / Enter | Skip link first; focus always visible; form usable |
| Mobile | DevTools Ctrl+Shift+M + a real phone | No sideways scroll; tap targets easy |
| Speed & SEO | Lighthouse (mobile) | 90+ in all four categories |
| Links | Click every link | No 404s; tel: opens the dialer |
| Schema | Rich Results Test | Bakery detected, no errors |
| Sharing | Paste the link in WhatsApp | Image, title and description appear |
We ran the W3C Nu validator on all six pages of this project: 0 HTML errors (only “test in all browsers” info notes for type="date" and inputmode).
Phase 10: go live and hand over
- 1Buy the domain sharmasweets.in (≈ ₹600/year) or start free on Netlify
- 2Upload the whole folder (Netlify: drag-and-drop; Hostinger: File Manager → public_html)
- 3Turn on HTTPS (free SSL)
- 4Set up the real form endpoint and send a test order
- 5Google Search Console: verify the site, submit sitemap.xml
- 6Create/claim the Google Business Profile with the same name, address, phone
- 7Hand over: login details, a 1-page “how to change prices” note, and the invoice
Open menu.html, press Ctrl+F, search the sweet’s name, change the number in its <td>, save, upload that one file. Teaching the client this builds trust – and repeat business.
Extend it (your homework challenges)
- Add a Hindi version in /hi/ with lang="hi" and hreflang links both ways.
- Add a “Wedding orders” page with a price-slab table using rowspan/colspan.
- Add FAQPage schema for the home-page FAQ.
- Add a gallery page with 8 lazy-loaded images inside figure/figcaption.
- After the CSS course: redesign it; after the JS course: add a live cart.
Complete source code
All files are below and in the free HTML course kit download (with images, video and a 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 unlocked today
Practice tasks
🏋️ Practice – do it yourself
Show 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 – test yourself
Interview corner
💼 Interview Corner
Describe a website project you built end to end.
Use STAR: Situation (sweet shop needed orders before Diwali), Task (6-page site in 3 weeks), Action (planned pages from requirements, semantic HTML, SEO head + schema, validated form, map, performance work, accessibility tests, deployed with HTTPS and Search Console), Result (0 validator errors, Lighthouse 90+, client can update prices).
How do you keep header and footer consistent across pages without a framework?
In pure HTML: build and test them once, then copy the page as a template and change only page-specific parts. In real projects use server includes (PHP include), a static site generator, or components in a framework to avoid duplication.
Summary
- Requirements → page plan → folder plan before code.
- Shared head, header and footer; unique titles and descriptions.
- Every HTML skill in one site: picture, tables, video, form, map, details, schema.
- Validate, test, deploy with HTTPS, submit the sitemap and hand over.
🎉 HTML course complete! Next: the 20-day CSS course – you will write style.css yourself and turn this site into a stunning, responsive design.
