Все о InstantCMS Все о InstantCMS

Bootstrap themes, templates, and more to help you start your next project!

Start Bootstrap creates free, open source, MIT license, Bootstrap themes, templates, and code snippets for you to use on any project, guides to help you learn more about designing and developing with the Bootstrap framework, and premium Bootstrap products.

wave

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

Код - надо вставить в виджет HTML
  1. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  2. <header class="masthead">
  3. <div class="container">
  4. <div class="row align-items-center">
  5. <div class="col-lg-7 py-5">
  6. <h1 class="mb-4">Bootstrap themes, templates, and more to help you start your next project!</h1>
  7. <h2 class="m-0">Start Bootstrap creates free, open source, MIT license, Bootstrap <a href="/themes">themes</a>, <a href="/templates">templates</a>, and <a href="/snippets">code snippets</a> for you to use on any project, <a href="/guides">guides</a> to help you learn more about designing and developing with the Bootstrap framework, and premium Bootstrap products.</h2>
  8. </div>
  9. <div class="col-lg-5">
  10. <div class="py-5 px-4 masthead-cards">
  11. <div class="d-flex">
  12. <a href="#" class="w-50 pr-3 pb-4">
  13. <div class="card border-0 border-bottom-red shadow-lg shadow-hover">
  14. <div class="card-body text-center">
  15. <div class="text-center">
  16. <i class="fa fa-pencil fa-4x my-2"></i>
  17. </div>
  18. Themes
  19. </div>
  20. </div>
  21. </a>
  22. <a href="#" class="w-50 pl-3 pb-4">
  23. <div class="card border-0 border-bottom-blue shadow-lg shadow-hover">
  24. <div class="card-body text-center">
  25. <div class="text-center">
  26. <i class="fa fa-th fa-4x my-2"></i>
  27. </div>
  28. Templates
  29. </div>
  30. </div>
  31. </a>
  32. </div>
  33. <div class="d-flex">
  34. <a href="#" class="w-50 pr-3">
  35. <div class="card border-0 border-bottom-yellow shadow-lg shadow-hover">
  36. <div class="card-body text-center">
  37. <div class="text-center">
  38. <i class="fa fa-4x fa-code my-2"></i>
  39. </div>
  40. Snippets
  41. </div>
  42. </div>
  43. </a>
  44. <a href="#" class="w-50 pl-3">
  45. <div class="card border-0 border-bottom-green shadow-lg shadow-hover">
  46. <div class="card-body text-center">
  47. <div class="text-center">
  48. <i class="fa fa-4x fa-list my-2"></i>
  49. </div>
  50. Guides
  51. </div>
  52. </div>
  53. </a>
  54. </div>
  55. <div class="shape"></div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <svg style="pointer-events: none" class="wave" width="100%" height="50px" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 75">
  61. <defs>
  62. <style>
  63. .a {
  64. fill: none;
  65. }
  66.  
  67. .b {
  68. clip-path: url(#a);
  69. }
  70.  
  71. .c,
  72. .d {
  73. fill: #f9f9fc;
  74. }
  75.  
  76. .d {
  77. opacity: 0.5;
  78. isolation: isolate;
  79. }
  80. </style>
  81. <clipPath id="a">
  82. <rect class="a" width="1920" height="75"></rect>
  83. </clipPath>
  84. </defs>
  85. <title>wave</title>
  86. <g class="b">
  87. <path class="c" d="M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48"></path>
  88. </g>
  89. <g class="b">
  90. <path class="d" d="M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10"></path>
  91. </g>
  92. <g class="b">
  93. <path class="d" d="M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24"></path>
  94. </g>
  95. <g class="b">
  96. <path class="d" d="M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150"></path>
  97. </g>
  98. </svg>
  99. </header>
  100. <style>
  101. body{margin-top:20px;}
  102.  
  103. .masthead {
  104. padding: 3rem 0 7rem;
  105. position: relative;
  106. background-color: #dd3d31;
  107. background-image: url(https://startbootstrap.com/assets/img/overlay.svg), linear-gradient(45deg, #dd3d31 0%, #d22f23 100%);
  108. background-size: cover;
  109. z-index: 0
  110. }
  111.  
  112. .masthead svg.wave {
  113. position: absolute;
  114. bottom: -1px;
  115. left: 0
  116. }
  117.  
  118. .masthead h1 {
  119. color: #fff;
  120. font-weight: 700;
  121. font-size: 2rem;
  122. line-height: 1.1;
  123. z-index: 1
  124. }
  125.  
  126. .masthead h2 {
  127. color: rgba(255, 255, 255, .6);
  128. font-weight: 600;
  129. z-index: 1;
  130. font-size: 1.2rem
  131. }
  132.  
  133. .masthead a {
  134. color: rgba(255, 255, 255, .8);
  135. text-decoration: underline;
  136. z-index: 1
  137. }
  138.  
  139. .masthead a:hover {
  140. color: #fff
  141. }
  142.  
  143. .masthead a:active {
  144. text-decoration: none
  145. }
  146.  
  147. @media(min-width:992px) {
  148. .masthead h1 {
  149. font-size: 3rem
  150. }
  151. .masthead h2 {
  152. font-size: 1.5rem
  153. }
  154. }
  155.  
  156. .masthead .masthead-cards {
  157. position: relative;
  158. z-index: 1
  159. }
  160.  
  161. .masthead .masthead-cards .shape {
  162. position: absolute;
  163. height: 100%;
  164. width: 100%;
  165. background-color: rgba(255, 255, 255, .3);
  166. top: 0;
  167. left: 0;
  168. z-index: -1;
  169. border-radius: 30% 70% 70% 30%/30% 30% 70% 70%
  170. }
  171.  
  172. .masthead .masthead-cards .card {
  173. opacity: 1;
  174. font-size: .8rem;
  175. text-transform: uppercase;
  176. font-weight: 800;
  177. letter-spacing: .05rem;
  178. color: #212529;
  179. transition: .15s all
  180. }
  181.  
  182. .masthead .masthead-cards .card:hover {
  183. margin-top: -.25rem;
  184. margin-bottom: .25rem
  185. }
  186.  
  187. .masthead .masthead-cards .card:active {
  188. margin-top: inherit;
  189. margin-bottom: inherit
  190. }
  191.  
  192. .masthead .masthead-cards .card.border-bottom-blue:hover {
  193. color: #2092ed
  194. }
  195.  
  196. .masthead .masthead-cards .card.border-bottom-green:hover {
  197. color: #28a745
  198. }
  199.  
  200. .masthead .masthead-cards .card.border-bottom-red:hover {
  201. color: #dd3d31
  202. }
  203.  
  204. .masthead .masthead-cards .card.border-bottom-yellow:hover {
  205. color: #ffc107
  206. }
  207.  
  208. .masthead-page {
  209. padding: 1rem 0 4rem
  210. }
  211.  
  212. @media(min-width:992px) {
  213. .masthead-page h1 {
  214. font-size: 2.5rem
  215. }
  216. }
  217.  
  218. .border-bottom-yellow {
  219. border-color: #ffc107!important;
  220. }
  221.  
  222. .border-bottom-red {
  223. border-color: #dd3d31!important;
  224. }
  225.  
  226. .border-bottom-blue {
  227. border-color: #2092ed!important;
  228. }
  229.  
  230. .border-bottom-green {
  231. border-color: #28a745!important;
  232. }
  233.  
  234. .border-bottom-blue, .border-bottom-green, .border-bottom-red, .border-bottom-yellow {
  235. border-bottom: .4rem solid!important;
  236. }
  237. .shadow-lg {
  238. box-shadow: 0 2rem 1.5rem -1.5rem rgba(33,37,41,.15),0 0 1.5rem .5rem rgba(33,37,41,.05)!important;
  239. }
  240. .border-0 {
  241. border: 0!important;
  242. }
  243. </style>
20:10
380
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.