Modern Landing Page

Modern landing page

TEMPLATE

Código

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page Moderna</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
    }
    .hero {
      background-color: #343a40; 
      color: white;
      padding: 100px 0;
      text-align: center;
    }
    .features {
      padding: 60px 0;
    }
    .feature-icon {
      font-size: 40px;
      color: #007bff;
    }
    .testimonial {
      background-color: #e9ecef;
      padding: 40px;
      border-radius: 8px;
    }
    .footer {
      background-color: #343a40;
      color: white;
      padding: 20px 0;
      text-align: center;
    }
    @media (max-width: 768px) {
      .hero {
        padding: 50px 0;
      }
    }
  </style>
</head>
<body>
  <header class="hero">
    <div class="container">
      <h1>Bem-vindo à Nossa Plataforma</h1>
      <p>Transforme suas ideias em realidade com nossa solução inovadora.</p>
      <a href="#" class="btn btn-primary btn-lg">Comece Agora</a>
    </div>
  </header>

  <section class="features text-center">
    <div class="container">
      <h2>Características Principais</h2>
      <div class="row">
        <div class="col-md-4">
          <div class="feature-icon">icon</div>
          <h3>Rápido e Eficiente</h3>
          <p>Desenvolva projetos em tempo recorde com nossa tecnologia de ponta.</p>
        </div>
        <div class="col-md-4">
          <div class="feature-icon">icon</div>
          <h3>Segurança Garantida</h3>
          <p>Protegemos seus dados com os mais altos padrões de segurança.</p>
        </div>
        <div class="col-md-4">
          <div class="feature-icon">icon</div>
          <h3>Análise de Dados</h3>
          <p>Obtenha insights valiosos para impulsionar seus negócios.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="testimonials text-center">
    <div class="container">
      <h2>O que nossos clientes dizem</h2>
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="testimonial">
            <p>"Esta plataforma mudou a forma como trabalho. É intuitiva e poderosa!"</p>
            <p><strong>- João Silva</strong></p>
          </div>
        </div>
        <div class="col-md-6 mx-auto">
          <div class="testimonial">
            <p>"Recomendo a todos! O suporte é excelente e a interface é linda."</p>
            <p><strong>- Maria Oliveira</strong></p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <footer class="footer">
    <div class="container">
      <p>&copy; 2024 Nossa Empresa. Todos os direitos reservados.</p>
      <a href="#" class="text-white">Política de Privacidade</a> | 
      <a href="#" class="text-white">Termos de Serviço</a>
    </div>
  </footer>

  <!-- Bootstrap JS and Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>