Embed

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webdesign</title>

  
  <link href="https://fonts.cdnfonts.com/css/aquire" rel="stylesheet">
  
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">

  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden; /* Voorkomt scrollbalken */
    }

    .webdesign-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100vw; /* Volledige breedte van het scherm */
      height: 100vh; /* Volledige hoogte van het scherm */
      background-color: black;
      text-align: center; /* Centraal uitgelijnde tekst */
      color: white;
    }

    .animated-text {
      font-family: 'Aquire', sans-serif;
      font-weight: 400;
      font-size: 8vw; /* Kleinere tekstgrootte voor "Webdesign" */
      color: white;
      margin: 0;
      opacity: 0;
      transform: scale(0.8);
      animation: solidAnimation 2s ease-in-out forwards;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.7),
                   0 0 40px rgba(255, 255, 255, 0.5);
    }

    @keyframes solidAnimation {
      0% {
        transform: scale(0);
        opacity: 0;
        text-shadow: 0 0 0px rgba(255, 255, 255, 0);
      }
      50% {
        transform: scale(1.1);
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 1),
                     0 0 60px rgba(255, 255, 255, 1);
      }
      100% {
        transform: scale(1);
        opacity: 1;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.2),
                     0 0 20px rgba(255, 255, 255, 0.1);
      }
    }

    .sub-text {
      font-family: 'Raleway', sans-serif;
      font-size: 1.6rem; /* Kleinere tekstgrootte voor beschrijving */
      color: white;
      margin-top: 3vh;
      opacity: 0;
      transform: translateY(50px);
      animation: slideIn 2s ease forwards;
      animation-delay: 2s; /* Start na de Webdesign animatie */
    }

    @keyframes slideIn {
      0% {
        opacity: 0;
        transform: translateY(50px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Aanpassingen voor grotere schermen */
    @media (min-width: 1024px) {
      .animated-text {
        font-size: 6vw;
      }
      .sub-text {
        font-size: 1.4rem;
        margin-top: 8vh;
      }
    }

    /* Aanpassing voor kleine schermen */
    @media (max-width: 767px) {
      .webdesign-section {
        padding-bottom: 10vh;
      }

      .animated-text {
        font-size: 10vw;
      }

      .sub-text {
        margin-top: 5vh;
        font-size: 1.2rem;
      }
    }

  </style>
</head>
<body>

  
  <section class="webdesign-section">
    <h1 class="animated-text">CONTACT</h1>
    <p class="sub-text">Neem vrijblijvend contact met ons op.</p>
  </section>

</body>
</html>

Contact form

<h3>Neem Vrijblijvend Contact op</h3>
<p>Vul onderstaand formulier in en wij nemen zo snel mogelijk contact met je op. Wij kijken ernaar uit om jou te helpen!</p>