(23 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
− | + | ||
− | + | ||
− | + | .computerdiv{ | |
− | + | width:100%; | |
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | text-align:center; | ||
} | } | ||
+ | |||
+ | |||
+ | .df1computer{ | ||
+ | width:30%; | ||
+ | } | ||
+ | |||
+ | .design1contain{ | ||
+ | position:relative; | ||
+ | margin:30%; | ||
+ | |||
+ | } | ||
+ | .design2contain{ | ||
+ | position:relative; | ||
+ | margin:3%; | ||
+ | width:100%; | ||
+ | margin-right:auto; | ||
+ | margin-left:auto; | ||
+ | max-width:700px; | ||
+ | } | ||
+ | |||
+ | .df1promoter{ | ||
+ | position: absolute; | ||
+ | left: 35%; | ||
+ | top: 40%; | ||
+ | width: 30%; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .design1contain{ | ||
+ | position:relative; | ||
+ | margin:10%; | ||
+ | } | ||
+ | |||
+ | .df2{ | ||
+ | position: absolute; | ||
+ | width: 47%; | ||
+ | background-color: #2a577d; | ||
+ | max-width: 500px; | ||
+ | padding: 15px; | ||
+ | color: #fff; | ||
+ | border-radius: 25px; | ||
+ | font-size:80%; | ||
+ | } | ||
+ | |||
+ | .df2promoter{ | ||
+ | left: 0%; | ||
+ | top: -3%; | ||
+ | } | ||
+ | |||
+ | .df3promoter{ | ||
+ | right: 0%; | ||
+ | top: 0%; | ||
+ | } | ||
+ | |||
+ | .df4promoter{ | ||
+ | right: 0%; | ||
+ | bottom: 0%; | ||
+ | width:35%; | ||
+ | } | ||
+ | |||
+ | .df5promoter{ | ||
+ | left: 0%; | ||
+ | bottom: 0%; | ||
+ | width:59%; | ||
+ | } | ||
+ | |||
.button-images { | .button-images { | ||
− | max-width: | + | max-width: 850px; |
margin: 75px auto; | margin: 75px auto; | ||
+ | } | ||
+ | |||
+ | .button-container-space{ | ||
+ | margin-bottom: 25px; | ||
+ | |||
} | } | ||
Line 21: | Line 95: | ||
border-radius:50%; | border-radius:50%; | ||
overflow:hidden; | overflow:hidden; | ||
+ | margin-bottom: 25px; | ||
} | } | ||
Line 38: | Line 113: | ||
.button-container a { | .button-container a { | ||
− | transition: all 1s ease-out; | + | transition: all 1s ease-out !important; |
− | background: rgba( | + | background: rgba(10, 10, 10, 0.7) !important; |
border-radius:50%; vertical-align:middle; | border-radius:50%; vertical-align:middle; | ||
padding:5%; | padding:5%; | ||
Line 50: | Line 125: | ||
right:0; | right:0; | ||
bottom:0; | bottom:0; | ||
− | width: | + | width:100%; |
display:inline-block; | display:inline-block; | ||
text-decoration: none; | text-decoration: none; | ||
Line 75: | Line 150: | ||
.underordnede{ | .underordnede{ | ||
padding-top:90px; | padding-top:90px; | ||
+ | } | ||
+ | |||
+ | .one_whole { | ||
+ | width: 85%; | ||
} | } | ||
Line 80: | Line 159: | ||
width: 28%; | width: 28%; | ||
} | } | ||
− | |||
− | |||
.last { | .last { | ||
margin-right: 0 !important; | margin-right: 0 !important; | ||
Line 99: | Line 176: | ||
height: 15px; | height: 15px; | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media screen and (max-width: 710px){ | ||
+ | .df2promoter { | ||
+ | left: 0%; | ||
+ | top: -9%; | ||
+ | } | ||
+ | |||
+ | .df3promoter { | ||
+ | right: 0%; | ||
+ | top: -9%; | ||
+ | } | ||
+ | |||
+ | .df5promoter { | ||
+ | left: 0%; | ||
+ | bottom: -7%; | ||
+ | width: 59%; | ||
+ | } | ||
+ | |||
+ | .df4promoter { | ||
+ | right: 0%; | ||
+ | bottom: -6%; | ||
+ | width: 35%; | ||
+ | } | ||
+ | |||
+ | .design2contain{ | ||
+ | margin-top: 15%; | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | @media screen and (max-width: 650px){ | ||
+ | .df2promoter { | ||
+ | left: 0%; | ||
+ | top: -25%; | ||
+ | } | ||
+ | |||
+ | .df3promoter { | ||
+ | right: 0%; | ||
+ | top: -25%; | ||
+ | } | ||
+ | |||
+ | .df5promoter { | ||
+ | left: 0%; | ||
+ | bottom: -17%; | ||
+ | width: 59%; | ||
+ | } | ||
+ | |||
+ | .df4promoter { | ||
+ | right: 0%; | ||
+ | bottom: -16%; | ||
+ | width: 35%; | ||
+ | } | ||
+ | |||
+ | .design2contain{ | ||
+ | margin-top: 25%; | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | @media screen and (max-width: 570px){ | ||
+ | .df2{ | ||
+ | font-size:70%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 510px){ | ||
+ | #designlinesfig1{ | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .df1promoter { | ||
+ | position: absolute; | ||
+ | left: 30%; | ||
+ | top: 38%; | ||
+ | width: 40%; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 465px){ | ||
+ | .df1computer { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .df1promoter { | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | width: 60%; | ||
+ | margin: auto; | ||
+ | left: 20%; | ||
+ | top: 0%; | ||
+ | } | ||
+ | |||
+ | #designlinesfig1{ | ||
+ | display: none; | ||
+ | } | ||
+ | .df2 { | ||
+ | position: relative; | ||
+ | |||
+ | margin: 10px; | ||
+ | } | ||
+ | |||
+ | .df2promoter { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .df3promoter { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .df5promoter { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .df4promoter { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .design2contain{ | ||
+ | margin-top: 10%; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 10:38, 20 October 2019