Blog Example Blue

Tech Blog Moderno

TEMPLATE

Código

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enepta Tech</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            background-color: #121212;
            color: white;
            font-family: 'Arial', sans-serif;
        }

        .navbar {
            padding: 15px;
            background-color: #0b3d91;
        }

        .navbar-brand {
            font-size: 28px;
            font-weight: bold;
            color: white;
        }

        .hero-section {
            background-color: #0a2a62;
            padding: 100px 0;
            text-align: center;
        }

        .hero-section h1 {
            font-size: 50px;
            color: white;
            font-weight: bold;
        }

        .hero-section p {
            font-size: 18px;
            color: #eaeaea;
            margin-top: 15px;
        }

        .feature-section {
            padding: 50px 0;
        }

        .feature-card {
            background-color: #0c4a9e;
            padding: 20px;
            border-radius: 10px;
            transition: transform 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-card h4 {
            color: white;
            font-size: 24px;
        }

        .feature-card p {
            color: #ccc;
        }

        .cta-section {
            background-color: #0b3d91;
            color: white;
            text-align: center;
            padding: 60px 20px;
            border-radius: 10px;
        }

        .cta-section h2 {
            font-size: 40px;
        }

        .cta-section p {
            font-size: 18px;
            margin-bottom: 30px;
        }

        .cta-section .btn-primary {
            background-color: #1c6ef2;
            border: none;
            padding: 15px 30px;
            font-size: 18px;
            transition: background-color 0.3s;
        }

        .cta-section .btn-primary:hover {
            background-color: #1252c7;
        }

        .testimonial-section {
            padding: 50px 0;
            background-color: #101010;
        }

        .testimonial-card {
            background-color: #0b3d91;
            padding: 30px;
            border-radius: 10px;
            color: white;
            text-align: center;
        }

        .testimonial-card p {
            font-size: 18px;
            color: #ccc;
        }

        .testimonial-card h5 {
            margin-top: 20px;
            font-size: 20px;
            color: white;
        }

        .footer {
            background-color: #0a2a62;
            color: white;
            padding: 20px 0;
            text-align: center;
        }

        .footer a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
            font-size: 16px;
        }

        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>

    <!-- Navbar -->
    <div class="navbar">
        <a href="https://enepta.com" class="navbar-brand">Enepta Tech</a>
    </div>

    <!-- Hero Section -->
    <div class="hero-section">
        <h1>Inovação e Tecnologia para o Futuro</h1>
        <p>Acompanhe as últimas tendências e novidades em tecnologia, ciência e inovação.</p>
    </div>

    <!-- Features Section -->
    <div class="container feature-section">
        <div class="row text-center">
            <div class="col-md-4">
                <div class="feature-card">
                    <h4>Artificial Intelligence</h4>
                    <p>Explore os avanços mais recentes em inteligência artificial e como ela está transformando o mundo.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <h4>Blockchain</h4>
                    <p>Descubra como a tecnologia blockchain está revolucionando a forma como fazemos negócios.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <h4>Cybersecurity</h4>
                    <p>Entenda as novas ameaças digitais e as soluções para proteger seus dados e sistemas.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action Section -->
    <div class="container cta-section">
        <h2>Participe da Revolução Digital!</h2>
        <p>Junte-se a nossa comunidade e fique por dentro de tudo sobre tecnologia e inovação.</p>
        <button class="btn btn-primary">Cadastre-se agora</button>
    </div>

    <!-- Testimonial Section -->
    <div class="container testimonial-section">
        <div class="row text-center">
            <div class="col-md-6 mb-4">
                <div class="testimonial-card">
                    <p>"A Enepta Tech me ajudou a estar sempre atualizado com as últimas tendências tecnológicas."</p>
                    <h5>Maria Silva, Desenvolvedora</h5>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="testimonial-card">
                    <p>"A melhor fonte de conhecimento sobre inovações e desenvolvimento de novas soluções."</p>
                    <h5>João Oliveira, Engenheiro de Software</h5>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        <p>&copy; 2024 Enepta Tech. Todos os direitos reservados.</p>
        <a href="#">Termos de Serviço</a>
        <a href="#">Política de Privacidade</a>
    </div>

</body>

</html>