Difference between revisions of "Team:BIT/Interlab"

Line 1: Line 1:
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>Document</title>
 +
 +
<style type="text/css">
 +
    *
 +
{
 +
    margin: 0;
 +
    padding: 0;
 +
    text-decoration: none;
 +
}
 +
body
 +
{
 +
    padding: 20px;
 +
}
 +
#container
 +
{  position: relative;
 +
    overflow: hidden;
 +
 +
    width: 600px; height: 400px; border: 3px solid #333;
 +
    margin: 0 auto;
 +
}
 +
#list
 +
{  position: absolute;
 +
    z-index: 1;
 +
    width: 4200px;
 +
    height: 400px;
 +
}
 +
#list img
 +
{
 +
    float: left;
 +
    width: 600px;
 +
}
 +
#buttons
 +
{
 +
    position: absolute;
 +
    z-index: 2;
 +
    bottom: 20px;
 +
    left: 250px;
 +
    width: 100px;
 +
    height: 10px;
 +
}
 +
#buttons span
 +
{float: left;
 +
    width: 10px;
 +
    height: 10px;
 +
    margin-right: 5px;
 +
 +
    cursor: pointer;
 +
    border: 1px solid #fff;
 +
    border-radius: 50%;
 +
    background: #333;
 +
}
 +
#buttons .on
 +
{
 +
    background: orangered;
 +
}
 +
.arrow
 +
{font-size: 36px;
 +
    font-weight: bold;
 +
    line-height: 39px;
 +
    position: absolute;
 +
    z-index: 2;
 +
    top: 180px;
 +
    display: none;
 +
    width: 40px;
 +
    height: 40px; 
 +
 +
    cursor: pointer;
 +
    text-align: center;
 +
    color: #fff;
 +
    background-color: RGBA(0,0,0,.3);
 +
}
 +
.arrow:hover
 +
{
 +
    background-color: RGBA(0,0,0,.7);
 +
}
 +
#container:hover .arrow
 +
{
 +
    display: block;
 +
}
 +
#prev
 +
{
 +
    left: 20px;
 +
}
 +
#next
 +
{
 +
    right: 20px;
 +
}
 +
</style>
 +
 +
 
 +
</head>
 +
<body>
 +
   
 +
<div id="container">
 +
    <div id="list" style="left: -600px;">
 +
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="1"/>
 +
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="1"/>
 +
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="2"/>
 +
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="3"/>
 +
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="4"/>
 +
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="5"/>
 +
        <img src="https://static.igem.org/mediawiki/2018/c/c2/T--BIT--9.6test.png" alt="5"/>
 +
    </div>
 +
    <div id="buttons">
 +
        <span index="1" class="on"></span>
 +
        <span index="2"></span>
 +
        <span index="3"></span>
 +
        <span index="4"></span>
 +
        <span index="5"></span>
 +
    </div>
 +
    <a href="javascript:" id="prev" class="arrow">&lt;</a>
 +
    <a href="javascript:" id="next" class="arrow">&gt;</a>
 +
</div>
 
  <script>
 
  <script>
 
         window.onload=function() {
 
         window.onload=function() {
Line 112: Line 229:
 
         }
 
         }
 
     </script>
 
     </script>
 +
</body>
 +
</html>

Revision as of 09:40, 9 September 2018

<!DOCTYPE html> Document

1 1 2 3 4 5 5