Team:Arizona State/Template:Test

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<style type="text/css">
 +
 +
#container {
 +
width: 1000px;
 +
overflow: hidden;
 +
margin: 50px auto;
 +
background: white;
 +
}
 +
 +
/*photobanner*/
 +
 +
.photobanner {
 +
height: 233px;
 +
width: 3550px;
 +
margin-bottom: 80px;
 +
}
 +
 +
.photobanner img {
 +
-webkit-transition: all 0.5s ease;
 +
-moz-transition: all 0.5s ease;
 +
-o-transition: all 0.5s ease;
 +
-ms-transition: all 0.5s ease;
 +
transition: all 0.5s ease;
 +
}
 +
 +
.photobanner img:hover {
 +
-webkit-transform: scale(1.1);
 +
-moz-transform: scale(1.1);
 +
-o-transform: scale(1.1);
 +
-ms-transform: scale(1.1);
 +
transform: scale(1.1);
 +
cursor: pointer;
 +
 +
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
 +
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
 +
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
 +
}
 +
 +
 +
/*keyframe animations*/
 +
.first {
 +
-webkit-animation: bannermove 30s linear infinite;
 +
-moz-animation: bannermove 30s linear infinite;
 +
-ms-animation: bannermove 30s linear infinite;
 +
animation: bannermove 30s linear infinite;
 +
}
 +
 +
@keyframes "bannermove" {
 +
0% {
 +
    margin-left: 0px;
 +
}
 +
100% {
 +
    margin-left: -2125px;
 +
}
 +
 +
}
 +
 +
@-moz-keyframes bannermove {
 +
0% {
 +
  margin-left: 0px;
 +
}
 +
100% {
 +
  margin-left: -2125px;
 +
}
 +
 +
}
 +
 +
@-webkit-keyframes "bannermove" {
 +
0% {
 +
  margin-left: 0px;
 +
}
 +
100% {
 +
  margin-left: -2125px;
 +
}
 +
 +
}
 +
 +
@-ms-keyframes "bannermove" {
 +
0% {
 +
  margin-left: 0px;
 +
}
 +
100% {
 +
  margin-left: -2125px;
 +
}
 +
 +
}
 +
 +
@-o-keyframes "bannermove" {
 +
0% {
 +
  margin-left: 0px;
 +
}
 +
100% {
 +
  margin-left: -2125px;
 +
}
 +
 +
}
 +
</style>
</head>
</head>
Line 6: Line 103:
<body>
<body>
-
<div style="width: 900px; border: solid 1px #C0C0C0; background: #FFFFFF; padding: 0px; color: #000000; font-size: 12px">
+
<div id="container" style="width: 900px; height:510px; border: solid 1px #C0C0C0; background: #FFFFFF; padding: 0px; color: #000000; font-size: 12px">
-
    <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
+
<div class="photobanner">
-
        <table>
+
-
        <tr><td>
+
             <a href="">
             <a href="">
-
                 <img src="https://static.igem.org/mediawiki/2012/3/3e/Blue_Water-_Main_Image_copy.png" width="680" />
+
                 <img class="first" src="https://static.igem.org/mediawiki/2012/3/3e/Blue_Water-_Main_Image_copy.png" width="680" />
             </a>
             </a>
-
        </td>
 
-
        <td>
 
             <a href="">
             <a href="">
                 <img src="https://static.igem.org/mediawiki/2012/9/9c/Regional_Photo.jpg" width="680" />
                 <img src="https://static.igem.org/mediawiki/2012/9/9c/Regional_Photo.jpg" width="680" />
             </a>
             </a>
-
        </td>
 
-
        <td>
 
             <a href="">
             <a href="">
                 <img src="https://static.igem.org/mediawiki/2012/3/3f/Production_Pipeline.png" width="680" />
                 <img src="https://static.igem.org/mediawiki/2012/3/3f/Production_Pipeline.png" width="680" />
             </a>
             </a>
-
        </td></tr>
+
</div></div>
-
        </table>
+
-
    </marquee>
+
-
</div>
+
</body>
</body>
</html>
</html>

Revision as of 06:04, 24 October 2012