Template:Team:HokkaidoU Japan/About Us/CSS
From 2014.igem.org
(Difference between revisions)
Line 46: | Line 46: | ||
- | .show{ | + | .show-ymzk{ |
cursor: pointer; | cursor: pointer; | ||
position: absolute; | position: absolute; | ||
} | } | ||
- | .overlay{ | + | .overlay-ymzk{ |
opacity:0.7; | opacity:0.7; | ||
background: black; | background: black; | ||
Line 61: | Line 61: | ||
} | } | ||
- | .overlay::before { | + | .overlay-ymzk::before { |
content: ""; | content: ""; | ||
display: inline-block; | display: inline-block; | ||
Line 72: | Line 72: | ||
} | } | ||
- | .overlay-content{ | + | .overlay-content-ymzk{ |
color: white; | color: white; | ||
left: 30%; | left: 30%; | ||
Line 79: | Line 79: | ||
width: 50%; | width: 50%; | ||
} | } | ||
+ | |||
+ | .show-sone{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-sone{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-sone::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-sone{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-hana{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-hana{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-hana::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-hana{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-ryotaro{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-ryotaro{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-ryotaro::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-ryotaro{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-ayano{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-ayano{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-ayano::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-ayano{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-naoya{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-naoya{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-naoya::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-naoya{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-osamu{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-osamu{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-osamu::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-osamu{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-eri{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-eri{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-eri::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-eri{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-tori{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-tori{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-tori::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-tori{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-mami{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-mami{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-mami::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-mami{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-tamaro{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-tamaro{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-tamaro::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-tamaro{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-sanbon{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-sanbon{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-sanbon::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-sanbon{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-liu{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-liu{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-liu::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-liu{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-shehata{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlayshehata{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlayshehata::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-contentshehata{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-kensuke{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-kensuke{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-kensuke::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-kensuke{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-itoh{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-itoh{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-itoh::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-itoh{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .show-kawahata{ | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .overlay-kawahata{ | ||
+ | opacity:0.7; | ||
+ | background: black; | ||
+ | color: white; | ||
+ | height: 200px; | ||
+ | position: absolute; | ||
+ | width:500px; | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .overlay-kawahata::before { | ||
+ | content: ""; | ||
+ | display: inline-block; | ||
+ | border: 8px solid transparent; | ||
+ | border-bottom-color: #000; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | top: -8px; | ||
+ | margin-top: -8px; | ||
+ | } | ||
+ | |||
+ | .overlay-content-kawahata{ | ||
+ | color: white; | ||
+ | left: 30%; | ||
+ | position: absolute; | ||
+ | top: 30%; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Revision as of 10:06, 29 September 2014