sign_up.html

<!-- We don't need full layout here, because this page will be parsed with Ajax-->
<!-- Top Navbar-->
<link rel="stylesheet" href="path/to/framework7-icons.css">
<div class="navbar">
  <div class="navbar-inner">
    <div class="left"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
    <div class="center sliding">Register</div>
    <div class="right">
      <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a>
    </div>
  </div>
</div>
<div class="pages">
  <!-- Page, data-page contains page name-->
  <div data-page="sign_up" class="page">
    <!-- Scrollable page content-->
    <div class="page-content">
      <div class="content-block">
          <div class="content-block-inner">
              <div class="content-block-title">Icons and inputs</div>
              <form id="signup" class="list-block">
                  <ul>
                      <!-- Text inputs -->
                      <li>
                          <div class="item-content">
                              <div class="item-media"><i class="icon f7-icons">person</i></div>
                              <div class="item-inner">
                                  <div class="item-input">
                                      <input type="text" placeholder="Username">
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="item-content">
                              <div class="item-media"><i class="icon f7-icons">email</i></div>
                              <div class="item-inner">
                                  <div class="item-input">
                                      <input type="email" placeholder="Email">
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="item-content">
                              <div class="item-media"><i class="icon f7-icons">lock</i></div>
                              <div class="item-inner">
                                  <div class="item-input">
                                      <input type="text" placeholder="Password">
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="item-content">
                              <div class="item-media"><i class="icon f7-icons">lock_fill</i></div>
                              <div class="item-inner">
                                  <div class="item-input">
                                      <input type="text" placeholder="Confirm Password">
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="item-content">
                              <div class="item-media"><i class="icon f7-icons">phone</i></div>
                              <div class="item-inner">
                                  <div class="item-input">
                                      <input type="text" placeholder="Phone Number">
                                  </div>
                              </div>
                          </div>
                      </li>
                  </ul>
              <a href="main.html" class="button form-to-data">Register</a>
              </form>
          </div>
      </div>
    </div>
  </div>
</div>