Team:UNITN-Trento/CSS/Project/Vending Machine
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | .subscript { | + | #tn-content .container { |
+ | background-color: rgb(236, 236, 45); | ||
+ | background-image: url(https://static.igem.org/mediawiki/2013/8/80/Tn-2013_Onda-iproducts.png)!important; | ||
+ | } | ||
+ | |||
+ | .tn-title { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .tn-title .tn-subscript { | ||
display: block; | display: block; | ||
padding-left: 3em; | padding-left: 3em; | ||
Line 9: | Line 18: | ||
.tn-quote { | .tn-quote { | ||
- | + | display: block; | |
- | font-family: | + | |
+ | margin: 0 auto; | ||
+ | margin-top: 0.5em; | ||
+ | margin-bottom: 1em; | ||
+ | width: 75%; | ||
+ | |||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | font-size: 1.5em; | ||
font-style: italic; | font-style: italic; | ||
- | |||
} | } | ||
.container .sheet .col { | .container .sheet .col { | ||
display: inline-block; | display: inline-block; | ||
- | + | ||
margin: 1em 16px 0 0; | margin: 1em 16px 0 0; | ||
+ | width: 400px; | ||
} | } | ||
.container .sheet > img { | .container .sheet > img { | ||
width: 75%; | width: 75%; | ||
+ | |||
border-radius: 1em; | border-radius: 1em; | ||
box-shadow: 2px 2px 4px #323232; | box-shadow: 2px 2px 4px #323232; | ||
Line 30: | Line 47: | ||
position: relative; | position: relative; | ||
top: 2em; | top: 2em; | ||
- | + | ||
- | + | ||
- | + | ||
margin: 0; | margin: 0; | ||
margin-left: 1.5em; | margin-left: 1.5em; | ||
- | + | height: 500px; | |
+ | min-width: 400px; | ||
+ | width: 400px; | ||
+ | |||
background-color: transparent; | background-color: transparent; | ||
border-radius: 1em; | border-radius: 1em; | ||
- | |||
} | } | ||
#jms-slideshow > div { | #jms-slideshow > div { | ||
- | |||
- | |||
height: 500px; | height: 500px; | ||
+ | min-width: 400px; | ||
+ | width: 400px; | ||
+ | |||
background-color: transparent; | background-color: transparent; | ||
border: none; | border: none; | ||
Line 51: | Line 69: | ||
#jms-slideshow > div .step { | #jms-slideshow > div .step { | ||
- | + | display: none; | |
+ | |||
height: 1000px; | height: 1000px; | ||
+ | width: 800px; | ||
+ | |||
box-shadow: none; | box-shadow: none; | ||
text-align: center; | text-align: center; | ||
+ | |||
z-index: 0; | z-index: 0; | ||
- | |||
} | } | ||
#jms-slideshow > div .step.active { | #jms-slideshow > div .step.active { | ||
- | |||
display: block; | display: block; | ||
+ | z-index: 5; | ||
} | } | ||
Line 67: | Line 88: | ||
max-height: 1000px; | max-height: 1000px; | ||
max-width: 800px; | max-width: 800px; | ||
+ | |||
border-radius: 1em; | border-radius: 1em; | ||
} | } | ||
Line 72: | Line 94: | ||
.tn-hoverTag { | .tn-hoverTag { | ||
position: fixed; | position: fixed; | ||
- | top:0; right:0; bottom:0; left:0; | + | top:0; |
+ | right:0; | ||
+ | bottom:0; | ||
+ | left:0; | ||
- | |||
background-color: rgba(50,50,50,.9); | background-color: rgba(50,50,50,.9); | ||
+ | |||
+ | text-align: center; | ||
+ | |||
z-index: 5; | z-index: 5; | ||
} | } | ||
Line 86: | Line 113: | ||
margin-top: 2em; | margin-top: 2em; | ||
height: 75%; | height: 75%; | ||
+ | |||
border-radius:1em; | border-radius:1em; | ||
} | } | ||
Line 92: | Line 120: | ||
display: block; | display: block; | ||
margin-top: 0.5em; | margin-top: 0.5em; | ||
+ | |||
+ | color: white; | ||
font-size: 2em; | font-size: 2em; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } |
Revision as of 12:21, 26 September 2013
- tn-content .container {
background-color: rgb(236, 236, 45); background-image: url(https://static.igem.org/mediawiki/2013/8/80/Tn-2013_Onda-iproducts.png)!important;
}
.tn-title {
text-align: center;
}
.tn-title .tn-subscript {
display: block; padding-left: 3em; font-family: "Cabin"; font-size: 14px; font-style:italic; font-weight: lighter;
}
.tn-quote {
display: block;
margin: 0 auto; margin-top: 0.5em; margin-bottom: 1em; width: 75%;
font-family: 'Open Sans Condensed', sans-serif; font-size: 1.5em; font-style: italic;
}
.container .sheet .col {
display: inline-block;
margin: 1em 16px 0 0; width: 400px;
}
.container .sheet > img {
width: 75%;
border-radius: 1em; box-shadow: 2px 2px 4px #323232;
}
.container .sheet .jms-slideshow {
position: relative; top: 2em;
margin: 0; margin-left: 1.5em; height: 500px; min-width: 400px; width: 400px;
background-color: transparent; border-radius: 1em;
}
- jms-slideshow > div {
height: 500px; min-width: 400px; width: 400px; background-color: transparent; border: none; box-shadow: none;
}
- jms-slideshow > div .step {
display: none;
height: 1000px; width: 800px; box-shadow: none; text-align: center;
z-index: 0;
}
- jms-slideshow > div .step.active {
display: block; z-index: 5;
}
- jms-slideshow > div .step img {
max-height: 1000px; max-width: 800px;
border-radius: 1em;
}
.tn-hoverTag {
position: fixed; top:0; right:0; bottom:0; left:0;
background-color: rgba(50,50,50,.9);
text-align: center; z-index: 5;
}
.tn-hoverTag > div {
height: 100%;
}
.tn-hoverTag img {
margin-top: 2em; height: 75%;
border-radius:1em;
}
.tn-hoverTag span {
display: block; margin-top: 0.5em;
color: white; font-size: 2em;
}