Team:Michigan/Test Css

From 2012.igem.org

(Difference between revisions)
 
(201 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
 +
 +
<script type="text/javascript">
 +
 +
$(function(){
 +
$('.slideshow img:gt(0)')
 +
        .hide();
 +
setInterval(function(){
 +
        $('.slideshow :first-child')
 +
        .fadeOut()
 +
        .next('img')
 +
        .fadeIn()
 +
        .end()
 +
        .appendTo('.slideshow');}, 6000);
 +
});
 +
 +
 +
</script>
 +
 +
 +
<head>
 +
<style type="text/css">
<style type="text/css">
 +
div#navigation{
 +
/* Old browsers */
 +
border-radius: 0px;
 +
padding:90px 0 0 0;
 +
}
 +
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
 +
#navigation ul li{
 +
        float:left;
 +
        position:relative;
 +
 +
}
 +
 +
#navigation ul li a{
 +
 +
display:block;
 +
padding:7px 12px;
 +
margin-left:auto;
 +
        margin-right:auto;
 +
font-size:18px;
 +
white-space:nowrap;
 +
border-radius:1px;
 +
 +
}
 +
#navigation ul li a:hover{}
 +
#navigation ul li ul li a{
 +
width: 75px;
 +
}
 +
#navigation ul ul li a:hover{
 +
        background:#063257;
 +
background-repeat:repeat-x;
 +
        color:#fff080;
 +
background-size:200%;
 +
}
 +
#navigation ul ul{
 +
position:absolute;
 +
height:-99999px;
 +
margin-left:auto;
 +
        margin-right:auto;
 +
opacity: 0; /* Hide sub level */
 +
-webkit-transition: opacity .5s ease-in-out;
 +
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
z-index:497;
 +
background:#fff080;
 +
padding: 0px;
 +
border:1px solid #063257;
 +
border-top:1px solid #063257;
 +
box-shadow:#111 0 3px 4px;
 +
border-bottom-left-radius:2px;
 +
border-bottom-right-radius:2px;
 +
 +
}
 +
#navigation ul ul ul {
 +
margin-left:auto;
 +
        margin-right:auto;
 +
 +
 +
opacity: 0;
 +
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
 +
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
border-radius:6px;
 +
border:1px solid #444;
 +
}
 +
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:100%; left:0; }
 +
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
 +
 +
 +
.slideshow img { position:absolute; left:10; top:10; }
 +
 +
.slideshow {
 +
    margin: -375px 0px 0px 400px;
 +
    position: absolute;
 +
    width: 520px;
 +
    height: 350px;
 +
    padding: 10px;
 +
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
 +
}
 +
#footer-box {
#footer-box {
     width:100%;
     width:100%;
     border:none;
     border:none;
-
     padding:10px 0;
+
     padding:5px 0;
     opacity:0.6;
     opacity:0.6;
     filter:alpha(opacity=60); /* For IE8 and earlier */
     filter:alpha(opacity=60); /* For IE8 and earlier */
Line 54: Line 155:
margin:0 auto;
margin:0 auto;
         width: 962px;
         width: 962px;
-
         height: 500px;
+
         height: 0 auto;
background:url(https://static.igem.org/mediawiki/2012/7/75/DNA_Background.png) no-repeat center top;
background:url(https://static.igem.org/mediawiki/2012/7/75/DNA_Background.png) no-repeat center top;
         background-attachment: fixed;
         background-attachment: fixed;
Line 61: Line 162:
         margin: -23px 0 0px 0;
         margin: -23px 0 0px 0;
         width:962px;
         width:962px;
-
         height: 500px;
+
         height: 0 auto;
background:url(https://static.igem.org/mediawiki/2012/4/49/Michigan_Invisible_Header.png) no-repeat center top;
background:url(https://static.igem.org/mediawiki/2012/4/49/Michigan_Invisible_Header.png) no-repeat center top;
}
}
Line 77: Line 178:
width:962px;
width:962px;
margin:0 auto ;
margin:0 auto ;
-
height:126px;
+
height:124px;
padding:0px 0px 0;
padding:0px 0px 0;
}
}
Line 84: Line 185:
float:left;
float:left;
outline:none;
outline:none;
 +
        margin:17px 0 0 15px;
}
}
.header a#logo img{
.header a#logo img{
border:0;
border:0;
 +
}
 +
.header a#name{
 +
        display:block;
 +
        float:left;
 +
        outline:none;
 +
        margin:17px 0 0 0;
 +
}
 +
.header a#name img{
 +
        border:0;
}
}
.header ul{
.header ul{
Line 125: Line 236:
}
}
.body div#featured h3{
.body div#featured h3{
-
         line-height: 150%;
+
         line-height:110%;
color:#063257;
color:#063257;
font-size:24px;
font-size:24px;
Line 135: Line 246:
}
}
.body div#featured p{
.body div#featured p{
-
        line-height: 80%;
 
width:362px;
width:362px;
color:#063257;
color:#063257;
font-size:16px;
font-size:16px;
-
line-height:25px;
+
line-height:22px;
text-shadow: 0 1px 0 #fcfcfc;
text-shadow: 0 1px 0 #fcfcfc;
text-align:justify;
text-align:justify;
margin:0;
margin:0;
-
         padding: 10px 16px 10px;
+
         padding: 0px 16px 50px;
-
}
+
-
/*------------------------- Footer ------------------------*/
+
-
.footer{
+
-
width:940px;
+
-
background:url(../images/footer.png) no-repeat center top;
+
-
padding:65px 10px 0px;
+
-
margin:0 auto;
+
-
overflow:hidden;
+
}
}
 +
 +
</style>
</style>
Line 158: Line 262:
-
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Xayona Website Template</title>
<title>Xayona Website Template</title>
Line 169: Line 272:
<div class="page">
<div class="page">
<div class="header">
<div class="header">
-
<a href="https://2012.igem.org" alt="iGEM home page"><img src="https://static.igem.org/mediawiki/2012/8/83/Igem_icon.png" style="position:absolute;right:0;top:0;"></a>
+
<a href="https://2012.igem.org"><img src="https://static.igem.org/mediawiki/2012/8/83/Igem_icon.png" style="position:absolute;right:0;top:0;" alt=""></img></a>
-
<a href="index.html" id="logo"><img src="https://static.igem.org/mediawiki/2012/2/28/MSBT_Logo.png" alt=""/></a>
+
<a href="index.html" id="logo"><img src="https://static.igem.org/mediawiki/2012/c/c2/Michigan_2012_Logo_ani.gif" alt=""/></a>
 +
                                <a href="index.html" id="name"><img src="https://static.igem.org/mediawiki/2012/5/5f/Michigan_2012_Site_name.png" alt=""/></a>
 +
                        <div id="navigation">
<ul>
<ul>
-
<li class="selected"><a href="index.html">Project</a></li>
+
<li class="selected"><a href="index.html">Project</a>
-
<li><a href="about.html">Notebook</a></li>
+
<ul>
-
<li><a href="blog.html">Team</a></li>
+
                                              <li><a href="#">Option 1</a></li>
-
<li><a href="services.html">Safety</a></li>
+
                                              <li><a href="#">Option 2</a></li>
-
<li><a href="services.html">Sponsors</a></li>
+
</ul></li>
 +
<li><a href="about.html">Notebook</a>
 +
                                            <ul>
 +
                                              <li><a href="#">Option 1</a></li>
 +
                                              <li><a href="#">Option 2</a></li>
 +
                                            </ul>
 +
                                        </li>
 +
<li><a href="blog.html">Team</a>
 +
                                            <ul>
 +
                                              <li><a href="#">Option 1 </a></li>
 +
                                              <li><a href="#">Option 2 </a></li>
 +
                                            </ul>
 +
                                        </li>
 +
<li><a href="services.html">Safety</a>
 +
<ul>
 +
                                              <li><a href="#">Option 1</a></li>
 +
                                              <li><a href="#">Option 2</a></li>
 +
</ul></li>
 +
<li><a href="services.html">Sponsors</a>
 +
<ul>
 +
                                              <li><a href="#"> Option 1 </a></li>
 +
                                              <li><a href="#"> Option 2 </a></li>
 +
</ul></li>
</ul>
</ul>
-
</div>
+
 +
</div>
 +
</div>
<div class="body">
<div class="body">
<div id="featured">
<div id="featured">
<h3>Sometimes changes need to be made and with that comes a switch; and a terrible pun.</h3>
<h3>Sometimes changes need to be made and with that comes a switch; and a terrible pun.</h3>
-
<p>Team Michigan is engineering a novel, tightly controlled and inducible protein expression system in Escherichia coli in order to demonstrate that we can create robust boolean genetic control circuits that do not continuously rely on the presence of signaling compounds. We are using two unidirectional recombinases found in pathogenic Escherichia coli, Hbif, and FimE, to manipuulate promoter orientation.</p>
+
<p>Team Michigan is engineering a novel, tightly controlled and inducible protein expression system in Escherichia coli in order to demonstrate that we can create robust boolean genetic control circuits that do not continuously rely on the presence of signaling compounds. We are using two unidirectional recombinases found in pathogenic Escherichia coli, Hbif, and FimE, to manipulate promoter orientation.</p>
</div>
</div>
-
</div>
+
                                <div class="slideshow">
-
<div class="footer">
+
                                     
-
+
                                          <img src="https://static.igem.org/mediawiki/2012/0/0d/Michigan_%29Random_Team_1.png" alt=""></img>
-
</div>
+
                                     
 +
                                     
 +
                                          <img src="https://static.igem.org/mediawiki/2012/a/a0/Michigan_Random_Team_2.png" alt=""></img>
 +
                                     
 +
                                     
 +
                                          <img src="https://static.igem.org/mediawiki/2012/b/bc/Michigan_Random_Team_3.png" alt=""></img>
 +
                                     
 +
                                </div>
 +
        </div>
 +
 
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 00:35, 7 August 2012

Xayona Website Template