Все о InstantCMS Все о InstantCMS

Alphad Design &Андрей дизайнер

Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым.

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

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

Код - надо вставить в виджет HTML
  1. <!-- header #1 -->
  2. <header class="header" id="header1">
  3. <img src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" alt="">
  4. <div class="circle">
  5. <div class="caption">
  6. <h2 class="title display-3">Alphad Design &<strong>Андрей дизайнер</strong></h2>
  7. <p>Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым.</p>
  8. </div>
  9. </div>
  10. </header>
  11. <style>
  12. /* =======================================
  13.  header
  14. ========================================*/
  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: 25%;
  25. transform:translate(-50%,-50%);
  26. z-index: 15;
  27. padding: 1rem;
  28. }
  29. .header .left {
  30. position: absolute;
  31. top: 0%;
  32. left: 0%;
  33. width: 50%;
  34. height: 100%;
  35. z-index: 5;
  36. }
  37. .header .right {
  38. position: absolute;
  39. top: 0%;
  40. left: 50%;
  41. width: 50%;
  42. height: 100%;
  43. z-index: 5;
  44. }
  45. .header .scroll {
  46. position: absolute;
  47. top: 95%;
  48. left: 50%;
  49. transform:translate(-50%,-50%);
  50. color: #fff;
  51. font-size: 1.5rem;
  52. }
  53. /*=== Large devices (desktops, 992px and up) ===*/
  54. @media (min-width: 992px) {
  55. .header .center {
  56. width: 50%;
  57. }
  58. .header .left {
  59. }
  60. .header .right {
  61. }
  62. }
  63.  
  64.  
  65. /* =======================================
  66.  header#1
  67. ========================================*/
  68. #header1 {
  69. background: linear-gradient(to right, #614385, #516395);
  70. overflow: hidden;
  71. background-size: 400% 400%;
  72. -webkit-animation: gradanim-2 8s ease infinite;
  73. -moz-animation: gradanim-2 8s ease infinite;
  74. animation: gradanim-2 8s ease infinite;
  75. }
  76. @-moz-keyframes gradanim-2 {
  77. 0%{background-position:0% 50%}
  78. 50%{background-position:100% 50%}
  79. 100%{background-position:0% 50%}
  80. }
  81. @keyframes gradanim-2 {
  82. 0%{background-position:11% 0%}
  83. 50%{background-position:90% 100%}
  84. 100%{background-position:11% 0%}
  85. }
  86. #header1 img {
  87. position: absolute;
  88. left: 50%;
  89. }
  90. #header1 .circle {
  91. position: absolute;
  92. left: 10%;
  93. top: 10%;
  94. width: 50vw;
  95. height: 50%;
  96. }
  97. /*=== Large devices (desktops, 992px and up) ===*/
  98. @media (min-width: 992px) {
  99. #header1 {
  100. }
  101. #header1 img {
  102. z-index: 5;
  103. }
  104. #header1 .circle {
  105. position: absolute;
  106. left: 20%;
  107. top: 20%;
  108. width: 40vw;
  109. height: 40vw;
  110. border-radius: 50%;
  111. background: linear-gradient(to left, #ff512f, #dd2476);
  112. background-size: 200% 200%;
  113. -webkit-animation: gradanim-2 8s ease infinite;
  114. -moz-animation: gradanim-2 8s ease infinite;
  115. animation: gradanim-2 8s ease infinite;
  116. }
  117. @-moz-keyframes gradanim-2 {
  118. 0%{background-position:0% 50%}
  119. 50%{background-position:100% 50%}
  120. 100%{background-position:0% 50%}
  121. }
  122. @keyframes gradanim-2 {
  123. 0%{background-position:11% 0%}
  124. 50%{background-position:90% 100%}
  125. 100%{background-position:11% 0%}
  126. }
  127. #header1 .caption {
  128. color: #fff;
  129. position: relative;
  130. top: 15%;
  131. left: -5%;
  132. padding-right: 3rem;
  133. }
  134. }
  135. </style>
19:51
112
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.