HTML-Prototype von TUM Campus Heilbronn

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium" id="c9000">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Haben Sie noch Fragen?</h2>
  </header>
  <div class="c-contact">
    <div class="c-contact__left">
      <p class="c-contact__subtext rte-content">Wir nehmen uns Zeit, Sie zu informieren.</p>
      <ul class="c-contact__list">
        <li class="c-contact__item"><span class="c-contact__icon">
            <svg width="40" height="40" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone"></use>
            </svg></span><span><a href="tel:+4971312641800">Ruf an: 07131 26418-0</a></span></li>
        <li class="c-contact__item"><span class="c-contact__icon" aria-hidden="true">
            <svg width="40" height="40" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-mail"></use>
            </svg></span><span><a class="c-contact__link" href="mailto:info.hn@chn.tum.de">E-Mail schreiben</a></span></li>
      </ul>
    </div>
    <div class="c-contact__right">
      <p class="c-contact__subtext rte-content">Jetzt kostenlos Infomaterial anfordern</p>
      <form action="#" method="post">
        <fieldset>
          <legend>Form title</legend>
          <div class="flex">
            <div class="flex__12 powermail_fieldwrap">
              <label class="powermail_label" for="demoform-selection">Selection</label>
              <select id="demoform-selection" name="selection">
                <option value="" disabled="disabled" selected="selected">Please select</option>
                <option value="1">Selection 1</option>
                <option value="2">Selection 2</option>
                <option value="3">Selection 3</option>
                <option value="4">Selection 4</option>
              </select>
            </div>
            <div class="flex__12 powermail_fieldwrap">
              <label class="powermail_label" for="demoform-surname">First name</label>
              <input type="text" id="demoform-surname" name="surname" placeholder="Max"/>
            </div>
            <div class="flex__12 powermail_fieldwrap">
              <label class="powermail_label" for="demoform-name">Last name</label>
              <input type="text" id="demoform-name" name="name" placeholder="Mustermann"/>
              <ul class="powermail-errors-list">
                <li>This is a required field</li>
              </ul>
            </div>
            <div class="flex__12 powermail_fieldwrap">
              <label class="powermail_label" for="demoform-mail">E-mail</label>
              <input type="email" name="email" id="demoform-mail" placeholder="max.mustermann@text.de"/>
            </div>
            <div class="flex__12 powermail_fieldwrap">
              <label class="powermail_label" for="demoform-message">Message</label>
              <textarea id="demoform-message" rows="8" cols="48" name="message" placeholder="Write your message here"></textarea>
            </div>
            <div class="flex__12 powermail_fieldwrap">
              <div class="checkbox">
                <input type="checkbox" id="checkboxdemo-privacy" name="privacy"/>
                <label for="checkboxdemo-privacy">I have taken note of the <a href="#">privacy policy</a>. I agree that my information and data will be collected and stored electronically to answer my request. </label>
              </div>
            </div>
            <button class="btn btn--primary" type="submit">Send</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>