Все о InstantCMS Все о InstantCMS

Шапка & для лендинга

Ut enim ad minima veniam quis nostrum exercitationem ullam corporis at suscipit laboriosam nisi ut aliquid a commodi consequatur Quis autem.

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

Код - надо вставить в виджет HTML
  1. <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  2. <section class="section home-5-bg" id="home">
  3. <div id="particles-js"></div>
  4. <div class="bg-overlay"></div>
  5. <div class="home-center">
  6. <div class="home-desc-center">
  7. <div class="container">
  8. <div class="justify-content-center row">
  9. <div class="col-lg-7">
  10. <div class="mt-40 text-center home-5-content">
  11. <div class="home-icon mb-4"><i class="mdi mdi-pinwheel mdi-spin text-white h1"></i></div>
  12. <h1 class="text-white font-weight-normal home-5-title mb-0">Шапка &amp; для лендинга</h1>
  13. <p class="text-white-70 mt-4 f-15 mb-0">Ut enim ad minima veniam quis nostrum exercitationem ullam corporis at suscipit laboriosam nisi ut aliquid a commodi consequatur Quis autem.</p>
  14. <div class="mt-5">
  15. <input class="btn btn-default" type="button" value="Get started">
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. </section>
  24. <style>
  25. body{
  26. margin-top:20px;
  27. backgroundColor:#eee;
  28. }
  29. .home-5-bg {
  30. background: #1E90FF;
  31. position: relative;
  32. background-size: cover;
  33. height: 50vh;
  34. background-position: center center;
  35. }
  36.  
  37. .section {
  38. position: relative;
  39. }
  40.  
  41. .home-5-content {
  42. z-index: 1;
  43. position: relative;
  44. }
  45.  
  46. .bg-overlay {
  47. background-color: #000;
  48. opacity: 0.7;
  49. position: absolute;
  50. top: 0;
  51. left: 0;
  52. height: 100%;
  53. width: 100%;
  54. }
  55.  
  56. .home-center {
  57. display: table;
  58. width: 100%;
  59. height: 100%;
  60. }
  61.  
  62. .home-desc-center {
  63. display: table-cell;
  64. vertical-align: middle;
  65. }
  66.  
  67. .home-5-content {
  68. z-index: 1;
  69. position: relative;
  70. }
  71.  
  72. .text-white-70 {
  73. color: rgba(255, 255, 255, 0.8);
  74. }
  75.  
  76. .f-15 {
  77. font-size: 15px;
  78. }
  79.  
  80. .home-5-bg #particles-js {
  81. z-index: 1!important;
  82. position: absolute;
  83. width: 100%;
  84. height: 100%;
  85. }
  86. </style>
  87. <script>
  88. particlesJS("particles-js", {
  89. "particles": {
  90. "number": {
  91. "value": 80,
  92. "density": {
  93. "enable": true,
  94. "value_area": 800
  95. }
  96. },
  97. "color": {
  98. "value": "#ffffff"
  99. },
  100. "shape": {
  101. "type": "circle",
  102. "stroke": {
  103. "width": 0,
  104. "color": "#000000"
  105. },
  106. "polygon": {
  107. "nb_sides": 5
  108. },
  109. "image": {
  110. "src": "img/github.svg",
  111. "width": 100,
  112. "height": 100
  113. }
  114. },
  115. "opacity": {
  116. "value": 0.5,
  117. "random": false,
  118. "anim": {
  119. "enable": false,
  120. "speed": 1,
  121. "opacity_min": 0.1,
  122. "sync": false
  123. }
  124. },
  125. "size": {
  126. "value": 20,
  127. "random": true,
  128. "anim": {
  129. "enable": false,
  130. "speed": 40,
  131. "size_min": 0.1,
  132. "sync": false
  133. }
  134. },
  135. "line_linked": {
  136. "enable": true,
  137. "distance": 150,
  138. "color": "#ffffff",
  139. "opacity": 0.22,
  140. "width": 1
  141. },
  142. "move": {
  143. "enable": true,
  144. "speed": 6,
  145. "direction": "none",
  146. "random": false,
  147. "straight": false,
  148. "out_mode": "out",
  149. "attract": {
  150. "enable": false,
  151. "rotateX": 600,
  152. "rotateY": 1200
  153. }
  154. }
  155. },
  156. "interactivity": {
  157. "detect_on": "canvas",
  158. "events": {
  159. "onhover": {
  160. "enable": true,
  161. "mode": "repulse"
  162. },
  163. "onclick": {
  164. "enable": true,
  165. "mode": "push"
  166. },
  167. "resize": true
  168. },
  169. "modes": {
  170. "grab": {
  171. "distance": 400,
  172. "line_linked": {
  173. "opacity": 1
  174. }
  175. },
  176. "bubble": {
  177. "distance": 400,
  178. "size": 40,
  179. "duration": 2,
  180. "opacity": 8,
  181. "speed": 3
  182. },
  183. "repulse": {
  184. "distance": 200
  185. },
  186. "push": {
  187. "particles_nb": 4
  188. },
  189. "remove": {
  190. "particles_nb": 2
  191. }
  192. }
  193. },
  194. "retina_detect": true,
  195. "config_demo": {
  196. "hide_card": false,
  197. "background_color": "#b61924",
  198. "background_image": "",
  199. "background_position": "50% 50%",
  200. "background_repeat": "no-repeat",
  201. "background_size": "cover"
  202. }
  203. });
  204. </script>
20:21
119
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.