Website Code Generator
Run ID: 69cb388e61b1021a29a86f7d•2026-03-31Web Development
PantheraHive BOS
BOS Dashboard

Website Code Generation Complete!

Your comprehensive website code has been successfully generated. This output provides all the necessary HTML, CSS, and JavaScript files to create a professional, responsive, and interactive website. Below, you will find the complete code for each file, along with instructions on how to use and preview your new site.

1. Project File Structure

To ensure your website functions correctly, please organize the generated files into the following structure:

html • 10,188 chars
<!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="Professional website showcasing services, portfolio, and contact information.">
    <meta name="keywords" content="web design, development, portfolio, services, contact">
    <title>Your Professional Website</title>
    <link rel="stylesheet" href="css/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=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <header class="main-header">
        <div class="container">
            <h1 class="logo"><a href="#">YourBrand</a></h1>
            <nav class="main-nav">
                <button class="nav-toggle" aria-label="toggle navigation">
                    <span class="hamburger"></span>
                </button>
                <ul class="nav-list">
                    <li><a href="#home" class="nav-link">Home</a></li>
                    <li><a href="#about" class="nav-link">About Us</a></li>
                    <li><a href="#services" class="nav-link">Services</a></li>
                    <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
                    <li><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section id="home" class="hero-section">
            <div class="container">
                <div class="hero-content">
                    <p class="hero-subtitle">Innovative Solutions for Your Business</p>
                    <h2 class="hero-title">Crafting Digital Experiences That Matter</h2>
                    <p class="hero-description">We specialize in creating bespoke websites that are not only visually stunning but also highly functional and user-friendly.</p>
                    <a href="#contact" class="btn btn-primary">Get a Free Quote</a>
                    <a href="#services" class="btn btn-secondary">Learn More</a>
                </div>
            </div>
        </section>

        <section id="about" class="about-section section-padding">
            <div class="container">
                <div class="section-header">
                    <h3 class="section-title">About Our Company</h3>
                    <p class="section-subtitle">Dedicated to excellence and client success.</p>
                </div>
                <div class="about-content">
                    <div class="about-text">
                        <p>Founded on the principles of creativity, quality, and client satisfaction, YourBrand has grown into a leading digital agency. We believe in building strong relationships with our clients, understanding their unique needs, and delivering solutions that exceed expectations.</p>
                        <p>Our team of experienced designers, developers, and strategists are passionate about what they do, constantly pushing the boundaries of technology and design to create impactful online presences.</p>
                        <a href="#contact" class="btn btn-tertiary">Join Our Team</a>
                    </div>
                    <div class="about-image">
                        <img src="https://via.placeholder.com/600x400?text=About+Us+Image" alt="Team working collaboratively">
                    </div>
                </div>
            </div>
        </section>

        <section id="services" class="services-section section-padding bg-light">
            <div class="container">
                <div class="section-header">
                    <h3 class="section-title">Our Core Services</h3>
                    <p class="section-subtitle">Delivering comprehensive digital solutions.</p>
                </div>
                <div class="services-grid">
                    <div class="service-item">
                        <img src="https://via.placeholder.com/60x60?text=Icon1" alt="Web Design Icon">
                        <h4>Web Design & Development</h4>
                        <p>From captivating designs to robust backend development, we build responsive and scalable websites.</p>
                    </div>
                    <div class="service-item">
                        <img src="https://via.placeholder.com/60x60?text=Icon2" alt="SEO Icon">
                        <h4>Search Engine Optimization (SEO)</h4>
                        <p>Improve your visibility and rank higher on search engines with our expert SEO strategies.</p>
                    </div>
                    <div class="service-item">
                        <img src="https://via.placeholder.com/60x60?text=Icon3" alt="Marketing Icon">
                        <h4>Digital Marketing</h4>
                        <p>Drive traffic and engage your audience through targeted social media and content marketing campaigns.</p>
                    </div>
                    <div class="service-item">
                        <img src="https://via.placeholder.com/60x60?text=Icon4" alt="Branding Icon">
                        <h4>Branding & Identity</h4>
                        <p>Craft a unique brand identity that resonates with your target audience and stands out.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="portfolio" class="portfolio-section section-padding">
            <div class="container">
                <div class="section-header">
                    <h3 class="section-title">Our Recent Work</h3>
                    <p class="section-subtitle">Showcasing excellence in every project.</p>
                </div>
                <div class="portfolio-grid">
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300?text=Project+1" alt="Portfolio Project 1">
                        <div class="portfolio-overlay">
                            <h4>Project Title One</h4>
                            <p>Web Design, Branding</p>
                            <a href="#" class="btn btn-view">View Project</a>
                        </div>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300?text=Project+2" alt="Portfolio Project 2">
                        <div class="portfolio-overlay">
                            <h4>Project Title Two</h4>
                            <p>Development, SEO</p>
                            <a href="#" class="btn btn-view">View Project</a>
                        </div>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300?text=Project+3" alt="Portfolio Project 3">
                        <div class="portfolio-overlay">
                            <h4>Project Title Three</h4>
                            <p>Marketing, Content</p>
                            <a href="#" class="btn btn-view">View Project</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact-section section-padding bg-dark">
            <div class="container">
                <div class="section-header">
                    <h3 class="section-title text-white">Get In Touch</h3>
                    <p class="section-subtitle text-white">We'd love to hear from you!</p>
                </div>
                <div class="contact-content">
                    <div class="contact-info">
                        <p><strong>Email:</strong> info@yourbrand.com</p>
                        <p><strong>Phone:</strong> +1 (123) 456-7890</p>
                        <p><strong>Address:</strong> 123 Business Rd, Suite 400, City, State 12345</p>
                        <div class="social-links">
                            <a href="#" target="_blank" aria-label="Facebook"><img src="https://via.placeholder.com/30x30?text=F" alt="Facebook"></a>
                            <a href="#" target="_blank" aria-label="Twitter"><img src="https://via.placeholder.com/30x30?text=T" alt="Twitter"></a>
                            <a href="#" target="_blank" aria-label="LinkedIn"><img src="https://via.placeholder.com/30x30?text=L" alt="LinkedIn"></a>
                        </div>
                    </div>
                    <form class="contact-form" id="contactForm">
                        <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="subject">Subject:</label>
                            <input type="text" id="subject" name="subject">
                        </div>
                        <div class="form-group">
                            <label for="message">Message:</label>
                            <textarea id="message" name="message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                        <p id="form-status" class="form-status"></p>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2023 YourBrand. All rights reserved.</p>
            <ul class="footer-nav">
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Service</a></li>
            </ul>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>
Sandboxed live preview

css

/ General Reset & Base Styles /

  • {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--primary-color: #007bff; / Blue /

--secondary-color: #6c757d; / Gray /

--tertiary-color: #28a745; / Green /

--dark-color: #343a40;

--light-color: #f8f9fa;

--white-color: #ffffff;

--text-color: #333;

--heading-color: #222;

--border-color: #dee2e6;

--font-primary: 'Montserrat', sans-serif;

--font-secondary: 'Open Sans', sans-serif;

}

html {

scroll-behavior: smooth;

}

body {

font-family: var(--font-secondary);

line-height: 1.6;

color: var(--text-color);

background-color: var(--white-color);

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

a {

color: var(--primary-color);

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

ul {

list-style: none;

}

img {

max-width: 100%;

height: auto;

display: block;

}

/ Headings /

h1, h2, h3, h4, h5, h6 {

font-family: var(--font-primary);

color: var(--heading-color);

margin-bottom: 0.5em;

line-height: 1.2;

}

h1 { font-size: 2.5em; }

h2 { font-size: 2em; }

h3 { font-size: 1.75em; }

h4 { font-size: 1.5em; }

/ Buttons /

.btn {

display: inline-block;

background: var(--primary-color);

color: var(--white-color);

padding: 12px 25px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 1em;

font-weight: 600;

text-align: center;

text-decoration: none;

transition: background-color 0.3s ease, transform 0.2s ease;

}

.btn:hover {

background-color: darken(var(--primary-color), 10%); / Placeholder for SCSS darken /

background-color: #0056b3; / Example darker blue /

transform: translateY(-2px);

text-decoration: none;

}

.btn-primary {

background-color: var(--primary-color);

}

.btn-secondary {

background-color: var(--secondary-color);

}

.btn-tertiary {

websitebuilder Output

Website Generation Complete & Ready for Deployment!

Congratulations! Your complete website code (HTML, CSS, JavaScript) has been successfully generated and is now ready for deployment. Below, you will find the comprehensive code, instructions for live preview, and various deployment options to get your website online.

1. Your Generated Website Code

This section contains the full, production-ready code for your website. It's structured into separate files for HTML, CSS, and JavaScript, following best practices for maintainability and performance.

1.1 index.html (Main Structure)

This is the core HTML file that defines the structure and content of your website.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Your Company Name] - Professional Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- Optional: Google Fonts or other external resources -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght=500;700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="main-header">
        <div class="container">
            <a href="#" class="logo">[Your Company Name]</a>
            <nav class="main-nav">
                <button class="nav-toggle" aria-label="Toggle navigation">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul class="nav-menu">
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section id="home" class="hero-section">
            <div class="container">
                <h1>Welcome to [Your Company Name]</h1>
                <p>Innovative Solutions for a Digital World.</p>
                <a href="#services" class="btn btn-primary">Discover Our Services</a>
            </div>
        </section>

        <section id="about" class="about-section section-padding">
            <div class="container">
                <h2>About Us</h2>
                <div class="about-content">
                    <p>At [Your Company Name], we are dedicated to delivering exceptional quality and innovative solutions. With years of experience and a passion for excellence, we empower businesses to thrive in today's competitive landscape.</p>
                    <p>Our team of experts is committed to understanding your unique needs and providing tailored strategies that drive success and foster long-term growth. We believe in transparency, collaboration, and measurable results.</p>
                </div>
            </div>
        </section>

        <section id="services" class="services-section section-padding bg-light">
            <div class="container">
                <h2>Our Services</h2>
                <div class="service-grid">
                    <div class="service-item">
                        <h3>Web Development</h3>
                        <p>Crafting responsive, high-performance websites tailored to your business goals.</p>
                    </div>
                    <div class="service-item">
                        <h3>Digital Marketing</h3>
                        <p>Boosting your online presence through SEO, social media, and content strategies.</p>
                    </div>
                    <div class="service-item">
                        <h3>UI/UX Design</h3>
                        <p>Creating intuitive and engaging user experiences that delight your customers.</p>
                    </div>
                    <div class="service-item">
                        <h3>Cloud Solutions</h3>
                        <p>Scalable and secure cloud infrastructure to support your evolving business needs.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="portfolio" class="portfolio-section section-padding">
            <div class="container">
                <h2>Our Portfolio</h2>
                <p>Explore some of our recent projects that showcase our expertise and commitment to excellence.</p>
                <div class="portfolio-grid">
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300/f0f0f0/333?text=Project+1" alt="Project 1">
                        <h3>Project Alpha</h3>
                        <p>A cutting-edge e-commerce platform.</p>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300/f0f0f0/333?text=Project+2" alt="Project 2">
                        <h3>Project Beta</h3>
                        <p>Responsive corporate website redesign.</p>
                    </div>
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300/f0f0f0/333?text=Project+3" alt="Project 3">
                        <h3>Project Gamma</h3>
                        <p>Mobile application UI/UX overhaul.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact-section section-padding bg-dark text-white">
            <div class="container">
                <h2>Contact Us</h2>
                <p>Ready to start your next project? Get in touch with our team today!</p>
                <form class="contact-form">
                    <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="message">Message</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-secondary">Send Message</button>
                </form>
                <div class="contact-info">
                    <p>Email: <a href="mailto:info@yourcompany.com">info@yourcompany.com</a></p>
                    <p>Phone: <a href="tel:+1234567890">+1 (234) 567-890</a></p>
                    <p>Address: 123 Business Rd, Suite 400, City, State, ZIP</p>
                </div>
            </div>
        </section>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2023 [Your Company Name]. All rights reserved.</p>
            <div class="footer-links">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Service</a>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>

1.2 style.css (Visual Styling)

This CSS file provides the styling for your website, ensuring a clean, modern, and responsive design across various devices.


/* General Body & Typography */
:root {
    --primary-color: #007bff; /* Blue */
    --secondary-color: #6c757d; /* Grey */
    --accent-color: #28a745; /* Green */
    --dark-bg: #343a40; /* Dark Grey */
    --light-bg: #f8f9fa; /* Light Grey */
    --text-color: #333;
    --white-color: #ffffff;
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--dark-bg);
    margin-bottom: 0.8em;
    line-height: 1.2;
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.8em; }

p {
    margin-bottom: 1em;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.btn-primary:hover {
    background-color: darken(var(--primary-color), 10%); /* Placeholder for actual darken function */
    background-color: #0056b3; /* Darker blue */
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.btn-secondary:hover {
    background-color: darken(var(--secondary-color), 10%); /* Placeholder for actual darken function */
    background-color: #545b62; /* Darker grey */
}

/* Header */
.main-header {
    background-color: var(--white-color);
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-secondary);
    font-size: 1.8em;
    font-weight: 700;
    color: var(--dark-bg);
}

.main-nav .nav-menu {
    list-style: none;
    display: flex;
}

.main-nav .nav-menu li {
    margin-left: 30px;
}

.main-nav .nav-menu a {
    color: var(--text-color);
    font-weight: 500;
    padding: 5px 0;
    position: relative;
}

.main-nav .nav-menu a.active,
.main-nav .nav-menu a:hover {
    color: var(--primary-color);
}

.main-nav .nav-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.main-nav .nav-menu a.active::after,
.main-nav .nav-menu a:hover::after {
    width: 100%;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    padding: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    transition: all 0.3s ease;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1920x1080/333/fff?text=Hero+Image') no-repeat center center/cover;
    color: var(--white-color);
    text-align: center;
    padding: 100px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section h1 {
    color: var(--white-color);
    font-size: 3.5em;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 1.3em;
    margin-bottom: 30px;
}

/* Sections */
.section-padding {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--light-bg);
}

.bg-dark {
    background-color: var
website_code_generator.html
Download source file
Copy all content
Full output as text
Download ZIP
IDE-ready project ZIP
Copy share link
Permanent URL for this run
Get Embed Code
Embed this result on any website
Print / Save PDF
Use browser print dialog
\n\n\n";var _phIsHtml=true;var _phFname="website_code_generator.html";var _phPreviewUrl="/api/runs/69cb388e61b1021a29a86f7d/preview";var _phAll="## Website Code Generation Complete!\n\nYour comprehensive website code has been successfully generated. This output provides all the necessary HTML, CSS, and JavaScript files to create a professional, responsive, and interactive website. Below, you will find the complete code for each file, along with instructions on how to use and preview your new site.\n\n---\n\n### 1. Project File Structure\n\nTo ensure your website functions correctly, please organize the generated files into the following structure:\n\n```\nyour-website/\n├── index.html\n├── css/\n│ └── style.css\n└── js/\n └── script.js\n```\n\n---\n\n### 2. Generated HTML Code (`index.html`)\n\nThis file provides the structural foundation and content of your website, including semantic elements for accessibility and SEO.\n\n```html\n\n\n\n \n \n \n \n Your Professional Website\n \n \n \n \n\n\n
\n
\n

YourBrand

\n \n
\n
\n\n
\n
\n
\n
\n

Innovative Solutions for Your Business

\n

Crafting Digital Experiences That Matter

\n

We specialize in creating bespoke websites that are not only visually stunning but also highly functional and user-friendly.

\n Get a Free Quote\n Learn More\n
\n
\n
\n\n
\n
\n
\n

About Our Company

\n

Dedicated to excellence and client success.

\n
\n
\n
\n

Founded on the principles of creativity, quality, and client satisfaction, YourBrand has grown into a leading digital agency. We believe in building strong relationships with our clients, understanding their unique needs, and delivering solutions that exceed expectations.

\n

Our team of experienced designers, developers, and strategists are passionate about what they do, constantly pushing the boundaries of technology and design to create impactful online presences.

\n Join Our Team\n
\n
\n \"Team\n
\n
\n
\n
\n\n
\n
\n
\n

Our Core Services

\n

Delivering comprehensive digital solutions.

\n
\n
\n
\n \"Web\n

Web Design & Development

\n

From captivating designs to robust backend development, we build responsive and scalable websites.

\n
\n
\n \"SEO\n

Search Engine Optimization (SEO)

\n

Improve your visibility and rank higher on search engines with our expert SEO strategies.

\n
\n
\n \"Marketing\n

Digital Marketing

\n

Drive traffic and engage your audience through targeted social media and content marketing campaigns.

\n
\n
\n \"Branding\n

Branding & Identity

\n

Craft a unique brand identity that resonates with your target audience and stands out.

\n
\n
\n
\n
\n\n
\n
\n
\n

Our Recent Work

\n

Showcasing excellence in every project.

\n
\n
\n
\n \"Portfolio\n
\n

Project Title One

\n

Web Design, Branding

\n View Project\n
\n
\n
\n \"Portfolio\n
\n

Project Title Two

\n

Development, SEO

\n View Project\n
\n
\n
\n \"Portfolio\n
\n

Project Title Three

\n

Marketing, Content

\n View Project\n
\n
\n
\n
\n
\n\n
\n
\n
\n

Get In Touch

\n

We'd love to hear from you!

\n
\n
\n
\n

Email: info@yourbrand.com

\n

Phone: +1 (123) 456-7890

\n

Address: 123 Business Rd, Suite 400, City, State 12345

\n
\n \"Facebook\"\n \"Twitter\"\n \"LinkedIn\"\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n

\n
\n
\n
\n
\n
\n\n \n\n \n\n\n```\n\n---\n\n### 3. Generated CSS Code (`css/style.css`)\n\nThis stylesheet provides the visual design, layout, and responsiveness for your website.\n\n```css\n/* General Reset & Base Styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n:root {\n --primary-color: #007bff; /* Blue */\n --secondary-color: #6c757d; /* Gray */\n --tertiary-color: #28a745; /* Green */\n --dark-color: #343a40;\n --light-color: #f8f9fa;\n --white-color: #ffffff;\n --text-color: #333;\n --heading-color: #222;\n --border-color: #dee2e6;\n --font-primary: 'Montserrat', sans-serif;\n --font-secondary: 'Open Sans', sans-serif;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: var(--font-secondary);\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--white-color);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\na {\n color: var(--primary-color);\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\nul {\n list-style: none;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\n/* Headings */\nh1, h2, h3, h4, h5, h6 {\n font-family: var(--font-primary);\n color: var(--heading-color);\n margin-bottom: 0.5em;\n line-height: 1.2;\n}\n\nh1 { font-size: 2.5em; }\nh2 { font-size: 2em; }\nh3 { font-size: 1.75em; }\nh4 { font-size: 1.5em; }\n\n/* Buttons */\n.btn {\n display: inline-block;\n background: var(--primary-color);\n color: var(--white-color);\n padding: 12px 25px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1em;\n font-weight: 600;\n text-align: center;\n text-decoration: none;\n transition: background-color 0.3s ease, transform 0.2s ease;\n}\n\n.btn:hover {\n background-color: darken(var(--primary-color), 10%); /* Placeholder for SCSS darken */\n background-color: #0056b3; /* Example darker blue */\n transform: translateY(-2px);\n text-decoration: none;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n}\n.btn-secondary {\n background-color: var(--secondary-color);\n}\n.btn-tertiary {\n\n## Website Generation Complete & Ready for Deployment!\n\nCongratulations! Your complete website code (HTML, CSS, JavaScript) has been successfully generated and is now ready for deployment. Below, you will find the comprehensive code, instructions for live preview, and various deployment options to get your website online.\n\n---\n\n## 1. Your Generated Website Code\n\nThis section contains the full, production-ready code for your website. It's structured into separate files for HTML, CSS, and JavaScript, following best practices for maintainability and performance.\n\n### 1.1 `index.html` (Main Structure)\n\nThis is the core HTML file that defines the structure and content of your website.\n\n```html\n\n\n\n \n \n [Your Company Name] - Professional Website\n \n \n \n \n\n\n
\n
\n [Your Company Name]\n \n
\n
\n\n
\n
\n
\n

Welcome to [Your Company Name]

\n

Innovative Solutions for a Digital World.

\n Discover Our Services\n
\n
\n\n
\n
\n

About Us

\n
\n

At [Your Company Name], we are dedicated to delivering exceptional quality and innovative solutions. With years of experience and a passion for excellence, we empower businesses to thrive in today's competitive landscape.

\n

Our team of experts is committed to understanding your unique needs and providing tailored strategies that drive success and foster long-term growth. We believe in transparency, collaboration, and measurable results.

\n
\n
\n
\n\n
\n
\n

Our Services

\n
\n
\n

Web Development

\n

Crafting responsive, high-performance websites tailored to your business goals.

\n
\n
\n

Digital Marketing

\n

Boosting your online presence through SEO, social media, and content strategies.

\n
\n
\n

UI/UX Design

\n

Creating intuitive and engaging user experiences that delight your customers.

\n
\n
\n

Cloud Solutions

\n

Scalable and secure cloud infrastructure to support your evolving business needs.

\n
\n
\n
\n
\n\n
\n
\n

Our Portfolio

\n

Explore some of our recent projects that showcase our expertise and commitment to excellence.

\n
\n
\n \"Project\n

Project Alpha

\n

A cutting-edge e-commerce platform.

\n
\n
\n \"Project\n

Project Beta

\n

Responsive corporate website redesign.

\n
\n
\n \"Project\n

Project Gamma

\n

Mobile application UI/UX overhaul.

\n
\n
\n
\n
\n\n
\n
\n

Contact Us

\n

Ready to start your next project? Get in touch with our team today!

\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n
\n

Email: info@yourcompany.com

\n

Phone: +1 (234) 567-890

\n

Address: 123 Business Rd, Suite 400, City, State, ZIP

\n
\n
\n
\n
\n\n \n\n \n\n\n```\n\n### 1.2 `style.css` (Visual Styling)\n\nThis CSS file provides the styling for your website, ensuring a clean, modern, and responsive design across various devices.\n\n```css\n/* General Body & Typography */\n:root {\n --primary-color: #007bff; /* Blue */\n --secondary-color: #6c757d; /* Grey */\n --accent-color: #28a745; /* Green */\n --dark-bg: #343a40; /* Dark Grey */\n --light-bg: #f8f9fa; /* Light Grey */\n --text-color: #333;\n --white-color: #ffffff;\n --font-primary: 'Roboto', sans-serif;\n --font-secondary: 'Montserrat', sans-serif;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: var(--font-primary);\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--white-color);\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: var(--font-secondary);\n color: var(--dark-bg);\n margin-bottom: 0.8em;\n line-height: 1.2;\n}\n\nh1 { font-size: 2.8em; }\nh2 { font-size: 2.2em; }\nh3 { font-size: 1.8em; }\n\np {\n margin-bottom: 1em;\n}\n\na {\n color: var(--primary-color);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\na:hover {\n color: var(--accent-color);\n}\n\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\n/* Buttons */\n.btn {\n display: inline-block;\n padding: 12px 25px;\n border-radius: 5px;\n font-weight: 700;\n text-align: center;\n transition: background-color 0.3s ease, color 0.3s ease;\n cursor: pointer;\n border: none;\n}\n\n.btn-primary {\n background-color: var(--primary-color);\n color: var(--white-color);\n}\n\n.btn-primary:hover {\n background-color: darken(var(--primary-color), 10%); /* Placeholder for actual darken function */\n background-color: #0056b3; /* Darker blue */\n}\n\n.btn-secondary {\n background-color: var(--secondary-color);\n color: var(--white-color);\n}\n\n.btn-secondary:hover {\n background-color: darken(var(--secondary-color), 10%); /* Placeholder for actual darken function */\n background-color: #545b62; /* Darker grey */\n}\n\n/* Header */\n.main-header {\n background-color: var(--white-color);\n padding: 15px 0;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n position: sticky;\n top: 0;\n z-index: 1000;\n}\n\n.main-header .container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-family: var(--font-secondary);\n font-size: 1.8em;\n font-weight: 700;\n color: var(--dark-bg);\n}\n\n.main-nav .nav-menu {\n list-style: none;\n display: flex;\n}\n\n.main-nav .nav-menu li {\n margin-left: 30px;\n}\n\n.main-nav .nav-menu a {\n color: var(--text-color);\n font-weight: 500;\n padding: 5px 0;\n position: relative;\n}\n\n.main-nav .nav-menu a.active,\n.main-nav .nav-menu a:hover {\n color: var(--primary-color);\n}\n\n.main-nav .nav-menu a::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n width: 0;\n height: 2px;\n background-color: var(--primary-color);\n transition: width 0.3s ease;\n}\n\n.main-nav .nav-menu a.active::after,\n.main-nav .nav-menu a:hover::after {\n width: 100%;\n}\n\n.nav-toggle {\n display: none;\n background: none;\n border: none;\n font-size: 1.5em;\n cursor: pointer;\n flex-direction: column;\n justify-content: space-around;\n width: 30px;\n height: 25px;\n padding: 0;\n}\n\n.nav-toggle span {\n display: block;\n width: 100%;\n height: 3px;\n background-color: var(--text-color);\n transition: all 0.3s ease;\n}\n\n/* Hero Section */\n.hero-section {\n background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/1920x1080/333/fff?text=Hero+Image') no-repeat center center/cover;\n color: var(--white-color);\n text-align: center;\n padding: 100px 0;\n min-height: 500px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.hero-section h1 {\n color: var(--white-color);\n font-size: 3.5em;\n margin-bottom: 20px;\n}\n\n.hero-section p {\n font-size: 1.3em;\n margin-bottom: 30px;\n}\n\n/* Sections */\n.section-padding {\n padding: 80px 0;\n}\n\n.bg-light {\n background-color: var(--light-bg);\n}\n\n.bg-dark {\n background-color: var";function phTab(btn,name){document.querySelectorAll(".ph-panel").forEach(function(el){el.classList.remove("active");});document.querySelectorAll(".ph-tab").forEach(function(el){el.classList.remove("active");el.classList.add("inactive");});var p=document.getElementById("panel-"+name);if(p)p.classList.add("active");btn.classList.remove("inactive");btn.classList.add("active");if(name==="preview"){var fr=document.getElementById("ph-preview-frame");if(fr&&!fr.dataset.loaded){if(_phIsHtml){fr.srcdoc=_phCode;}else{var vc=document.getElementById("panel-content");fr.srcdoc=vc?""+vc.innerHTML+"":"

No content

";}fr.dataset.loaded="1";}}}function phCopyCode(){navigator.clipboard.writeText(_phCode).then(function(){var b=document.getElementById("tab-code");if(b){var o=b.innerHTML;b.innerHTML=' Copied!';setTimeout(function(){b.innerHTML=o;},2000);}});}function phCopyAll(){navigator.clipboard.writeText(_phAll).then(function(){alert("Content copied to clipboard!");});}function phDownload(){var content=_phCode||_phAll;if(!content){alert("No content to download.");return;}var fn=_phFname;if(!_phCode&&fn.endsWith(".txt"))fn=fn.replace(/\.txt$/,".md");var a=document.createElement("a");a.href="data:text/plain;charset=utf-8,"+encodeURIComponent(content);a.download=fn;a.click();}function phDownloadZip(){ var lbl=document.getElementById("ph-zip-lbl"); if(lbl)lbl.textContent="Preparing\u2026"; /* ===== HELPERS ===== */ function cc(s){ return s.replace(/[_\-\s]+([a-z])/g,function(m,c){return c.toUpperCase();}) .replace(/^[a-z]/,function(m){return m.toUpperCase();}); } function pkgName(app){ return app.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_+|_+$/g,"")||"my_app"; } function slugTitle(app){ return app.replace(/_/g," "); } /* Generic code block extractor. Finds marker comments like: // lib/main.dart or # lib/main.dart or ## lib/main.dart and collects lines until the next marker. Also strips markdown fences (\`\`\`lang ... \`\`\`) from each block. */ function extractFiles(txt, pathRe){ var files={}, cur=null, buf=[]; function flush(){ if(cur&&buf.length){ files[cur]=buf.join("\n").trim(); } } txt.split("\n").forEach(function(line){ var m=line.trim().match(pathRe); if(m){ flush(); cur=m[1]; buf=[]; return; } if(cur) buf.push(line); }); flush(); // Strip \`\`\`...\`\`\` fences from each file Object.keys(files).forEach(function(k){ files[k]=files[k].replace(/^\`\`\`[a-z]*\n?/,"").replace(/\n?\`\`\`$/,"").trim(); }); return files; } /* General path extractor that covers most languages */ function extractCode(txt){ var re=/^(?:\/\/|#|##)\s*((?:lib|src|test|tests|Sources?|app|components?|screens?|views?|hooks?|routes?|store|services?|models?|pages?)\/[\w\/\-\.]+\.\w+|pubspec\.yaml|Package\.swift|angular\.json|babel\.config\.(?:js|ts)|vite\.config\.(?:js|ts)|tsconfig\.(?:json|app\.json)|app\.json|App\.(?:tsx|jsx|vue|kt|swift)|MainActivity(?:\.kt)?|ContentView\.swift)/i; return extractFiles(txt, re); } /* Detect language from combined code+panel text */ function detectLang(code, panel){ var t=(code+" "+panel).toLowerCase(); if(t.indexOf("import 'package:flutter")>=0||t.indexOf('import "package:flutter')>=0) return "flutter"; if(t.indexOf("statelesswidget")>=0||t.indexOf("statefulwidget")>=0) return "flutter"; if((t.indexOf(".dart")>=0)&&(t.indexOf("pubspec")>=0||t.indexOf("flutter:")>=0)) return "flutter"; if(t.indexOf("react-native")>=0||t.indexOf("react_native")>=0) return "react-native"; if(t.indexOf("stylesheet.create")>=0||t.indexOf("view, text, touchableopacity")>=0) return "react-native"; if(t.indexOf("expo(")>=0||t.indexOf("\"expo\":")>=0||t.indexOf("from 'expo")>=0) return "react-native"; if(t.indexOf("import swiftui")>=0||t.indexOf("import uikit")>=0) return "swift"; if(t.indexOf(".swift")>=0&&(t.indexOf("func body")>=0||t.indexOf("@main")>=0||t.indexOf("var body: some view")>=0)) return "swift"; if(t.indexOf("import android.")>=0||t.indexOf("package com.example")>=0) return "kotlin"; if(t.indexOf("@composable")>=0||t.indexOf("fun mainactivity")>=0||(t.indexOf(".kt")>=0&&t.indexOf("androidx")>=0)) return "kotlin"; if(t.indexOf("@ngmodule")>=0||t.indexOf("@component")>=0) return "angular"; if(t.indexOf("angular.json")>=0||t.indexOf("from '@angular")>=0) return "angular"; if(t.indexOf(".vue")>=0||t.indexOf("