Editor HTML Online | CodeCanvas - Ferramenta de Desenvolvimento Web Gratuita

902 codex

Abrir no Editor Video Publique Seu Código

Editor HTML Online | CodeCanvas - Ferramenta de Desenvolvimento Web Gratuita

Recomendado

28 March 2025

CodePen Home Cartões Móveis Esboçados

19 May 2025

menu da barra de navegação

26 June 2025

Site de comércio eletrônico HTML, Tailwind CSS, compras

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>

Recomendado

CodePen Home Cartões Móveis Esboçados

menu da barra de navegação

Site de comércio eletrônico HTML, Tailwind CSS, compras

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS