Team:UNIK Copenhagen/Signe page

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team:UNIK_Copenhagen/Signe_Nav}}
{{:Team:UNIK_Copenhagen/Signe_Nav}}
<html>
<html>
 +
<head>
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 +
<script type="text/javascript" src="firsst_slideshow.js"></script>
 +
 +
<style>
 +
*{
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
#container{
 +
position: relative;
 +
width: 900px;
 +
height: 450px;
 +
background-color: #99ff99;
 +
overflow: hidden;
 +
}
 +
#subcontainer{
 +
width: 10000px;
 +
position: absolute;
 +
}
 +
.pictures{
 +
display: block;
 +
float: left;
 +
width: 900px;
 +
height: 450px;
 +
word-wrap: break-word;
 +
}
 +
#photo{
 +
position: absolute;
 +
top: inherit;
 +
left: inherit;
 +
z-index: 80;
 +
}
 +
#group_text{
 +
position: absolute;
 +
bottom: 0px;
 +
left: inherit;
 +
height: 70px;
 +
margin: 0px;
 +
width: 880px;
 +
padding: 10px;
 +
padding-bottom: 25px;
 +
/*background-color: rgba(0, 51, 51, 0.8);*/
 +
 +
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 1%, rgba(0,0,0,0) 92%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.8)), color-stop(1%,rgba(0,0,0,0.8)), color-stop(92%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0) 92%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0) 92%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0) 92%); /* IE10+ */
 +
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 1%,rgba(0,0,0,0) 92%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 ); /* IE6-8 */
 +
 +
z-index: 90;
 +
color: white;
 +
font: bold 20px Helvetica;
 +
}
 +
</style>
 +
 +
 +
<script>
 +
$(document).ready(function(){
 +
 +
var Width = 900,
 +
slidePos = 1;
 +
 +
$('#1').click(function(){
 +
next_slide(1);
 +
slidePos = 1;
 +
})
 +
$('#2').click(function(){
 +
next_slide(1);
 +
slidePos = 1;
 +
})
 +
$('#3').click(function(){
 +
next_slide(1);
 +
slidePos = 1;
 +
});
 +
 +
function next_slide(targetSlide){
 +
var slideDistance = (targetSlide-slidePos)*Width;
 +
$('#subcontainer').animate({
 +
left: '-='+slideDistance
 +
}, 900, 'linear');
 +
}
 +
});
 +
</script>
 +
</head>
 +
 +
<body>
<div class="the_content">
<div class="the_content">
-
<div id="article">
+
<input type="button" value="1" id="1"></input>
 +
<input type="button" value="2" id="2"></input>
 +
<input type="button" value="3" id="3"></input>
 +
 
 +
<div id="container">
 +
<ul id="subcontainer">
 +
<li class="pictures">
 +
<div id="group_text">
 +
<h1>Write a headline here</h1>
 +
<h2>Write more stuff here and make the pictures into links</h2></div>
 +
<img src="group.jpeg" id="photo">
 +
</li>
 +
<li class="pictures">
 +
<div id="group_text">
 +
<h1>Write a headline here</h1>
 +
<h2>Write even more stuff here and put < > buttons in both sides </h2></div>
 +
<img src="lab.jpg" id="photo">
 +
 +
</li>
 +
<li class="pictures">
 +
<div id="group_text">
 +
<h1>Write a headline here</h1>
 +
<h2>Write more stuff here and make an automatic cycle of slides</h2></div>
 +
<img src="lab2.jpg" id="photo">
 +
 +
</li>
 +
</ul>
 +
</div>
 +
 
-
<h1>Overskrift</h1>
 
-
<p>
 
-
Place to write stuff...
 
-
</p>
 
</div>
</div>
 +
</body>
</html>
</html>

Revision as of 08:32, 8 August 2013

  • Write a headline here

    Write more stuff here and make the pictures into links

  • Write a headline here

    Write even more stuff here and put < > buttons in both sides

  • Write a headline here

    Write more stuff here and make an automatic cycle of slides

Retrieved from "http://2013.igem.org/Team:UNIK_Copenhagen/Signe_page"