Template:Kyoto/css/top
From 2014.igem.org
(Difference between revisions)
(68 intermediate revisions not shown) | |||
Line 26: | Line 26: | ||
height: 780px; | height: 780px; | ||
margin-top: -395px; | margin-top: -395px; | ||
- | margin-left: - | + | margin-left: -688px; |
background-image: url('https://static.igem.org/mediawiki/2014/9/95/Kyoto_top_background.png'); | background-image: url('https://static.igem.org/mediawiki/2014/9/95/Kyoto_top_background.png'); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
Line 41: | Line 41: | ||
} | } | ||
- | #kyoto-top- | + | #kyoto-top-magnet{ |
float: left; | float: left; | ||
} | } | ||
- | #kyoto-top-magnet{ | + | #kyoto-top-magnet img { |
+ | top: 30px; | ||
float: right; | float: right; | ||
+ | margin-right: 350px; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-dms { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-dms img { | ||
+ | top: 10px; | ||
+ | float: left; | ||
+ | margin-left: 345px; | ||
} | } | ||
Line 56: | Line 68: | ||
.kyoto-fade > div{ | .kyoto-fade > div{ | ||
- | width: | + | width: 440px; |
- | + | margin: auto; | |
- | padding: | + | padding: 10px; |
position: relative; | position: relative; | ||
- | + | top: 100px; | |
opacity: 0; | opacity: 0; | ||
transition: opacity 0.5s; | transition: opacity 0.5s; | ||
-webkit-transition: opacity 0.5s; | -webkit-transition: opacity 0.5s; | ||
- | -moz- | + | -moz-transitiopn: opacity 0.5s; |
-o-transition: opacity 0.5s; | -o-transition: opacity 0.5s; | ||
-ms-transition: opacity 0.5s; | -ms-transition: opacity 0.5s; | ||
Line 70: | Line 82: | ||
.kyoto-fade:hover > div { | .kyoto-fade:hover > div { | ||
- | opacity: 0. | + | opacity: 0.9; |
} | } | ||
- | + | .kyoto-fade p { | |
- | + | color: #ffffff; | |
- | + | ||
- | + | ||
} | } | ||
- | #kyoto-top-abst-magnet{ | + | .kyoto-fade > img{ |
- | background-color: # | + | position: relative; |
- | top: | + | opacity: 0; |
- | margin-left: | + | transition: opacity 0.5s; |
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transitiopn: opacity 0.5s; | ||
+ | -o-transition: opacity 0.5s; | ||
+ | -ms-transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | .kyoto-fade:hover > img { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .kyoto-fade h2 { | ||
+ | padding-top: 0px; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | .kyoto-top-abst-blank { | ||
+ | height: 270px; | ||
+ | width: 105px; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-abst-magnet { | ||
+ | background-color: #88722c; | ||
+ | margin-right: 30px; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-abst-magnet > .kyoto-top-abst-blank { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-abst-dms { | ||
+ | background-color: #8888cc; | ||
+ | margin-left: 30px; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-abst-dms > .kyoto-top-abst-blank { | ||
+ | float: left; | ||
} | } | ||
Line 92: | Line 138: | ||
position: absolute; | position: absolute; | ||
z-index: 20; | z-index: 20; | ||
+ | outline: none; | ||
background-color: transparent; | background-color: transparent; | ||
background-image: url('https://static.igem.org/mediawiki/2014/e/e5/Kyoto_top_logo.png'); | background-image: url('https://static.igem.org/mediawiki/2014/e/e5/Kyoto_top_logo.png'); | ||
Line 148: | Line 195: | ||
#kyoto-top-icon:hover #kyoto-top-menu-right{ | #kyoto-top-icon:hover #kyoto-top-menu-right{ | ||
margin-left: 90px; | margin-left: 90px; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
#kyoto-top-sponsor ul { | #kyoto-top-sponsor ul { | ||
- | margin: | + | margin: 15px auto; |
width: 1000px; | width: 1000px; | ||
- | height: | + | height: 300px; |
+ | background-image: url('https://static.igem.org/mediawiki/2014/3/3f/Kyoto-block-background.png'); | ||
+ | background-repeat: no-repeat; | ||
} | } | ||
#kyoto-top-sponsor li { | #kyoto-top-sponsor li { | ||
float: left; | float: left; | ||
- | width: | + | width: 150px; |
- | padding: | + | height: 150px; |
+ | margin: 0px; | ||
+ | padding: 75px 35px 75px 35px; | ||
} | } | ||
+ | #kyoto-top-sponsor-ku { | ||
+ | padding-left: 95px !important; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-sponsor-im { | ||
+ | padding-right: 95px !important; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-sponsor-promega img { | ||
+ | padding-top: 38px; | ||
+ | } | ||
+ | |||
+ | #kyoto-top-sponsor-cosmo img { | ||
+ | padding-top: 18px; | ||
+ | } | ||
+ | |||
+ | .kyoto-fade > h1 { | ||
+ | height: 120px; | ||
+ | margin: 0 auto; | ||
+ | padding: 0px; | ||
+ | position: relative; | ||
+ | top: 100px; | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | .kyoto-fade > h1 > a { | ||
+ | display: block; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | #kyoto-title-magnet { | ||
+ | width: 439px; | ||
+ | margin-right: 30px; | ||
+ | } | ||
+ | |||
+ | #kyoto-title-magnet a{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/0/08/Kyoto-title-Magneto.png'); | ||
+ | } | ||
+ | |||
+ | #kyoto-title-dms { | ||
+ | width: 335px; | ||
+ | margin-left: 95px; | ||
+ | } | ||
+ | |||
+ | #kyoto-title-dms a { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/5/56/Kyoto-Dmstitle.png'); | ||
+ | } | ||
@media only screen | @media only screen | ||
and (min-width: 768px) | and (min-width: 768px) | ||
and (max-width: 1024px) { | and (max-width: 1024px) { | ||
- | .kyoto-fade > div { opacity: 0. | + | .kyoto-fade > div { opacity: 0.8; } |
+ | .kyoto-fade:hover > div { opacity: 0.8; } | ||
+ | .kyoto-fade > img { opacity: 1; } | ||
+ | .kyoto-fade:hover > img { opacity: 1; } | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 11:28, 17 October 2014