Template:CSS/style3

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
<html>
<html>
<style rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
 +
.container_home{
 +
width:100%;
 +
height:2060px;
 +
position:relative;
 +
top:-10px;
 +
left:0px;
 +
padding:0px;
 +
margin:0px;
 +
z-index:0;
 +
}
 +
 +
 +
.incredibleIndia{
 +
position:fixed;
 +
width:100%;
 +
height:640px;
 +
top:50px;
 +
left:0px;
 +
background-image:url("https://static.igem.org/mediawiki/2014/b/b5/Incredible_india2.jpg");
 +
z-index:1;
 +
}
 +
 +
.incredibleIndiaheader {
 +
position:absolute;
 +
top:62px;
 +
left:0px;
 +
width:100%;
 +
height:122px;
 +
background-image:url("https://static.igem.org/mediawiki/2014/7/73/Headerincredibleindia.jpg");
 +
z-index:2;
 +
background-repeat:no-repeat;
 +
}
 +
 +
.incredibleIndiaheader img {
 +
width:100%;
 +
}
 +
 +
 +
.fadedbackground {
 +
position:absolute;
 +
top:96px;
 +
left:0px;
 +
width:100%;
 +
height:500px;
 +
background-image:url("https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png");
 +
z-index:1;
 +
background-repeat:no-repeat;
 +
}
 +
 +
.fadedbackground img{
 +
width:100%;
 +
}
 +
 +
 +
.redpatternedbg{
 +
position:absolute;
 +
top:450px;
 +
left:0px;
 +
width:100%;
 +
height:300px;
 +
background-image:url("https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png");
 +
z-index:2;
 +
background-repeat:no-repeat;
 +
}
 +
 +
.redpatternedbg{
 +
width:100%;
 +
}
 +
 +
.gifouterdiv{
 +
position:absolute;
 +
top:170px;
 +
left:0px;
 +
width:100%;
 +
height:700px;
 +
z-index:7;
 +
margin auto auto;
 +
overflow:hidden;
 +
cursor:pointer;
 +
}
 +
 +
 +
.gifbg{
 +
position:absolute;
 +
left:270px;
 +
margin:auto auto;
 +
width:100%;
 +
height:100%;
 +
background-image:url("https://static.igem.org/mediawiki/2014/8/8a/Gifbg_iitd.png");
 +
z-index:7;
 +
background-repeat:no-repeat;
 +
}
 +
 +
 +
.mascotinnerlayer{
 +
width:300px;
 +
height:300px;
 +
position:absolute;
 +
top:350px;
 +
left:540px;
 +
float:left;
 +
overflow:hidden;
 +
cursor:pointer;
 +
z-index:15;
 +
}
 +
 +
 +
.mascot_iitd{
 +
width:100px;
 +
height:100px;
 +
border-radius:100px;
 +
display:block;
 +
margin:auto auto;
 +
border:solid green;
 +
border-width: medium;
 +
-webkit-transition: all .2s ease;
 +
-moz-transition: all .2s ease;
 +
-o-transition: all .2s ease;
 +
-ms-transition: all .2s ease;
 +
transition: all .2s ease;
 +
}
 +
-
.footerbg{
+
.mascot_iitd:hover{
 +
height:200px;
 +
width:200px;
 +
display:block;
 +
margin:auto auto;
 +
border-radius:200px;
 +
border:solid thick green;
 +
 +
}
 +
 +
 +
.textbg_iitd{
 +
background-image:url("https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png");
 +
position:absolute;
 +
top:680px;
 +
width:100%;
 +
height:500px;
 +
z-index:1;
 +
background-repeat:no-repeat;
 +
}
 +
 +
 +
.textbg_iitd{
 +
width:100%;
 +
}
 +
 +
.videobackground{
 +
position:absolute;
 +
top:1380px;
 +
left:0px;
 +
width:100%;
 +
height:410px;
 +
background-image:url("https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png");
 +
z-index:2;
 +
background-repeat:no-repeat;
 +
 +
}
 +
 +
.videobackground{
 +
width:100%;
 +
}
 +
 
 +
 +
.animatedlogo{
 +
 +
position:absolute;
 +
left:40px;
 +
top:20px;
 +
width:300px;
 +
height:300px;
 +
}
 +
 +
 +
.youtubevideobg{
 +
position:absolute;
 +
top:-10px;
 +
left:370px;
 +
width:70%;
 +
height:100%;
 +
background-image:url("https://static.igem.org/mediawiki/2014/6/67/Youtubevideobg.png");
 +
z-index:2;
 +
background-repeat:no-repeat;
 +
}
 +
 +
 +
.igemvideo{
 +
position:absolute;
 +
left:25px;
 +
top:25px;
 +
}
 +
 +
 +
.fblike_share{
 +
position:absolute;
 +
bottom:30px;
 +
left:500px;
 +
width:150px;
 +
height:30px;
 +
z-index:10;
 +
}
 +
 +
 +
.twitter_follow{
 +
position:absolute;
 +
bottom:30px;
 +
left:700px;
 +
width:150px;
 +
height:30px;
 +
z-index:10;
 +
}
 +
 +
 +
.sponsorsbg{
position:absolute;
position:absolute;
-
top:2400px;
+
top:1770px;
 +
left:0px;
 +
width:100%;
 +
height:200px;
 +
background-color:#f4f2ef;
 +
z-index:2;
 +
background-repeat:no-repeat;
 +
}
 +
 +
.sponsortext{
 +
position:absolute;
 +
top:0px;
 +
left:520px;
 +
width:300px;
 +
height:50px;
 +
z-index:20;
 +
}
 +
 +
 +
.sponsors_iitd{
 +
width:95%;
 +
height:200px;
 +
position:absolute;
 +
top:0px;
 +
left:50px;
 +
float:left;
 +
display:inline;
 +
}
 +
 +
.sponsors_iitd2{
 +
width:80%;
 +
height:150px;
 +
position:absolute;
 +
top:40px;
 +
left:250px;
 +
float:left;
 +
display:inline;
 +
}
 +
 +
 +
.pic1{
 +
width:150px;
 +
height:150px;
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
}
 +
 +
 +
.pic2{
 +
position:absolute;
 +
top:0px;
 +
left:150px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic3{
 +
position:absolute;
 +
top:0px;
 +
left:300px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic4{
 +
position:absolute;
 +
top:0px;
 +
left:450px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic5{
 +
position:absolute;
 +
top:0px;
 +
left:600px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic6{
 +
position:absolute;
 +
top:0px;
 +
left:750px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic7{
 +
position:absolute;
 +
top:0px;
 +
left:900px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic8{
 +
position:absolute;
 +
top:0px;
 +
left:1050px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
.pic9{
 +
position:absolute;
 +
top:0px;
 +
left:1200px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic10{
 +
position:absolute;
 +
top:0px;
 +
left:1350px;
 +
width:150px;
 +
height:150px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic1:hover+.pic2{
 +
-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;
 +
transform: translate(150px,0);
 +
-webkit-transform: translate(150px,0); /** Safari & Chrome **/
 +
-o-transform: translate(150px,0); /** Opera **/
 +
-moz-transform: translate(150px,0); /** Firefox **/
 +
}
 +
 +
 +
.pic4:hover+.pic5{
 +
-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 **/
 +
 +
}
 +
 +
 +
.smallpic{
 +
width:150px;
 +
height:140px;
 +
border-radius:0px;
 +
z-index:52;
 +
}
 +
 +
 +
.picdescription{
 +
position: absolute;
 +
left:150px;
 +
top:0px;
 +
width:0px;
 +
height:140px;
 +
border-radius:0px;
 +
background-color:red;
 +
-webkit-transition:all 0.3s linear 0s;
 +
z-index:52;
 +
}
 +
 +
 +
.smallpic:hover + .picdescription{
 +
width:150px;
 +
height:140px;
 +
border-radius:0px;
 +
 +
}
 +
 
 +
footerbg{
 +
position:absolute;
 +
top:2070px;
left:0px;
left:0px;
width:100%;
width:100%;
-
height:100px;
+
padding:10px;
-
background-color:#424243;
+
-
z-index:2;
+
-
background-repeat:no-repeat;
+
}
}
 +
 +
.copyright{
 +
position:absolute;
 +
bottom:5px;
 +
left:600px;
 +
}
 +
 +
.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{
.nav2{
Line 39: Line 478:
}
}
-
..copyright{
 
-
position:absolute;
 
-
bottom:5px;
 
-
left:600px;
 
-
}
 
-
.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;
 
-
}
 
</style>
</style>
</html>
</html>

Revision as of 21:41, 16 October 2014

Retrieved from "http://2014.igem.org/Template:CSS/style3"