Все о InstantCMS Все о InstantCMS

Шапка сайта

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

Шапка сайта для Инстант на bootstrap

Шапка сайта для Инстант на bootstrap

Код - надо вставить в виджет HTML
  1. <!-- header #1 -->
  2. <header class="header" id="header1">
  3. <div class="center">
  4. <div class="caption animated bounceInDown">
  5. <h2 class="title display-3">Шапка сайта</h2>
  6. <p class="text">В целом, конечно, высококачественный прототип будущего проекта предоставляет широкие возможности для распределения внутренних резервов и ресурсов. С учётом сложившейся международной обстановки, внедрение современных методик создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса позиций, занимаемых участниками в отношении поставленных задач. Кстати, ключевые особенности структуры проекта, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут представлены в исключительно положительном свете.</p>
  7. <button class="btn btn-primary">click me</button>
  8. <button class="btn btn-warning">click me</button>
  9. </div>
  10. </div>
  11. <!-- scroll-down -->
  12. <i class="scroll fa fa-angle-double-down"></i>
  13. </header>
  14. <style>
  15. .header {
  16. position: relative;
  17. width: 100vw;
  18. height: 600px;
  19. }
  20. .header .center {
  21. position: absolute;
  22. top: 50%;
  23. left: 50%;
  24. width: 90%;
  25. transform:translate(-50%,-50%);
  26. z-index: 5;
  27. padding: 1rem;
  28. }
  29. .header .left {
  30. position: absolute;
  31. top: 50%;
  32. left: 50%;
  33. width: 90%;
  34. transform:translate(-50%,-50%);
  35. z-index: 5;
  36. padding: 1rem;
  37. }
  38. .header .right {
  39. position: absolute;
  40. top: 50%;
  41. left: 50%;
  42. width: 90%;
  43. transform:translate(-50%,-50%);
  44. z-index: 5;
  45. padding: 1rem;
  46. }
  47. .header .scroll {
  48. position: absolute;
  49. top: 95%;
  50. left: 50%;
  51. transform:translate(-50%,-50%);
  52. color: #fff;
  53. font-size: 1.5rem;
  54. }
  55. /*=== Large devices (desktops, 992px and up) ===*/
  56. @media (min-width: 992px) {
  57. .header .center {
  58. width: 50%;
  59. }
  60. .header .left {
  61. position: absolute;
  62. top: 20%;
  63. left: 10%;
  64. width: 40%;
  65. height: 60%;
  66. transform:translate(0, 0);
  67. padding: 1rem;
  68. }
  69. .header .right {
  70. position: absolute;
  71. top: 20%;
  72. left: 50%;
  73. width: 40%;
  74. height: 60%;
  75. transform:translate(0, 0);
  76. padding: 1rem;
  77. }
  78. .delay {
  79. animation-delay: 0.6s;
  80. }
  81. }
  82.  
  83. /* =======================================
  84.  header#1
  85. ========================================*/
  86. #header1 {
  87. background: #355c7d;
  88. background:
  89. /* gradient overlay */
  90. linear-gradient(
  91. to bottom,
  92. rgba(203, 53, 107, 0.6), /* #cb356b */
  93. rgba(189, 63, 50, 0.5) /* #bd3f32 */
  94. ),
  95. /* bottom image */
  96. url('https://cdn.stocksnap.io/img-thumbs/960w/VPYPAS4FVT.jpg') no-repeat left top;
  97. background-size: cover;
  98. z-index: 0;
  99. }
  100. #header1 .caption {
  101. text-align: center;
  102. color: #fff;
  103. }
  104. #header1 .caption .title {
  105. margin-bottom: 1.5rem;
  106. }
  107. #header1 .caption .text {
  108. margin-bottom: 1.5rem;
  109. }
  110. #header1 .caption .action {
  111. margin-bottom: 1rem;
  112. padding-left: 3rem;
  113. padding-right: 3rem;
  114. border-radius: 15px;
  115. }
  116.  
  117. </style>
14:56
114
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.