Online HTML Editor | CodeCanvas - Free Web Dev Tool

Open In Editor Publish Your Code

<!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>

Online HTML Editor | CodeCanvas - Free Web Dev Tool

Recommended

HTML Login Form Template

Animated Login Form HTML CSS

Couture Atelier Dashboard HTML Template

HTML

CSS

JS

Recommended

HTML Login Form Template

Animated Login Form HTML CSS

Couture Atelier Dashboard HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS