Team:UNITN-Trento/CSS/Home
From 2013.igem.org
m (Added 1px height to tour cell) |
|||
(52 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
padding-bottom: 0 !important; | padding-bottom: 0 !important; | ||
} | } | ||
+ | |||
+ | /* NEWS */ | ||
+ | |||
+ | .news { | ||
+ | display: block; | ||
+ | margin: -1em; | ||
+ | |||
+ | color: white; | ||
+ | font-family: "Boogaloo", cursive; | ||
+ | font-size: 2.7em; | ||
+ | text-align: center; | ||
+ | text-shadow: 0 0 4px black; | ||
+ | } | ||
+ | |||
+ | .news:link, | ||
+ | .news:visited, | ||
+ | .news-2:link, | ||
+ | .news-2:visited { | ||
+ | color: white; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .news:hover, | ||
+ | .news-2:hover { | ||
+ | color: rgba(196, 34, 28,1); | ||
+ | text-decoration: underline; | ||
+ | text-shadow: 0 0 4px white; | ||
+ | } | ||
+ | |||
+ | .news .photo { | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | .news-2 { | ||
+ | display: block; | ||
+ | margin: 0.2em; | ||
+ | margin-top: 0.3em; | ||
+ | |||
+ | color: white; | ||
+ | font-family: "Boogaloo", cursive; | ||
+ | font-size: 2.7em; | ||
+ | text-align: center; | ||
+ | text-shadow: 0 0 4px black; | ||
+ | } | ||
+ | |||
+ | /*PRE-GRID*/ | ||
+ | |||
+ | .pre-grid { | ||
+ | width: 960px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .pre-grid .sheet { | ||
+ | width: 922px; | ||
+ | min-height: 100px; | ||
+ | |||
+ | margin-left: 10px; | ||
+ | |||
+ | background-color: rgba(39,48,77,.9); | ||
+ | background-image: url( https://static.igem.org/mediawiki/2013/f/f6/Tn-2013-boxbg-Onda-Blueberry.png); | ||
+ | border: 3px solid white; | ||
+ | |||
+ | box-shadow: 2px 2px 4px #323232; | ||
+ | |||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .pre-grid .sheet .container { | ||
+ | margin: 20px; | ||
+ | padding: 15px 25px; | ||
+ | |||
+ | background-color: rgba(250,250,250,.7); | ||
+ | border-radius: 10px; | ||
+ | } | ||
+ | |||
+ | .pre-grid p { | ||
+ | margin: 0.4em auto; | ||
+ | |||
+ | line-height: 1.2em; | ||
+ | } | ||
+ | |||
+ | .pre-grid .silhouette { | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | /*GRID*/ | ||
.grid { | .grid { | ||
Line 13: | Line 100: | ||
.column { | .column { | ||
display: inline-block; | display: inline-block; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 315px; | ||
vertical-align: top; | vertical-align: top; | ||
} | } | ||
- | |||
.cell { | .cell { | ||
- | display: block; | + | display: inline-block; |
- | + | ||
- | + | padding: 0; | |
- | + | ||
- | + | ||
- | background-color: | + | background-color: white; |
- | + | ||
- | + | ||
- | + | ||
border: 3px solid white; | border: 3px solid white; | ||
- | + | box-shadow: 2px 2px 4px black; | |
- | box-shadow: 2px 2px 4px | + | |
+ | vertical-align: top; | ||
} | } | ||
.column.first .cell.first { | .column.first .cell.first { | ||
- | + | background-image: url(https://static.igem.org/mediawiki/2013/6/64/Tn-2013-Box-tour.png); | |
- | + | ||
+ | margin: 10px 7px 7px 10px; | ||
} | } | ||
.column.first .cell.second { | .column.first .cell.second { | ||
- | margin: | + | margin: 7px 7px 10px 10px; |
- | background- | + | |
+ | background-image: url(https://static.igem.org/mediawiki/2013/9/97/Tn-2013-home-Fruit-ripening.png); | ||
} | } | ||
- | .column. | + | .column.third .cell.first { |
- | margin: | + | margin: 10px 10px 7px 0px; |
- | background- | + | |
+ | background-image: url(https://static.igem.org/mediawiki/2013/1/1f/Tn-2013-home-Vending-machine.png); | ||
+ | } | ||
+ | |||
+ | .column.third .cell.second { | ||
+ | margin: 7px 10px 10px 0px; | ||
+ | |||
background-image: url(https://static.igem.org/mediawiki/2013/8/8c/Tn-2013-home-Know-your-fruit.jpg); | background-image: url(https://static.igem.org/mediawiki/2013/8/8c/Tn-2013-home-Know-your-fruit.jpg); | ||
- | |||
} | } | ||
- | .column.first .cell.third | + | .column.first .cell.first, |
- | + | .column.first .cell.second, | |
+ | .column.third .cell.first, | ||
+ | .column.third .cell.second { | ||
+ | height: 222px; | ||
+ | width: 293px; | ||
+ | white-space: nowrap; | ||
} | } | ||
- | .column.first .cell. | + | .column.first .cell.first:hover, |
- | + | .column.first .cell.second:hover, | |
- | + | .column.third .cell.first:hover, | |
- | + | .column.third .cell.second:hover { | |
+ | box-shadow: 2px 2px 4px #323232 inset; | ||
} | } | ||
- | .column.second .cell { | + | .column.first .cell.first a, |
- | + | .column.first .cell.second a, | |
+ | .column.third .cell.first a, | ||
+ | .column.third .cell.second a { | ||
+ | display: block; | ||
- | + | height: 100%; | |
- | + | width: 100%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
.column.second .cell.first { | .column.second .cell.first { | ||
position: relative; | position: relative; | ||
- | + | ||
- | margin: | + | margin: 10px 0px; |
- | + | height: 464px; | |
- | + | width: 300px; | |
- | + | ||
- | background-image: url( | + | background-color: rgba(245, 90, 0,.75); |
- | + | background-image: url( https://static.igem.org/mediawiki/2013/b/bf/Tn-2013_Onda-fruitripening.png); | |
- | + | ||
- | + | ||
} | } | ||
- | .column.second . | + | .column.second .cell.first .tn-title { |
display: block; | display: block; | ||
- | |||
- | |||
- | |||
- | + | color: white; | |
+ | font-family: "Boogaloo", cursive; | ||
+ | font-size: 2.5em; | ||
+ | text-align: center; | ||
+ | text-shadow: 2px 2px 4px #323232; | ||
+ | } | ||
+ | |||
+ | .column.second .cell.first ul { | ||
+ | display: block; | ||
+ | |||
+ | margin: 1em auto; | ||
+ | margin-left: 1em; | ||
+ | padding: 10px; | ||
+ | padding-left: 25px; | ||
+ | |||
width: 200px; | width: 200px; | ||
- | background-color: rgba( | + | background-color: rgba(255,255,255,.8); |
- | + | ||
border-radius: 1em; | border-radius: 1em; | ||
- | font- | + | font-size: 0.85em; |
+ | line-height: 1em; | ||
+ | list-style: disc; | ||
+ | vertical-align: middle; | ||
} | } | ||
- | .column.second . | + | .column.second .cell.first ul li { |
+ | margin-bottom: 0.3em; | ||
+ | } | ||
+ | |||
+ | .column.second .cell.first img { | ||
position: absolute; | position: absolute; | ||
- | + | ||
- | + | margin: 0.8em; | |
+ | width: 70px; | ||
} | } | ||
- | .column.second .cell. | + | .column.second .cell.first img.plasmid { |
- | + | top: 95px; | |
- | + | right: -10px; | |
- | + | ||
+ | width: 65px; | ||
} | } | ||
- | . | + | .column.second .cell.first img.human { |
- | + | top: 190px; | |
- | + | right: -10px; | |
- | + | ||
+ | width: 65px; | ||
+ | } | ||
- | + | .column.second .cell.first img.product { | |
- | + | top: 270px; | |
+ | right: -10px; | ||
+ | |||
+ | width: 65px; | ||
+ | } | ||
- | + | .column.second .cell.first img.fruit { | |
+ | top: 380px; | ||
+ | right: -10px; | ||
+ | |||
+ | width: 65px; | ||
} | } | ||
- | /* | + | /*POST-GRID*/ |
- | . | + | .post-grid { |
+ | position: relative; | ||
width: 960px; | width: 960px; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
- | . | + | .post-grid .sheet { |
- | width: | + | width: 922px; |
min-height: 100px; | min-height: 100px; | ||
- | margin-left: | + | margin-top: -2em; |
+ | margin-left: 10px; | ||
+ | margin-bottom: 2em; | ||
- | background-color: | + | background-color: rgba(39,48,77,.9); |
+ | background-image: url( https://static.igem.org/mediawiki/2013/f/f6/Tn-2013-boxbg-Onda-Blueberry.png); | ||
border: 3px solid white; | border: 3px solid white; | ||
- | box-shadow: 2px | + | box-shadow: 2px 2px 4px #323232; |
text-align: justify; | text-align: justify; | ||
+ | z-index: 1; | ||
} | } | ||
- | . | + | |
- | margin: | + | .post-grid p { |
- | + | margin: 0.4em auto; | |
- | + | ||
- | + | line-height: 1.2em; | |
- | + | ||
} | } | ||
- | . | + | .post-grid .txt { |
- | display: | + | display: box; |
- | + | position: absolute; | |
+ | top: -0.5em; | ||
+ | left: 0.7em; | ||
+ | |||
+ | color: white; | ||
+ | font-size: 3em; | ||
+ | font-family: "Boogaloo", cursive; | ||
+ | text-shadow: 0 0 6px black; | ||
+ | |||
+ | z-index: 5; | ||
} | } |
Latest revision as of 19:15, 26 October 2013
- tn-central-container,
- tn-content-wrap,
- tn-content {
padding-bottom: 0 !important;
}
/* NEWS */
.news {
display: block; margin: -1em; color: white; font-family: "Boogaloo", cursive; font-size: 2.7em; text-align: center; text-shadow: 0 0 4px black;
}
.news:link, .news:visited, .news-2:link, .news-2:visited {
color: white; text-decoration: none;
}
.news:hover, .news-2:hover {
color: rgba(196, 34, 28,1); text-decoration: underline; text-shadow: 0 0 4px white;
}
.news .photo {
width: 150px;
}
.news-2 {
display: block; margin: 0.2em; margin-top: 0.3em; color: white; font-family: "Boogaloo", cursive; font-size: 2.7em; text-align: center; text-shadow: 0 0 4px black;
}
/*PRE-GRID*/
.pre-grid {
width: 960px; margin: 0 auto;
}
.pre-grid .sheet {
width: 922px; min-height: 100px;
margin-left: 10px;
background-color: rgba(39,48,77,.9); background-image: url( ); border: 3px solid white;
box-shadow: 2px 2px 4px #323232;
text-align: justify;
}
.pre-grid .sheet .container {
margin: 20px; padding: 15px 25px; background-color: rgba(250,250,250,.7); border-radius: 10px;
}
.pre-grid p {
margin: 0.4em auto;
line-height: 1.2em;
}
.pre-grid .silhouette {
display: block; margin: 0 auto;
}
/*GRID*/
.grid {
width: 960px; margin: 0 auto; padding-bottom: 2em;
}
.column {
display: inline-block; margin: 0; padding: 0; width: 315px; vertical-align: top;
}
.cell {
display: inline-block;
padding: 0;
background-color: white; border: 3px solid white; box-shadow: 2px 2px 4px black; vertical-align: top;
}
.column.first .cell.first {
background-image: url();
margin: 10px 7px 7px 10px;
}
.column.first .cell.second {
margin: 7px 7px 10px 10px;
background-image: url();
}
.column.third .cell.first {
margin: 10px 10px 7px 0px; background-image: url();
}
.column.third .cell.second {
margin: 7px 10px 10px 0px;
background-image: url();
}
.column.first .cell.first, .column.first .cell.second, .column.third .cell.first, .column.third .cell.second {
height: 222px; width: 293px; white-space: nowrap;
}
.column.first .cell.first:hover, .column.first .cell.second:hover, .column.third .cell.first:hover, .column.third .cell.second:hover {
box-shadow: 2px 2px 4px #323232 inset;
}
.column.first .cell.first a, .column.first .cell.second a, .column.third .cell.first a, .column.third .cell.second a {
display: block;
height: 100%; width: 100%;
}
.column.second .cell.first {
position: relative;
margin: 10px 0px; height: 464px; width: 300px; background-color: rgba(245, 90, 0,.75); background-image: url( );
}
.column.second .cell.first .tn-title {
display: block; color: white; font-family: "Boogaloo", cursive; font-size: 2.5em; text-align: center; text-shadow: 2px 2px 4px #323232;
}
.column.second .cell.first ul {
display: block; margin: 1em auto; margin-left: 1em; padding: 10px; padding-left: 25px;
width: 200px; background-color: rgba(255,255,255,.8); border-radius: 1em; font-size: 0.85em; line-height: 1em; list-style: disc; vertical-align: middle;
}
.column.second .cell.first ul li {
margin-bottom: 0.3em;
}
.column.second .cell.first img {
position: absolute; margin: 0.8em; width: 70px;
}
.column.second .cell.first img.plasmid {
top: 95px; right: -10px; width: 65px;
}
.column.second .cell.first img.human {
top: 190px; right: -10px; width: 65px;
}
.column.second .cell.first img.product {
top: 270px; right: -10px; width: 65px;
}
.column.second .cell.first img.fruit {
top: 380px; right: -10px; width: 65px;
}
/*POST-GRID*/
.post-grid {
position: relative; width: 960px; margin: 0 auto;
}
.post-grid .sheet {
width: 922px; min-height: 100px;
margin-top: -2em; margin-left: 10px; margin-bottom: 2em;
background-color: rgba(39,48,77,.9); background-image: url( ); border: 3px solid white;
box-shadow: 2px 2px 4px #323232;
text-align: justify; z-index: 1;
}
.post-grid p {
margin: 0.4em auto;
line-height: 1.2em;
}
.post-grid .txt {
display: box; position: absolute; top: -0.5em; left: 0.7em; color: white; font-size: 3em; font-family: "Boogaloo", cursive; text-shadow: 0 0 6px black; z-index: 5;
}