Editor HTML en línea | CodeCanvas: herramienta gratuita para desarrollo web

1,388 codex

Abrir en el editor Publica tu código

Editor HTML en línea | CodeCanvas: herramienta gratuita para desarrollo web

Recomendado

31 January 2026

Cargador WebGL de Tattletail Unity con barra de progreso

19 October 2025

Transformación de formas de partículas con controles en Three.js

31 March 2026

HTML: Insertar vídeo de YouTube con efecto de televisión

HTML

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