Online HTML Editor | CodeCanvas - Free Web Dev Tool

1,143 codex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeCanvas - The Ultimate HTML Editor</title>
    <style>
        /* Basic CSS for a clean landing page look */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

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

header {
            background-color: #2c3e50; /* Dark Blue */
            color: white;
            padding: 1rem 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

header .logo {
            font-size: 2em;
            font-weight: bold;
            color: white;
            text-decoration: none;
            display: block;
            margin-bottom: 10px;
        }

nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            gap: 25px;
        }

nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

nav ul li a:hover {
            color: #3498db; /* Bright Blue */
        }

.hero {
            background: linear-gradient(135deg, #3498db, #2980b9); /* Blue gradient */
            color: white;
            text-align: center;
            padding: 6rem 20px;
            margin-bottom: 40px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

.hero h1 {
            font-size: 3.5em;
            margin-bottom: 20px;
            line-height: 1.2;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

.hero p {
            font-size: 1.3em;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

.cta-button {
            display: inline-block;
            background-color: #2ecc71; /* Green */
            color: white;
            padding: 18px 35px;
            text-decoration: none;
            border-radius: 8px;
            font-size: 1.2em;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

.cta-button:hover {
            background-color: #27ae60; /* Darker Green */
            transform: translateY(-2px);
        }

.features-section {
            padding: 40px 0;
            text-align: center;
        }

.features-section h2 {
            font-size: 2.5em;
            color: #2c3e50;
            margin-bottom: 40px;
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

.feature-item {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 30px;
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

.feature-item h3 {
            color: #3498db;
            font-size: 1.8em;
            margin-top: 0;
            margin-bottom: 15px;
        }

.feature-item p {
            font-size: 1.1em;
            color: #555;
        }

.call-to-action-bottom {
            background-color: #f39c12; /* Orange */
            color: white;
            text-align: center;
            padding: 4rem 20px;
            margin-top: 50px;
        }

.call-to-action-bottom h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }

.call-to-action-bottom p {
            font-size: 1.2em;
            margin-bottom: 30px;
        }

footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 30px 0;
            margin-top: 0;
        }

footer p {
            margin: 0;
            font-size: 0.9em;
        }

footer a {
            color: #3498db;
            text-decoration: none;
            transition: color 0.3s ease;
        }

footer a:hover {
            color: white;
        }

/* Responsive adjustments */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5em;
            }
            .hero p {
                font-size: 1em;
            }
            .cta-button {
                padding: 15px 25px;
                font-size: 1em;
            }
            .features-section h2, .call-to-action-bottom h2 {
                font-size: 2em;
            }
            nav ul {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <a href="#" class="logo">CodeCanvas</a>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Demo</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<main>
        <section class="hero">
            <div class="container">
                <h1>Your HTML, Your Masterpiece. Crafted with Ease.</h1>
                <p>CodeCanvas is the intuitive online HTML editor designed for developers, designers, and enthusiasts. Build stunning web pages with live preview, smart suggestions, and powerful collaboration tools.</p>
                <a href="#" class="cta-button">Start Coding Now - It's Free!</a>
            </div>
        </section>

<section class="features-section">
            <div class="container">
                <h2>Unleash Your Creativity with Powerful Features</h2>
                <div class="features-grid">
                    <div class="feature-item">
                        <h3>Real-time Live Preview</h3>
                        <p>See your HTML, CSS, and JavaScript changes rendered instantly as you type. No more constant refreshing!</p>
                    </div>
                    <div class="feature-item">
                        <h3>Intelligent Syntax Highlighting</h3>
                        <p>Our editor automatically color-codes your code, making it readable, organized, and easier to debug.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Auto-completion & Snippets</h3>
                        <p>Speed up your workflow with smart code suggestions and a library of pre-built HTML/CSS/JS snippets.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Error Detection & Linting</h3>
                        <p>Catch syntax errors and potential issues before they become problems with integrated linting.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Responsive Design View</h3>
                        <p>Test your website's responsiveness across various screen sizes and devices right within the editor.</p>
                    </div>
                    <div class="feature-item">
                        <h3>Cloud Save & Collaboration</h3>
                        <p>Save your projects securely to the cloud and collaborate with team members in real-time.</p>
                    </div>
                </div>
            </div>
        </section>

<section class="call-to-action-bottom">
            <div class="container">
                <h2>Ready to Transform Your Web Development?</h2>
                <p>Join thousands of happy users who are building amazing things with CodeCanvas every day.</p>
                <a href="#" class="cta-button">Get Started for Free</a>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <p>© 2023 CodeCanvas. All rights reserved.</p>
            <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">Support</a></p>
        </div>
    </footer>
</body>
</html>

CSS

Online HTML Editor | CodeCanvas - Free Web Dev Tool

Recommended