Settings beta

<div class="settings-card">
  <h3 class="settings-h">Profile</h3>
  <div class="settings-avatar">
    <span class="k-avatar" data-size="lg">AK</span>
    <div>
      <button class="btn btn-sec btn-sm">Change photo</button>
      <p class="settings-note">PNG or JPG, up to 2 MB.</p>
    </div>
  </div>
  <div class="settings-grid">
    <div class="field"><label for="st-name">Full name</label><input class="input" id="st-name" value="Aoi Kimura"></div>
    <div class="field"><label for="st-mail">Email</label><input class="input" id="st-mail" value="[email protected]"></div>
  </div>
  <div class="field"><label for="st-bio">Bio</label><textarea class="k-textarea" id="st-bio" rows="3">Product designer in Kyoto. Working on tools for small teams.</textarea></div>
  <hr class="k-sep">
  <h3 class="settings-h">Preferences</h3>
  <div class="settings-row">
    <div><div class="settings-rl">Email notifications</div><div class="settings-rd">Invoices, mentions and the weekly summary.</div></div>
    <label class="switch"><input type="checkbox" checked><span class="tr"></span></label>
  </div>
  <div class="settings-row">
    <div><div class="settings-rl">Public profile</div><div class="settings-rd">Anyone with the link can see your projects.</div></div>
    <label class="switch"><input type="checkbox"><span class="tr"></span></label>
  </div>
  <div class="settings-foot">
    <button class="btn btn-sec btn-md">Cancel</button>
    <button class="btn btn-pri btn-md">Save changes</button>
  </div>
</div>