Prompt Details
Model
Chat - (gpt-5.4)
Token size
365
Example input
[SUBJECT]: AI SaaS startup
[STYLE]: startup clean
Example output
Here’s a copy-paste ready modern website UI for an **AI SaaS startup** using only **HTML, CSS, and JavaScript**.
## 1. HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NovaAI - AI SaaS Startup</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<div class="container nav-wrapper">
<a href="#" class="logo">NovaAI</a>
<button class="menu-toggle" id="menuToggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<nav class="nav" id="navMenu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#features">Features</a>
<a href="#cta">Get Started</a>
<a href="#footer">Contact</a>
</nav>
</div>
</header>
<main>
<section class="hero" id="home">
<div class="container hero-grid">
<div class="hero-content">
<span class="badge">AI automation for growing teams</span>
<h1>Turn business workflows into smart AI systems</h1>
<p>
NovaAI helps startups automate support, content, reporting, and internal tasks
with fast, reliable AI tools built for real business use.
</p>
<div class="hero-buttons">
<a href="#cta" class="btn btn-primary">Start Free Trial</a>
<a href="#features" class="btn btn-secondary">See Features</a>
</div>
<div class="hero-stats">
<div>
<h3>10k+</h3>
<p>Tasks automated</p>
</div>
<div>
<h3>98%</h3>
<p>Client satisfaction</p>
</div>
<div>
<h3>24/7</h3>
<p>AI availability</p>
</div>
</div>
</div>
<div class="hero-card">
<div class="dashboard-card">
<div class="dashboard-top">
<span class="status-dot"></span>
<p>Live AI Workflow</p>
</div>
<div class="metric-card">
<span>Support Automation</span>
<strong>+42% faster replies</strong>
</div>
<div class="metric-card">
<span>Content Drafting</span>
<strong>31 campaigns generated</strong>
</div>
<div class="metric-card">
<span>Weekly Reports</span>
<strong>Saved 18 team hours</strong>
</div>
<button class="mini-btn">AI Running Smoothly</button>
</div>
</div>
</div>
</section>
<section class="about section" id="about">
<div class="container section-grid">
<div>
<p class="section-label">Why NovaAI</p>
<h2>Built for startups that want speed without complexity</h2>
</div>
<div>
<p class="section-text">
Modern teams need tools that save time, reduce repetitive work, and improve output.
NovaAI gives you practical AI workflows that are easy to manage, fast to launch,
and designed for real daily operations.
</p>
</div>
</div>
</section>
<section class="features section" id="features">
<div class="container">
<div class="section-heading">
<p class="section-label">Core Features</p>
<h2>Everything you need to automate smarter</h2>
<p class="section-subtext">
Launch AI-powered systems for customer support, content, insights, and internal productivity.
</p>
</div>
<div class="features-grid">
<article class="feature-card">
<div class="feature-icon">01</div>
<h3>Smart Workflow Automation</h3>
<p>
Connect common tasks and let AI handle repetitive processes across your team.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">02</div>
<h3>AI Content Assistant</h3>
<p>
Generate product copy, campaign ideas, emails, and updates in seconds.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">03</div>
<h3>Instant Insights</h3>
<p>
Turn raw business data into readable summaries and action-focused reports.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">04</div>
<h3>Team-Friendly Dashboard</h3>
<p>
Monitor usage, workflows, and performance from one clean, simple interface.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">05</div>
<h3>Secure by Design</h3>
<p>
Built with privacy-first thinking so startups can scale with confidence.
</p>
</article>
<article class="feature-card">
<div class="feature-icon">06</div>
<h3>Fast Integration</h3>
<p>
Get started quickly without heavy setup or complicated developer workflows.
</p>
</article>
</div>
</div>
</section>
<section class="highlights section">
<div class="container highlights-grid">
<div class="highlight-box">
<p class="section-label">For founders</p>
<h3>Reduce busywork and focus on growth</h3>
<p>
Free up time spent on manual tasks so your team can focus on strategy, product, and customers.
</p>
</div>
<div class="highlight-box">
<p class="section-label">For teams</p>
<h3>Improve consistency across operations</h3>
<p>
Standardize replies, reports, and recurring outputs with AI-backed workflows that stay on brand.
</p>
</div>
<div class="highlight-box">
<p class="section-label">For scaling</p>
<h3>Start lean and expand as you grow</h3>
<p>
Use simple tools now and unlock more advanced automation when your business is ready.
</p>
</div>
</div>
</section>
<section class="cta section" id="cta">
<div class="container cta-box">
<div>
<p class="section-label">Ready to launch</p>
<h2>Build your AI-powered workflow today</h2>
<p>
Start with a clean setup, real business use cases, and a platform designed for fast-moving startups.
</p>
</div>
<div class="cta-actions">
<a href="#" class="btn btn-primary">Get Started</a>
<a href="#home" class="btn btn-secondary">Back to Top</a>
</div>
</div>
</section>
</main>
<footer class="footer" id="footer">
<div class="container footer-grid">
<div>
<a href="#" class="logo footer-logo">NovaAI</a>
<p>
Clean AI tools for startups that want better workflows, faster output, and modern growth systems.
</p>
</div>
<div>
<h4>Company</h4>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#cta">Pricing</a></li>
</ul>
</div>
<div>
<h4>Resources</h4>
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">API Access</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li><a href="mailto:hello@novaai.com">hello@novaai.com</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">X / Twitter</a></li>
</ul>
</div>
</div>
<div class="container footer-bottom">
<p>© 2026 NovaAI. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
```
## 2. CSS
```css
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
background: #f6f9fc;
color: #0f172a;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
button,
input,
textarea {
font: inherit;
}
ul {
list-style: none;
}
/* Utilities */
.container {
width: min(1120px, 90%);
margin: 0 auto;
}
.section {
padding: 90px 0;
}
.section-label {
display: inline-block;
font-size: 0.9rem;
font-weight: 700;
color: #2563eb;
margin-bottom: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.section-heading {
text-align: center;
max-width: 720px;
margin: 0 auto 50px;
}
.section-heading h2,
.about h2,
.cta h2 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 16px;
}
.section-subtext,
.section-text,
.cta p,
.footer p,
.feature-card p,
.highlight-box p {
color: #475569;
font-size: 1rem;
}
/* Header */
.header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(246, 249, 252, 0.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76px;
}
.logo {
font-size: 1.4rem;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.03em;
}
.nav {
display: flex;
align-items: center;
gap: 28px;
}
.nav a {
color: #334155;
font-weight: 600;
transition: color 0.3s ease;
}
.nav a:hover {
color: #2563eb;
}
.menu-toggle {
display: none;
width: 46px;
height: 46px;
border: none;
background: #ffffff;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
}
.menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: #0f172a;
margin: 5px auto;
transition: 0.3s ease;
}
/* Hero */
.hero {
padding: 90px 0 70px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.badge {
display: inline-block;
padding: 10px 16px;
border-radius: 999px;
background: #e0ecff;
color: #2563eb;
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
}
.hero-content h1 {
font-size: clamp(2.4rem, 5vw, 4.5rem);
line-height: 1.08;
letter-spacing: -0.04em;
margin-bottom: 18px;
}
.hero-content p {
max-width: 620px;
color: #475569;
font-size: 1.06rem;
margin-bottom: 30px;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 36px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 14px;
font-weight: 700;
transition: all 0.3s ease;
}
.btn-primary {
background: #2563eb;
color: #ffffff;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.24);
}
.btn-primary:hover {
transform: translateY(-2px);
background: #1d4ed8;
}
.btn-secondary {
background: #ffffff;
color: #0f172a;
border: 1px solid #dbe4f0;
}
.btn-secondary:hover {
transform: translateY(-2px);
border-color: #2563eb;
color: #2563eb;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 10px;
}
.hero-stats div {
background: #ffffff;
padding: 20px;
border-radius: 18px;
box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}
.hero-stats h3 {
font-size: 1.4rem;
margin-bottom: 4px;
}
.hero-stats p {
font-size: 0.92rem;
margin: 0;
}
.hero-card {
display: flex;
justify-content: center;
}
.dashboard-card {
width: 100%;
max-width: 430px;
background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 24px;
padding: 28px;
box-shadow: 0 25px 60px rgba(37, 99, 235, 0.12);
}
.dashboard-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
font-weight: 700;
}
.status-dot {
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
}
.metric-card {
background: #ffffff;
border-radius: 18px;
padding: 18px;
margin-bottom: 14px;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.metric-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.1);
}
.metric-card span {
display: block;
font-size: 0.92rem;
color: #64748b;
margin-bottom: 6px;
}
.metric-card strong {
font-size: 1rem;
color: #0f172a;
}
.mini-btn {
width: 100%;
padding: 14px;
border: none;
border-radius: 14px;
background: #0f172a;
color: #ffffff;
font-weight: 700;
cursor: pointer;
transition: 0.3s ease;
}
.mini-btn:hover {
background: #1e293b;
}
/* About */
.section-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
/* Features */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
background: #ffffff;
border: 1px solid #e5edf7;
border-radius: 22px;
padding: 28px;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
border-color: #cfe0ff;
}
.feature-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: grid;
place-items: center;
background: #e8f0ff;
color: #2563eb;
font-weight: 800;
margin-bottom: 18px;
}
.feature-card h3 {
font-size: 1.2rem;
margin-bottom: 12px;
}
/* Highlights */
.highlights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.highlight-box {
background: #ffffff;
border-radius: 22px;
padding: 30px;
border: 1px solid #e5edf7;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}
.highlight-box h3 {
font-size: 1.4rem;
margin-bottom: 14px;
}
/* CTA */
.cta-box {
background: linear-gradient(135deg, #0f172a, #1e3a8a);
color: #ffffff;
border-radius: 28px;
padding: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.cta-box .section-label {
color: #93c5fd;
}
.cta-box p {
color: rgba(255, 255, 255, 0.8);
max-width: 620px;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* Footer */
.footer {
background: #0f172a;
color: #cbd5e1;
padding-top: 70px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 30px;
padding-bottom: 40px;
}
.footer-logo {
color: #ffffff;
display: inline-block;
margin-bottom: 14px;
}
.footer h4 {
color: #ffffff;
margin-bottom: 14px;
}
.footer ul li {
margin-bottom: 10px;
}
.footer a {
transition: color 0.3s ease;
}
.footer a:hover {
color: #60a5fa;
}
.footer-bottom {
border-top: 1px solid rgba(203, 213, 225, 0.12);
padding: 18px 0;
text-align: center;
}
/* Reveal animation */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 992px) {
.hero-grid,
.section-grid,
.cta-box,
.footer-grid {
grid-template-columns: 1fr;
}
.features-grid,
.highlights-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-box {
padding: 38px;
}
.hero-stats {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav {
position: absolute;
top: 76px;
right: 5%;
width: 240px;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
padding: 18px;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.nav.show {
display: flex;
}
.hero {
padding-top: 70px;
}
.hero-stats {
grid-template-columns: 1fr;
}
.features-grid,
.highlights-grid {
grid-template-columns: 1fr;
}
.cta-actions,
.hero-buttons {
flex-direction: column;
align-items: stretch;
}
.btn {
width: 100%;
}
}
@media (max-width: 480px) {
.section {
padding: 72px 0;
}
.dashboard-card,
.feature-card,
.highlight-box,
.cta-box {
padding: 22px;
}
.nav-wrapper {
min-height: 70px;
}
.nav {
top: 70px;
}
}
```
## 3. JavaScript
```javascript
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const navLinks = document.querySelectorAll(".nav a");
menuToggle.addEventListener("click", () => {
navMenu.classList.toggle("show");
});
navLinks.forEach(link => {
link.addEventListener("click", () => {
navMenu.classList.remove("show");
});
});
const revealElements = document.querySelectorAll(
".hero-content, .hero-card, .about .section-grid, .feature-card, .highlight-box, .cta-box"
);
revealElements.forEach(el => el.classList.add("reveal"));
function revealOnScroll() {
const triggerBottom = window.innerHeight * 0.88;
revealElements.forEach(el => {
const elementTop = el.getBoundingClientRect().top;
if (elementTop < triggerBottom) {
el.classList.add("active");
}
});
}
window.addEventListener("scroll", revealOnScroll);
window.addEventListener("load", revealOnScroll);
```
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
3
Views
GPT-5.4
Generate a modern, clean, and fully responsive website UI using HTML, CSS, and JavaScript. Perfect for startups, agencies, apps, portfolios, SaaS, and business websites. Just enter your subject and design style to get structured, copy-paste-ready frontend code with responsive layout, modern sections, interactive elements, and polished UI. Great for buyers who want fast website design code for real projects.
...more
Added 3 days ago
