---
layout: default
title: Account Details
---

{{> navbar-fade-commerce}}

<div class="profile-header">
  <div class="profile-header-inner">
    <div class="profile-avatar">
      <img
        class="avatar"
        src="https://via.placeholder.com/250x250"
        alt=""
        data-demo-src="assets/img/avatars/helen.jpg"
      />
      <h2 class="title is-4 is-narrow">Helen Miller</h2>
      <p class="subtitle is-6">UI/UX Designer</p>
    </div>

    <div class="tabs is-centered">
      <ul>
        <li class="is-active"><a href="profile-4.html">Account</a></li>
        <li><a href="profile-5.html">Addresses</a></li>
        <li><a href="profile-6.html">Orders</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="section is-app-grey">
  <div class="container">
    <!--Wrapper-->
    <div class="profile-wrapper">
      <div class="account-form">
        <form>
          <div class="form-inner">
            <div class="columns is-multiline">
              <div class="column is-12">
                <h4 class="form-section-title">Account Details</h4>
              </div>
              <div class="column is-6">
                <div class="field">
                  <div class="control has-icons-left">
                    <input
                      class="input"
                      type="text"
                      placeholder="First Name"
                      value="Helen"
                    />
                    <span class="icon is-small is-left">
                      <i class="sl sl-icon-user"></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="column is-6">
                <div class="field">
                  <div class="control has-icons-left">
                    <input
                      class="input"
                      type="text"
                      placeholder="Last Name"
                      value="Miller"
                    />
                    <span class="icon is-small is-left">
                      <i class="sl sl-icon-user"></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="column is-12">
                <div class="field">
                  <div class="control has-icons-left">
                    <input
                      class="input"
                      type="text"
                      placeholder="Email address"
                      value="helen@bulkit.io"
                    />
                    <span class="icon is-small is-left">
                      <i class="sl sl-icon-envelope-open"></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="column is-12">
                <div class="field">
                  <div class="control has-icons-left">
                    <input
                      class="input"
                      type="text"
                      placeholder="Role"
                      value="UI/UX Designer"
                    />
                    <span class="icon is-small is-left">
                      <i class="sl sl-icon-briefcase"></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="column is-12">
                <h4 class="form-section-title mt-4">Security</h4>
              </div>
              <div class="column is-12">
                <div class="field">
                  <div class="control has-icons-left">
                    <input
                      class="input"
                      type="password"
                      placeholder="Password"
                    />
                    <span class="icon is-small is-left">
                      <i class="sl sl-icon-lock"></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="column is-12">
                <div class="field">
                  <div class="control has-icons-left">
                    <input
                      class="input"
                      type="password"
                      placeholder="Repeat Password"
                    />
                    <span class="icon is-small is-left">
                      <i class="sl sl-icon-lock"></i>
                    </span>
                  </div>
                </div>
              </div>
              <div class="column is-12">
                <div class="field">
                  <div class="buttons is-centered">
                    <button
                      type="button"
                      class="button form-button primary-btn raised"
                    >
                      Save Changes
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{> footer-side-light}}