Team:Heidelberg/StartPage Test

From 2013.igem.org

(Difference between revisions)

@@ Line 1: / Line 1: @@
-{{:Team:Heidelberg/Templates/style-css}}
 {{:Team:Heidelberg/Templates/bootstrap-css}}
 {{:Team:Heidelberg/Templates/basic-css}}
+{{:Team:Heidelberg/Templates/style-css}}
+{{:Team:Heidelberg/Templates/countd-css}}
 <html>
+<style type="text/css">
+.popover .arrow:after {
+    border-width: 0;
+}
+ul {
+    line-height: 1.1em;
+}
+.item ul {
+    left: 50%;
+}
+</style>
+<div class="container" style="margin-left:8%; margin-right:8%">
+<a href="https://2013.igem.org"><object data="https://static.igem.org/mediawiki/2013/b/b3/Heidelberg_igem_logo2.png" height="70" style="left:0.5%; margin-top:-2%"></object></a>
       <div class="row">
-         <div id="nav" class="navigation col-md-8">
+         <div id="nav" class="navigation col-md-8 col-lg-8">
              <div class="item team">
-                 <img class="circle" alt="" src="images/Team_bg2.png" style="opacity: 0.1; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
+                 <img class="circle" alt="" src="images/Team_bg2.png" style="opacity: 0; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
                  <a class="icon" href="#"></a>
                  <h2 class="">Team</h2>
@@ Line 17: / Line 32: @@
                  </ul>
              </div>
-           <div class="item project">
+            <div class="item project">
-                 <img class="circle" alt="" src="images/Project_bg.png" style="opacity: 0.1; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
+                 <img class="circle" alt="" src="images/Project_bg.png" style="opacity: 0; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
                  <a class="icon" href="#"></a>
                  <h2 class="">Project</h2>
@@ Line 29: / Line 44: @@
              </div>
              <div class="item notebook">
-                 <img class="circle" alt="" src="images/Notebook_bg2.png" style="opacity: 0.1;width: 52px; height: 52px;" height="199" width="199">
+                 <img class="circle" alt="" src="https://static.igem.org/mediawiki/2013/0/07/Heidelberg_bg_notebook.png" style="opacity: 0; width: 52px; height: 52px;" height="199" width="199">
                  <a class="icon" href="#"></a>
@@ Line 40: / Line 55: @@
              </div>
              <div class="item parts">
-                 <img class="circle" alt="" src="images/Notebook_bg.png" height="199" width="199">
+                 <img class="circle" alt="" src="images/Notebook_bg.png" style="opacity: 0; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
                  <a class="icon" href="#"></a>
                  <h2>Parts</h2>
@@ Line 49: / Line 64: @@
              </div>
              <div class="item software">
-                 <img class="circle" alt="" src="images/Notebook_bg.png" style="opacity: 0.1; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
+                 <img class="circle" alt="" src="images/Notebook_bg.png" style="opacity: 0; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
                  <a class="icon" href="#"></a>
                  <h2 class="">Software</h2>
@@ Line 58: / Line 73: @@
              </div>
              <div class="item human">
-                 <img class="circle" alt="" src="images/Human_bg.png" height="199" width="199">
+                 <img class="circle" alt="" src="images/Human_bg.png" style="opacity: 0; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
                  <a class="icon" href="#"></a>
-                 <h2>Human Practice</h2>
+                 <h2>Outreach</h2>
                  <ul>
                      <li><a href="#">Outreach</a></li>
@@ Line 67: / Line 82: @@
              </div>
              <div class="item safety">
-                 <img class="circle" alt="" src="images/Notebook_bg.png" height="199" width="199">
+                 <img class="circle" alt="" src="images/Notebook_bg.png" style="opacity: 0; width: 52px; height: 52px; top: 0px; left: 0px;" height="199" width="199">
                  <a class="icon" href="#"></a>
                  <h2>Safety</h2>
@@ Line 75: / Line 90: @@
                  </ul>
              </div>
-			<img alt="" src="images/try-bg3.png">
+			<img src="https://static.igem.org/mediawiki/2013/4/43/Heidelberg_start_background2.png" style="z-index:-1">
          </div>
-		<div class="item logo col-md-4">
+		<div class="col-md-4 col-lg-4">
-                    <img id='logo' alt="" src="images/iGEM_StartLogo.png" height="173" width="400">
+            <img id='logo' alt="" src="https://static.igem.org/mediawiki/2013/6/60/Heidelberg_team_logo.png" width="407" style="margin-right:3%; margin-top:-15%; margin-bottom:5%">
-		 			<div class='row'>
+            <a href="https://www.facebook.com/pages/IGEM-Team-Heidelberg-2013/265102553624765"><img src="https://static.igem.org/mediawiki/2013/5/55/Heidelberg_Fb.png" height="50" style="float:right; margin-right:10%"/></a>
-						<div class='col-md-8 col-md-offset-2' id='WelcomeText'>
+            <a href="https://twitter.com/igem_heidelberg"><img src="https://static.igem.org/mediawiki/2013/1/1c/Heidelberg_Tw.png" height="50" style="float:right; margin-right:2% "/></a>
-					 	<p>For centuries, alchemists believed in the existence of the Philosopher’s Stone, a mysterious substance not only able to turn common metals into precious ones, such as silver and gold, but even capable of fulfilling mankind’s ultimate desires: rejuvenation and immortality.
-						Although the Philosopher’s Stone has never been found, the quest for it has pushed alchemists to test in their laboratories numerous substances and their interactions, building up a solid knowledge that can be found nowadays in the sciences of chemistry, metallurgy and pharmacology. </br>
-						Living in the 21st century research-driven world, our belief in the Philosopher’s Stone has faded. Yet we are, now as ever, still on a quest, looking for solutions not only to help individuals live long and healthy, but also to solve the ecological problems we ourselves have created in the course of modernization. Contrary to the past, we now believe that we should not simply look for magical substances hidden somewhere in Nature, rather we shall be inspired by it and create new tools for actively addressing the challenges of our society.</br>
+            <span style="float:right; margin-top:10%; margin-right:5%;; font-family:Arial, sans-serif" class="btn btn-default btn-lg btn-popover" data-content="For centuries, alchemists believed in the existence of the Philosopher’s Stone, a mysterious substance not only able to turn common metals into precious ones, such as silver and gold, but even capable of fulfilling mankind’s ultimate desires: rejuvenation and immortality.
+            Although the Philosopher’s Stone has never been found, the quest for it has pushed alchemists to test in their laboratories numerous substances and their interactions, building up a solid knowledge that can be found nowadays in the sciences of chemistry, metallurgy and pharmacology. </br>
-						Let us take you on a journey where you will meet a new class of molecules that holds the potential to revolutionize synthetic biology: the non-ribosomal peptide synthetases. We will teach you how to unlock their enormous potential for generating entirely synthetic peptides with various, customized functions, such as recycling gold from electronic waste.
+            Living in the 21st century research-driven world, our belief in the Philosopher’s Stone has faded. Yet we are, now as ever, still on a quest, looking for solutions not only to help individuals live long and healthy, but also to solve the ecological problems we ourselves have created in the course of modernization. Contrary to the past, we now believe that we should not simply look for magical substances hidden somewhere in nature, rather we shall be inspired by it and create new tools for actively addressing the challenges of our society.</br>
-				</br></br>
-						Take your chance!</br>
+            Let us take you on a journey where you will meet a new class of molecules that holds the potential to revolutionize synthetic biology: the non-ribosomal peptide synthetases. We will teach you how to unlock their enormous potential for generating entirely synthetic peptides with various, customized functions, such as recycling gold from electronic waste.
-						Join our quest!
+            </br></br>
+            Take your chance!</br>
+            Join our quest!" title="" data-tigger="click" data-title="Welcome!">Welcome! Click here!</span>
+            <h3 style="font-size:21px; float:right; margin-right:5%">Check out our Highlights:</h3>
+<div class="your-clock"></div>
-						 </p>
-					</div>
-					</div>
 		</div>
+	     </div>
 	<div>
-  <!-- The JavaScript -->
-        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
-        <script src="jquery.easing.1.3.js" type="text/javascript"></script>
-        <script type="text/javascript">
-            $(function() {
-                $('#nav > div').hover(
-                function () {
-                    var $this = $(this);
-                    $this.find('img').stop().animate({
-                        'width'     :'250px',
-                        'height'    :'250px',
-                        'top'       :'-25px',
-                        'left'      :'-25px',
-                        'opacity'   :'3.0',
-                    },500,'easeOutBack',function(){
-                        $(this).parent().find('ul').fadeIn(300);
-                    });
-					$this.find('img').css('z-index', '1');
-                    $this.find('a:first,h2,ul').addClass('active');
-                },
-                function () {
-                    var $this = $(this);
-                    $this.find('ul').fadeOut(500);
-                    $this.find('img').stop().animate({
-                        'width'     :'52px',
-                        'height'    :'52px',
-                        'top'       :'0px',
-                        'left'      :'0px',
-                        'opacity'   :'0.1',
-                    },1000,'easeOutBack');
-                    $this.find('a:first,h2,ul').removeClass('active');
-                }
-            );
-            });
-        </script>
 </html>
+{{:Team:Heidelberg/Templates/Footer-Start}}

Team:Heidelberg/StartPage Test

From 2013.igem.org

Latest revision as of 19:21, 3 October 2013

Team

Project

Notebook

Parts

Software

Outreach

Safety

Check out our Highlights: