Создание страницы моей учетной записи
На этой странице будут отображаться несколько форм, спрятанных внутри аккордеонных меню.
Вы можете получить файл 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> Logout.</a></li> <li><a href="#"><i class="far fa-database"></i> Manage Content.(Admin only)</a></li> <li><a href="#"><i class="fas fa-users"></i></i> Manage Users.(Admin only)</a></li> <li><a href="#"><i class="far fa-user-circle"></i> My Profile and Posts.</a></li> <li><a href="#"><i class="fas fa-share-square"></i> Add social media accounts.</a></li> <li><a href="#"><i class="far fa-envelope"></i> My Messages</a></li> </ul> </div> </div> </div> </div> </section> <!--MY ACCOUNT END--> <footer> ...
Вот окончательный результат