Template:CSS/style3

From 2014.igem.org

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

Latest revision as of 16:56, 17 October 2014

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