Team:Calgary/TestPageCSS
From 2013.igem.org
(3 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | #Carousel { | |
- | # | + | width: 990px; |
+ | height: 180px; | ||
+ | background: #CFCFCF; | ||
+ | padding-left: 90px; | ||
position: relative; | position: relative; | ||
- | + | overflow: hidden; | |
+ | left: 0; | ||
+ | right: 0; | ||
+ | margin: 25px auto 0; | ||
+ | display: none; | ||
} | } | ||
- | # | + | #Carousel .Person { |
- | + | width: 150px; | |
+ | height: 150px; | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
} | } | ||
- | # | + | #Carousel .Slide0 { |
- | + | left: 90px; | |
- | + | cursor: pointer; | |
- | + | ||
- | left: | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #Carousel .Slide1 { |
- | + | left: 255px; | |
- | + | cursor: pointer; | |
- | + | ||
} | } | ||
- | . | + | #Carousel .Slide2 { |
- | + | left: 420px; | |
- | position: | + | background-position: top !important; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | #Carousel .Slide3 { |
+ | left: 585px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #Carousel .Slide4 { | ||
+ | left: 750px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #Carousel .Arrow { | ||
position: absolute; | position: absolute; | ||
- | |||
width: 60px; | width: 60px; | ||
height: 60px; | height: 60px; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | margin: auto; | ||
} | } | ||
- | + | #Carousel #LeftArrow { | |
- | background: url( | + | left: 0; |
- | + | margin-left: 15px; | |
+ | background: url(https://static.igem.org/mediawiki/2013/5/53/2013UCalgaryArrowLeft.png) top; | ||
} | } | ||
- | + | #Carousel #RightArrow { | |
+ | right: 0; | ||
+ | margin-right: 15px; | ||
+ | background: url(https://static.igem.org/mediawiki/2013/5/56/2013UCalgaryArrowRight.png) top; | ||
+ | } | ||
+ | |||
+ | #Carousel #LeftArrow:hover, #Carousel #RightArrow:hover { | ||
background-position: bottom; | background-position: bottom; | ||
+ | cursor: pointer; | ||
} | } | ||
- | + | #Carousel #Person0 { | |
- | background: url( | + | background: url(Num0.jpg); |
- | + | ||
} | } | ||
- | + | #Carousel #Person1 { | |
- | background | + | background: url(Num1.jpg); |
} | } | ||
- | + | #Carousel #Person2 { | |
- | + | background: url(Profile2.png) bottom; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #Carousel #Person3 { | |
- | + | background: url(Num3.jpg); | |
- | + | ||
- | + | ||
} | } | ||
- | + | #Carousel #Person4 { | |
- | + | background: url(Num4.jpg); | |
- | + | ||
} | } | ||
- | + | #Carousel #Person5 { | |
- | + | background: url(Num5.jpg); | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #Carousel #Person6 { | |
- | + | background: url(Num6.jpg); | |
+ | display: none; | ||
} | } | ||
- | + | #Carousel #Person7 { | |
+ | background: url(Num7.jpg); | ||
+ | display: none; | ||
+ | } | ||
- | + | #Carousel #Person8 { | |
- | + | background: url(Num8.jpg); | |
+ | display: none; | ||
} | } | ||
- | + | #Carousel #Person9 { | |
- | + | background: url(Num9.jpg); | |
+ | display: none; | ||
} | } | ||
- | # | + | #WriteUp { |
width: 100%; | width: 100%; | ||
- | + | max-width: 990px; | |
- | + | left: 0; | |
+ | right: 0; | ||
+ | margin: 0 auto; | ||
+ | background: #A4A4A4; | ||
} | } | ||
- | # | + | #WriteUp .Info { |
- | + | clear: both; | |
- | + | overflow: auto; | |
} | } | ||
- | # | + | #WriteUp .Info .InfoImg { |
- | + | position: relative; | |
- | width: 100%; | + | width: 50%; |
- | + | height: 100%; | |
+ | padding: 25px; | ||
+ | float: left; | ||
} | } | ||
- | # | + | #WriteUp .Info .InfoImg img { |
- | + | width: 100%; | |
- | + | height: auto; | |
- | + | max-width: 100%; | |
} | } | ||
- | # | + | #WriteUp .Text { |
+ | width: 50%; | ||
+ | min-width: 320px; | ||
+ | height: 100%; | ||
+ | padding: 25px; | ||
float: left; | float: left; | ||
} | } | ||
- | # | + | #WriteUp .Text h2 { |
- | + | font-family: 'Raleway', Helvetica, Arial, sans-serif; | |
+ | line-height: 1; | ||
+ | text-align: left; | ||
+ | font-size: 28px; | ||
+ | font-weight: 600; | ||
+ | color: #333333; | ||
} | } | ||
+ | #WriteUp .Text h3 { | ||
+ | font-family: 'Raleway', Helvetica, Arial, sans-serif; | ||
+ | line-height: 1.6; | ||
+ | text-align: left; | ||
+ | font-size: 20px; | ||
+ | font-weight: 500; | ||
+ | color: #333333; | ||
+ | } | ||
- | # | + | #WriteUp .Text p, #WriteUp .Text a { |
- | + | font: 16px/1.2 'Antic Slab', Georgia, serif; | |
+ | margin: 4px 0 12px 0; | ||
+ | text-indent: 50px; | ||
+ | color: #000000; | ||
+ | text-align:justify; | ||
+ | text-justify:inter-word; | ||
} | } |
Latest revision as of 16:52, 28 August 2013
- Carousel {
width: 990px; height: 180px; background: #CFCFCF; padding-left: 90px; position: relative; overflow: hidden; left: 0; right: 0; margin: 25px auto 0; display: none; }
- Carousel .Person {
width: 150px; height: 150px; position: absolute; top: 15px; }
- Carousel .Slide0 {
left: 90px; cursor: pointer; }
- Carousel .Slide1 {
left: 255px; cursor: pointer; }
- Carousel .Slide2 {
left: 420px; background-position: top !important; }
- Carousel .Slide3 {
left: 585px; cursor: pointer; }
- Carousel .Slide4 {
left: 750px; cursor: pointer; }
- Carousel .Arrow {
position: absolute; width: 60px; height: 60px; top: 0; bottom: 0; margin: auto; }
- Carousel #LeftArrow {
left: 0; margin-left: 15px; background: url() top; }
- Carousel #RightArrow {
right: 0; margin-right: 15px; background: url() top; }
- Carousel #LeftArrow:hover, #Carousel #RightArrow:hover {
background-position: bottom; cursor: pointer; }
- Carousel #Person0 {
background: url(Num0.jpg); }
- Carousel #Person1 {
background: url(Num1.jpg); }
- Carousel #Person2 {
background: url(Profile2.png) bottom; }
- Carousel #Person3 {
background: url(Num3.jpg); }
- Carousel #Person4 {
background: url(Num4.jpg); }
- Carousel #Person5 {
background: url(Num5.jpg); display: none; }
- Carousel #Person6 {
background: url(Num6.jpg); display: none; }
- Carousel #Person7 {
background: url(Num7.jpg); display: none; }
- Carousel #Person8 {
background: url(Num8.jpg); display: none; }
- Carousel #Person9 {
background: url(Num9.jpg); display: none; }
- WriteUp {
width: 100%; max-width: 990px; left: 0; right: 0; margin: 0 auto; background: #A4A4A4; }
- WriteUp .Info {
clear: both; overflow: auto; }
- WriteUp .Info .InfoImg {
position: relative; width: 50%; height: 100%; padding: 25px; float: left; }
- WriteUp .Info .InfoImg img {
width: 100%; height: auto; max-width: 100%; }
- WriteUp .Text {
width: 50%; min-width: 320px; height: 100%; padding: 25px; float: left; }
- WriteUp .Text h2 {
font-family: 'Raleway', Helvetica, Arial, sans-serif; line-height: 1; text-align: left; font-size: 28px; font-weight: 600; color: #333333; }
- WriteUp .Text h3 {
font-family: 'Raleway', Helvetica, Arial, sans-serif; line-height: 1.6; text-align: left; font-size: 20px; font-weight: 500; color: #333333; }
- WriteUp .Text p, #WriteUp .Text a {
font: 16px/1.2 'Antic Slab', Georgia, serif; margin: 4px 0 12px 0; text-indent: 50px; color: #000000; text-align:justify; text-justify:inter-word; }