Team:Shenzhen BGIC 0101/Templates/Banner

From 2013.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 10: Line 10:
   height: 20px;
   height: 20px;
   background-color: #ffffff;
   background-color: #ffffff;
 +
  border:none;
   }
   }
Line 28: Line 29:
   #Genovologo {
   #Genovologo {
   position: relative;
   position: relative;
-
   text-align:center;
+
   margin-left:250px;
   z-index:-1;
   z-index:-1;
   }
   }
Line 34: Line 35:
   #iGEMLogo {
   #iGEMLogo {
   position:absolute;
   position:absolute;
-
   top:80px;
+
   top:10px;
   left:25px;
   left:25px;
   }
   }
Line 41: Line 42:
   position:absolute;
   position:absolute;
   top:150px;
   top:150px;
-
   left:790px;
+
   left:750px;
   }
   }
html, body {
html, body {
Line 53: Line 54:
   }
   }
-
   #navigator {
+
   ##menucontainer {
   overflow:visible;
   overflow:visible;
   position:relative;
   position:relative;
Line 61: Line 62:
   #wrapper {
   #wrapper {
   overflow:visible;
   overflow:visible;
-
   width: 800px;
+
   width: 900px;
   height: 500px;
   height: 500px;
   position: relative;
   position: relative;
   top: 50%;
   top: 50%;
   margin:100px 50px 50px 110px;
   margin:100px 50px 50px 110px;
-
 
   }
   }
-
 
+
 
   #content {
   #content {
   position: relative;
   position: relative;
Line 152: Line 152:
   background: #ffffff;
   background: #ffffff;
   font-weight: normal;
   font-weight: normal;
-
   font-size: 1em;
+
   font-size: 1.5em;
   line-height: 1.7em;
   line-height: 1.7em;
   text-align: justify;
   text-align: justify;
Line 231: Line 231:
   position:fixed;
   position:fixed;
   bottom:5px;
   bottom:5px;
-
   right:255px;
+
   right:5px;
   }
   }
  <!--for the photos in team page-->   
  <!--for the photos in team page-->   
Line 255: Line 255:
   float: left;
   float: left;
   background: #fff;
   background: #fff;
-
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
+
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 4);
   border-radius: 2px;
   border-radius: 2px;
   overflow: hidden;
   overflow: hidden;
Line 269: Line 269:
   .mini-post:hover {
   .mini-post:hover {
   margin-top: -5px;
   margin-top: -5px;
-
   box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);
+
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
   }
   }
    
    
-
<!--for the overview,kgml--> 
+
 
   .hehe {
   .hehe {
     width:900px;
     width:900px;
     height:auto;
     height:auto;
     }
     }
-
<!--tutorial tab-->
 
-
.tabs {
 
-
    position: relative;
 
-
margin: 10px;
 
-
margin-left: 20px;
 
-
width: 1200px;
 
-
}
 
-
 
-
.tabs input {
 
-
position: absolute;
 
-
z-index: 1000;
 
-
width: 120px;
 
-
height: 40px;
 
-
left: 0px;
 
-
top: 0px;
 
-
opacity: 0;
 
-
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
-
    filter: alpha(opacity=0);
 
-
cursor: pointer;
 
-
}
 
-
.tabs input#tab-2{
 
-
left: 120px;
 
-
}
 
-
.tabs input#tab-3{
 
-
left: 240px;
 
-
}
 
-
.tabs input#tab-4{
 
-
left: 360px;
 
-
}
 
-
 
