Template:CSS/team
From 2014.igem.org
(Difference between revisions)
(114 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
.container_team{ | .container_team{ | ||
width:100%; | width:100%; | ||
- | height: | + | height:3600px; |
background-image: url(https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png); | background-image: url(https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png); | ||
position:absolute; | position:absolute; | ||
Line 14: | Line 14: | ||
.grouppic{ | .grouppic{ | ||
- | width: | + | width:920px; |
- | height: | + | height:360px; |
position:absolute; | position:absolute; | ||
- | top: | + | top:120px; |
- | left: | + | left:220px; |
- | background- | + | background-image:url(https://static.igem.org/mediawiki/2014/1/1b/Grouppic_iitd.jpg); |
+ | border-radius:10px; | ||
+ | |||
} | } | ||
Line 159: | Line 161: | ||
height:25px; | height:25px; | ||
} | } | ||
+ | |||
+ | |||
+ | .coordinator{ | ||
+ | position:absolute; | ||
+ | top:550px; | ||
+ | left:100px; | ||
+ | width:1200px; | ||
+ | |||
+ | } | ||
+ | .coordinator p{ | ||
+ | font-size:20px; | ||
+ | font-weight:800; | ||
+ | } | ||
+ | |||
Line 318: | Line 334: | ||
} | } | ||
+ | |||
+ | .team_iitd{ | ||
+ | position:absolute; | ||
+ | top:1260px; | ||
+ | left:100px; | ||
+ | width:1200px; | ||
+ | |||
+ | } | ||
+ | .team_iitd p{ | ||
+ | font-size:20px; | ||
+ | font-weight:800; | ||
+ | } | ||
/*==========Member1==============================================*/ | /*==========Member1==============================================*/ | ||
+ | |||
+ | |||
+ | |||
.member1{ | .member1{ | ||
width:250px; | width:250px; | ||
Line 334: | Line 365: | ||
top:1360px; | top:1360px; | ||
left:400px; | left:400px; | ||
+ | |||
} | } | ||
Line 420: | Line 452: | ||
top:2040px; | top:2040px; | ||
left:1000px; | left:1000px; | ||
+ | } | ||
+ | |||
+ | .member13{ | ||
+ | width:250px; | ||
+ | height:300px; | ||
+ | position:absolute; | ||
+ | top:2380px; | ||
+ | left:90px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .member14{ | ||
+ | width:250px; | ||
+ | height:300px; | ||
+ | position:absolute; | ||
+ | top:2380px; | ||
+ | left:400px; | ||
+ | } | ||
+ | |||
+ | .member15{ | ||
+ | width:250px; | ||
+ | height:300px; | ||
+ | position:absolute; | ||
+ | top:2380px; | ||
+ | left:700px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .member16{ | ||
+ | width:250px; | ||
+ | height:300px; | ||
+ | position:absolute; | ||
+ | top:2380px; | ||
+ | left:1000px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .phd_iitd{ | ||
+ | position:absolute; | ||
+ | top:2750px; | ||
+ | left:100px; | ||
+ | width:1200px; | ||
+ | |||
+ | } | ||
+ | .phd_iitd p{ | ||
+ | font-size:20px; | ||
+ | font-weight:800; | ||
+ | } | ||
+ | |||
+ | .member17{ | ||
+ | width:250px; | ||
+ | height:300px; | ||
+ | position:absolute; | ||
+ | top:2820px; | ||
+ | left:350px; | ||
+ | } | ||
+ | |||
+ | .member18{ | ||
+ | width:250px; | ||
+ | height:300px; | ||
+ | position:absolute; | ||
+ | top:2820px; | ||
+ | left:550px; | ||
+ | } | ||
+ | |||
+ | .member19{ | ||
+ | width:250px; | ||
+ | height:300px; | ||
+ | position:absolute; | ||
+ | top:2820px; | ||
+ | left:700px; | ||
} | } | ||
Line 428: | Line 531: | ||
.memberprofilepic{ | .memberprofilepic{ | ||
- | width: | + | width:200px; |
- | height: | + | height:200px; |
position:absolute; | position:absolute; | ||
top:0px; | top:0px; | ||
- | left: | + | left:25px; |
float:left; | float:left; | ||
overflow:hidden; | overflow:hidden; | ||
Line 455: | Line 558: | ||
.memberimage:hover { | .memberimage:hover { | ||
- | height: | + | height: 200px; |
- | width: | + | width:200px; |
display:block; | display:block; | ||
margin:auto auto; | margin:auto auto; | ||
Line 475: | Line 578: | ||
color:black; | color:black; | ||
font-weight:400; | font-weight:400; | ||
+ | padding:10px; | ||
+ | /*background-image:url(https://static.igem.org/mediawiki/2014/a/ad/20140725_011606.JPG); | ||
+ | |||
+ | background-image:url(https://static.igem.org/mediawiki/2014/d/da/Text_bg.png);*/ | ||
+ | |||
+ | background: -webkit-linear-gradient(white, #dfdddd); /* For Safari 5.1 to 6.0 */ | ||
+ | background: -o-linear-gradient(white, #dfdddd); /* For Opera 11.1 to 12.0 */ | ||
+ | background: -moz-linear-gradient(white, #dfdddd); /* For Firefox 3.6 to 15 */ | ||
+ | background: linear-gradient(white, #dfdddd); | ||
} | } | ||
Line 484: | Line 596: | ||
.videocollection{ | .videocollection{ | ||
position:absolute; | position:absolute; | ||
- | top: | + | top:3500px; |
left:20px; | left:20px; | ||
width:1300px; | width:1300px; | ||
Line 509: | Line 621: | ||
} | } | ||
- | . | + | .prof_phd{ |
- | width: | + | width:100%; |
- | height: | + | height:220px; |
position:absolute; | position:absolute; | ||
- | top: | + | top:3200px; |
- | left: | + | left:0px; |
border: thin solid grey; | border: thin solid grey; | ||
float:left; | float:left; | ||
display:inline; | display:inline; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2014/b/bd/Instructor_bg.png); | ||
} | } | ||
+ | .prof_phd_header{ | ||
+ | position:absolute; | ||
+ | top:5px; | ||
+ | left:50px; | ||
+ | display:inline; | ||
+ | width:1200px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .prof_phd_header p{ | ||
+ | font-family:Open sans, helvetica, Arial; | ||
+ | font-size:16px; | ||
+ | color:black; | ||
+ | font-weight:600; | ||
+ | } | ||
+ | |||
+ | .prof_phd2{ | ||
+ | width:70%; | ||
+ | height:120px; | ||
+ | position:absolute; | ||
+ | top:60px; | ||
+ | left:280px; | ||
+ | float:left; | ||
+ | display:inline; | ||
+ | |||
+ | } | ||
.pic1{ | .pic1{ | ||
- | width: | + | width:150px; |
- | height: | + | height:150px; |
position:absolute; | position:absolute; | ||
- | top: | + | top:-3px; |
left:30px; | left:30px; | ||
} | } | ||
.pic2{ | .pic2{ | ||
position:absolute; | position:absolute; | ||
- | top: | + | top:-3px; |
- | left: | + | left:180px; |
- | width: | + | width:150px; |
- | height: | + | height:150px; |
+ | -webkit-transition:all 0.3s linear 0s; | ||
+ | } | ||
+ | .pic3{ | ||
+ | position:absolute; | ||
+ | top:-3px; | ||
+ | left:330px; | ||
+ | width:150px; | ||
+ | height:150px; | ||
+ | -webkit-transition:all 0.3s linear 0s; | ||
+ | } | ||
+ | .pic4{ | ||
+ | position:absolute; | ||
+ | top:-3px; | ||
+ | left:480px; | ||
+ | width:150px; | ||
+ | height:150px; | ||
+ | -webkit-transition:all 0.3s linear 0s; | ||
+ | } | ||
+ | |||
+ | |||
+ | .pic1:hover+.pic2{ | ||
-webkit-transition:all 0.3s linear 0s; | -webkit-transition:all 0.3s linear 0s; | ||
+ | transform: translate(150px,0); | ||
+ | -webkit-transform: translate(150px,0); /** Safari & Chrome **/ | ||
+ | -o-transform: translate(150px,0); /** Opera **/ | ||
+ | -moz-transform: translate(150px,0); /** Firefox **/ | ||
+ | } | ||
+ | |||
+ | |||
+ | .pic2:hover+.pic3{ | ||
+ | -webkit-transition:all 0.3s linear 0s; | ||
+ | transform: translate(150px,0); | ||
+ | -webkit-transform: translate(150px,0); /** Safari & Chrome **/ | ||
+ | -o-transform: translate(150px,0); /** Opera **/ | ||
+ | -moz-transform: translate(150px,0); /** Firefox **/ | ||
} | } | ||
- | . | + | |
+ | .pic3:hover+.pic4{ | ||
-webkit-transition:all 0.3s linear 0s; | -webkit-transition:all 0.3s linear 0s; | ||
- | transform: translate( | + | transform: translate(150px,0); |
- | -webkit-transform: translate( | + | -webkit-transform: translate(150px,0); /** Safari & Chrome **/ |
- | -o-transform: translate( | + | -o-transform: translate(150px,0); /** Opera **/ |
- | -moz-transform: translate( | + | -moz-transform: translate(150px,0); /** Firefox **/ |
} | } | ||
+ | |||
.smallpic{ | .smallpic{ | ||
- | width: | + | width:150px; |
- | height: | + | height:150px; |
- | border-radius: | + | border-radius:0px; |
z-index:52; | z-index:52; | ||
+ | border:thin solid grey; | ||
} | } | ||
.picdescription{ | .picdescription{ | ||
position: absolute; | position: absolute; | ||
- | left: | + | left:150px; |
top:0px; | top:0px; | ||
- | width: | + | width:0px; |
- | height: | + | height:150px; |
- | border-radius: | + | border-radius:0px; |
background-color:red; | background-color:red; | ||
-webkit-transition:all 0.3s linear 0s; | -webkit-transition:all 0.3s linear 0s; | ||
z-index:52; | z-index:52; | ||
+ | |||
} | } | ||
.smallpic:hover + .picdescription{ | .smallpic:hover + .picdescription{ | ||
- | position: absolute; | + | width:150px; |
- | left: | + | height:150px; |
- | top:0px; | + | border-radius:0px; |
- | width: | + | border:thin solid black; |
+ | } | ||
+ | |||
+ | |||
+ | .teaminfolink{ | ||
+ | position:absolute; | ||
+ | top:3450px; | ||
+ | left:520px; | ||
+ | } | ||
+ | |||
+ | .teaminfolink a{ | ||
+ | text-decoration:none; | ||
+ | color:grey; | ||
+ | } | ||
+ | |||
+ | .teaminfolink a p{ | ||
+ | font-size:14px; | ||
+ | } | ||
+ | |||
+ | .teaminfolink a:hover{ | ||
+ | text-decoration:none; | ||
+ | color:black; | ||
+ | } | ||
+ | |||
+ | .footerbg_team{ | ||
+ | position:absolute; | ||
+ | top:3500px; | ||
+ | left:0px; | ||
+ | width:100%; | ||
height:100px; | height:100px; | ||
- | + | background-color:#424243; | |
+ | z-index:2; | ||
+ | background-repeat:no-repeat; | ||
} | } | ||
+ | |||
+ | .copyright{ | ||
+ | position:absolute; | ||
+ | bottom:5px; | ||
+ | left:400px; | ||
+ | } | ||
+ | |||
+ | .copyright a,visited{ | ||
+ | color:#a2a1a1; | ||
+ | } | ||
+ | |||
+ | .copyright a:hover{ | ||
+ | color:#c7c6c6; | ||
+ | } | ||
+ | |||
+ | .copyright p{ | ||
+ | font-size:12px; | ||
+ | color:#807f7f; | ||
+ | font-family:Open sans, Helvetica, Arial; | ||
+ | font-weight:400; | ||
+ | } | ||
+ | |||
+ | .nav2{ | ||
+ | position:absolute; | ||
+ | top:10px; | ||
+ | left:280px; | ||
+ | |||
+ | } | ||
+ | .nav2table{ | ||
+ | background-color:#424243; | ||
+ | color:#807f7f; | ||
+ | } | ||
+ | .nav2 a,visited{ | ||
+ | color:#d6d5d5; | ||
+ | font-size:12px; | ||
+ | text-decoration:none; | ||
+ | padding:10px; | ||
+ | } | ||
+ | |||
+ | .nav2 a:hover{ | ||
+ | color:#ffffff; | ||
+ | font-size:12px; | ||
+ | font-weight:500; | ||
+ | text-decoration:none; | ||
+ | padding:10px; | ||
+ | } | ||
+ | |||
Latest revision as of 02:33, 18 October 2014