Prompt Details
Model
(gemini-2.5-pro)
Token size
130
Example input
[web_type]: Business consulting website
[functions]: Services overview, team profiles, appointment scheduler, case studies, blog section
[style]: Professional corporate
[color_palettes]: Navy blue, red, orange, gold, and cream
[user_target]: Small business owners and entrepreneurs
Example output
```html
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="[Your Company Name] - Expert business consulting services for small business owners and entrepreneurs. Grow your business with our proven strategies.">
<title>[Your Company Name] - Business Consulting</title>
<link rel="stylesheet" href="style.css">
<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=Lato:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- Add Font Awesome for icons (optional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header class="header">
<div class="container header__container">
<a href="#" class="header__logo">[Your Company Name]</a>
<button class="header__nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
<span class="hamburger"></span>
</button>
<nav class="header__nav">
<ul class="header__nav-list">
<li><a href="#services" class="header__nav-link">Services</a></li>
<li><a href="#team" class="header__nav-link">Team</a></li>
<li><a href="#case-studies" class="header__nav-link">Case Studies</a></li>
<li><a href="#blog" class="header__nav-link">Blog</a></li>
<li><a href="#schedule" class="header__nav-link header__nav-link--cta btn btn--secondary">Schedule Consultation</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="hero">
<div class="container hero__container">
<h1 class="hero__title">Unlock Your Business Potential</h1>
<p class="hero__subtitle">Expert consulting tailored for small business owners and entrepreneurs. Let's build your success story together.</p>
<a href="#schedule" class="btn btn--primary hero__cta">Get Started Today</a>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services section">
<div class="container">
<h2 class="section__title">Our Services</h2>
<p class="section__subtitle">We offer a range of services designed to help your business thrive.</p>
<div class="services__grid">
<div class="card service-card">
<i class="fas fa-chart-line card__icon service-card__icon"></i>
<h3 class="card__title">Strategic Planning</h3>
<p class="card__text">Develop clear, actionable strategies to guide your business growth and achieve long-term goals.</p>
</div>
<div class="card service-card">
<i class="fas fa-coins card__icon service-card__icon"></i>
<h3 class="card__title">Financial Consulting</h3>
<p class="card__text">Optimize your financial performance with expert analysis, budgeting, and forecasting.</p>
</div>
<div class="card service-card">
<i class="fas fa-bullhorn card__icon service-card__icon"></i>
<h3 class="card__title">Marketing & Sales</h3>
<p class="card__text">Enhance your market presence and boost sales with effective marketing strategies and sales process improvements.</p>
</div>
<div class="card service-card">
<i class="fas fa-cogs card__icon service-card__icon"></i>
<h3 class="card__title">Operational Efficiency</h3>
<p class="card__text">Streamline your operations, improve productivity, and reduce costs for a leaner, more effective business.</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="team" class="team section section--alt-bg">
<div class="container">
<h2 class="section__title">Meet Our Experts</h2>
<p class="section__subtitle">Experienced professionals dedicated to your success.</p>
<div class="team__grid">
<div class="card team-card">
<img src="https://via.placeholder.com/150/001f3f/FDF5E6?text=Team+Member" alt="[Team Member Name]" class="team-card__image">
<h3 class="card__title team-card__name">[Team Member Name]</h3>
<p class="team-card__title">Lead Consultant</p>
<p class="card__text team-card__bio">Expertise in strategic planning and market analysis. Passionate about helping startups scale.</p>
</div>
<div class="card team-card">
<img src="https://via.placeholder.com/150/001f3f/FDF5E6?text=Team+Member" alt="[Team Member Name]" class="team-card__image">
<h3 class="card__title team-card__name">[Team Member Name]</h3>
<p class="team-card__title">Financial Advisor</p>
<p class="card__text team-card__bio">Specializes in financial modeling and investment strategies for small businesses.</p>
</div>
<div class="card team-card">
<img src="https://via.placeholder.com/150/001f3f/FDF5E6?text=Team+Member" alt="[Team Member Name]" class="team-card__image">
<h3 class="card__title team-card__name">[Team Member Name]</h3>
<p class="team-card__title">Marketing Strategist</p>
<p class="card__text team-card__bio">Focuses on digital marketing and brand building to increase customer engagement.</p>
</div>
</div>
</div>
</section>
<!-- Case Studies Section -->
<section id="case-studies" class="case-studies section">
<div class="container">
<h2 class="section__title">Success Stories</h2>
<p class="section__subtitle">See how we've helped businesses like yours achieve remarkable results.</p>
<div class="case-studies__grid">
<article class="card case-study-card">
<img src="https://via.placeholder.com/300x200/FF851B/FDF5E6?text=Case+Study+1" alt="Case Study 1" class="case-study-card__image">
<div class="case-study-card__content">
<h3 class="card__title">Client: [Client Name]</h3>
<p class="card__text"><strong>Challenge:</strong> Stagnant growth and inefficient operations.</p>
<p class="card__text"><strong>Solution:</strong> Implemented a new strategic plan and streamlined workflows.</p>
<p class="card__text"><strong>Result:</strong> 30% increase in revenue and 15% reduction in operational costs within one year.</p>
<a href="#" class="btn btn--link case-study-card__link">Read More <span aria-hidden="true">→</span></a>
</div>
</article>
<article class="card case-study-card">
<img src="https://via.placeholder.com/300x200/FF4136/FDF5E6?text=Case+Study+2" alt="Case Study 2" class="case-study-card__image">
<div class="case-study-card__content">
<h3 class="card__title">Client: [Client Name]</h3>
<p class="card__text"><strong>Challenge:</strong> Low market visibility and declining sales.</p>
<p class="card__text"><strong>Solution:</strong> Developed and executed a targeted digital marketing campaign.</p>
<p class="card__text"><strong>Result:</strong> 50% increase in website traffic and 25% growth in sales conversions.</p>
<a href="#" class="btn btn--link case-study-card__link">Read More <span aria-hidden="true">→</span></a>
</div>
</article>
</div>
</div>
</section>
<!-- Blog Section -->
<section id="blog" class="blog section section--alt-bg">
<div class="container">
<h2 class="section__title">Insights & News</h2>
<p class="section__subtitle">Stay updated with the latest trends and advice for entrepreneurs.</p>
<div class="blog__grid">
<article class="card blog-card">
<img src="https://via.placeholder.com/300x200/001f3f/FDF5E6?text=Blog+Post+1" alt="Blog Post 1" class="blog-card__image">
<div class="blog-card__content">
<h3 class="card__title blog-card__title"><a href="#">5 Common Mistakes Small Businesses Make (and How to Avoid Them)</a></h3>
<p class="card__text blog-card__excerpt">Learn about frequent pitfalls and practical tips to steer your business towards success...</p>
<span class="blog-card__meta">Published on: [Date]</span>
</div>
</article>
<article class="card blog-card">
<img src="https://via.placeholder.com/300x200/FFDC00/001f3f?text=Blog+Post+2" alt="Blog Post 2" class="blog-card__image">
<div class="blog-card__content">
<h3 class="card__title blog-card__title"><a href="#">The Entrepreneur's Guide to Effective Financial Planning</a></h3>
<p class="card__text blog-card__excerpt">Master your finances with our comprehensive guide covering budgeting, forecasting, and funding...</p>
<span class="blog-card__meta">Published on: [Date]</span>
</div>
</article>
<article class="card blog-card">
<img src="https://via.placeholder.com/300x200/FF4136/FDF5E6?text=Blog+Post+3" alt="Blog Post 3" class="blog-card__image">
<div class="blog-card__content">
<h3 class="card__title blog-card__title"><a href="#">Leveraging Digital Marketing for Small Business Growth</a></h3>
<p class="card__text blog-card__excerpt">Discover key digital marketing strategies that can significantly boost your online presence...</p>
<span class="blog-card__meta">Published on: [Date]</span>
</div>
</article>
</div>
<div class="blog__view-all">
<a href="#" class="btn btn--secondary">View All Posts</a>
</div>
</div>
</section>
<!-- Appointment Scheduler Section -->
<section id="schedule" class="schedule section">
<div class="container schedule__container">
<h2 class="section__title">Ready to Grow Your Business?</h2>
<p class="section__subtitle">Schedule a free initial consultation with one of our experts today.</p>
<!-- Option 1: Link to External Scheduler (Recommended for simplicity) -->
<a href="[Your Calendly Link or Booking Page URL]" target="_blank" rel="noopener noreferrer" class="btn btn--primary btn--large">Book Your Free Consultation</a>
<!-- Option 2: Embed Calendly Widget (Replace with your specific embed code) -->
<!--
<div class="calendly-inline-widget" data-url="[Your Calendly Link]" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
-->
<!-- Option 3: Simple Contact Form (Requires backend or service like Formspree) -->
<!--
<form action="[Your Formspree Endpoint or Backend URL]" method="POST" class="schedule__form">
<div class="form-group">
<label for="name" class="form-label">Name:</label>
<input type="text" id="name" name="name" class="form-input" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Email:</label>
<input type="email" id="email" name="email" class="form-input" required>
</div>
<div class="form-group">
<label for="message" class="form-label">Briefly describe your needs:</label>
<textarea id="message" name="message" class="form-textarea" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn--primary">Request Consultation</button>
</form>
-->
</div>
</section>
</main>
<footer class="footer">
<div class="container footer__container">
<div class="footer__col footer__col--about">
<h4 class="footer__col-title">[Your Company Name]</h4>
<p>Empowering small businesses and entrepreneurs through expert consulting.</p>
<div class="footer__socials">
<a href="#" aria-label="LinkedIn" class="footer__social-link"><i class="fab fa-linkedin"></i></a>
<a href="#" aria-label="Twitter" class="footer__social-link"><i class="fab fa-twitter-square"></i></a>
<a href="#" aria-label="Facebook" class="footer__social-link"><i class="fab fa-facebook-square"></i></a>
</div>
</div>
<div class="footer__col footer__col--links">
<h4 class="footer__col-title">Quick Links</h4>
<ul class="footer__list">
<li><a href="#services" class="footer__link">Services</a></li>
<li><a href="#team" class="footer__link">Team</a></li>
<li><a href="#case-studies" class="footer__link">Case Studies</a></li>
<li><a href="#blog" class="footer__link">Blog</a></li>
<li><a href="#schedule" class="footer__link">Contact</a></li>
</ul>
</div>
<div class="footer__col footer__col--contact">
<h4 class="footer__col-title">Contact Us</h4>
<p><i class="fas fa-map-marker-alt footer__icon"></i> [Your Address, City, State, Zip]</p>
<p><i class="fas fa-phone footer__icon"></i> <a href="tel:+1234567890" class="footer__link">[Your Phone Number]</a></p>
<p><i class="fas fa-envelope footer__icon"></i> <a href="mailto:info@yourcompany.com" class="footer__link">[Your Email Address]</a></p>
</div>
</div>
<div class="footer__bottom">
<div class="container footer__bottom-container">
<p>© <span id="current-year"></span> [Your Company Name]. All Rights Reserved.</p>
<p><a href="#" class="footer__link">Privacy Policy</a> | <a href="#" class="footer__link">Terms of Service</a></p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
```
```css
## style.css
/* --- Global Styles & Variables --- */
:root {
--navy-blue: #001f3f;
--red: #FF4136;
--orange: #FF851B;
--gold: #FFDC00;
--cream: #FDF5E6;
--white: #FFFFFF;
--dark-gray: #333333;
--light-gray: #f4f4f4;
--text-color: #333;
--heading-font: 'Roboto', sans-serif;
--body-font: 'Lato', sans-serif;
--base-font-size: 16px;
--line-height: 1.6;
--container-width: 1140px;
--container-padding: 15px;
--section-padding: 60px 0;
--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
--border-radius: 5px;
--transition-speed: 0.3s ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: var(--base-font-size);
}
body {
font-family: var(--body-font);
line-height: var(--line-height);
color: var(--text-color);
background-color: var(--white); /* Use white or cream as base */
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
font-weight: 700;
color: var(--navy-blue);
margin-bottom: 0.75em;
line-height: 1.2;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
p {
margin-bottom: 1em;
}
a {
color: var(--orange);
text-decoration: none;
transition: color var(--transition-speed);
}
a:hover, a:focus {
color: var(--red);
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul {
list-style: none;
}
.container {
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.section {
padding: var(--section-padding);
}
.section--alt-bg {
background-color: var(--cream);
}
.section__title {
text-align: center;
margin-bottom: 1rem;
color: var(--navy-blue);
}
.section__subtitle {
text-align: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
color: var(--dark-gray);
font-size: 1.1rem;
}
/* --- Buttons --- */
.btn {
display: inline-block;
padding: 0.8em 1.8em;
border: none;
border-radius: var(--border-radius);
font-family: var(--heading-font);
font-weight: 700;
font-size: 1rem;
text-align: center;
cursor: pointer;
transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
text-decoration: none;
}
.btn:hover, .btn:focus {
text-decoration: none;
transform: translateY(-2px);
}
.btn--primary {
background-color: var(--red);
color: var(--white);
}
.btn--primary:hover, .btn--primary:focus {
background-color: #d9362d; /* Darker red */
color: var(--white);
}
.btn--secondary {
background-color: var(--orange);
color: var(--white);
}
.btn--secondary:hover, .btn--secondary:focus {
background-color: #e07618; /* Darker orange */
color: var(--white);
}
.btn--link {
background: none;
color: var(--orange);
padding: 0;
font-weight: bold;
}
.btn--link:hover, .btn--link:focus {
color: var(--red);
text-decoration: underline;
transform: none;
}
.btn--large {
padding: 1em 2.5em;
font-size: 1.1rem;
}
/* --- Header --- */
.header {
background-color: var(--navy-blue);
color: var(--white);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.header__container {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--gold);
text-decoration: none;
}
.header__logo:hover, .header__logo:focus {
color: var(--white);
text-decoration: none;
}
.header__nav-list {
display: flex;
align-items: center;
gap: 1.5rem;
}
.header__nav-link {
color: var(--white);
font-weight: 700;
padding: 0.5em 0;
position: relative;
text-decoration: none;
}
.header__nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--gold);
transition: width var(--transition-speed);
}
.header__nav-link:hover::after,
.header__nav-link:focus::after {
width: 100%;
}
.header__nav-link--cta {
margin-left: 1rem;
padding: 0.6em 1.2em; /* Adjust padding for CTA */
}
.header__nav-link--cta:hover, .header__nav-link--cta:focus {
background-color: #e07618; /* Darker orange on hover */
color: var(--white);
}
.header__nav-link--cta::after {
display: none; /* No underline for button */
}
/* Mobile Navigation Toggle */
.header__nav-toggle {
display: none; /* Hidden by default */
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.hamburger {
display: block;
width: 25px;
height: 3px;
background-color: var(--white);
position: relative;
transition: background-color 0s 0.1s linear; /* Delay background clearing */
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 3px;
background-color: var(--white);
transition: transform var(--transition-speed), top var(--transition-speed) 0.1s linear;
}
.hamburger::before {
top: -8px;
}
.hamburger::after {
top: 8px;
}
/* --- Hero Section --- */
.hero {
background-color: var(--cream); /* Light background */
/* Optional: Add a subtle background image */
/* background-image: linear-gradient(rgba(0, 31, 63, 0.7), rgba(0, 31, 63, 0.7)), url('path/to/your/hero-image.jpg'); */
/* background-size: cover; */
/* background-position: center; */
padding: 100px 0;
text-align: center;
color: var(--navy-blue); /* Ensure text is readable on cream */
}
.hero__title {
font-size: 3rem;
color: var(--navy-blue);
margin-bottom: 0.5em;
}
.hero__subtitle {
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto 2rem auto;
color: var(--dark-gray);
}
.hero__cta {
margin-top: 1rem;
}
/* --- Cards (General) --- */
.card {
background-color: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.card__title {
margin-bottom: 0.5em;
font-size: 1.25rem;
}
.card__text {
font-size: 0.95rem;
color: var(--dark-gray);
flex-grow: 1; /* Allows text to push footer down if needed */
}
.card__icon {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--orange); /* Use accent color */
}
/* --- Services Section --- */
.services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.service-card {
padding: 2rem;
text-align: center;
}
.service-card__icon {
color: var(--red); /* Different icon color for services */
}
/* --- Team Section --- */
.team__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.team-card {
text-align: center;
padding: 1.5rem;
}
.team-card__image {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 1rem auto;
object-fit: cover;
border: 4px solid var(--gold); /* Accent border */
}
.team-card__name {
margin-bottom: 0.25rem;
}
.team-card__title {
font-size: 0.9rem;
color: var(--orange);
font-weight: 700;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.team-card__bio {
font-size: 0.9rem;
}
/* --- Case Studies Section --- */
.case-studies__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.case-study-card {
/* Card styles already applied */
}
.case-study-card__image {
width: 100%;
height: 200px; /* Fixed height for consistency */
object-fit: cover;
}
.case-study-card__content {
padding: 1.5rem;
}
.case-study-card__link {
margin-top: 1rem;
display: inline-block;
}
/* --- Blog Section --- */
.blog__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.blog-card {
/* Card styles already applied */
}
.blog-card__image {
width: 100%;
height: 180px; /* Fixed height */
object-fit: cover;
}
.blog-card__content {
padding: 1.5rem;
}
.blog-card__title a {
color: var(--navy-blue);
text-decoration: none;
}
.blog-card__title a:hover, .blog-card__title a:focus {
color: var(--red);
text-decoration: underline;
}
.blog-card__excerpt {
font-size: 0.9rem;
margin-bottom: 1rem;
}
.blog-card__meta {
font-size: 0.8rem;
color: #666;
display: block;
margin-top: auto; /* Pushes meta to bottom if card height varies */
}
.blog__view-all {
text-align: center;
margin-top: 2rem;
}
/* --- Appointment Scheduler Section --- */
.schedule {
background-color: var(--navy-blue);
color: var(--white);
text-align: center;
}
.schedule__container {
max-width: 800px; /* Narrower container */
}
.schedule .section__title,
.schedule .section__subtitle {
color: var(--white);
}
.schedule .section__subtitle {
margin-bottom: 2.5rem;
}
/* Styles for embedded Calendly (if used) */
.calendly-inline-widget {
margin-top: 2rem;
}
/* Styles for simple form (if used) */
.schedule__form {
max-width: 500px;
margin: 2rem auto 0 auto;
text-align: left;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
color: var(--cream);
}
.form-input,
.form-textarea {
width: 100%;
padding: 0.8em;
border: 1px solid var(--light-gray);
border-radius: var(--border-radius);
font-family: var(--body-font);
font-size: 1rem;
background-color: var(--white);
color: var(--text-color);
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 2px rgba(255, 133, 27, 0.5); /* Orange focus ring */
}
.form-textarea {
resize: vertical;
}
.schedule__form button[type="submit"] {
width: 100%;
margin-top: 1rem;
}
/* --- Footer --- */
.footer {
background-color: var(--dark-gray);
color: var(--light-gray);
padding-top: 3rem;
font-size: 0.9rem;
}
.footer__container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer__col-title {
color: var(--gold);
margin-bottom: 1rem;
font-size: 1.1rem;
}
.footer__col--about p {
margin-bottom: 1rem;
}
.footer__socials {
display: flex;
gap: 1rem;
}
.footer__social-link {
color: var(--light-gray);
font-size: 1.5rem;
transition: color var(--transition-speed);
}
.footer__social-link:hover, .footer__social-link:focus {
color: var(--gold);
text-decoration: none;
}
.footer__list {
list-style: none;
padding: 0;
}
.footer__list li {
margin-bottom: 0.5rem;
}
.footer__link {
color: var(--light-gray);
text-decoration: none;
}
.footer__link:hover, .footer__link:focus {
color: var(--gold);
text-decoration: underline;
}
.footer__col--contact p {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.footer__icon {
color: var(--gold);
margin-right: 0.75em;
width: 1em; /* Ensure alignment */
text-align: center;
}
.footer__bottom {
background-color: #222; /* Slightly darker */
padding: 1rem 0;
margin-top: 2rem;
text-align: center;
}
.footer__bottom-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.footer__bottom p {
margin: 0;
font-size: 0.85rem;
}
/* --- Accessibility --- */
/* Add visible focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 2px;
box-shadow: none; /* Override other focus shadows if needed */
}
/* Skip link - add if needed */
/* .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: white; padding: 8px; z-index: 100; } */
/* .skip-link:focus { top: 0; } */
/* --- Responsive Design --- */
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
.hero { padding: 80px 0; }
/* Adjust grid columns */
.services__grid,
.team__grid,
.case-studies__grid,
.blog__grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
.header__nav {
display: none; /* Hide nav by default */
position: absolute;
top: 100%; /* Position below header */
left: 0;
width: 100%;
background-color: var(--navy-blue);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 1rem 0;
}
.header__nav.active {
display: block; /* Show when active */
}
.header__nav-list {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.header__nav-link--cta {
margin-left: 0; /* Remove left margin */
margin-top: 1rem; /* Add space above CTA */
display: inline-block; /* Ensure button styles apply */
}
.header__nav-toggle {
display: block; /* Show hamburger */
}
/* Hamburger animation */
.header__nav-toggle.active .hamburger {
background-color: transparent; /* Hide middle line */
}
.header__nav-toggle.active .hamburger::before {
transform: rotate(45deg);
top: 0;
}
.header__nav-toggle.active .hamburger::after {
transform: rotate(-45deg);
top: 0;
}
h1 { font-size: 2.2rem; }
.hero__title { font-size: 2.5rem; }
.hero__subtitle { font-size: 1.1rem; }
.hero { padding: 60px 0; }
.section { padding: 40px 0; }
.section__subtitle { margin-bottom: 2rem; }
.footer__container {
grid-template-columns: 1fr; /* Stack columns */
text-align: center;
}
.footer__col--about p,
.footer__col--contact p {
justify-content: center;
}
.footer__socials {
justify-content: center;
}
.footer__bottom-container {
flex-direction: column;
gap: 0.5rem;
}
.footer__bottom p {
text-align: center;
}
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
.hero__title { font-size: 2.2rem; }
.services__grid,
.team__grid,
.case-studies__grid,
.blog__grid {
grid-template-columns: 1fr; /* Single column */
}
.btn {
padding: 0.7em 1.5em;
font-size: 0.9rem;
}
.btn--large {
padding: 0.9em 2em;
font-size: 1rem;
}
}
```
```javascript
## script.js
document.addEventListener('DOMContentLoaded', () => {
// --- Mobile Navigation Toggle ---
const navToggle = document.querySelector('.header__nav-toggle');
const nav = document.querySelector('.header__nav');
if (navToggle && nav) {
navToggle.addEventListener('click', () => {
nav.classList.toggle('active');
const isExpanded = nav.classList.contains('active');
navToggle.setAttribute('aria-expanded', isExpanded);
navToggle.classList.toggle('active'); // For hamburger animation styling
});
// Close nav when a link is clicked (optional, good for single-page sites)
const navLinks = nav.querySelectorAll('.header__nav-link');
navLinks.forEach(link => {
link.addEventListener('click', () => {
if (nav.classList.contains('active')) {
nav.classList.remove('active');
navToggle.setAttribute('aria-expanded', 'false');
navToggle.classList.remove('active');
}
});
});
// Close nav if clicking outside of it on mobile
document.addEventListener('click', (event) => {
const isClickInsideNav = nav.contains(event.target);
const isClickOnToggle = navToggle.contains(event.target);
if (!isClickInsideNav && !isClickOnToggle && nav.classList.contains('active')) {
nav.classList.remove('active');
navToggle.setAttribute('aria-expanded', 'false');
navToggle.classList.remove('active');
}
});
}
// --- Update Footer Year ---
const currentYearSpan = document.getElementById('current-year');
if (currentYearSpan) {
currentYearSpan.textContent = new Date().getFullYear();
}
// --- Smooth Scrolling for Anchor Links ---
// Handled by CSS `scroll-behavior: smooth;` but this JS version offers more control if needed.
// You can uncomment this if CSS method isn't sufficient or if you need offsets.
/*
const anchorLinks = document.querySelectorAll('a[href^="#"]');
anchorLinks.forEach(link => {
link.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
// Ensure it's a valid internal link and not just "#"
if (targetId.length > 1 && targetId.startsWith('#')) {
const targetElement = document.querySelector(targetId);
if (targetElement) {
e.preventDefault(); // Prevent default jump
const headerOffset = document.querySelector('.header')?.offsetHeight || 0; // Adjust for sticky header
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: "smooth"
});
// Optional: Update focus to the target section for accessibility
// targetElement.setAttribute('tabindex', '-1'); // Make it focusable
// targetElement.focus();
}
}
});
});
*/
// --- Add focus-visible polyfill if needed for older browsers ---
// Consider adding focus-visible.js if wider browser support for :focus-visible is required
// import 'focus-visible';
console.log("Business Consulting Website Initialized.");
}); // End DOMContentLoaded
```
## Implementation Guidance
**1. Setup:**
* **Create Files:** Create three files in a new folder (e.g., `consulting-website`):
* `index.html`
* `style.css`
* `script.js`
* **Copy Code:** Copy the complete code provided above into the corresponding files.
* **Images:**
* Create an `images` subfolder inside your main folder (`consulting-website/images/`).
* Replace all placeholder image URLs (like `https://via.placeholder.com/...`) in `index.html` with paths to your actual images (e.g., `images/team-member-1.jpg`, `images/case-study-hero.png`). Make sure your images are reasonably sized for the web.
* Ensure you provide meaningful `alt` text for all images for accessibility.
* **Content Customization:**
* Replace all bracketed placeholder text (e.g., `[Your Company Name]`, `[Service Name]`, `[Team Member Name]`, `[Client Name]`, `[Date]`, `[Your Address, City, State, Zip]`, `[Your Phone Number]`, `[Your Email Address]`) with your actual business information.
* Update links: Change placeholder `href="#"` links for case studies, blog posts, social media, privacy policy, and terms of service to their correct URLs.
* **Appointment Scheduler:**
* **Recommended:** Sign up for a service like [Calendly](https://calendly.com/). Get your scheduling link and replace `[Your Calendly Link or Booking Page URL]` in the `<a>` tag within the `#schedule` section.
* **Alternative (Embed):** If using the Calendly embed, uncomment the `calendly-inline-widget` `<div>` and `<script>` tags in the `#schedule` section and replace `[Your Calendly Link]` with your specific Calendly event type URL.
* **Alternative (Form):** If you prefer the simple form, uncomment the `<form>` section. You will need a backend service to handle submissions. Services like [Formspree](https://formspree.io/) or [Netlify Forms](https://docs.netlify.com/forms/setup/) are easy options for static sites. Replace `[Your Formspree Endpoint or Backend URL]` with the appropriate URL.
* **Icons:** The code uses Font Awesome for icons (`<i class="fas fa-...">`). The required Font Awesome CSS is linked via CDN in the `<head>`. Ensure you have an internet connection for them to load, or download and host Font Awesome locally.
* **View Locally:** Open the `index.html` file directly in your web browser (e.g., Chrome, Firefox) to see the website.
**2. Deployment (Making it Live):**
For a static website like this (HTML, CSS, JS only), deployment is straightforward:
* **Netlify:**
1. Sign up for a free Netlify account.
2. Drag and drop your project folder (`consulting-website`) onto the Netlify dashboard.
3. Netlify will build and deploy your site, providing you with a live URL (e.g., `your-site-name.netlify.app`). You can later connect a custom domain.
* **Vercel:**
1. Sign up for a free Vercel account.
2. Install the Vercel CLI or connect your Git repository (GitHub, GitLab, Bitbucket).
3. Deploy your project folder. Vercel provides a live URL and supports custom domains.
* **GitHub Pages:**
1. Create a repository on GitHub.
2. Push your `index.html`, `style.css`, `script.js`, and `images` folder to the repository.
3. Go to the repository settings > Pages.
4. Select the branch to deploy from (usually `main` or `master`) and the `/ (root)` folder.
5. GitHub will publish your site at `your-username.github.io/your-repository-name/`.
* **Traditional Hosting:** You can also upload the files via FTP to any standard web hosting provider that supports static files.
**3. Testing:**
* **Responsiveness:**
* Resize your browser window to test different screen sizes.
* Use your browser's Developer Tools (usually F12 or Right-click > Inspect) and enable the "Device Toolbar" or "Responsive Design Mode" to simulate various phones and tablets. Check for layout breaks, overlapping text, or elements that become too small.
* **Cross-Browser Compatibility:** Test the site in major browsers (Chrome, Firefox, Safari, Edge) on both desktop and mobile if possible.
* **Functionality:** Click all links and buttons. Test the mobile navigation toggle. If using the contact form, test the submission process. Test the appointment scheduler link/embed.
* **Accessibility (Basic Checks):**
* **Keyboard Navigation:** Navigate the entire site using only the Tab key. Ensure all interactive elements (links, buttons, form fields) are reachable and have a visible focus indicator (the orange outline defined in CSS).
* **Color Contrast:** Use browser extensions or online tools (like WebAIM Contrast Checker) to verify sufficient contrast between text and background colors, especially with the chosen palette.
* **Alt Text:** Ensure all `<img>` tags have descriptive `alt` attributes.
* **Semantic HTML:** Check that HTML structure uses appropriate tags (`<nav>`, `<main>`, `<section>`, etc.).
* **Lighthouse:** Run a Lighthouse audit in Chrome DevTools (Audits/Lighthouse tab) to get automated checks for performance, accessibility, best practices, and SEO. Address any reported issues.
**4. Troubleshooting:**
* **CSS Not Loading:**
* Check the `<link rel="stylesheet" href="style.css">` path in `index.html`. Ensure `style.css` is in the same folder as `index.html`.
* Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R).
* Check the browser's Developer Tools Console (F12) for any errors related to loading the CSS file.
* **JavaScript Not Working:**
* Check the `<script src="script.js"></script>` path in `index.html`. Ensure `script.js` is in the same folder.
* Check the Developer Tools Console (F12) for JavaScript errors. Errors will stop script execution. Read the error message for clues.
* Ensure the script tag is placed just before the closing `</body>` tag so the HTML elements exist when the script runs.
* **Images Not Displaying:**
* Verify the image paths in the `src` attributes of `<img>` tags are correct relative to `index.html` (e.g., `images/my-image.jpg`).
* Check that the image files exist in the specified folder (`images/`).
* Check file names for case sensitivity, especially on Linux-based hosting.
* **Layout Issues (Responsiveness):**
* Use Developer Tools to inspect the elements that are breaking. Check the CSS rules being applied at different screen sizes using the media queries (`@media`).
* Look for fixed widths, large padding/margins, or inflexible grid/flexbox settings that might cause overflows.
* **Font Awesome Icons Not Showing:**
* Ensure you have an internet connection if using the CDN link.
* Double-check the icon class names (e.g., `fas fa-chart-line`) against the Font Awesome library.
* Check the Console for errors related to loading the Font Awesome CSS file.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
7
Favorites
225
Views
GEMINI-2.5-PRO
Instantly generate deployment-ready website code tailored to your specific needs, with no technical knowledge required. Receive complete HTML, CSS, and JavaScript files for your custom website, along with step-by-step implementation instructions in simple language. Perfect for startups, small businesses, and individuals who need a professional website without knowing how to code.
...more
Updated 3 weeks ago
