PromptBase
🌀 Claude
This prompt allows the instant generation of a website (highly parameterizable by the user).
Once the HTML file is generated the user can download it (for any changes...) and also publish it immediately with a shareable link.
...more
$6.99
After purchasing, you will gain access to the prompt file which you can use with Claude 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: 1 week ago
Related item
Prompt Details
Model
(claude-3-5-sonnet)
Token size
359
Example input
[profession]: writer
[title]: The Cosmic Writer
[true/false]: true
[menù_color]: red
[menù_txt_color]: white
[background_color]: white
[text_color]: red
[pages_titles_comma_separed]: Home, About, Books, Contact, FB
Example output
I'll help you create a professional website for "The Cosmic Writer" with the specified requirements. Since `frmk` is set to false, I'll create a pure HTML, CSS, and JavaScript solution without using any frameworks.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Cosmic Writer</title>
<style>
:root {
--main-color: red;
--main-text-color: white;
--background-color: white;
--text-color: red;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
}
/* Side Menu */
.side-menu {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: var(--main-color);
color: var(--main-text-color);
transition: 0.3s;
z-index: 1000;
padding-top: 60px;
}
.side-menu.open {
left: 0;
}
.side-menu ul {
list-style-type: none;
}
.side-menu ul li {
padding: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.side-menu ul li a {
color: var(--main-text-color);
text-decoration: none;
display: block;
}
/* Toggle Menu Button */
.toggle-menu {
position: fixed;
top: 15px;
left: 15px;
z-index: 1100;
cursor: pointer;
width: 30px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.toggle-menu span {
width: 100%;
height: 3px;
background-color: var(--main-color);
transition: 0.3s;
}
/* Content Sections */
.content-section {
display: none;
padding: 20px;
margin-left: 0;
transition: 0.3s;
}
.content-section.active {
display: block;
margin-left: 0;
}
@media (min-width: 768px) {
.side-menu {
left: 0;
}
.content-section {
margin-left: 250px;
}
.toggle-menu {
display: none;
}
}
@media (max-width: 767px) {
.side-menu {
width: 100%;
left: -100%;
}
.side-menu.open {
left: 0;
}
.content-section {
margin-left: 0;
}
}
</style>
</head>
<body>
<!-- Toggle Menu Button -->
<div class="toggle-menu" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<!-- Side Menu -->
<nav class="side-menu">
<ul>
<li><a href="#" onclick="showSection('home')">Home</a></li>
<li><a href="#" onclick="showSection('about')">About</a></li>
<li><a href="#" onclick="showSection('books')">Books</a></li>
<li><a href="#" onclick="showSection('contact')">Contact</a></li>
<li><a href="#" onclick="showSection('fb')">FB</a></li>
</ul>
</nav>
<!-- Content Sections -->
<div id="home" class="content-section active">
<h1>Welcome to The Cosmic Writer</h1>
<p>Explore the universe through words and imagination.</p>
</div>
<div id="about" class="content-section">
<h1>About The Cosmic Writer</h1>
<p>A passionate writer exploring cosmic themes and narratives.</p>
</div>
<div id="books" class="content-section">
<h1>Books</h1>
<p>Discover the literary worlds created by The Cosmic Writer.</p>
</div>
<div id="contact" class="content-section">
<h1>Contact</h1>
<p>Get in touch with The Cosmic Writer.</p>
</div>
<div id="fb" class="content-section">
<h1>Facebook</h1>
<p>Connect on social media.</p>
</div>
<script>
function toggleMenu() {
document.querySelector('.side-menu').classList.toggle('open');
}
function showSection(sectionId) {
// Hide all sections
document.querySelectorAll('.content-section').forEach(section => {
section.classList.remove('active');
});
// Show selected section
document.getElementById(sectionId).classList.add('active');
// Close menu on mobile
if (window.innerWidth < 768) {
document.querySelector('.side-menu').classList.remove('open');
}
}
</script>
</body>
</html>
```
I've created a single-page website for "The Cosmic Writer" that meets all your specified requirements:
1. No framework used (pure HTML, CSS, JavaScript)
2. Mobile-first approach
3. Side menu (true)
4. Menu color: red
5. Menu text color: white
6. Single-page design
7. Background color: white
8. Text color: red
9. Pages: Home, About, Books, Contact, FB
10. Mobile view with toggle menu
Key features:
- Responsive design that adapts to mobile and desktop
- Side menu that collapses on mobile, remains visible on desktop
- Toggle menu button for mobile view
- Smooth section transitions
- Meets all specified color and layout requirements
Would you like me to make any modifications or explain any part of the implementation?