(10 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{ | .design1contain{ | ||
Line 13: | Line 26: | ||
margin-right:auto; | margin-right:auto; | ||
margin-left:auto; | margin-left:auto; | ||
+ | max-width:700px; | ||
} | } | ||
.df1promoter{ | .df1promoter{ | ||
− | + | position: absolute; | |
− | + | left: 35%; | |
− | top:40%; | + | top: 40%; |
− | + | width: 30%; | |
+ | z-index: 1; | ||
} | } | ||
Line 28: | Line 43: | ||
.df2{ | .df2{ | ||
− | + | position: absolute; | |
− | + | width: 47%; | |
− | background-color: # | + | background-color: #2a577d; |
− | + | max-width: 500px; | |
+ | padding: 15px; | ||
+ | color: #fff; | ||
+ | border-radius: 25px; | ||
+ | font-size:80%; | ||
} | } | ||
.df2promoter{ | .df2promoter{ | ||
left: 0%; | left: 0%; | ||
− | top: - | + | top: -3%; |
} | } | ||
.df3promoter{ | .df3promoter{ | ||
right: 0%; | right: 0%; | ||
− | top: | + | top: 0%; |
} | } | ||
.df4promoter{ | .df4promoter{ | ||
− | + | right: 0%; | |
− | bottom: | + | bottom: 0%; |
width:35%; | width:35%; | ||
} | } | ||
.df5promoter{ | .df5promoter{ | ||
− | + | left: 0%; | |
− | bottom: | + | bottom: 0%; |
width:59%; | width:59%; | ||
} | } | ||
Line 157: | 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