Advertisement
Guest User

Untitled

a guest
Oct 18th, 2020
288
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.29 KB | None | 0 0
  1. /*--------------------------------------------------------------
  2. # Hero Section
  3. --------------------------------------------------------------*/
  4. #hero {
  5. width: 100%;
  6. height: 75vh;
  7. background: url("../img/hero-bg.jpg") top left;
  8. background-size: cover;
  9. position: relative;
  10. overflow:visible;
  11. }
  12.  
  13. #hero:before {
  14. content: "";
  15. background: rgba(105, 63, 105, 0.90);
  16. position: absolute;
  17. bottom: 0;
  18. top: 0;
  19. left: 0;
  20. right: 0;
  21. }
  22.  
  23. #hero .container {
  24. position: relative;
  25. padding-top: 132px;
  26. }
  27.  
  28. @media (max-width: 992px) {
  29. #hero .container {
  30. padding-top: 58px;
  31. }
  32. }
  33.  
  34. #hero h1 {
  35. margin: 0;
  36. font-size: 48px;
  37. font-weight: 700;
  38. line-height: 56px;
  39. color: #222222;
  40. font-family: "Poppins", sans-serif;
  41. }
  42.  
  43. #hero h1 span {
  44. color: #106eea;
  45. }
  46.  
  47. #hero h2 {
  48. color: #555555;
  49. margin: 5px 0 30px 0;
  50. font-size: 24px;
  51. font-weight: 400;
  52. }
  53.  
  54. #hero .btn-get-started {
  55. font-family: "Roboto", sans-serif;
  56. text-transform: uppercase;
  57. font-weight: 500;
  58. font-size: 14px;
  59. letter-spacing: 1px;
  60. display: inline-block;
  61. padding: 10px 28px;
  62. border-radius: 4px;
  63. transition: 0.5s;
  64. color: #fff;
  65. background: #106eea;
  66. }
  67.  
  68. #hero .btn-get-started:hover {
  69. background: #247cf0;
  70. }
  71.  
  72. #hero .btn-watch-video {
  73. font-size: 16px;
  74. display: inline-block;
  75. padding: 10px 25px 8px 40px;
  76. transition: 0.5s;
  77. margin-left: 25px;
  78. color: #222222;
  79. position: relative;
  80. font-weight: 600;
  81. }
  82.  
  83. #hero .btn-watch-video i {
  84. color: #106eea;
  85. font-size: 32px;
  86. position: absolute;
  87. left: 0;
  88. top: 7px;
  89. transition: 0.3s;
  90. }
  91.  
  92. #hero .btn-watch-video:hover {
  93. color: #106eea;
  94. }
  95.  
  96. #hero .btn-watch-video:hover i {
  97. color: #3b8af2;
  98. }
  99.  
  100. @media (min-width: 1024px) {
  101. #hero {
  102. background-attachment: fixed;
  103. }
  104. }
  105.  
  106. @media (max-width: 768px) {
  107. #hero {
  108. height: 100vh;
  109. }
  110. #hero h1 {
  111. font-size: 28px;
  112. line-height: 36px;
  113. }
  114. #hero h2 {
  115. font-size: 18px;
  116. line-height: 24px;
  117. margin-bottom: 30px;
  118. }
  119. #hero .btn-get-started, #hero .btn-watch-video {
  120. font-size: 13px;
  121. }
  122. }
  123.  
  124. @media (max-height: 500px) {
  125. #hero {
  126. height: 120vh;
  127. }
  128. }
  129.  
  130. .hero-textbox{
  131. width:581px;
  132. float:right;
  133. }
  134. .hero-image{
  135. float:left;
  136. position:absolute;
  137.  
  138. }
  139.  
  140. }
  141. h2.hero-text{
  142. color:white;
  143. }
  144.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement