Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- padding: 0;
- margin: 0;
- outline: none;
- }
- :root {
- --blau: #020818;
- }
- html {
- scroll-behavior: smooth;
- }
- body {
- overflow-x: hidden;
- position: relative;
- overflow-y: scroll;
- background-position-y: bottom;
- background-size: cover;
- }
- /*
- Header
- */
- body {
- background-image: url("images/bg.jpg");
- background-size: cover;
- }
- header nav {
- width: 100vw;
- position: absolute;
- height: 8vw;
- transform: rotate(1.5deg);
- background-color: var(--blau);
- top: -1.5vw;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 50;
- }
- header nav ul {
- transform: rotate(-1.5deg);
- }
- header nav ul li {
- top: 0.5vw;
- display: inline;
- font-family: 'Bebas Neue', cursive;
- font-size: 1.5vw;
- padding: 0vw 1.5vw;
- left: 9vw;
- position: relative;
- }
- header nav ul li a {
- font-family: 'Bebas Neue', cursive;
- font-weight: 400;
- font-size: 1.5vw;
- letter-spacing: 0.2vw;
- color: white;
- text-decoration: none;
- }
- header #image {
- width: 110%;
- z-index: 49;
- position: relative;
- height: 46vw;
- transform: rotate(-1.5deg);
- left: -5%;
- background-image: url("images/Headerbild.png");
- background-size: cover;
- }
- header #image img {
- position: absolute;
- left: 20%;
- top: 17vw;
- }
- /*
- Main
- */
- main #welcome {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- width: 60%;
- position: relative;
- left: 20%;
- top: 5vw;
- font-family: Arial, Helvetica, sans-serif;
- text-align: center;
- color: white;
- }
- main #welcome img {
- position: absolute;
- right: -16vw;
- top: -11vw;
- z-index: 1000;
- }
- main #welcome h1 {
- font-size: 3vw;
- margin-bottom: 1vw;
- font-family: 'Bebas Neue', cursive;
- font-weight: 400;
- letter-spacing: 0.3vw;
- }
- main #welcome p {
- font-size: 1.2vw;
- font-family: 'Muli', sans-serif;
- font-weight: 400;
- }
- main #welcome video {
- margin-top: 2.5vw;
- margin-bottom: 3vw;
- }
- main #service {
- position: relative;
- width: 80%;
- top: 0;
- left: 10%;
- display: flex;
- justify-content: center;
- }
- main #service #head {
- position: relative;
- margin-top: 5vw;
- height: auto;
- width: 50%;
- margin-bottom: 0vw;
- }
- #info {
- width: 100%;
- }
- #info h2 {
- text-align: center;
- margin-top: 1vw;
- margin-bottom: 1vw;
- font-family: 'Bebas Neue', cursive;
- font-weight: 400;
- font-size: 2vw;
- letter-spacing: 0.2vw;
- color: white;
- }
- #info p {
- text-align: center;
- margin-top: 1vw;
- margin-bottom: 1vw;
- font-family: 'Muli', sans-serif;
- font-weight: 400;
- font-size: 1vw;
- color: white;
- }
- #info .text1 {
- position: absolute;
- width: 32%;
- left: 14%;
- }
- #info .text2 {
- position: absolute;
- width: 32%;
- right: 14%;
- }
- #info .text3 {
- position: absolute;
- width: 32%;
- left: 14%;
- margin-top: 31vw;
- }
- #info .text4 {
- position: absolute;
- width: 32%;
- right: 14%;
- margin-top: 31vw;
- }
- #info .text5 {
- position: relative;
- width: 32%;
- left: 34%;
- top: 63vw;
- margin-bottom: 4vw;
- }
- main #verlosung {
- position: relative;
- width: 100%;
- height: 43vw;
- top: 70vw;
- background-image: url("images/verlosung_pic.png");
- background-size: cover;
- }
- main #verlosung img {
- position: absolute;
- left: 25%;
- top: -11vw;
- }
- main #verlosung h1 {
- position: absolute;
- color: white;
- font-size: 5.5vw;
- line-height:5vw;
- font-family: 'Bebas Neue', cursive;
- font-weight: 400;
- letter-spacing: 0.2vw;
- top: 14.5vw;
- left: 14.5%;
- }
- main #verlosung p {
- position: absolute;
- color: white;
- font-size: 1.2vw;
- font-family: 'Muli', sans-serif;
- font-weight: 400;
- top: 25vw;
- left: 14.5%;
- width: 35%;
- }
- main #verlosung #car {
- width: 40%;
- position: absolute;
- right: 19vw;
- bottom: -2vw;
- color: white;
- text-align: center;
- }
- main #verlosung h4 {
- font-size: 1vw;
- font-family: 'Muli', sans-serif;
- font-weight: 400;
- }
- main #verlosung h3 {
- font-size: 5vw;
- font-weight: 300;
- font-family: 'Muli', sans-serif;
- font-weight: 400;
- }
- main #view {
- position: relative;
- width: 100%;
- top: 89vw;
- }
- main #view #rooftop {
- position: relative;
- transform: rotate(-2.5deg);
- left: -1vw;
- }
- main #view #dreamhotel {
- position: absolute;
- left: 20%;
- z-index: 1000;
- top: -8vw;
- }
- main #view #relax {
- position: absolute;
- left: 65%;
- z-index: 1000;
- top: 12vw;
- font-size: 5vw;
- line-height: 5vw;
- font-family: 'Bebas Neue', cursive;
- font-weight: 300;
- letter-spacing: 0.3vw;
- color: white;
- }
- main #view #prelax {
- position: absolute;
- left: 65%;
- z-index: 1000;
- top: 23vw;
- font-size: 1.2vw;
- font-family: 'Muli', sans-serif;
- font-weight: 400;
- color: white;
- width: 30%;
- }
- main #view #parties {
- position: absolute;
- left: 12%;
- z-index: 1000;
- top: 34vw;
- font-size: 5vw;
- line-height: 5vw;
- font-family: 'Bebas Neue', cursive;
- font-weight: 300;
- letter-spacing: 0.3vw;
- color: white;
- }
- #footer_bg {
- bottom: -135vw;
- position: absolute;
- z-index: 1;
- }
- main #view #pparties {
- position: absolute;
- left: 12%;
- z-index: 1000;
- top: 45vw;
- font-size: 1.2vw;
- font-family: 'Muli', sans-serif;
- font-weight: 400;
- color: white;
- width: 30%;
- }
- footer {
- width: 100%;
- height: 18vw;
- position: absolute;
- bottom: -133vw;
- z-index: 2;
- }
- footer div {
- width: 100%;
- position: relative;
- height: 20vw;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
- footer div h2 {
- color: white;
- height: 1vw;
- width: 100%;
- position: relative;
- top: 2.5vw;
- font-size: 1.9vw;
- font-family: 'Muli', sans-serif;
- font-weight: 900;
- letter-spacing: 0.3vw;
- left: 12%;
- }
- footer div h1 {
- position: relative;
- width: 100%;
- top: -2.5vw;
- height: 1vw;
- color: white;
- font-size: 3.2vw;
- font-family: 'Muli', sans-serif;
- font-weight: 300;
- left: 12%;
- }
- footer img {
- position: absolute;
- bottom: 11vw;
- right: 13vw;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement