Create a complete multi-page website with navigation, styling, and responsive design - all by describing what you want.
Before you start building, think about what pages you need and how they connect. A typical website includes:
Start simple. You can always add more pages later. It's better to launch with 3 great pages than 10 mediocre ones.
Let's start by creating the basic structure for your website. Claude will set up the folder structure, HTML files, and basic styling.
<!-- Basic HTML structure -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarah Chen Photography</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Navigation goes here -->
</header>
<main>
<!-- Page content goes here -->
</main>
<footer>
<!-- Footer goes here -->
</footer>
</body>
</html>A good navigation menu helps visitors find their way around your site. Let's create a navigation bar that appears on every page.
<nav class="navbar">
<a href="/" class="logo">Sarah Chen</a>
<button class="mobile-menu-btn" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-links">
<li><a href="/" class="active">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>CSS brings your website to life. Let's add colors, fonts, and visual effects.
/* Base styles */
:root {
--bg-dark: #0a0a0a;
--text-light: #ffffff;
--accent: #d4af37;
}
body {
background: var(--bg-dark);
color: var(--text-light);
font-family: 'Inter', sans-serif;
}
a {
color: var(--accent);
transition: opacity 0.2s;
}
a:hover {
opacity: 0.8;
}
.button {
background: var(--accent);
color: var(--bg-dark);
padding: 12px 24px;
border-radius: 6px;
transition: transform 0.2s;
}
.button:hover {
transform: translateY(-2px);
}Your website needs to look great on phones, tablets, and desktops. Responsive design adjusts the layout based on screen size.
/* Mobile first approach */
.portfolio-grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
/* Tablet */
@media (min-width: 768px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.mobile-menu-btn {
display: none;
}
}
/* Desktop */
@media (min-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
}Now let's add meaningful content to each page.
<section class="about-hero">
<div class="about-content">
<img src="/images/headshot.jpg" alt="Sarah Chen">
<div>
<h1>About Sarah</h1>
<p>With over a decade behind the lens...</p>
</div>
</div>
</section>
<section class="awards">
<h2>Awards & Recognition</h2>
<ul>
<li>Best Portrait Photographer 2024</li>
<li>Wedding Photography Excellence Award</li>
</ul>
</section><div class="portfolio-filters">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="portraits">Portraits</button>
<button class="filter-btn" data-filter="weddings">Weddings</button>
</div>
<div class="portfolio-grid">
<div class="portfolio-item" data-category="portraits">
<img src="/images/portrait-1.jpg" alt="Portrait">
</div>
<!-- More items... -->
</div>Let visitors get in touch with you through a contact form.
<form class="contact-form" action="/api/contact" method="POST">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="event">Event Type *</label>
<select id="event" name="event" required>
<option value="">Select...</option>
<option value="portrait">Portrait</option>
<option value="wedding">Wedding</option>
</select>
</div>
<button type="submit">Send Message</button>
</form>Check out our Sending Emails & SMS tutorial for detailed instructions on setting up email delivery for your contact form.
Your website is built on ClodHost, so it's already live! Here's how to customize it further:
# DNS Records to Add
Type: A
Host: @
Value: [Your ClodHost server IP]
Type: CNAME
Host: www
Value: yoursubdomain.clodhost.com
# SSL is automatically configured
# once DNS propagates (usually 1-24 hours)After changing DNS settings, it can take anywhere from a few minutes to 48 hours for the changes to propagate worldwide. Be patient!
Now that you have a website, consider: