Request a demo

by sungsoonz

HTML

<div class="main-container">
  <section class="brand-sidebar">

  </section>
  <section class="form-content">

    <header>
      <h1>Request a demo</h1>
      <p>Please fill in your details below and one of our account executives will get in touch.</p>
    </header>
    <form action="https://formspree.io/f/xgedwedd" method="POST">

      <fieldset>
        <label for="firstName">First name</label>
        <input type="text" name="firstName" id="firstName" tabindex="1" class="form-control" autocorrect="off" autocapitalize="off" placeholder="Joe" required>
      </fieldset>

      <fieldset>
        <label for="lastName">Last name</label>
        <input type="text" name="lastName" id="lastName" tabindex="2" class="form-control" placeholder="Doe" required>
      </fieldset>

      <fieldset>
        <label for="email">Email</label>
        <input type="text" name="email" id="email" tabindex="3" class="form-control" placeholder="[email protected]" required>
      </fieldset>

      <fieldset>
        <label for="companyName">Company name</label>
        <input type="text" name="companyName" id="companyName" tabindex="4" class="form-control" placeholder="ACME" required>
      </fieldset>

      <fieldset>
        <label for="country">Country</label>
        <select name="country" id="country" tabindex="5" class="form-control">
          <option value="Afghanistan">Afghanistan</option>
          <option value="Åland Islands">Åland Islands</option>
          <option value="Albania">Albania</option>
          <option value="Algeria">Algeria</option>
          <option value="American Samoa">American Samoa</option>
          <option value="Andorra">Andorra</option>
          <option value="Angola">Angola</option>
          <option value="Anguilla">Anguilla</option>
          <option value="Antarctica">Antarctica</option>
          <option value="Antigua and Barbuda">Antigua and Barbuda</option>
          <option value="Argentina">Argentina</option>
          <option...

CSS

html,
body {
  margin: 0;
  height: 100%;
}

form {
  max-width: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  line-height: 1;
  vertical-align: baseline
}

form .form-control {
  width: 100%;
  border: 0;
  background: #EEF6FB;
  padding: 0.7rem 0.7rem;
  border-radius: 4px;
  box-sizing: border-box;
}

form label {
  display: block;
  margin-bottom: 0.5rem;
}

form .full-width {
  grid-column: 1 / 3;
}



.main-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  
/*   display: grid;
  grid-template-columns: 1fr 2fr; */
}

.brand-sidebar {
  width: 400px;
  flex-grow: 0;
  background: linear-gradient(6deg, rgba(152, 218, 255, 1), rgba(152, 249, 255, 0));
}

.form-content {
  padding: 3rem 9rem;
  flex: 1;
  flex-direction: column;
  overflow: auto;
}