Advertisement
Guest User

Untitled

a guest
Jan 17th, 2018
59
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.59 KB | None | 0 0
  1. body, html {
  2. height: 100%;
  3. margin: 0;
  4. font-size: 16px;
  5. font-family: "Lato", sans-serif;
  6. font-weight: 400;
  7. line-height: 1.8em;
  8.  
  9. }
  10.  
  11. .overlay {
  12. background-color: #000;
  13. opacity: 0.5;
  14. position: absolute;
  15. background-position: 50% 50%;
  16. background-size: cover;
  17. background-attachment: fixed;
  18. background-repeat: no-repeat;
  19. width: 100%;
  20. min-height: 100%;
  21. z-index: 1;
  22. }
  23.  
  24.  
  25. .linkdark {
  26. display: inline-block;
  27. padding: 0.8em 0.3em;
  28. color: #fa9646;border: 1px solid #000;
  29. color: #000;
  30. text-transform: uppercase;
  31. font-size: 14px;
  32. width: 200px;
  33. text-align: center;
  34. transition: 0.5s;
  35. }
  36. .linkdark:hover {
  37. background: #000;
  38. color: #fff; }
  39.  
  40. .ptextdark p
  41.  
  42. { letter-spacing: 0px; color: #000; }
  43.  
  44. .ptextdark {
  45. position: absolute;
  46. top: 30%;
  47. width: 100%;
  48. text-align: center;
  49. color: #000;
  50. font-size: 50px;
  51. letter-spacing: 5px;
  52. text-transform: uppercase;
  53. }
  54.  
  55. .biggerbannertextdark{
  56. font-size: 55px;
  57. margin-bottom: 1em;
  58. font-weight: 100;
  59. line-height: 1.1;
  60. }
  61.  
  62. .ptextdark .border {
  63. background-color: #fff;
  64. color: #000;
  65. padding: 20px;
  66. }
  67.  
  68. a { text-decoration: none; }
  69.  
  70. .link {
  71. display: inline-block;
  72. padding: 0.8em 0.3em;
  73. color: #fa9646;border: 1px solid #fff;
  74. color: #fff;
  75. text-transform: uppercase;
  76. font-size: 14px;
  77. width: 200px;
  78. text-align: center;
  79. transition: 0.5s;
  80. }
  81.  
  82. a:hover { transition: 0.5s; }
  83.  
  84. .link:hover {
  85. background: #fff;
  86. color: #000; }
  87.  
  88. .cover-image, .cover-image2, .cover-image3, .cover-image4, .cover-image5{
  89. position:relative;
  90. background-position: center;
  91. background-size: cover;
  92. background-repeat: no-repeat;
  93. background-attachment: fixed;
  94. top: 0px;
  95. }
  96.  
  97. .ptext {
  98. position: absolute;
  99. top: 35%;
  100. width: 100%;
  101. text-align: center;
  102. color: #fff;
  103. font-size: 50px;
  104. letter-spacing: 5px;
  105. text-transform: uppercase;
  106. }
  107.  
  108. .ptextdark a {
  109. letter-spacing: 0px;
  110. }
  111.  
  112. .ptext a {
  113. letter-spacing: 0px;
  114. }
  115.  
  116. .biggerbannertext{
  117. font-size: 55px;
  118. margin-bottom: 1em;
  119. font-weight: 100;
  120. line-height: 1.1;
  121. }
  122.  
  123. .ptext .border {
  124. background-color: #111;
  125. color: #fff;
  126. padding: 20px;
  127. }
  128.  
  129. .cover-image {
  130. width: 100%;
  131. height: 100%;
  132. position: relative;
  133. background:url(http://ilovedturkeytwizzlers.uk/images/slideshow/homepage/world_map.jpg) fixed 50%/cover; }
  134.  
  135. .cover-image5 {
  136. width: 100%;
  137. height: 200vh; /* gives the effect a bit of room to breathe */
  138. position: relative;
  139. background: url(https://i.imgur.com/vftXqz7.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
  140. }
  141.  
  142. .cover-image2 {
  143. width: 100%;
  144. min-height: 100%; /* gives the effect a bit of room to breathe */
  145. position: relative;
  146. background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led2.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
  147. }
  148.  
  149. .cover-image3 {
  150. width: 100%;
  151. min-height: 100%; /* gives the effect a bit of room to breathe */
  152. position: relative;
  153. background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led5.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
  154. }
  155.  
  156. .cover-image4 {
  157. width: 100%;
  158. min-height: 100%; /* gives the effect a bit of room to breathe */
  159. position: relative;
  160. background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led1.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
  161. }
  162.  
  163.  
  164. .cover-image5:after {
  165. content: '';
  166. position: absolute;
  167. width: inherit;
  168. height: inherit;
  169. background: inherit;
  170. background-image: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led6.jpg);
  171. mask: linear-gradient(to bottom, white 30%, transparent); /* Top image is masked with a gradient */
  172. }
  173.  
  174. .cover-image6 {
  175. width: 100%;
  176. min-height: 100%; /* gives the effect a bit of room to breathe */
  177. position: relative;
  178. background: url(http://www.led-flex.co.uk/media/wysiwyg/parallex/led3.jpg) fixed 50%/cover; /* This is the bottom image, blurred and grayscaled. Could also use filters to do this + another pseudoel, but is less performant. */
  179. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement