Untitled

from IPython.core.display import display, HTML

# HTML structure for the portfolio website
portfolio_website = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WordPress Development Services</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: #333;
        }
        header {
            background-color: #0073aa;
            color: #fff;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header a {
            color: #fff;
            text-decoration: none;
            margin-left: 1rem;
        }
        .hero {
            text-align: center;
            padding: 4rem 2rem;
            background: #f4f4f4;
        }
        .hero h1 {
            font-size: 2.5rem;
        }
        .hero p {
            margin: 1rem 0;
            font-size: 1.2rem;
        }
        .section {
            padding: 2rem;
            text-align: center;
        }
        .services, .portfolio {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .service-item, .portfolio-item {
            margin: 1rem;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            width: 300px;
        }
        .contact form {
            max-width: 400px;
            margin: 0 auto;
        }
        .contact input, .contact textarea, .contact button {
            width: 100%;
            margin: 0.5rem 0;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1rem 0;
            margin-top: 2rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    <section class="hero">
        <h1>Custom WordPress Website Development</h1>
        <p>Delivering professional, customized, and responsive WordPress websites.</p>
    </section>
    <section id="about" class="section">
        <h2>About Me</h2>
        <p>I am a skilled WordPress developer with years of experience creating dynamic websites tailored to client needs.</p>
    </section>
    <section id="services" class="section">
        <h2>Services</h2>
        <div class="services">
            <div class="service-item">
                <h3>Custom Websites</h3>
                <p>Fully customized WordPress websites to meet your unique requirements.</p>
            </div>
            <div class="service-item">
                <h3>Theme Customization</h3>
                <p>Personalized theme designs that reflect your brand identity.</p>
            </div>
            <div class="service-item">
                <h3>Plugin Development</h3>
                <p>Custom plugins to extend the functionality of your website.</p>
            </div>
        </div>
    </section>
    <section id="portfolio" class="section">
        <h2>Portfolio</h2>
        <div class="portfolio">
            <div class="portfolio-item">
                <h3>Project 1</h3>
                <p>Custom e-commerce website.</p>
            </div>
            <div class="portfolio-item">
                <h3>Project 2</h3>
                <p>Business portfolio site.</p>
            </div>
        </div>
    </section>
    <section id="contact" class="section contact">
        <h2>Contact Me</h2>
        <form>
            <input type="text" placeholder="Your Name" required>
            <input type="email" placeholder="Your Email" required>
            <textarea placeholder="Your Message" rows="4" required></textarea>
            <button type="submit">Send Message</button>
        </form>
    </section>
    <footer>
        <p>&copy; 2024 My Portfolio. All rights reserved.</p>
    </footer>
</body>
</html>
"""

# Display the HTML content as a preview
display(HTML(portfolio_website))
Editor is loading...