Template Landing

inicio de uma 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>Enepta - Softwares</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #0a0528;
      font-family: 'Arial', sans-serif;
      color: #fff;
    }

    .navbar {
      background-color: transparent;
    }

    .navbar-nav .nav-link {
      color: #fff;
      text-transform: uppercase;
      margin-right: 20px;
    }

    .hero-section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      background: radial-gradient(circle at top right, #fff 20%, transparent 20%) no-repeat;
    }

    .hero-content {
      max-width: 500px;
    }

    .hero-content h1 {
      font-size: 2.5rem;
      font-weight: 700;
    }

    .hero-content p {
      font-size: 1.1rem;
      margin-top: 20px;
    }

    .btn-custom {
      border: 1px solid #fff;
      border-radius: 50px;
      padding: 10px 30px;
      color: #fff;
      background: transparent;
      text-transform: uppercase;
      margin-top: 20px;
    }

    .btn-custom:hover {
      background-color: #fff;
      color: #000;
    }

    .router-img {
      max-width: 350px;
    }

    .navbar-brand {
      font-weight: bold;
      font-size: 1.5rem;
      color: #fff;
    }

    /* Ajustes para telas menores */
    @media (max-width: 768px) {
      .hero-section {
        justify-content: center;
        padding: 20px;
        text-align: center;
      }

      .hero-content {
        max-width: 100%;
        padding: 0;
      }

      .hero-content h1 {
        font-size: 2rem;
      }

      .router-img {
        max-width: 300px;
        margin-top: 30px;
      }

      .navbar-nav {
        flex-direction: row;
      }

      .navbar-toggler {
        background-color: #fff;
      }
    }

    @media (max-width: 480px) {
      .hero-content h1 {
        font-size: 1.8rem;
      }

      .router-img {
        max-width: 250px;
      }
    }
  </style>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light">
  <div class="container">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Serviços</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contato</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Hero Section -->
<section class="hero-section">
  <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center">
    <div class="hero-content">
      <h1>enepta <br> softwares</h1>
      <p>Lorem ipsum dolor sit amet consectetur. Arcu vitae sed tempus quis nisl arcu nibh in.</p>
      <a href="https://enepta.com" class="btn btn-custom">Saiba mais</a>
    </div>
    <div class="router-image">
      <img src="https://via.placeholder.com/350x250.png" alt="enepta" class="router-img">
    </div>
  </div>
</section>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>