Jonasmueller (Talk | contribs) (Created page with "<html> <style> .hero_img_jm{ position: relative; height: 800px; overflow:hidden; background: url(https://academy.avast.com/hubfs/New_Avast_Academy/Hackers/Hacker-Hero....") |
Jonasmueller (Talk | contribs) |
||
(2 intermediate revisions by 2 users not shown) | |||
Line 3: | Line 3: | ||
.hero_img_jm{ | .hero_img_jm{ | ||
position: relative; | position: relative; | ||
− | height: | + | width: 100%; |
+ | height: 65vw; | ||
overflow:hidden; | overflow:hidden; | ||
− | background: url(https:// | + | background: url(https://static.igem.org/mediawiki/2020/d/d5/T--TU_Darmstadt--Killswitch_Modelling_Banner.png); |
background-size: cover; | background-size: cover; | ||
} | } | ||
+ | |||
+ | |||
+ | |||
.container_jm{ | .container_jm{ | ||
position: absolute; | position: absolute; | ||
Line 27: | Line 31: | ||
.container_jm h1 { | .container_jm h1 { | ||
font-size: 72px; | font-size: 72px; | ||
− | letter-spacing: 0. | + | letter-spacing: 0.05em; |
− | + | ||
color: white; | color: white; | ||
} | } | ||
Line 38: | Line 41: | ||
.scroll-down_jm { | .scroll-down_jm { | ||
position: absolute; | position: absolute; | ||
− | bottom: | + | bottom: 2.4%; |
left: calc(50% - 16px) ; | left: calc(50% - 16px) ; | ||
margin-left: -16px; | margin-left: -16px; | ||
Line 75: | Line 78: | ||
0%, | 0%, | ||
100%, | 100%, | ||
− | + | 30%, | |
+ | 10%, | ||
50%, | 50%, | ||
− | + | 60%{ | |
-webkit-transform: translateY(0); | -webkit-transform: translateY(0); | ||
-ms-transform: translateY(0); | -ms-transform: translateY(0); | ||
Line 83: | Line 87: | ||
} | } | ||
− | + | 20% { | |
-webkit-transform: translateY(-10px); | -webkit-transform: translateY(-10px); | ||
-ms-transform: translateY(-10px); | -ms-transform: translateY(-10px); | ||
Line 90: | Line 94: | ||
} | } | ||
− | + | 40% { | |
-webkit-transform: translateY(-5px); | -webkit-transform: translateY(-5px); | ||
-ms-transform: translateY(-5px); | -ms-transform: translateY(-5px); | ||
Line 106: | Line 110: | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
− | padding-right: | + | padding-right: 70px; |
− | padding-left: | + | padding-left: 70px; |
− | + | padding-bottom: 5px; | |
+ | padding-top: 4px; | ||
} | } | ||
.repos_jm a{ | .repos_jm a{ | ||
− | color: | + | color: white; |
font-size: 32px; | font-size: 32px; | ||
+ | text-shadow: 1px 1px rgba(0, 0, 0, 0.5); | ||
text-decoration: none; | text-decoration: none; | ||
− | + | letter-spacing: 0.01em; | |
− | line-height: | + | line-height: 125%; |
display: block; | display: block; | ||
− | width: 100% | + | width: 100%; |
} | } | ||
.repos_jm a:hover{ | .repos_jm a:hover{ | ||
Line 125: | Line 131: | ||
} | } | ||
− | @media screen and (max-width: | + | @media screen and (max-width: 1042px) { |
.container_jm h1{ | .container_jm h1{ | ||
− | font-size: | + | font-size: 54px; |
+ | } | ||
+ | .container_jm{ | ||
+ | border: 6px solid; | ||
+ | padding: | ||
} | } | ||
.repos_jm a{ | .repos_jm a{ | ||
− | + | font-size: 23px; | |
} | } | ||
+ | .scroll-down_jm { | ||
+ | width: 52px; | ||
+ | height: 52px; | ||
+ | bottom: 21px; | ||
+ | left: calc(50% - 10px) ; | ||
+ | margin-left: -10px; | ||
+ | } | ||
+ | .scroll-down_jm span:nth-child(1){ | ||
+ | width: 21px; | ||
+ | height: 21px; | ||
+ | top: calc(50% - 14px); | ||
+ | left: calc(50% - 10.5px); | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 768px) { | ||
+ | .container_jm h1{ | ||
+ | font-size: 40px; | ||
+ | } | ||
+ | .container_jm{ | ||
+ | border: 4.4px solid; | ||
+ | padding: | ||
+ | } | ||
+ | .repos_jm a{ | ||
+ | font-size: 17.5px; | ||
+ | } | ||
+ | .scroll-down_jm { | ||
+ | width: 38px; | ||
+ | height: 38px; | ||
+ | bottom: 15.4px; | ||
+ | left: calc(50% - 8px) ; | ||
+ | margin-left: -8px; | ||
+ | } | ||
+ | .scroll-down_jm span:nth-child(1){width: 15px; | ||
+ | height: 15px; | ||
+ | top: calc(50% - 10px); | ||
+ | left: calc(50% - 7.5px); | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 600px) { | ||
+ | .container_jm h1{ | ||
+ | font-size: 30.1px; | ||
+ | } | ||
+ | .container_jm{ | ||
+ | border: 3.5px solid; | ||
+ | padding: | ||
+ | } | ||
+ | .repos_jm a{ | ||
+ | font-size: 13.5px; | ||
+ | } | ||
+ | .scroll-down_jm { | ||
+ | width: 30px; | ||
+ | height: 30px; | ||
+ | bottom: 12px; | ||
+ | left: calc(50% - 6px) ; | ||
+ | margin-left: -6px; | ||
+ | } | ||
+ | .scroll-down_jm span:nth-child(1){width: 12px; | ||
+ | height: 12px; | ||
+ | top: calc(50% - 8px); | ||
+ | left: calc(50% - 6px); | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 480px) { | ||
+ | .container_jm h1{ | ||
+ | font-size: 23.1px; | ||
+ | } | ||
+ | .container_jm{ | ||
+ | border: 2.8px solid; | ||
+ | padding: | ||
+ | } | ||
+ | .repos_jm a{ | ||
+ | font-size: 11px; | ||
+ | } | ||
+ | .scroll-down_jm { | ||
+ | width: 24px; | ||
+ | height: 24px; | ||
+ | bottom: 10px; | ||
+ | left: calc(50% - 5px) ; | ||
+ | margin-left: -5px; | ||
+ | } | ||
+ | .scroll-down_jm span:nth-child(1){width: 10px; | ||
+ | height: 10px; | ||
+ | top: calc(50% - 6.6px); | ||
+ | left: calc(50% - 5px); | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 320px) { | ||
+ | .container_jm h1{ | ||
+ | font-size: 13.7px; | ||
+ | } | ||
+ | .container_jm{ | ||
+ | border: 1.8px solid; | ||
+ | padding: | ||
+ | } | ||
+ | .repos_jm a{ | ||
+ | font-size: 7.2px; | ||
+ | } | ||
+ | .scroll-down_jm { | ||
+ | width: 16px; | ||
+ | height: 16px; | ||
+ | bottom: 6.4px; | ||
+ | left: calc(50% - 3px) ; | ||
+ | margin-left: -3px; | ||
+ | } | ||
+ | .scroll-down_jm span:nth-child(1){width: 6px; | ||
+ | height: 6px; | ||
+ | top: calc(50% - 4px); | ||
+ | left: calc(50% - 3px); | ||
+ | } | ||
} | } | ||
− | |||
− | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 11:19, 25 October 2020