Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
4,853 ($0.00730 / call)
Example input
[Title]: portfolio website
[Page Purpose]: Showcasing digital art portfolio
[Layout]: Grid layout with a navigation bar at the top
[Elements to Include]: Images of art pieces, artist bio, contact form
[Styling or Interactive Features]: Dark mode toggle, image light box, responsive design
Example output
Creating a portfolio website as described with HTML, CSS, and JavaScript:
HTML (index.html):
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">My Portfolio</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<div class="container">
<h2>About Me</h2>
<p>Artist bio goes here...</p>
</div>
</section>
<section id="portfolio">
<div class="container">
<h2>Portfolio</h2>
<div class="grid">
<!-- Images of art pieces go here -->
<div class="grid-item">
<img src="art1.jpg" alt="Artwork 1">
</div>
<div class="grid-item">
<img src="art2.jpg" alt="Artwork 2">
</div>
<div class="grid-item">
<img src="art3.jpg" alt="Artwork 3">
</div>
<!-- Add more artwork items as needed -->
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact Me</h2>
<form id="contact-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="4" required></textarea>
<button type="submit">Send</button>
</form>
</div>
</section>
<div class="dark-mode-toggle">
<input type="checkbox" id="dark-mode-checkbox">
<label for="dark-mode-checkbox">Dark Mode</label>
</div>
<!-- Image lightbox -->
<div class="lightbox">
<span class="close-button">×</span>
<img class="lightbox-content" src="" alt="Artwork">
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (style.css):
```css
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* Header and Navigation Styles */
header {
background-color: #333;
color: white;
padding: 10px 0;
}
nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.logo {
font-size: 24px;
font-weight: bold;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
transition: color 0.3s;
}
nav ul li a:hover {
color: #675AFE;
}
/* Sections Styles */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
/* Portfolio Grid Styles */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.grid-item img {
max-width: 100%;
height: auto;
cursor: pointer;
}
/* Contact Form Styles */
form {
display: flex;
flex-direction: column;
}
label {
font-weight: bold;
margin-bottom: 5px;
}
input,
textarea {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #675AFE;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #4534fe;
}
/* Dark Mode Toggle Styles */
.dark-mode-toggle {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
color: #333;
}
.dark-mode-toggle input {
margin-right: 5px;
}
/* Lightbox Styles */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
.lightbox-content {
display: block;
max-width: 90%;
max-height: 90%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close-button {
position: absolute;
top: 20px;
right: 20px;
font-size: 30px;
color: white;
cursor: pointer;
}
```
JavaScript (script.js):
```javascript
// Dark Mode Toggle
const darkModeCheckbox = document.getElementById("dark-mode-checkbox");
const body = document.body;
darkModeCheckbox.addEventListener("change", () => {
body.classList.toggle("dark-mode");
});
// Image Lightbox
const gridItems = document.querySelectorAll(".grid-item img");
const lightbox = document.querySelector(".lightbox");
const lightboxContent = document.querySelector(".lightbox-content");
const closeButton = document.querySelector(".close-button");
gridItems.forEach((item) => {
item.addEventListener("click", () => {
lightbox.style.display = "block";
lightboxContent.src = item.src;
});
});
closeButton.addEventListener("click", () => {
lightbox.style.display = "none";
});
// Form Submission (You can add your own form submission logic here)
const contactForm = document.getElementById("contact-form");
contactForm.addEventListener("submit", (e) => {
e.preventDefault(); // Prevents the default form submission behavior
// You can add code to handle the form submission here (e.g., sending data to a server)
});
```
This code creates a portfolio website with a grid layout, navigation bar, dark mode toggle, image lightbox, and a simple contact form. You should replace `"art1.jpg"`, `"
art2.jpg"`, and `"art3.jpg"` with your actual artwork image file paths, and add your own artist bio and form submission logic as needed.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
157
Views
GPT-3.5-TURBO
Using this prompt you generate any type of code just put Title and description.
---------------------------------------------------------------------------------------------
This prompt is designed for web developers who want to generate custom HTML, CSS, and JavaScript code for a web page. Users should consider the page's purpose, layout, elements to include, and any specific styling or interactive features.
...more
Added over 1 month ago