-
.tabs label {
 
-
background: #B09CC9;
 
-
background: -moz-linear-gradient(top, #B09CC 0%, #7380AE 100%);
 
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B09CC), color-stop(100%,#7380AE));
 
-
background: -webkit-linear-gradient(top, #B09CC 0%,#7380AE 100%);
 
-
background: -o-linear-gradient(top, #B09CC 0%,#7380AE 100%);
 
-
background: -ms-linear-gradient(top,#B09CC 0%,#7380AE 100%);
 
-
background: linear-gradient(top, #B09CC 0%,#7380AE 100%);
 
-
font-size: 15px;
 
-
line-height: 40px;
 
-
height: 40px;
 
-
position: relative;
 
-
padding: 0 20px;
 
-
    float: left;
 
-
display: block;
 
-
width: 80px;
 
-
color: #7380AE;
 
-
letter-spacing: 1px;
 
-
text-transform: uppercase;
 
-
font-weight: bold;
 
-
text-align: center;
 
-
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
 
-
    border-radius: 3px 3px 0 0;
 
-
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
 
-
}
 
-
 
-
.tabs label:after {
 
-
    content: '';
 
-
background: #fff;
 
-
position: absolute;
 
-
bottom: -2px;
 
-
left: 0;
 
-
width: 100%;
 
-
height: 2px;
 
-
display: block;
 
-
}
 
-
 
-
.tabs input:hover + label {
 
-
background: #B09CC9;
 
-
}
 
-
 
-
.tabs label:first-of-type {
 
-
    z-index: 4;
 
-
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
 
-
}
 
-
 
-
.tab-label-2 {
 
-
    z-index: 3;
 
-
}
 
-
 
-
.tab-label-3 {
 
-
    z-index: 2;
 
-
}
 
-
 
-
.tab-label-4 {
 
-
    z-index: 1;
 
-
}
 
-
 
-
.tabs input:checked + label {
 
-
    background: #fff;
 
-
z-index: 6;
 
-
}
 
-
 
-
.clear-shadow {
 
-
clear: both;
 
-
}
 
-
 
-
.content2 {
 
-
    background: #fff;
 
-
position: relative;
 
-
    width: 900px;
 
-
height: auto;
 
-
z-index: 5;
 
-
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
 
-
    border-radius: 0 3px 3px 3px;
 
-
}
 
-
 
-
.content2 div {
 
-
    position: absolute;
 
-
top: 0;
 
-
left: 0;
 
-
padding: 10px 40px;
 
-
z-index: 1;
 
-
    opacity: 0;
 
-
 
-
    -webkit-transition: opacity linear 0.1s;
 
-
    -moz-transition: opacity linear 0.1s;
 
-
    -o-transition: opacity linear 0.1s;
 
-
    -ms-transition: opacity linear 0.1s;
 
-
    transition: opacity linear 0.1s;
 
-
}
 
-
 
-
.tabs input.tab-selector-1:checked ~ .content2 .content-1,
 
-
.tabs input.tab-selector-2:checked ~ .content2 .content-2,
 
-
.tabs input.tab-selector-3:checked ~ .content2 .content-3,
 
-
.tabs input.tab-selector-4:checked ~ .content2 .content-4 {
 
-
z-index: 100;
 
-
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 
-
    filter: alpha(opacity=100);
 
-
    opacity: 1;
 
-
 
-
    -webkit-transition: opacity ease-out 0.2s 0.1s;
 
-
    -moz-transition: opacity ease-out 0.2s 0.1s;
 
-
    -o-transition: opacity ease-out 0.2s 0.1s;
 
-
    -ms-transition: opacity ease-out 0.2s 0.1s;
 
-
    transition: opacity ease-out 0.2s 0.1s;
 
-
}
 
-
.content2 div p {
 
-
 
-
text-align: left;
 
-
margin: 0;
 
-
padding-left: 15px;
 
-
border-left: 8px solid rgba(63,148,148, 0.1);
 
-
}
 
-
.container2{
 
-
width: 100%;
 
-
position: relative;
 
-
}
 
-
.clr{
 
-
clear: both;
 
-
padding: 0;
 
-
height: 0;
 
-
margin: 0;
 
-
}
 
-
.container2 > header{
 
-
margin: 20px;
 
-
position: relative;
 
-
display: block;
 
-
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 
-
    text-align: center;
 
-
}
 
-
 
-
/* Header Style */
 
-
.codrops-top{
 
-
line-height: 24px;
 
-
font-size: 11px;
 
-
background: #fff;
 
-
background: rgba(255, 255, 255, 0.6);
 
-
text-transform: uppercase;
 
-
position: relative;
 
-
font-family: Cambria, Georgia, serif;
 
-
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
 
-
}
 
-
.codrops-top a{
 
-
padding: 0px 10px;
 
-
letter-spacing: 1px;
 
-
color: #B09CC9;
 
-
display: inline-block;
 
-
}
 
-
.codrops-top a:hover{
 
-
background: rgba(255,255,255,0.3);
 
-
}
 
-
 
-
.codrops-top span.right a{
 
-
display: block;
 
-
}
 
   </style>
   </style>
Line 470: Line 284:
<a name="top"></a>
<a name="top"></a>
<div id='Genovologo'>
<div id='Genovologo'>
-
   <a href='https://2013.igem.org/Team:Shenzhen_BGIC_0101/'>
+
   <a href='https://2013.igem.org/Team:Shenzhen_BGIC_0101'target="_blank">
     <img src="https://static.igem.org/mediawiki/2013/d/d5/Abcdgenovo.png" style="width:350px;" />
     <img src="https://static.igem.org/mediawiki/2013/d/d5/Abcdgenovo.png" style="width:350px;" />
   </a>
   </a>
Line 476: Line 290:
<div id='iGEMLogo'>
<div id='iGEMLogo'>
   <a href='https://2013.igem.org/Main_Page' target="_blank">
   <a href='https://2013.igem.org/Main_Page' target="_blank">
-
     <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png' style="width:120px;" />
+
     <img src='https://static.igem.org/mediawiki/2011/b/be/ICL_iGEM_Logo.png' style="width:60px;" />
   </a>
   </a>
</div>
</div>
<div id='logo'>
<div id='logo'>
-
   <a href='http://www3.imperial.ac.uk/' target="_blank">
+
   <a href='https://2013.igem.org/Team:Shenzhen_BGIC_0101' target="_blank">
-
     <img src='https://static.igem.org/mediawiki/2013/d/d6/Genovoteamname.png' style="width:160px;" />
+
     <img src='https://static.igem.org/mediawiki/2013/d/d6/Genovoteamname.png' style="width:200px;" />
   </a>
   </a>
</div>
</div>

Latest revision as of 21:34, 28 October 2013