"Profile (My-Asia - 4.1.1)"
Bootstrap 4.1.1 Snippet by uaKalwin

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- CDN JS --> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Jasny Bootstrap and JS --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/css/jasny-bootstrap.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/js/jasny-bootstrap.min.js"></script> <!-- Bootstrap select JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/i18n/defaults-ua_UA.js"></script> <!-- FontAwesome and JS --> <script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Bootstrap select CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css"> <div class="container-fluid bg-light p-1 border-bottom shadow"> <div class="row"> <div class="col-4 pt-2"> <a class="btn-sm btn btn-outline-info" href="#"><i class="fas fa-external-link-alt"></i> На сайт</a> </div> <div class="col-4"> <h4 class="w-100 text-center"> <a href="#" class="text-decoration-none text-black-50"> <img src="https://my-asia.net/image/catalog/index/favicon.png" alr="My-Asia - Интернет-магазин товаров из Азии!" title="My-Asia - Интернет-магазин товаров из Азии!"> </a> </h4> </div> <div class="col-4 text-right pt-2"> <a class="btn-sm btn btn-outline-danger" href="#"><i class="fas fa-sign-out-alt"></i> Выход</a> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="container mt-5 bootstrap snippet"> <div class="row"> <div class="col-sm-3"> <ul class="list-group mb-4"> <li class="list-group-item">User name</li> <li class="list-group-item d-flex justify-content-between align-items-center"> Бонусные баллы <span class="badge badge-primary badge-pill">10930</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> История заказов <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> История транзакций <span class="badge badge-primary badge-pill">0</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Закладки </li> <li class="list-group-item d-flex justify-content-between align-items-center"> E-Mail рассылка </li> </ul> </div><!--/col-3--> <div class="col-sm-9"> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs nav-fill card-header-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="fas fa-edit"></i> Личный кабинет</a> </li> <li class="nav-item"> <a class="nav-link" id="history-order-tab" data-toggle="tab" href="#history-order" role="tab" aria-controls="profile" aria-selected="false"><i class="fas fa-shopping-bag"></i> История заказов</a> </li> <li class="nav-item"> <a class="nav-link" id="bonus-list-tab" data-toggle="tab" href="#bonus-list" role="tab" aria-controls="contact" aria-selected="false"><i class="fab fa-bootstrap"></i> Бонусные баллы</a> </li> <li class="nav-item"> <a class="nav-link" id="download-file-tab" data-toggle="tab" href="#download-file" role="tab" aria-controls="contact" aria-selected="false"><i class="fas fa-file-download"></i> Файлы для скачивания</a> </li> <!--<li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-sign-out-alt"></i> Выход</a> </li>--> </ul> </div> <div class="tab-content card-body" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="row"> <div class="col-6"> <form class="needs-validation" novalidate> <div class="form-row"> <div class="col-md-12 mb-3"> <label for="validationTooltip01">Имя</label> <input type="text" class="form-control" id="validationTooltip01" placeholder="Имя" value="Pavel Yakymenko" required> <div class="valid-feedback"> Готово! </div> <div class="invalid-feedback"> Пожалуйста, введите Имя. </div> </div> <div class="col-md-12 mb-3"> <label for="validationTooltip02">Фамилия</label> <input type="text" class="form-control" id="validationTooltip02" placeholder="Фамилия" value="Sergeevich" required> <div class="valid-feedback"> Готово! </div> <div class="invalid-feedback"> Пожалуйста, введите Фамилия. </div> </div> <div class="col-md-12 mb-3"> <label for="validationTooltip03">E-mail</label> <input type="email" class="form-control" id="validationTooltip03" placeholder="E-mail" value="simple@demo.com" required> <div class="valid-feedback"> Готово! </div> <div class="invalid-feedback"> Пожалуйста, введите E-mail. </div> </div> <div class="col-md-12 mb-3"> <label for="validationTooltip04">Телефон</label> <input type="number" class="form-control" id="validationTooltip04" placeholder="Телефон" value="+38(012)345-67-89" required> <div class="valid-feedback"> Готово! </div> <div class="invalid-feedback"> Пожалуйста, введите Пароль. </div> </div> </div> <button class="btn btn-primary" type="submit">Продолжить</button> </form> <hr> <form class="needs-validation" novalidate> <div class="form-row"> <div class="col-md-12 mb-3"> <label for="validationTooltip05">Пароль</label> <input type="password" class="form-control" id="validationTooltip05" placeholder="Пароль" required> <div class="valid-feedback"> Готово! </div> <div class="invalid-feedback"> Пожалуйста, введите Пароль. </div> </div> </div> <button class="btn btn-primary" type="submit">Продолжить</button> </form> </div> <div class="col-6"> 2 </div> </div> </div> <div class="tab-pane fade" id="history-order" role="tabpanel" aria-labelledby="history-order-tab"> <table class="table table-sm table-hover table-bordered table-striped"> <thead class="thead-light"> <tr> <th scope="col" data-toggle="tooltip" data-placement="bottom" title="№ Заказа">№</th> <th scope="col">Клиент</th> <th scope="col">Количество</th> <th scope="col">Статус</th> <th scope="col">Всего</th> <th scope="col">Добавлено</th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th class="align-middle" scope="row">#3</th> <td class="align-middle">Pavel Sergeevich Yakymenko</td> <td class="align-middle">1</td> <td class="align-middle">Завершенный</td> <td class="align-middle">550.00₴</td> <td class="align-middle">18.07.2019</td> <td class="align-middle"><a href="" class="btn btn-primary btn-sm"><i class="far fa-eye"></i></a></td> </tr> <tr> <th class="align-middle" scope="row">#2</th> <td class="align-middle">Pavel Sergeevich Yakymenko</td> <td class="align-middle">1</td> <td class="align-middle">Отменен</td> <td class="align-middle">80.00₴</td> <td class="align-middle">18.07.2019</td> <td class="align-middle"><a href="" class="btn btn-primary btn-sm"><i class="far fa-eye"></i></a></td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="bonus-list" role="tabpanel" aria-labelledby="bonus-list-tab"> <div class="alert alert-success" role="alert"> Накоплено бонусных баллов 10930! </div> <table class="table table-sm table-hover table-bordered table-striped"> <caption>Накоплено бонусных баллов 10930.</caption> <thead class="thead-light"> <tr> <th scope="col">Бонусные баллы</th> <th scope="col">Добавлено</th> <th scope="col">Описание</th> </tr> </thead> <tbody> <tr> <th scope="row">3242</th> <td>03.08.2019</td> <td>Lorem ipsum dolor sit amet.</td> </tr> <tr> <th scope="row">7454</th> <td>03.08.2019</td> <td>Lorem ipsum dolor sit amet.</td> </tr> <tr> <th scope="row">234</th> <td>03.08.2019</td> <td>Lorem ipsum dolor sit amet.</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="download-file" role="tabpanel" aria-labelledby="download-file-tab"> <table class="table table-sm table-hover table-bordered table-striped"> <caption>Показано с 1 по 1 из 1 (всего 1 страниц)</caption> <thead class="thead-light"> <tr> <th scope="col">№ Заказа</th> <th scope="col">Название</th> <th scope="col">Размер</th> <th scope="col">Дата добавления</th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th class="align-middle" scope="row">3</th> <td class="align-middle">лпрл</td> <td class="align-middle">427.85KB</td> <td class="align-middle">18.07.2019</td> <td class="align-middle"><a href="/" class="btn btn-primary btn-sm"><i class="fas fa-download"></i></a></td> </tr> </tbody> </table> </div> </div> </div> </div><!--/col-9--> </div><!--/row--> <div class="container mt-5"> <div class="row"> <div class="col"> <p class="text-center text-muted">My-Asia - Интернет-магазин товаров из Азии! <br> Copyright © 2017-2019 | Designed With by <a target="_blank" href="https://my-asia.net/" data-toggle="tooltip" data-placement="top" title="" data-original-title="Kalwin">My-Asia</a></p> </div> </div> </div> </div> </div> </div>
body { background-image: url(https://bugaga.ru/uploads/posts/2019-03/1553201943_japonija-v-cvetu-1.jpg); background-size: cover; background-position: top center; }
// Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); $(function () { $('[data-toggle="tooltip"]').tooltip() });

Related: See More


Questions / Comments: