coffee garage flower

coffee shop two
<!DOCTYPE html>
<html>

<head>
  <title>Express Cafe</title>

  <style>
    /* CSS Styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #F5F5F5;
    }

    h1 {
      text-align: center;
      color: #663300;
      margin-top: 30px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #170101;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .coffee-cup {
      width: 150px;
      display: block;
      margin: 0 auto;
      margin-bottom: 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 10px;
      text-align: center;
    }

    th {
      background-color: #2ee113;
      color: #FFFFFF;
    }

    tr:nth-child(even) {
      background-color: #F9F9F9;
    }

    tr:hover {
      background-color: #F1F1F1;
    }

    select, input[type="submit"] {
      padding: 5px 10px;
      font-size: 16px;
    }

    input[type="submit"] {
      background-color: #663300;
      color: #FFFFFF;
      border: none;
      cursor: pointer;
    }
  </style>

  </style>
</head>
<body>
  <div class="container">
    <h1>Express Cafe</h1>
    <img src="https://en.m.wikipedia.org/wiki/File:Coffee_cup_icon.svg" alt="error loading image" srcset="">


    <!-- <img class="coffee-cup" src="coffee_cup.jpg" alt="Coffee Cup"> -->

    <h2>Menu</h2>
    <form>
      <table>
        <tr>
          <th>Coffee Type</th>
          <th>Rate</th>
        </tr>
        <tr>
          <td>
            <label for="coffeeType">Select Coffee:</label>
            <select id="coffeeType" name="coffeeType">
              <option value="espresso">Espresso</option>
              <option value="cappuccino">Cappuccino</option>
              <option value="latte">Latte</option>
              <option value="mocha">Mocha</option>
            </select>
          </td>
          <td>
            <input type="number" id="rate">
          </td>
        </tr>
      </table>
      <br>
      <input type="submit" value="Place Order">
    </form>
  </div>
</body>
</html>

CAFE
<!DOCTYPE html>
<html>
<head>
  <title>Coffee Shop Online</title>
  <style>
    /* CSS styling for the coffee shop web page */
    body {
      font-family: Arial, sans-serif;
      background-color: #F6F6F6;
    }

    h1 {
      color: #333;
      text-align: center;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #FFF;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .coffee-img {
      max-width: 100%;
      height: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #DDD;
    }

    th {
      background-color: #F8F8F8;
    }

    tr:hover {
      background-color: #f2f2f2;
    }

    .btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #333;
      color: #FFF;
      text-decoration: none;
      border-radius: 4px;
    }

    .btn:hover {
      background-color: #555;
    }
  </style>
</head>
</head>
<body>
  <div class="container">
    <h1>Express Cafe</h1>
    <img class="coffee-img" src="cafe.jpg.jpg" alt="Coffee shop">


    <!-- <img class="coffee-cup" src="coffee_cup.jpg" alt="Coffee Cup"> -->

    <h2>MENU</h2>
    <form>
        <table>
        <tr>
          <th>Coffee Type</th>
          <th>Rate</th>
        </tr>
        <tr>
          <td>Expresso</td>
          <td>130</td>
        </tr>
        <tr>
            <td>Cappuccino</td>
            <td>165</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td>190</td>
        </tr>
        <tr>
            <td>Mocha</td>
            <td>145</td>
        </tr>
        </table>
      <br>
      <label for="coffeeType">Please Select Coffee Which you want to buy:</label>
            <select id="coffeeType" name="coffeeType">
              <option value="espresso">Espresso</option>
              <option value="cappuccino">Cappuccino</option>
              <option value="latte">Latte</option>
              <option value="mocha">Mocha</option>
            </select>
      <br><br>
      <input type="submit" value="Place Order">
    </form>
  </div>
</body>
</html>

GARAGE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JANTA GARAGE</title>
    <link rel="stylesheet" href="./car.css">
</head>
<body>
    <header>
        <h1>JANTA CAR SERVICE</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">Gallery</a>
        <a href="#">Contact</a>
    </nav>
    <!-- <img class="garagebackground" src="garagebackground.jpg" alt="JANTA GARAGE" height="1050px"> -->
    <!-- <section> -->

<!-- </section> -->


        <h2>Car Accessories</h2>
        <div class="gallery">
            <img src="accessory1.jpg" alt="Accessory 1">
            <img src="accessory2.jpg" alt="Accessory 2">
            <img src="accessory3.jpg" alt="Accessory 3">
            <!-- Add more car accessory images as needed -->
        </div><br><br>

        <h2>Car Servicing Packages :</h2><br>
        <div class="packages">
            <div class="package">
                <h3>Basic Service Package</h3>
                <p>Package includes:</p>
                <ul>
                    <li>Oil change</li>
                    <li>Filter replacement</li>
                    <li>Brake inspection</li>
                </ul>
                <p class="price">$99.99</p>
            </div>

            <div class="package">
                <h3>Standard Service Package</h3>
                <p>Package includes:</p>
                <ul>
                    <li>Oil change</li>
                    <li>Filter replacement</li>
                    <li>Brake inspection</li>
                    <li>Tire rotation</li>
                </ul>
                <p class="price">$149.99</p>
            </div>

            <div class="package">
                <h3>Premium Service Package</h3>
                <p>Package includes:</p>
                <ul>
                    <li>Oil change</li>
                    <li>Filter replacement</li>
                    <li>Brake inspection</li>
                    <li>Tire rotation</li>
                    <li>Fluid top-up</li>
                </ul>
                <p class="price">$199.99</p>
            </div>
            <!-- Add more packages as needed -->
        </div>
    </section>
</body>
</html>

</body>

flowershop
<html>
<head>

  <title>Flower Shop</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color:teal;

    }

    header {
      background-color: maroon;
      color: yellow;
      text-align: center;
      padding: 10px;
      font-size: 24px;
    }

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

    .flower-stock {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .flower-stock img {
      width: 100%;
      border-radius: 5px;
      cursor: pointer;
      transition: transform 1.4s ease-in-out;
    }

    .flower-stock img:hover {
      transform: scale(1.3);
    }

    .flower-details {
      display: none;
      padding: 20px;
      background-color: light blue;
      border-radius: 10px;
      box-shadow: 0 0 5px ;
      position: absolute;
      bottom: 5;


    }

    .flower-stock img:hover + .flower-details {
      display: block;
    }

    .flower-details h3 {
      margin: 0;
    }

    .flower-details p {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to Floweriest Shop</h1>
  </header>

  <div class="container">
    <h2>Floral Photos</h2>

    <div class="flower-stock">
      <img src="flower2.jpg">
      <div class="flower-details">
        <h3>Flower 1</h3>
        <p>Price: 20</p>
        <p>Color: orange</p>
      </div>

      <img src="flower3.jpg">
      <div class="flower-details">
        <h3>Flower 2</h3>
        <p>Price: 16</p>
        <p>Color: Red</p>
      </div>

      <img src="flower4.jpg">
      <div class="flower-details">
        <h3>Flower 3</h3>
        <p>Price: 10</p>
        <p>Color: White</p>
      </div>


    </div>
  </div>
</body>
</html>