PromptBase
🤖 GPT
This prompt create a fully HTML website template:
📝 Outline necessary pages and design preferences
💻 Develop a responsive layout for seamless navigation on all devices
🎨 Help you select colors and fonts that reflect your brand
📷 Incorporate visuals using high-quality images from the internet
💻 Ensure clean and organized HTML and CSS code
📈 Provide you with all necessary code to bring your website to life!
👀👉🌟See the example: https://izvlnhgf5bzzpzxxdpu8hq.on.drv.tw/html/
...more
$3.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Updated: Over 1 month ago
Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
575 ($0.00120 / call)
Example input
Pages: Home, About Us, Services, Contact
Company name: FreshBite Catering
Business niche: Catering and event planning services
Design preferences: The client would like a clean, modern design with a color scheme of green and white. They would like to use a sans-serif font and incorporate high-quality images of their food and events. The client would also like to include a photo gallery on the Home page to showcase their work, and a contact form on the Contact page to make it easy for potential clients to get in touch.
Example output
Here is the code for the fully customizable HTML website for FreshBite Catering:
File: index.html
php
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FreshBite Catering</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to FreshBite Catering</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices nunc eget lacus interdum convallis. Donec euismod suscipit nisl, in tempor nisi eleifend in. Nulla dictum purus et nibh porttitor blandit.</p>
<a href="#services" class="cta">View Our Services</a>
</section>
<section id="gallery">
<h2>Our Work</h2>
<div class="gallery-container">
<img src="https://source.unsplash.com/1600x900/?food" alt="Food Image 1">
<img src="https://source.unsplash.com/1600x900/?catering" alt="Catering Image 1">
<img src="https://source.unsplash.com/1600x900/?events" alt="Events Image 1">
<img src="https://source.unsplash.com/1600x900/?catering,food" alt="Catering and Food Image 1">
<img src="https://source.unsplash.com/1600x900/?catering,events" alt="Catering and Events Image 1">
<img src="https://source.unsplash.com/1600x900/?food,events" alt="Food and Events Image 1">
</div>
</section>
</main>
<footer>
<p>© 2023 FreshBite Catering</p>
</footer>
</body>
</html>
File: about.html
php
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - FreshBite Catering</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices nunc eget lacus interdum convallis. Donec euismod suscipit nisl, in tempor nisi eleif
User
continue
ChatGPT
end in. Nulla dictum purus et nibh porttitor blandit. Sed in velit in nibh faucibus aliquet non non augue. Vestibulum bibendum sapien vel lacus consectetur ultrices.</p>
<img src="https://source.unsplash.com/1600x900/?catering" alt="Catering Image">
</section>
</main>
<footer>
<p>© 2023 FreshBite Catering</p>
</footer>
</body>
</html>
```
File: services.html
php
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services - FreshBite Catering</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Our Services</h1>
<ul>
<li>Catering for corporate events</li>
<li>Catering for weddings</li>
<li>Catering for private parties</li>
<li>Event planning services</li>
<li>Menu customization</li>
<li>Equipment rental</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 FreshBite Catering</p>
</footer>
</body>
</html>
File: contact.html
php
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - FreshBite Catering</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Contact Us</h1>
<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">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2023 FreshBite Catering</p>
</footer>
</body>
</html>
File: style.css
css
Copy code
* {
margin: 0;
padding: 0;
box-sizing:
User
continue
ChatGPT
border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
header {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 1rem;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-right: 1rem;
}
nav ul li a {
color: #333;
text-decoration: none;
}
main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
h1, h2 {
font-weight: bold;
margin-bottom: 1rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
margin-bottom: 1rem;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.gallery-container img {
width: 100%;
}
.cta {
display: inline-block;
background-color: #51a451;
color: #fff;
text-decoration: none;
padding: 1rem 2rem;
border-radius: 5px;
margin-top: 2rem;
}
form label {
display: block;
margin-bottom: 0.5rem;
}
form input, form textarea {
display: block;
width: 100%;
padding: 0.5rem;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 1rem;
}
form button {
background-color: #51a451;
color: #fff;
border: none;
border-radius: 5px;
padding: 1rem 2rem;
cursor: pointer;
}
footer {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
footer p {
margin-bottom: 0;
}