Prompt Details
Model
Chat - (gpt-5.4)
Token size
352
Example input
[SUBJECT]: Modern SaaS website, clean minimal navbar, sticky header, footer with social links and newsletter
Example output
```html
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modern SaaS Navbar and Footer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<div class="container">
<nav class="navbar" aria-label="Main navigation">
<a href="#" class="brand" aria-label="SaaSify home">
<span class="brand-mark">S</span>
<span class="brand-text">SaaSify</span>
</a>
<button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu">
<li><a href="#">Product</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="nav-actions">
<a href="#" class="btn btn-secondary">Sign In</a>
<a href="#" class="btn btn-primary">Start Free</a>
</div>
</nav>
<div class="mobile-menu" id="mobile-menu">
<ul>
<li><a href="#">Product</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="mobile-actions">
<a href="#" class="btn btn-secondary">Sign In</a>
<a href="#" class="btn btn-primary">Start Free</a>
</div>
</div>
</div>
</header>
<main class="demo-main">
<section class="hero-placeholder">
<div class="container">
<div class="hero-box">
<p>Modern SaaS Website Layout</p>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-top">
<div class="footer-brand">
<a href="#" class="brand footer-brand-link">
<span class="brand-mark">S</span>
<span class="brand-text">SaaSify</span>
</a>
<p>
Clean and modern SaaS platform built for teams who want better workflow,
faster growth, and a polished digital experience.
</p>
<div class="social-links">
<a href="#" aria-label="Twitter">Twitter</a>
<a href="#" aria-label="LinkedIn">LinkedIn</a>
<a href="#" aria-label="Facebook">Facebook</a>
<a href="#" aria-label="GitHub">GitHub</a>
</div>
</div>
<div class="footer-links">
<div class="footer-column">
<h3>Product</h3>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Integrations</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Security</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Company</h3>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Support</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Status</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="footer-newsletter">
<h3>Join our newsletter</h3>
<p>Get product updates, design tips, and SaaS growth insights weekly.</p>
<form class="newsletter-form">
<label for="email" class="sr-only">Email address</label>
<input type="email" id="email" placeholder="Enter your email" required />
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 SaaSify. All rights reserved.</p>
<div class="footer-bottom-links">
<a href="#">Terms</a>
<a href="#">Privacy</a>
<a href="#">Cookies</a>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
```
```css
/* CSS */
:root {
--bg: #f8fafc;
--surface: rgba(255, 255, 255, 0.85);
--surface-strong: #ffffff;
--text: #0f172a;
--muted: #64748b;
--line: #e2e8f0;
--primary: #2563eb;
--primary-dark: #1d4ed8;
--shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
--radius: 16px;
--radius-sm: 12px;
--container: 1200px;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Inter", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
}
button,
input {
font: inherit;
}
.container {
width: min(100% - 2rem, var(--container));
margin-inline: auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--surface);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.site-header.scrolled {
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
.navbar {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-weight: 800;
font-size: 1.1rem;
color: var(--text);
flex-shrink: 0;
}
.brand-mark {
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
color: #ffffff;
background: linear-gradient(135deg, var(--primary), #60a5fa);
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
font-size: 1rem;
}
.brand-text {
letter-spacing: -0.02em;
}
.nav-menu {
display: flex;
align-items: center;
gap: 1.75rem;
}
.nav-menu a {
position: relative;
color: var(--muted);
font-weight: 500;
font-size: 0.96rem;
}
.nav-menu a::after {
content: "";
position: absolute;
left: 0;
bottom: -0.35rem;
width: 0;
height: 2px;
background: var(--primary);
border-radius: 999px;
transition: var(--transition);
}
.nav-menu a:hover {
color: var(--text);
}
.nav-menu a:hover::after {
width: 100%;
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.85rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.82rem 1.2rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
transition: var(--transition);
border: 1px solid transparent;
cursor: pointer;
}
.btn-primary {
background: var(--primary);
color: #ffffff;
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--text);
border-color: var(--line);
}
.btn-secondary:hover {
background: #ffffff;
border-color: #cbd5e1;
}
.menu-toggle {
display: none;
width: 48px;
height: 48px;
border: 1px solid var(--line);
background: #ffffff;
border-radius: 14px;
cursor: pointer;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
transition: var(--transition);
}
.menu-toggle:hover {
border-color: #cbd5e1;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--text);
border-radius: 999px;
transition: var(--transition);
}
.menu-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
display: none;
margin-bottom: 1rem;
padding: 1rem;
background: var(--surface-strong);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.mobile-menu.open {
display: block;
animation: fadeDown 0.3s ease;
}
.mobile-menu ul {
display: grid;
gap: 0.35rem;
}
.mobile-menu a {
display: block;
padding: 0.9rem 0.75rem;
border-radius: 12px;
color: var(--muted);
font-weight: 500;
}
.mobile-menu a:hover {
background: #f1f5f9;
color: var(--text);
}
.mobile-actions {
display: grid;
gap: 0.75rem;
margin-top: 1rem;
}
.demo-main {
min-height: 45vh;
}
.hero-placeholder {
padding: 5rem 0 4rem;
}
.hero-box {
min-height: 280px;
border: 1px dashed #cbd5e1;
border-radius: 28px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
display: grid;
place-items: center;
text-align: center;
color: var(--muted);
font-size: 1.1rem;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
}
.site-footer {
background: #0f172a;
color: #e2e8f0;
padding-top: 4.5rem;
}
.footer-top {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 2.5rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.footer-brand-link {
margin-bottom: 1rem;
}
.footer-brand p,
.footer-newsletter p {
color: #94a3b8;
max-width: 360px;
margin-top: 0.9rem;
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 1.25rem;
}
.social-links a {
color: #cbd5e1;
font-size: 0.95rem;
}
.social-links a:hover {
color: #ffffff;
}
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
grid-column: span 2;
}
.footer-column h3,
.footer-newsletter h3 {
font-size: 1rem;
margin-bottom: 1rem;
color: #ffffff;
}
.footer-column ul {
display: grid;
gap: 0.7rem;
}
.footer-column a {
color: #94a3b8;
font-size: 0.95rem;
}
.footer-column a:hover {
color: #ffffff;
transform: translateX(2px);
}
.footer-newsletter {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 24px;
padding: 1.4rem;
}
.newsletter-form {
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
max-width: 500px;
}
.newsletter-form input {
flex: 1;
min-height: 52px;
padding: 0 1rem;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
outline: none;
transition: var(--transition);
}
.newsletter-form input::placeholder {
color: #94a3b8;
}
.newsletter-form input:focus {
border-color: #60a5fa;
background: rgba(255, 255, 255, 0.08);
}
.footer-bottom {
padding: 1.4rem 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.footer-bottom p,
.footer-bottom-links a {
color: #94a3b8;
font-size: 0.92rem;
}
.footer-bottom-links {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.footer-bottom-links a:hover {
color: #ffffff;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
@keyframes fadeDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1024px) {
.nav-menu,
.nav-actions {
display: none;
}
.menu-toggle {
display: inline-flex;
}
.footer-top {
grid-template-columns: 1fr;
}
.footer-links {
grid-column: auto;
grid-template-columns: repeat(3, 1fr);
}
.footer-newsletter {
flex-direction: column;
align-items: flex-start;
}
.newsletter-form {
max-width: 100%;
}
}
@media (max-width: 768px) {
.navbar {
min-height: 72px;
}
.hero-placeholder {
padding: 4rem 0 3rem;
}
.hero-box {
min-height: 220px;
border-radius: 22px;
}
.footer-links {
grid-template-columns: 1fr 1fr;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
.newsletter-form .btn {
width: 100%;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 540px) {
.container {
width: min(100% - 1.25rem, var(--container));
}
.brand-text {
font-size: 1rem;
}
.footer-links {
grid-template-columns: 1fr;
}
.site-footer {
padding-top: 3.5rem;
}
.footer-top {
gap: 2rem;
}
.footer-newsletter {
padding: 1.1rem;
border-radius: 20px;
}
.social-links,
.footer-bottom-links {
gap: 0.75rem;
}
}
```
```javascript
// JavaScript
const menuToggle = document.querySelector(".menu-toggle");
const mobileMenu = document.querySelector(".mobile-menu");
const header = document.querySelector(".site-header");
const mobileLinks = document.querySelectorAll(".mobile-menu a");
menuToggle.addEventListener("click", () => {
const isOpen = mobileMenu.classList.toggle("open");
menuToggle.classList.toggle("active");
menuToggle.setAttribute("aria-expanded", isOpen);
});
mobileLinks.forEach((link) => {
link.addEventListener("click", () => {
mobileMenu.classList.remove("open");
menuToggle.classList.remove("active");
menuToggle.setAttribute("aria-expanded", "false");
});
});
window.addEventListener("scroll", () => {
if (window.scrollY > 10) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});
document.addEventListener("click", (event) => {
const isClickInsideMenu = mobileMenu.contains(event.target);
const isClickOnToggle = menuToggle.contains(event.target);
if (!isClickInsideMenu && !isClickOnToggle && mobileMenu.classList.contains("open")) {
mobileMenu.classList.remove("open");
menuToggle.classList.remove("active");
menuToggle.setAttribute("aria-expanded", "false");
}
});
```
Instant access
Commercial useBy downloading this prompt, you agree to our terms of service
4
Views
GPT-5.4
Generate a clean, modern, and fully responsive website navbar and footer using HTML, CSS, and JavaScript. Just enter one website brief with style, niche, reference, or section ideas, and get copy-paste-ready code instantly. Perfect for developers, designers, and website builders who want fast, professional UI components without starting from scratch.
...more
Updated 4 days ago
