Link to Prompt
Link to Prompt
What the Prompt does
- Generates a full working front-end website based on user inputs.
- Adapts to incomplete information by enhancing the website with professional touches.
- Supports multiple pages (e.g., Index.html, Aboutus.html) based on user requests.
- Adheres to modern or vintage design standards as specified by the user.
- Includes images from free online libraries for demos.
- Ensures all necessary code is included for a fully functional website.
- Allows detailed customization through specific commands.
Who is it for?
- Anyone needing a complete front-end website quickly and efficiently.
- Users with varying levels of detail in their website specifications.
- Individuals or businesses seeking modern, professional, or vintage website designs.
- People needing multi-page websites with separate, fully coded pages.
- Those requiring a dynamic, animation-rich website or a simple, static one.
Example Prompt Output GPT4o.mini
Input:
/Start
Output:
Should the Website be 100 percent accurate to how you give info or can it be better?
Input:
Better
Output:
’ Great! Let’s get started. Here are the questions I need you to answer:
- Name of the Website:
- Purpose of the Website:
- Target Audience:
- Primary Colors to be used:
- Light or Dark Theme (Optional):
- Number of Pages:
- Main pages to be made (Optional):
- Number of Sections (Optional):
- Name of the Section on which page (Optional):
- Complexity of Website (1-10, 10 being very complex):
- Should it have animations and transitions or should it be simple?
- What type of webpage should it be (Modern, Vintage, 1990s)?
Please provide your answers to these questions so we can proceed with creating your website.’
Input:
'1. TechNews
2. Online website where you get latest news about technology
3. People who love Technology
4. Use Colors Related to Purple and Dark Blue
5. Dark Theme
6. 4 pages
7. HomePage
News Page
Contact Us Page
About Us page
10. 10
11. Add Animations and Transitions
12. Modern and Technology Related ’
Output:
'Thank you for the details! Here’s a summary of what I’ll be working on:
Website Name: TechNews
Purpose: Online website for the latest news about technology
Target Audience: People who love technology
Primary Colors: Purple and Dark Blue
Theme: Dark
Number of Pages: 4
Pages:
- HomePage
- News Page
- Contact Us Page
- About Us Page
Complexity: 10 (Very complex)
Animations and Transitions: Yes
Style: Modern and technology-related
I’ll now proceed to create a modern and professional front-end website with animations and transitions. Here’s what you’ll get:
- index.html (HomePage)
- news.html (News Page)
- contact.html (Contact Us Page)
- about.html (About Us Page)
- CSS files for each page
- JavaScript for animations and interactions
I’ll get started on this and provide the complete code for all pages.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - Home</title>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Welcome to TechNews</h1>
<p>Your daily dose of the latest in technology.</p>
</section>
<section class="highlights">
<h2>Top Stories</h2>
<div class="cards">
<!-- Card example -->
<div class="card">
<img src="https://via.placeholder.com/300" alt="Tech News Image">
<h3>Latest Gadget Review</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!-- More cards as needed -->
</div>
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts/index.js"></script>
</body>
</html>
news.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - News</title>
<link rel="stylesheet" href="styles/news.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section class="news-list">
<h1>Latest News</h1>
<article class="news-item">
<h2>Tech Giant Announces New Smartphone</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read more</a>
</article>
<!-- More news items as needed -->
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts/news.js"></script>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - Contact Us</title>
<link rel="stylesheet" href="styles/contact.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section class="contact-form">
<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" rows="5" required></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts/contact.js"></script>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - About Us</title>
<link rel="stylesheet" href="styles/about.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section class="about">
<h1>About Us</h1>
<p>TechNews is dedicated to bringing you the latest updates in technology. Our team of experts provides in-depth analysis and insightful commentary on the newest tech trends.</p>
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts/about.js"></script>
</body>
</html>
CSS files
styles/index.css
body {
font-family: Arial, sans-serif;
background-color: #1e1e1e;
color: #fff;
margin: 0;
padding: 0;
}
header {
background-color: #2c2c2c;
padding: 1em;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.hero {
text-align: center;
padding: 2em 0;
}
.highlights .cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
background-color: #333;
border-radius: 8px;
padding: 1em;
width: 300px;
}
.card img {
width: 100%;
border-radius: 8px;
}
footer {
background-color: #2c2c2c;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
styles/news.css
body {
font-family: Arial, sans-serif;
background-color: #1e1e1e;
color: #fff;
}
header {
background-color: #2c2c2c;
padding: 1em;
}
.news-list {
padding: 2em;
}
.news-item {
background-color: #333;
border-radius: 8px;
margin-bottom: 1em;
padding: 1em;
}
.news-item h2 {
margin: 0;
}
footer {
background-color: #2c2c2c;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
styles/contact.css
body {
font-family: Arial, sans-serif;
background-color: #1e1e1e;
color: #fff;
}
header {
background-color: #2c2c2c;
padding: 1em;
}
.contact-form {
padding: 2em;
}
form {
display: flex;
flex-direction: column;
}
label, input, textarea,
button {
margin-bottom: 1em;
}
button {
background-color: #5e5e5e;
border: none;
padding: 0.5em;
cursor: pointer;
}
button:hover {
background-color: #7e7e7e;
}
footer {
background-color: #2c2c2c;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
styles/about.css
body {
font-family: Arial, sans-serif;
background-color: #1e1e1e;
color: #fff;
}
header {
background-color: #2c2c2c;
padding: 1em;
}
.about {
padding: 2em;
}
footer {
background-color: #2c2c2c;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
JavaScript files
scripts/index.js
document.addEventListener('DOMContentLoaded', () => {
// Add any JavaScript for homepage interactions here
});
scripts/news.js
document.addEventListener('DOMContentLoaded', () => {
// Add any JavaScript for news page interactions here
});
scripts/contact.js
document.addEventListener('DOMContentLoaded', () => {
// Add any JavaScript for contact page interactions here
});
scripts/about.js
document.addEventListener('DOMContentLoaded', () => {
// Add any JavaScript for about page interactions here
});
This is a basic structure for your website. Let me know if you need any specific adjustments or additional features!’
Example Prompt Output GPT4o
Input:
/Start
Output:
Should the Website be 100 percent accurate to how you give info or can it be better?
Input:
Better
Output:
’ Great! Let’s get started. Here are the questions I need you to answer:
- Name of the Website:
- Purpose of the Website:
- Target Audience:
- Primary Colors to be used:
- Light or Dark Theme (Optional):
- Number of Pages:
- Main pages to be made (Optional):
- Number of Sections (Optional):
- Name of the Section on which page (Optional):
- Complexity of Website (1-10, 10 being very complex):
- Should it have animations and transitions or should it be simple?
- What type of webpage should it be (Modern, Vintage, 1990s)?
Please provide your answers to these questions so we can proceed with creating your website.’
Input:
'1. TechNews
2. Online website where you get latest news about technology
3. People who love Technology
4. Use Colors Related to Purple and Dark Blue
5. Dark Theme
6. 4 pages
7. HomePage
News Page
Contact Us Page
About Us page
10. 10
11. Add Animations and Transitions
12. Modern and Technology Related ’
Output:
'Created with AIPRM Prompt “Create a Full working Front End Website”
Understood! Here is a summary of your requirements:
- Name of the Website: TechNews
- Purpose of the Website: Online website where you get latest news about technology
- Target Audience: People who love Technology
- Primary Colors to be used: Purple and Dark Blue
- Theme: Dark Theme
- Number of Pages: 4 pages
-
Main pages to be made:
- HomePage
- News Page
- Contact Us Page
- About Us page
- Complexity of Website: 10
- Animations and Transitions: Yes
- Type of the webpage: Modern and Technology Related
Now, I will create the HTML, CSS, and JavaScript for the specified pages. Let’s start with the main page files.
index.html (HomePage)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>TechNews</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="intro">
<h2>Welcome to TechNews</h2>
<p>Your go-to source for the latest in technology.</p>
</section>
<section id="latest-news">
<h2>Latest News</h2>
<div class="news-item">
<img src="news1.jpg" alt="News Image 1">
<h3>News Title 1</h3>
<p>Summary of the news...</p>
</div>
<div class="news-item">
<img src="news2.jpg" alt="News Image 2">
<h3>News Title 2</h3>
<p>Summary of the news...</p>
</div>
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
news.html (News Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - News</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>TechNews</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="news-list">
<h2>Technology News</h2>
<div class="news-item">
<img src="news1.jpg" alt="News Image 1">
<h3>News Title 1</h3>
<p>Details of the news...</p>
</div>
<div class="news-item">
<img src="news2.jpg" alt="News Image 2">
<h3>News Title 2</h3>
<p>Details of the news...</p>
</div>
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
contact.html (Contact Us Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - Contact Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>TechNews</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="contact-form">
<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">Submit</button>
</form>
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
about.html (About Us Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechNews - About Us</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>TechNews</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>We are passionate about bringing you the latest in technology news.</p>
<p>Our team of experts works around the clock to provide you with up-to-date information on the tech world.</p>
</section>
</main>
<footer>
<p>© 2024 TechNews. All rights reserved.</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
background-color: #121212;
color: #ffffff;
margin: 0;
padding: 0;
}
header {
background-color: #1e1e1e;
padding: 1em;
text-align: center;
}
header h1 {
margin: 0;
color: #bb86fc;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 1em;
}
nav ul li a {
color: #bb86fc;
text-decoration: none;
}
main {
padding: 1em;
}
footer {
background-color: #1e1e1e;
padding: 1em;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
}
section {
margin-bottom: 2em;
}
.news-item {
display: flex;
align-items: center;
margin-bottom: 1em;
}
.news-item img {
max-width: 150px;
margin-right: 1em;
}
#contact-form form {
display: flex;
flex-direction: column;
}
#contact-form label {
margin-top: 1em;
}
#contact-form input,
#contact-form textarea {
margin-top: 0.5em;
padding: 0.5em;
background-color: #2c2c2c;
border: none;
color: #ffffff;
}
#contact-form button {
margin-top: 1em;
padding: 0.5em;
background-color: #bb86fc;
border: none;
color: #121212;
cursor: pointer;
}
#contact-form button:hover {
background-color: #3700b3;
}
scripts.js
document.addEventListener('DOMContentLoaded', () => {
console.log('TechNews website loaded');
});
You can now use the provided HTML, CSS, and JavaScript files to create your TechNews website. If you need any additional features or modifications, please use the commands provided.’
How I came up with it
I myself am a Web Developer and i find it very hard to just make simple or intermediate website, so i made this prompt it helps me make a Website in minutes! It just saves a lot of time!