|
|
| (13 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | {{:Team:UNIK_Copenhagen/template}}
| |
| | | | |
| - | <html>
| |
| - |
| |
| - | <style type="text/css">
| |
| - | h3{
| |
| - | font: bold 30px Helvetica;
| |
| - | color: white;
| |
| - | border: none;
| |
| - | padding: 0px;
| |
| - | text-shadow: 2px 2px 5px #0F0F0F;
| |
| - | }
| |
| - | h4{
| |
| - | font: bold 22px Helvetica;
| |
| - | color: white;
| |
| - | border: none;
| |
| - | padding: 0px;
| |
| - | text-shadow: 2px 2px 3px #0F0F0F;
| |
| - |
| |
| - | }
| |
| - | .the_content{
| |
| - | max-width: 960px;
| |
| - | top: 0px;
| |
| - | margin-bottom: 60px;
| |
| - | }
| |
| - | #the_content_2{
| |
| - | text-align: justify;
| |
| - | max-width: 900px;
| |
| - | margin: 0px auto 0px auto;
| |
| - | top: 30px;
| |
| - | display:block;
| |
| - | position: relative;
| |
| - | padding: 0px 10px 60px 10px;
| |
| - | z-index: 0;
| |
| - | }
| |
| - |
| |
| - | #container{
| |
| - | position: relative;
| |
| - | width: 900px;
| |
| - | height: 300px;
| |
| - | background-color: rbga(255, 255, 255, 0.5);
| |
| - | margin: 0px auto 0px auto;
| |
| - | clear: both;
| |
| - | overflow: hidden;
| |
| - | z-index: inherit;
| |
| - | }
| |
| - | #subcontainer{
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | width: 10000px;
| |
| - | position: absolute;
| |
| - | z-index: inherit;
| |
| - |
| |
| - | }
| |
| - | .pictures{
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | display: block;
| |
| - | float: left;
| |
| - | width: 900px;
| |
| - | height: 300px;
| |
| - | z-index: inherit;
| |
| - | }
| |
| - | .pictures a{
| |
| - | text-decoration: none;
| |
| - | }
| |
| - | #photo{
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | position: absolute;
| |
| - | top: inherit;
| |
| - | left: inherit;
| |
| - | z-index: inherit;
| |
| - | }
| |
| - | #buttons{
| |
| - | z-index: inherit;
| |
| - | }
| |
| - | #group_text{
| |
| - | position: absolute;
| |
| - | bottom: 0px;
| |
| - | color: white;
| |
| - | left: inherit;
| |
| - | height: 70px;
| |
| - | margin: 0px;
| |
| - | width: 880px;
| |
| - | padding: 10px;
| |
| - | padding-bottom: 10px;
| |
| - | z-index: 1;
| |
| - |
| |
| - | /*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 */
| |
| - | color: white;
| |
| - | font: bold 20px Helvetica;
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function(){
| |
| - |
| |
| - | var Width = 900, slidePos = 1;
| |
| - |
| |
| - | $('#photo1').click(function(){
| |
| - | next_slide(1);
| |
| - | slidePos = 1;
| |
| - | })
| |
| - | $('#photo2').click(function(){
| |
| - | next_slide(2);
| |
| - | slidePos = 2;
| |
| - | })
| |
| - | $('#photo3').click(function(){
| |
| - | next_slide(3);
| |
| - | slidePos = 3;
| |
| - | });
| |
| - |
| |
| - | function next_slide(targetSlide){
| |
| - | var slideDistance = (targetSlide-slidePos)*Width;
| |
| - | $('#subcontainer').animate({
| |
| - | left: '-='+slideDistance
| |
| - | }, 900, 'linear');
| |
| - | }
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - | <body>
| |
| - | <div id=the_content_2>
| |
| - | <div id="container">
| |
| - | <ul id="subcontainer">
| |
| - | <li class="pictures">
| |
| - | <div id="group_text">
| |
| - | <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team">
| |
| - | <h3>The 2013 iGEM Copenhagen Team</h3>
| |
| - | <h4>Read more about the iGEM Copenhagen Team Members 2013</h4></div>
| |
| - | <img src="https://static.igem.org/mediawiki/2013/2/25/UNIK_Copenhagen_slide1.jpeg" id="photo"></a>
| |
| - | </li>
| |
| - | <li class="pictures">
| |
| - | <div id="group_text">
| |
| - | <h3>Headline</h3>
| |
| - | <h4>Write even more stuff here and put < > buttons in both sides </h4></div>
| |
| - | <img src="https://static.igem.org/mediawiki/2013/4/45/UNIK_Copenhagen_slide2.jpeg" id="photo">
| |
| - |
| |
| - | </li>
| |
| - | <li class="pictures">
| |
| - | <div id="group_text">
| |
| - | <h3>Write a headline here</h3>
| |
| - | <h4>Write more stuff here and make an automatic cycle of slides</h4></div>
| |
| - | <img src="https://static.igem.org/mediawiki/2013/6/63/UNIK_Copenhagen_slide3.jpeg" id="photo">
| |
| - |
| |
| - | </li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <div id="buttons">
| |
| - | <input type="button" value="1" id="photo1"></input>
| |
| - | <input type="button" value="2" id="photo2"></input>
| |
| - | <input type="button" value="3" id="photo3"></input>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="the_content">
| |
| - | </html>
| |
| - | {{:Team:UNIK_Copenhagen/tabs}}
| |
| - | <html>
| |
| - | </div>
| |
| - | </body>
| |
| - | </html>
| |
"
