(20 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; | ||
Line 22: | Line 95: | ||
border-radius:50%; | border-radius:50%; | ||
overflow:hidden; | overflow:hidden; | ||
+ | margin-bottom: 25px; | ||
} | } | ||
Line 45: | Line 119: | ||
color: #FFFFFF; | color: #FFFFFF; | ||
position:absolute; | position:absolute; | ||
− | font-size: 1. | + | font-size: 1.125em; |
font-weight: 700; | font-weight: 700; | ||
top: 0; | top: 0; | ||
Line 76: | Line 150: | ||
.underordnede{ | .underordnede{ | ||
padding-top:90px; | padding-top:90px; | ||
+ | } | ||
+ | |||
+ | .one_whole { | ||
+ | width: 85%; | ||
} | } | ||
Line 81: | Line 159: | ||
width: 28%; | width: 28%; | ||
} | } | ||
− | |||
− | |||
.last { | .last { | ||
margin-right: 0 !important; | margin-right: 0 !important; | ||
Line 100: | 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