Создание страницы моей учетной записи

На этой странице будут отображаться несколько форм, спрятанных внутри аккордеонных меню.

Ссылка на образ героя

Вы можете получить файл style.css и файл media_queries.css из части 1.

мой_аккаунт.html

Это отображает изображение героя

...
</header>
    <!--HEADER END-->
    <!--MY ACCOUNT START-->    
<section class="section-my-account">
    <div class="full-width-image">
      <img src="img/my_account/2.jpg" alt="Single Post">
              <div class="hero-title">
              <h3>My Account.</h3>
              </div> 
    </div>

форма для загрузки изображения профиля и индикатор загрузки для отображения хода загрузки

  
        <div class="image-container text-center">
            <img src="https://dummyimage.com/100x100/000/fff" class="img-thumbnail">        
        </div>
        
        <div class="container">
            <div class="row">
                <div class="my-account" style="margin-bottom: 20px;">
<button class="accordion">Upload profile image</button>
<div class="panel1">
  <div class="panel1-container">
    <h3>Upload image.</h3>
            <!--PROGRESS BAR START-->
            <div class="progress">
              <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
              aria-valuemin="0" aria-valuemax="100" style="width:40%">
                40% Complete (success)
              </div>
            </div>
            <!--PROGRESS BARS END-->
      <input type="file" nae="profile-img" class="form-control">
      <button href="#" class="btn btn-primary">Upload</button>
  </div>
</div>

В этом разделе кода будет отображаться несколько форм для изменения информации об учетной записи,

<button class="accordion">Modify account info.</button>
<div class="panel1">
  <div class="panel1-container">
    <h3>Edit Username.</h3>
      <input type="text" name="username" class="form-control" value="">
      <button href="#" class="btn btn-primary">Submit</button>
<h3>Edit Email.</h3>
      <input type="email" name="email" value="" class="form-control">
      <button href="#" class="btn btn-primary">Submit</button>
<h3>Edit Password.</h3>
      <input type="password" name="currentpassword" value="" class="form-control" placeholder="Current Password">
      <input type="password" name="newpassword" value="" class="form-control" placeholder="Enter new Password">
      <input type="password" name="confirmnewpassword" value="" class="form-control" placeholder="Confirm new Password">    
      <button href="#" class="btn btn-primary account-btn">Submit</button>
</div>
</div>

Форма ‹textarea› для ввода биографии пользователя.

<button class="accordion">Edit Biography.</button>
<div class="panel1">
  <div class="panel1-container">
    <h3>Edit Biography.</h3>
      <textarea cols="113" rows="5" class="form-control"></textarea>
      <button href="#" class="btn btn-primary">Submit</button>
  </div>
</div>

Кнопка для объединения учетной записи facebook.

<button class="accordion">Add Facebook account.</button>
<div class="panel1">
  <div class="panel1-container">
    <h3>Add Facebook account.</h3>
    <button href="#" class="btn btn-warning"><i class="fab fa-facebook"></i></button>
  </div>
</div>

И ссылки на несколько других действий.

<button class="accordion">Other Actions.</button>
<div class="panel1" style="background-color: #ceeffe">
<ul class="user-actions">
    <li><a href="#"><i class="fas fa-sign-out-alt"></i> &nbsp;Logout.</a></li>
    <li><a href="#"><i class="far fa-database"></i> &nbsp;Manage Content.(Admin only)</a></li>
    <li><a href="#"><i class="fas fa-users"></i></i> &nbsp;Manage Users.(Admin only)</a></li>  
    <li><a href="#"><i class="far fa-user-circle"></i>&nbsp;My Profile and Posts.</a></li> 
    <li><a href="#"><i class="fas fa-share-square"></i>&nbsp;Add social media accounts.</a></li>     
    <li><a href="#"><i class="far fa-envelope"></i>&nbsp;My Messages</a></li>
</ul>
</div>
                </div>
            </div>
        </div>
</section>
<!--MY ACCOUNT END-->
<footer>
...

Вот окончательный результат