Все о InstantCMS Все о InstantCMS

Шапка сайта

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

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

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