AI Startup Landing Page with Modern Gradient UI | HTML CSS JS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>NeuroAI - AI for Everyone | Learn with Arshyan</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
</head>
<body>
<header class="site-header">
<div class="logo">NeuroAI</div>
<nav class="nav">
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Contact</a>
</nav>
<button class="nav-cta">Get Started</button>
</header>
<section class="hero">
<div class="hero-content">
<h1>Revolutionize Your Workflow with AI</h1>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>NeuroAI helps you write, plan, and create smarter using real-time AI assistance. No fluff — just results.</p>
<button class="cta-button">Try Free Now</button>
</div>
<div class="hero-image">
<img decoding="async"
src="Ai Interface.png"
alt="AI dashboard interface" />
</div>
</section>
<section class="features">
<h2>Why NeuroAI?</h2>
<div class="features-grid">
<div class="feature-card">
<h3>Fast Response</h3>
<p>Lightning-fast AI generation built for real-time productivity.</p>
</div>
<div class="feature-card">
<h3>Precision Focus</h3>
<p>Targeted suggestions, summaries, and action plans for any task.</p>
</div>
<div class="feature-card">
<h3>Easy Integration</h3>
<p>Use it inside your favorite tools — Chrome, Notion, Docs & more.</p>
</div>
</div>
</section>
<footer class="footer">
<p>© 2025 NeuroAI. Built for humans. Crafted by <strong>Learn with Arshyan</strong>.</p>
</footer>
</body>
</html>
CSS
/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(to bottom right, #f4f7fb, #e8efff);
color: #1a1a1a;
line-height: 1.6;
}
/* Shared Layout */
.site-header,
.hero,
.features,
.footer {
padding: 2rem clamp(1rem, 5vw, 6rem);
}
/* Header */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffffcc;
backdrop-filter: blur(8px);
border-radius: 16px;
margin: 1rem auto;
max-width: 1200px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: #3b3b3b;
}
.nav {
display: flex;
gap: 1.5rem;
}
.nav a {
text-decoration: none;
color: #3b3b3b;
font-weight: 500;
position: relative;
}
.nav a::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0%;
height: 2px;
background: #5c67f2;
transition: width 0.3s ease;
}
.nav a:hover::after {
width: 100%;
}
.nav-cta {
padding: 0.6rem 1.2rem;
background: linear-gradient(135deg, #6c63ff, #4d4dff);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(100, 100, 255, 0.3);
cursor: pointer;
transition: background 0.3s ease;
}
.nav-cta:hover {
background: linear-gradient(135deg, #4d4dff, #6c63ff);
}
/* Hero Section */
.hero {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
margin-top: 3rem;
}
.hero-content {
flex: 1 1 320px;
}
.hero h1 {
font-size: 2.8rem;
font-weight: 800;
color: #2c2c2c;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.15rem;
color: #555;
margin-bottom: 2rem;
}
.cta-button {
padding: 0.8rem 1.6rem;
background: linear-gradient(135deg, #6c63ff, #4d4dff);
color: white;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(100, 100, 255, 0.3);
transition: transform 0.2s ease;
}
.cta-button:hover {
transform: translateY(-2px);
}
.hero-image {
flex: 1 1 300px;
text-align: center;
}
.hero-image img {
max-width: 100%;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 2px solid #ddd;
}
/* Features Section */
.features {
background-color: #ffffffd9;
border-radius: 20px;
margin: 4rem auto;
max-width: 1200px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}
.features h2 {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 2rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.feature-card {
background-color: #f5f8ff;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
transition: transform 0.2s ease;
}
.feature-card:hover {
transform: translateY(-4px);
}
.feature-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: #333;
margin-bottom: 0.8rem;
}
.feature-card p {
font-size: 0.95rem;
color: #666;
}
/* Footer */
.footer {
text-align: center;
padding-block: 2rem;
font-size: 0.95rem;
color: #777;
margin-top: 2rem;
}
/* Responsive Fixes */
@media (max-width: 768px) {
.nav {
display: none;
}
.hero h1 {
font-size: 2.2rem;
}
}
JavaScript
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
if (target) {
target.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
});
});
// Example: Toggle for mobile nav (optional if you add hamburger icon)
const mobileMenuToggle = document.getElementById("menu-toggle");
const navMenu = document.querySelector(".nav");
if (mobileMenuToggle && navMenu) {
mobileMenuToggle.addEventListener("click", () => {
navMenu.classList.toggle("open");
});
}