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="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-bubble"></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="56" height="56" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <use xlink:href="Images/svg/sprite.symbol.svg#icon-mail-bubble"></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 class="powermail_form" action="#" method="post">
        <fieldset class="powermail_fieldset">
          <legend class="powermail_legend">Form title</legend>
          <div class="powermail_fields">
            <div class="powermail_fieldwrap powermail_fieldwrap_type_select">
              <label class="powermail_label" for="demoform-selection">Selection
              </label>
              <div class="powermail_field">
                <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>
            <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
              <label class="powermail_label" for="demoform-surname">First name
              </label>
              <div class="powermail_field">
                <input type="text" id="demoform-surname" name="surname" placeholder="Max"/>
              </div>
            </div>
            <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
              <label class="powermail_label" for="demoform-name">Last name<span class="mandatory" aria-hidden="true">*</span><span class="u-visually-hidden"> Required field</span>
              </label>
              <div class="powermail_field">
                <input class="powermail_field_error" type="text" id="demoform-name" name="name" placeholder="Mustermann*"/>
                <ul class="powermail-errors-list filled" aria-live="polite">
                  <li>This is a required field</li>
                </ul>
              </div>
            </div>
            <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
              <label class="powermail_label" for="demoform-mail">E-mail
              </label>
              <div class="powermail_field">
                <input type="email" name="email" id="demoform-mail" placeholder="max.mustermann@text.de"/>
              </div>
            </div>
            <div class="powermail_fieldwrap powermail_fieldwrap_type_textarea">
              <label class="powermail_label" for="demoform-message">Message
              </label>
              <div class="powermail_field">
                <textarea id="demoform-message" rows="8" cols="48" name="message" placeholder="Write your message here"></textarea>
              </div>
            </div>
            <div class="powermail_fieldwrap powermail_fieldwrap_type_check">
              <div class="powermail_field">
                <div class="checkbox">
                  <input class="powermail_checkbox" type="checkbox" id="checkboxdemo-privacy" name="privacy"/>
                  <label for="checkboxdemo-privacy"><span class="powermail_checkbox_label">Privacy policy<span class="mandatory" aria-hidden="true">*</span><span class="u-visually-hidden"> Required field</span></span><span>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. </span>
                  </label>
                </div>
              </div>
            </div>
            <div class="powermail_fieldwrap powermail_fieldwrap_type_submit">
              <div class="powermail_field">
                <button class="btn btn--primary" type="submit">Send</button>
              </div>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>