Advertisement
Guest User

Untitled

a guest
Jan 11th, 2020
141
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.92 KB | None | 0 0
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. html, body {
  7. width: 100%;
  8. height: 100%
  9. font-size: 14px;
  10. font-weight: normal;
  11. }
  12.  
  13. .background {
  14. width: 100%;
  15. height: 100%;
  16. background-image: url("https://i.imgur.com/3gezSd1.jpg");
  17. background-repeat: no-repeat;
  18. background-size: cover;
  19. position: relative;
  20. overflow-y: auto
  21. }
  22.  
  23. .nav {
  24. width: 350px;
  25. height: auto;
  26. position: absolute;
  27. top: 20%;
  28. Left: 0;
  29. }
  30.  
  31. .nav a {
  32. text-decoration: none;
  33. font-size: 28px;
  34. font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  35. font-weight: bold;
  36. height: 90px;
  37. margin: 5px 0;
  38. float: left;
  39. display: inline-block;
  40. background-color: black;
  41. color: white;
  42. line-height: 90px;
  43. text-align: center;
  44. transition: 300ms;
  45. }
  46.  
  47. a.active, .nav a:hover {
  48. width: 100%;
  49. background-color: white;
  50. color: black;
  51. }
  52.  
  53. .a {
  54. width: 95%;
  55. }
  56.  
  57. .b {
  58. width: 75%;
  59. }
  60.  
  61. .c {
  62. width: 70%;
  63. }
  64.  
  65. .d {
  66. width: 90%;
  67. }
  68.  
  69. .content {
  70. position: absolute;
  71. width: 930px;
  72. min-height: 500px;
  73. height: auto;
  74. right: 0;
  75. top: 10%;
  76. }
  77.  
  78. .home {
  79. position: absolute;
  80. right: 0;
  81. bottom: -50px;
  82. color: white;
  83. font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  84. }
  85.  
  86. .home h1 {
  87. font-size: 95px;
  88. padding-right: 90px;
  89. border-bottom: 1px solid white;
  90. text-transform: uppercase;
  91. }
  92.  
  93. .home h3 {
  94. font-size: 35px;
  95. padding: 5px 0;
  96. opacity: 0.6;
  97. }
  98.  
  99. .aboutus {
  100. position: absolute;
  101. right: 0;
  102. top: 10px;
  103. bottom: 10px;
  104. color: white;
  105. font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  106. padding: 0 60px;
  107. display: none;
  108. }
  109.  
  110. .aboutus p {
  111. font-size: 18px;
  112. line-height: 28px;
  113. margin-bottom: 15px;
  114. color: black;
  115. }
  116.  
  117. .gallery {
  118. position: absolute;
  119. right: 0;
  120. top: 10px;
  121. color: white;
  122. padding: 0 60px;
  123. display: none;
  124. }
  125.  
  126. .gallery .image {
  127. width: 20%;
  128. margin: 2%;
  129. float: left;
  130. }
  131.  
  132. .image img {
  133. width: 100%;
  134. transition: all ease o.5s;
  135. -webkit-transform: scale(1);
  136. transform: scale(1);
  137. -webkit-transition: all ease 0.5s;
  138. }
  139.  
  140. .image img:hover {
  141. transform: scale(1.2);
  142. -webkit-tranform: scale(1.2);
  143. }
  144.  
  145. @media only screen and (max-width: 768px) {
  146. .nav a {
  147. font-size: 10px;
  148. width: auto;
  149. height: 30px;
  150. line-height: 30px;
  151. padding: 0 10px;
  152. margin: 0 5px;
  153. }
  154. a.active, .nav a:hover {
  155. width: auto;
  156. }
  157.  
  158. .nav {
  159. width: 100%;
  160. top: 20px;
  161. z-index: 99;
  162. }
  163.  
  164.  
  165. .home h1 {
  166. font-size: 22px;
  167. padding-right: 0;
  168. border-bottom: none;
  169. }
  170.  
  171. .home h3 {
  172. font-size: 18px;
  173. }
  174.  
  175. .content {
  176. width: 100%;
  177. height: 100%;
  178. top: 0;
  179. min-height: inherit;
  180. }
  181.  
  182. .home {
  183. left: 0;
  184. text-align: center;
  185. bottom: 50px;
  186. }
  187.  
  188. .background {
  189. background-position: center;
  190. }
  191.  
  192.  
  193. .aboutus {
  194. width: 90%
  195. margin: 0 auto;
  196. padding: 100px 0 0;
  197. top: 0;
  198. left: 0;
  199. }
  200.  
  201. .aboutus p {
  202. font-size: 14px;
  203. }
  204.  
  205. .gallery {
  206. width: 90%
  207. margin: 0 auto;
  208. padding: 100px 0 0;
  209. top: 0;
  210. left: 0;
  211. }
  212.  
  213. .gallery .image {
  214. width: 38%;
  215. }
  216. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement