kontaktuj nas

by Petr Haluza

HTML

<main id="contacts-page">
    <div class="container">
        <h1>Čau</h1>

    
      <span class="big-square"></span>
      
      <div class="form">
        <div class="contact-info">
          <h3 class="title">Pojďme se spojit</h3>
          <div class="info">
            <p class="text">Pokud nás chceš kontaktovat, upřednostňujeme e-mailovou komunikaci.</p>
            <div class="information">
              <p><a href="mailto:[email protected]">[email protected]</a></p>
            </div>
            <p class="text">Rádi se spojíme i po telefonu, ale věz, že můžeme být právě třeba na pohovoru s tvým budoucím kolegou.</p>
            <div class="information">
              <p><a href="tel:+420725631430">725 631 430</a></p>
            </div>
          </div>
        </div>

        <div class="contact-form">
          <form action="index.html" autocomplete="off">
            <h3 class="title">Zavoláme ti zpět</h3>
              <div class="input-container">
              <input type="tel" name="phone" class="input" />
              <label for="">Telefon</label><span>Telefon</span>
            </div>
            <div class="input-container">
              <input type="text" name="name" class="input" />
              <label for="">Jméno</label><span>Jméno</span>
            </div>
            <div class="input-container">
              <input type="email" name="email" class="input" />
              <label for="">E-mail</label><span>E-mail</span>
            </div>

            <div class="input-container textarea">
              <textarea name="message" class="input" placeholder="Napiš např. kdy ti můžeme zavolat.."></textarea>
              <label for=""></label>
              
            </div>
            <input type="submit" value="Odeslat" class="btn" />
          </form>
        </div>
				
      </div>
    </div>
</main>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
input,
textarea {
  font-family: "Poppins", sans-serif;
}

.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  background-color: #fafafa;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


#contacts-page .form { width: 100%; max-width: 820px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1); z-index: 1000; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr);}
#contacts-page .contact-form { background-color: #1abc9c; position: relative;}
#contacts-page .contact-form:before { content: ""; position: absolute; width: 26px; height: 26px; background-color: #1abc9c; transform: rotate(45deg); top: 50px; left: -13px;}

#contacts-page form { padding: 2.3rem 2.2rem; z-index: 10; overflow: hidden; position: relative;}
#contacts-page .title { color: #fff; font-weight: 500; font-size: 1.5rem; line-height: 1; margin-bottom: 0.7rem;}
#contacts-page .input-container { position: relative; margin: 1rem 0;}
#contacts-page .input { width: 100%; outline: none; border: 2px solid #fafafa; background: none; padding: 0.6rem 1.2rem; color: #fff; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.5px; border-radius: 5px; transition: 0.3s;}
#contacts-page textarea.input { padding: 0.8rem 1.2rem; min-height: 150px; border-radius: 5px; resize: none; overflow-y: auto;}
#contacts-page .input-container label { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); padding: 0 0.4rem; color: #fafafa; font-size: 0.9rem; font-weight: 400; pointer-events: none; z-index: 1000; transition: 0.5s;}
#contacts-page .input-container.textarea label { top: 1rem; transform: translateY(0);}
#contacts-page .btn { padding: 0.6rem 1.3rem; background-color: #fff; border: 2px solid...

JavaScript

const inputs = document.querySelectorAll(".input");

function focusFunc() {
  let parent = this.parentNode;
  parent.classList.add("focus");
}

function blurFunc() {
  let parent = this.parentNode;
  if (this.value == "") {
    parent.classList.remove("focus");
  }
}

inputs.forEach((input) => {
  input.addEventListener("focus", focusFunc);
  input.addEventListener("blur", blurFunc);
});