give me a Coffee shop website

Created with:

Visibility:

public

November 28, 2023

					<?php
// wp-plugin.php

// Plugin code goes here

?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coffee Shop</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Coffee Shop</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="hero">
      <h2>Welcome to our Coffee Shop</h2>
      <p>Enjoy our specialty coffee and delicious pastries</p>
      <a href="#" class="btn">Order Now</a>
    </section>
    <section class="menu">
      <h2>Our Menu</h2>
      <ul>
        <li>
          <img src="coffee1.jpg" alt="Coffee 1">
          <h3>Latte</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
        <li>
          <img src="coffee2.jpg" alt="Coffee 2">
          <h3>Cappuccino</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
        <!-- Add more menu items here -->
      </ul>
    </section>
    <section class="about">
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut gravida enim. Suspendisse potenti. Pellentesque rhoncus, quam vel gravida pulvinar, dolor libero lobortis mi, vel tincidunt risus sapien eget ex.</p>
    </section>
    <section class="contact">
      <h2>Contact Us</h2>
      <form>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" required>
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
        <label for="message">Message</label>
        <textarea id="message" name="message" required></textarea>
        <button type="submit" class="btn">Submit</button>
      </form>
    </section>
  </main>
  <footer>
    <p>&copy; 2022 Coffee Shop. All rights reserved.</p>
  </footer>
</body>
</html>

And here's the CSS code for the 'style.css' file:

These files provide a basic structure and styling for a Coffee Shop website. The HTML file includes sections for the header, hero, menu, about, contact, and footer. The CSS file contains styles for each section to define the layout, colors, and typography.

Make sure to replace the image URLs (e.g., 'hero-image.jpg', 'coffee1.jpg', 'coffee2.jpg') with the actual image file names and extensions. Additionally, you can further customize the styles in the CSS file to match your desired design.

Once you have the HTML and CSS files ready, you can save them in the appropriate directory of your WordPress theme or plugin and enqueue the CSS file using the appropriate WordPress functions.

give me a Coffee shop website

Add Snippet To Project