Whether it is a restaurant website or any other niche website the programming will be same. We use HTML tags to create a web page. Here we will use a simple web page using HTML and CSS to create home page of a restaurant website. You can use this code for your website or you can change the content according to your needs.

Here is the HTML part of this restaurant website. Save this page as index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Desi Tadka | Authentic Taste in Lahore</title>

  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

</head>

<body>

  <nav class="navbar">

    <div class="container">

      <div class="logo">Desi<span>Tadka</span></div>

      <ul class="nav-links">

        <li><a href="#menu">Menu</a></li>

        <li><a href="#about">Our Story</a></li>

        <li><a href="https://wa.me/923000000000" class="btn-nav">Order Now</a></li>

      </ul>

    </div>

  </nav>


  <header class="hero">

    <div class="container">

      <h1>Zaiqa Jo Dil Jeet Le...<br><span>Asli Desi Khana</span></h1>

      <p>Lahore ka behtareen desi khana, ab aap ki table par. Fresh ingredients aur purana zaiqa.</p>

      <div class="hero-btns">

        <a href="#menu" class="btn-primary">View Menu</a>

        <a href="tel:+923000000000" class="btn-secondary">Call to Book</a>

      </div>

    </div>

  </header>


  <section id="menu" class="menu-section">

    <div class="container">

      <h2 class="section-title">Special Menu</h2>

      <div class="grid">

        <div class="food-card">

          <div class="price">Rs. 850</div>

          <h3>Chicken Karahi</h3>

          <p>Makhni gravy aur fresh sabziyon ke sath.</p>

        </div>

        <div class="food-card">

          <div class="price">Rs. 1200</div>

          <h3>Mutton Pulao</h3>

          <p>Zaikay dar chawal aur naram gosht.</p>

        </div>

        <div class="food-card">

          <div class="price">Rs. 450</div>

          <h3>Special Daal Mash</h3>

          <p>Desi ghee ka tarka aur garma garam nan.</p>

        </div>

      </div>

    </div>

  </section>

  <footer>

    <p>&copy; 2026 Desi Tadka Restaurant - Lahore. Powered by <strong><a href="https://webpk.online">KM Sol</a></strong></p>

  </footer>

</body>

</html>

Here is the CSS part of this web page. Save this page as style.css

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Poppins', sans-serif; color: #444; background: #fffcf5; }

.container { max-width: 1100px; margin: auto; padding: 0 20px; }

/* Navbar */

.navbar { background: #fff; padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; }

.navbar .container { display: flex; justify-content: space-between; align-items: center; }

.logo { font-family: 'Playfair Display', serif; font-size: 28px; color: #222; }

.logo span { color: #e67e22; }

.nav-links { list-style: none; display: flex; gap: 20px; align-items: center; }

.nav-links a { text-decoration: none; color: #333; font-weight: 600; }

.btn-nav { background: #e67e22; color: #fff !important; padding: 8px 20px; border-radius: 5px; }

/* Hero Section */

.hero { padding: 120px 0; text-align: center; background: linear-gradient(rgba(255,252,245,0.8), rgba(255,252,245,0.8)), url('https://webpk.online/pub_a/images/image.png'); background-size: cover; background-position: center; }

.hero h1 { font-family: 'Playfair Display', serif; font-size: 55px; margin-bottom: 20px; color: #2c3e50; }

.hero h1 span { color: #e67e22; }

.hero p { font-size: 18px; max-width: 600px; margin: 0 auto 30px; color: #7f8c8d; }

/* Buttons */

.btn-primary { background: #e67e22; color: #fff; padding: 15px 35px; text-decoration: none; border-radius: 5px; font-weight: 600; display: inline-block; }

.btn-secondary { border: 2px solid #e67e22; color: #e67e22; padding: 13px 35px; text-decoration: none; border-radius: 5px; font-weight: 600; display: inline-block; margin-left: 10px; }

/* Menu Grid */

.menu-section { padding: 80px 0; }

.section-title { text-align: center; font-family: 'Playfair Display', serif; font-size: 35px; margin-bottom: 50px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.food-card { background: #fff; padding: 30px; border-radius: 15px; border-bottom: 4px solid #e67e22; box-shadow: 0 10px 20px rgba(0,0,0,0.05); text-align: center; position: relative; }

.price { color: #e67e22; font-weight: 700; font-size: 1.2rem; margin-bottom: 10px; }

.food-card h3 { font-family: 'Playfair Display', serif; margin-bottom: 10px; }

/* Footer */

footer { text-align: center; padding: 30px; background: #2c3e50; color: #fff; margin-top: 50px; }

@media (max-width: 768px) {

  .hero h1 { font-size: 38px; }

  .hero-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }

  .btn-secondary { margin-left: 0; }

  .nav-links { display: none; }

}

The output of the above web page will be as follows.