Все о InstantCMS Все о InstantCMS

Personal information

Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.

Bookings

Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.

Reviews

Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.

Confirm booking

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Вертикальные вкладки Bootstrap 4 для Инстант

Используя преимущества компонентов Bootstrap 4, легко создайте потрясающий интерфейс с вкладками на Инстант!

Код - надо вставить в виджет HTML
  1. <link href="/templates/modern/svit/font/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  2. <!-- Demo header-->
  3. <section class="py-5 header">
  4. <div class="container py-4">
  5. <div class="row">
  6. <div class="col-md-3">
  7. <!-- Tabs nav -->
  8. <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  9. <a class="nav-link mb-3 p-3 shadow active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
  10. <i class="fa fa-user-circle-o mr-2"></i>
  11. <span class="font-weight-bold small text-uppercase">Personal information</span></a>
  12.  
  13. <a class="nav-link mb-3 p-3 shadow" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
  14. <i class="fa fa-calendar-minus-o mr-2"></i>
  15. <span class="font-weight-bold small text-uppercase">Bookings</span></a>
  16.  
  17. <a class="nav-link mb-3 p-3 shadow" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
  18. <i class="fa fa-star mr-2"></i>
  19. <span class="font-weight-bold small text-uppercase">Reviews</span></a>
  20.  
  21. <a class="nav-link mb-3 p-3 shadow" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
  22. <i class="fa fa-check mr-2"></i>
  23. <span class="font-weight-bold small text-uppercase">Confirm booking</span></a>
  24. </div>
  25. </div>
  26.  
  27.  
  28. <div class="col-md-9">
  29. <!-- Tabs content -->
  30. <div class="tab-content" id="v-pills-tabContent">
  31. <div class="tab-pane fade shadow rounded bg-white show active p-5" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
  32. <h4 class="font-italic mb-4">Personal information</h4>
  33. <p class="font-italic text-muted mb-2">Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.</p>
  34. </div>
  35.  
  36. <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
  37. <h4 class="font-italic mb-4">Bookings</h4>
  38. <p class="font-italic text-muted mb-2">Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.</p>
  39. </div>
  40.  
  41. <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
  42. <h4 class="font-italic mb-4">Reviews</h4>
  43. <p class="font-italic text-muted mb-2">Разнообразный и богатый опыт говорит нам, что высокое качество позиционных исследований способствует повышению качества новых принципов формирования материально-технической и кадровой базы. Значимость этих проблем настолько очевидна, что разбавленное изрядной долей эмпатии, рациональное мышление влечет за собой процесс внедрения и модернизации своевременного выполнения сверхзадачи. Как уже неоднократно упомянуто, явные признаки победы институционализации в равной степени предоставлены сами себе.</p>
  44. </div>
  45.  
  46. <div class="tab-pane fade shadow rounded bg-white p-5" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
  47. <h4 class="font-italic mb-4">Confirm booking</h4>
  48. <p class="font-italic text-muted mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </section>
  55. <style>
  56. .nav-pills-custom .nav-link {
  57. color: #aaa;
  58. background: #fff;
  59. position: relative;
  60. }
  61.  
  62. .nav-pills-custom .nav-link.active {
  63. color: #45b649;
  64. background: #fff;
  65. }
  66.  
  67.  
  68. /* Add indicator arrow for the active tab */
  69. @media (min-width: 992px) {
  70. .nav-pills-custom .nav-link::before {
  71. content: '';
  72. display: block;
  73. border-top: 8px solid transparent;
  74. border-left: 10px solid #fff;
  75. border-bottom: 8px solid transparent;
  76. position: absolute;
  77. top: 50%;
  78. right: -10px;
  79. transform: translateY(-50%);
  80. opacity: 0;
  81. }
  82. }
  83.  
  84. .nav-pills-custom .nav-link.active::before {
  85. opacity: 1;
  86. }
  87. </style>
17:01
63
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.