Advertisement
Guest User

Untitled

a guest
Dec 8th, 2019
113
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.41 KB | None | 0 0
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. outline: none;
  5. }
  6.  
  7. :root {
  8. --blau: #020818;
  9. }
  10. html {
  11. scroll-behavior: smooth;
  12. }
  13. body {
  14. overflow-x: hidden;
  15. position: relative;
  16. overflow-y: scroll;
  17. background-position-y: bottom;
  18. background-size: cover;
  19. }
  20.  
  21. /*
  22. Header
  23. */
  24.  
  25. body {
  26. background-image: url("images/bg.jpg");
  27. background-size: cover;
  28. }
  29.  
  30. header nav {
  31. width: 100vw;
  32. position: absolute;
  33. height: 8vw;
  34. transform: rotate(1.5deg);
  35. background-color: var(--blau);
  36. top: -1.5vw;
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. z-index: 50;
  41. }
  42. header nav ul {
  43. transform: rotate(-1.5deg);
  44. }
  45. header nav ul li {
  46. top: 0.5vw;
  47. display: inline;
  48. font-family: 'Bebas Neue', cursive;
  49. font-size: 1.5vw;
  50. padding: 0vw 1.5vw;
  51. left: 9vw;
  52. position: relative;
  53. }
  54. header nav ul li a {
  55. font-family: 'Bebas Neue', cursive;
  56. font-weight: 400;
  57. font-size: 1.5vw;
  58. letter-spacing: 0.2vw;
  59. color: white;
  60. text-decoration: none;
  61. }
  62. header #image {
  63. width: 110%;
  64. z-index: 49;
  65. position: relative;
  66. height: 46vw;
  67. transform: rotate(-1.5deg);
  68. left: -5%;
  69. background-image: url("images/Headerbild.png");
  70. background-size: cover;
  71. }
  72. header #image img {
  73. position: absolute;
  74. left: 20%;
  75. top: 17vw;
  76. }
  77.  
  78. /*
  79. Main
  80. */
  81. main #welcome {
  82. display: flex;
  83. flex-wrap: wrap;
  84. justify-content: center;
  85. width: 60%;
  86. position: relative;
  87. left: 20%;
  88. top: 5vw;
  89. font-family: Arial, Helvetica, sans-serif;
  90. text-align: center;
  91. color: white;
  92. }
  93. main #welcome img {
  94. position: absolute;
  95. right: -16vw;
  96. top: -11vw;
  97. z-index: 1000;
  98. }
  99. main #welcome h1 {
  100. font-size: 3vw;
  101. margin-bottom: 1vw;
  102. font-family: 'Bebas Neue', cursive;
  103. font-weight: 400;
  104. letter-spacing: 0.3vw;
  105. }
  106. main #welcome p {
  107. font-size: 1.2vw;
  108. font-family: 'Muli', sans-serif;
  109. font-weight: 400;
  110. }
  111. main #welcome video {
  112. margin-top: 2.5vw;
  113. margin-bottom: 3vw;
  114. }
  115.  
  116. main #service {
  117. position: relative;
  118. width: 80%;
  119. top: 0;
  120. left: 10%;
  121. display: flex;
  122. justify-content: center;
  123. }
  124. main #service #head {
  125. position: relative;
  126. margin-top: 5vw;
  127. height: auto;
  128. width: 50%;
  129. margin-bottom: 0vw;
  130. }
  131.  
  132. #info {
  133. width: 100%;
  134. }
  135. #info h2 {
  136. text-align: center;
  137. margin-top: 1vw;
  138. margin-bottom: 1vw;
  139. font-family: 'Bebas Neue', cursive;
  140. font-weight: 400;
  141. font-size: 2vw;
  142. letter-spacing: 0.2vw;
  143. color: white;
  144. }
  145. #info p {
  146. text-align: center;
  147. margin-top: 1vw;
  148. margin-bottom: 1vw;
  149. font-family: 'Muli', sans-serif;
  150. font-weight: 400;
  151. font-size: 1vw;
  152. color: white;
  153. }
  154.  
  155. #info .text1 {
  156. position: absolute;
  157. width: 32%;
  158. left: 14%;
  159. }
  160. #info .text2 {
  161. position: absolute;
  162. width: 32%;
  163. right: 14%;
  164.  
  165. }
  166. #info .text3 {
  167. position: absolute;
  168. width: 32%;
  169. left: 14%;
  170. margin-top: 31vw;
  171. }
  172. #info .text4 {
  173. position: absolute;
  174. width: 32%;
  175. right: 14%;
  176. margin-top: 31vw;
  177. }
  178. #info .text5 {
  179. position: relative;
  180. width: 32%;
  181. left: 34%;
  182. top: 63vw;
  183. margin-bottom: 4vw;
  184. }
  185.  
  186.  
  187. main #verlosung {
  188. position: relative;
  189. width: 100%;
  190. height: 43vw;
  191. top: 70vw;
  192. background-image: url("images/verlosung_pic.png");
  193. background-size: cover;
  194. }
  195. main #verlosung img {
  196. position: absolute;
  197. left: 25%;
  198. top: -11vw;
  199.  
  200. }
  201. main #verlosung h1 {
  202. position: absolute;
  203. color: white;
  204. font-size: 5.5vw;
  205. line-height:5vw;
  206. font-family: 'Bebas Neue', cursive;
  207. font-weight: 400;
  208. letter-spacing: 0.2vw;
  209. top: 14.5vw;
  210. left: 14.5%;
  211. }
  212. main #verlosung p {
  213. position: absolute;
  214. color: white;
  215. font-size: 1.2vw;
  216. font-family: 'Muli', sans-serif;
  217. font-weight: 400;
  218. top: 25vw;
  219. left: 14.5%;
  220. width: 35%;
  221. }
  222. main #verlosung #car {
  223. width: 40%;
  224. position: absolute;
  225. right: 19vw;
  226. bottom: -2vw;
  227. color: white;
  228. text-align: center;
  229. }
  230. main #verlosung h4 {
  231. font-size: 1vw;
  232. font-family: 'Muli', sans-serif;
  233. font-weight: 400;
  234.  
  235. }
  236. main #verlosung h3 {
  237. font-size: 5vw;
  238. font-weight: 300;
  239. font-family: 'Muli', sans-serif;
  240. font-weight: 400;
  241. }
  242.  
  243. main #view {
  244. position: relative;
  245. width: 100%;
  246. top: 89vw;
  247. }
  248. main #view #rooftop {
  249. position: relative;
  250. transform: rotate(-2.5deg);
  251. left: -1vw;
  252. }
  253. main #view #dreamhotel {
  254. position: absolute;
  255. left: 20%;
  256. z-index: 1000;
  257. top: -8vw;
  258. }
  259. main #view #relax {
  260. position: absolute;
  261. left: 65%;
  262. z-index: 1000;
  263. top: 12vw;
  264. font-size: 5vw;
  265. line-height: 5vw;
  266. font-family: 'Bebas Neue', cursive;
  267. font-weight: 300;
  268. letter-spacing: 0.3vw;
  269. color: white;
  270. }
  271. main #view #prelax {
  272. position: absolute;
  273. left: 65%;
  274. z-index: 1000;
  275. top: 23vw;
  276. font-size: 1.2vw;
  277. font-family: 'Muli', sans-serif;
  278. font-weight: 400;
  279. color: white;
  280. width: 30%;
  281. }
  282. main #view #parties {
  283. position: absolute;
  284. left: 12%;
  285. z-index: 1000;
  286. top: 34vw;
  287. font-size: 5vw;
  288. line-height: 5vw;
  289. font-family: 'Bebas Neue', cursive;
  290. font-weight: 300;
  291. letter-spacing: 0.3vw;
  292. color: white;
  293. }
  294. #footer_bg {
  295. bottom: -135vw;
  296. position: absolute;
  297. z-index: 1;
  298. }
  299. main #view #pparties {
  300. position: absolute;
  301. left: 12%;
  302. z-index: 1000;
  303. top: 45vw;
  304. font-size: 1.2vw;
  305. font-family: 'Muli', sans-serif;
  306. font-weight: 400;
  307. color: white;
  308. width: 30%;
  309. }
  310.  
  311. footer {
  312. width: 100%;
  313. height: 18vw;
  314. position: absolute;
  315. bottom: -133vw;
  316. z-index: 2;
  317. }
  318. footer div {
  319. width: 100%;
  320. position: relative;
  321. height: 20vw;
  322. display: flex;
  323. flex-wrap: wrap;
  324. align-items: center;
  325. }
  326. footer div h2 {
  327. color: white;
  328. height: 1vw;
  329. width: 100%;
  330. position: relative;
  331. top: 2.5vw;
  332. font-size: 1.9vw;
  333. font-family: 'Muli', sans-serif;
  334. font-weight: 900;
  335. letter-spacing: 0.3vw;
  336. left: 12%;
  337. }
  338. footer div h1 {
  339. position: relative;
  340. width: 100%;
  341. top: -2.5vw;
  342. height: 1vw;
  343. color: white;
  344. font-size: 3.2vw;
  345. font-family: 'Muli', sans-serif;
  346. font-weight: 300;
  347. left: 12%;
  348. }
  349. footer img {
  350. position: absolute;
  351. bottom: 11vw;
  352. right: 13vw;
  353. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement