Team:UCSF/Home1

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<!DOCTYPE html>
-
<head>
+
 
-
    <title>Untitled Page</title>
+
 
-
</head>
+
 
-
<body>
+
<!--  
-
<!-- Navigation -->
+
* Markup for jQuery Orbit Plugin 1.2.3
 +
* www.ZURB.com/playground
 +
* Copyright 2010, ZURB
 +
* Free to use under the MIT license.
 +
* http://www.opensource.org/licenses/mit-license.php
 +
-->
   
   
-
  <nav class="top-bar">
 
-
    <ul class="title-area">
 
-
      <!-- Title Area -->
 
-
      <li class="name">
 
-
        <h1>
 
-
          <a href="#">
 
-
            Top Bar Title
 
-
          </a>
 
-
        </h1>
 
-
      </li>
 
-
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
 
-
    </ul>
 
   
   
-
    <section class="top-bar-section">
 
-
      <!-- Right Nav Section -->
 
-
      <ul class="right">
 
-
        <li class="divider"></li>
 
-
        <li class="has-dropdown">
 
-
          <a href="#">Main Item 1</a>
 
-
          <ul class="dropdown">
 
-
            <li><label>Section Name</label></li>
 
-
            <li class="has-dropdown">
 
-
              <a href="#" class="">Has Dropdown, Level 1</a>
 
-
              <ul class="dropdown">
 
-
                <li><a href="#">Dropdown Options</a></li>
 
-
                <li><a href="#">Dropdown Options</a></li>
 
-
                <li><a href="#">Level 2</a></li>
 
-
                <li><a href="#">Subdropdown Option</a></li>
 
-
                <li><a href="#">Subdropdown Option</a></li>
 
-
                <li><a href="#">Subdropdown Option</a></li>
 
-
              </ul>
 
-
            </li>
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li class="divider"></li>
 
-
            <li><label>Section Name</label></li>
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li class="divider"></li>
 
-
            <li><a href="#">See all &rarr;</a></li>
 
-
          </ul>
 
-
        </li>
 
-
        <li class="divider"></li>
 
-
        <li><a href="#">Main Item 2</a></li>
 
-
        <li class="divider"></li>
 
-
        <li class="has-dropdown">
 
-
          <a href="#">Main Item 3</a>
 
-
          <ul class="dropdown">
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li><a href="#">Dropdown Option</a></li>
 
-
            <li class="divider"></li>
 
-
            <li><a href="#">See all &rarr;</a></li>
 
-
          </ul>
 
-
        </li>
 
-
      </ul>
 
-
    </section>
 
-
  </nav>
 
   
   
-
  <!-- End Top Bar -->
+
<head>
-
+
<meta charset="utf-8" />
-
  <div class="row">
+
<title>Orbit Demo</title>
-
    <div class="large-12 columns">
+
-
+
<!-- Attach our CSS -->
-
    <!-- Content Slider -->
+
  <link rel="stylesheet" href="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/orbit-1.2.3.css">
-
+
  <link rel="stylesheet" href="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/demo/demo-style.css">
-
      <div class="row">
+
 
-
        <div class="large-12 hide-for-small">
+
<!-- Attach necessary JS -->
-
+
<script type="text/javascript" src="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/jquery-1.5.1.min.js"></script>
-
          <div id="featured" data-orbit>
+
<script type="text/javascript" src="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/jquery.orbit-1.2.3.min.js"></script>
-
              <img src="http://placehold.it/1200x500&text=Slide Image 1" alt="slide image">
+
-
              <img src="http://placehold.it/1200x500&text=Slide Image 2" alt="slide image">
+
<!--[if IE]>
-
              <img src="http://placehold.it/1200x500&text=Slide Image 3" alt="slide image">
+
    <style type="text/css">
-
            </div>
+
        .timer { display: none !important; }
-
+
        div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
-
      </div>
+
    </style>
-
    </div>
+
<![endif]-->
-
+
-
    <!-- End Content Slider -->
+
<!-- Run the plugin -->
-
+
<script type="text/javascript">
-
    <!-- Mobile Header -->
+
$(window).load(function() {
-
+
$('#featured').orbit();
-
      <div class="row">
+
});
-
        <div class="large-12 columns show-for-small">
+
</script>
-
+
-
          <img src="http://placehold.it/1200x700&text=Mobile Header">
+
</head>
-
+
<body>
-
        </div>
+
-
      </div><br>
+
<div class="container">
-
+
<h4>ZURB's Orbit Slider</h4>
-
    <!-- End Mobile Header -->
+
<a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a>
-
+
-
+
-
      <div class="row">
+
-
        <div class="large-12 columns">
+
-
          <div class="row">
+
<!-- =======================================
-
            <!-- Shows -->
+
 
-
            <div class="large-4 small-6 columns">
+
THE ACTUAL ORBIT SLIDER CONTENT
-
+
 
-
              <h4>Upcoming Shows</h4><hr>
+
======================================= -->
-
+
<div id="featured">  
-
              <div class="row">
+
<div class="content" style="">
-
                <div class="large-1 column">
+
<h1>Orbit does content now.</h1>
-
                  <img src="http://placehold.it/50x50&amp;text=[img]">
+
<h3>Highlight me...I'm text.</h3>
-
                </div>
+
</div>
-
+
<a href=""><img src="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/demo/dummy-images/overflow.jpg" /></a>
-
                <div class="large-9 columns">
+
<img src="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/demo/dummy-images/captions.jpg" data-caption="#htmlCaption" />
-
                  <h5><a href="#">Venue Name</a></h5>
+
<img src="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/demo/dummy-images/features.jpg"  />
-
                  <h6 class="subheader show-for-small">Doors at 00:00pm</h6>
+
</div>
-
                </div>
+
<!-- Captions for Orbit -->
-
              </div><hr>
+
<span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup :)</span>
-
+
-
              <div class="hide-for-small">
+
-
                <div class="row">
+
-
                  <div class="large-1 column">
+
</div>
-
                    <img src="http://placehold.it/50x50&amp;text=[img]">
+
</body>
-
                  </div>
+
-
+
-
                  <div class="large-9 columns">
+
-
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
+
-
                  </div>
+
-
                </div><hr>
+
-
+
-
                <div class="row">
+
-
                  <div class="large-1 column">
+
-
                    <img src="http://placehold.it/50x50&amp;text=[img]">
+
-
                  </div>
+
-
+
-
                  <div class="large-9 columns">
+
-
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
+
-
                  </div>
+
-
                </div><hr>
+
-
+
-
                <div class="row">
+
-
                  <div class="large-1 column">
+
-
                    <img src="http://placehold.it/50x50&amp;text=[img]">
+
-
                  </div>
+
-
+
-
                  <div class="large-9 columns">
+
-
                    <h5 class="subheader"><a href="#">Venue Name</a></h5>
+
-
                  </div>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
            <!-- End Shows -->
+
-
+
-
+
-
            <!-- Image -->
+
-
+
-
            <div class="large-4 small-6 columns">
+
-
              <img src="http://placehold.it/300x465&amp;text=Image">
+
-
            </div>
+
-
+
-
            <!-- End Image -->
+
-
+
-
+
-
            <!-- Feed -->
+
-
+
-
            <div class="large-4 small-12 columns">
+
-
+
-
              <h4>Blog</h4><hr>
+
-
              <div class="panel">
+
-
                <h5><a href="#">Post Title 1</a></h5>
+
-
+
-
                <h6 class="subheader">
+
-
                  Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Suspendisse ultrices ornare tempor...
+
-
                </h6>
+
-
+
-
                <h6><a href="#">Read More »</a></h6>
+
-
              </div>
+
-
+
-
              <div class="panel hide-for-small">
+
-
                <h5><a href="#">Post Title 2 »</a></h5>
+
-
              </div>
+
-
+
-
              <div class="panel hide-for-small">
+
-
                <h5><a href="#">Post Title 3 »</a></h5>
+
-
              </div>
+
-
+
-
              <a href="#" class="right">Go To Blog »</a>
+
-
+
-
            </div>
+
-
+
-
            <!-- End Feed -->
+
-
+
-
          </div>
+
-
        </div>
+
-
      </div>
+
-
+
-
    <!-- End Content -->
+
-
+
-
+
-
    <!-- Footer -->
+
-
+
-
      <footer class="row">
+
-
        <div class="large-12 columns"><hr>
+
-
            <div class="row">
+
-
+
-
              <div class="large-6 columns">
+
-
                  <p>&copy; Copyright no one at all. Go to town.</p>
+
-
              </div>
+
-
+
-
              <div class="large-6 small-12 columns">
+
-
                  <ul class="inline-list right">
+
-
                    <li><a href="#">Link 1</a></li>
+
-
                    <li><a href="#">Link 2</a></li>
+
-
                    <li><a href="#">Link 3</a></li>
+
-
                    <li><a href="#">Link 4</a></li>
+
-
                  </ul>
+
-
              </div>
+
-
+
-
            </div>
+
-
        </div>
+
-
      </footer>
+
-
+
-
    <!-- End Footer -->
+
-
+
-
    </div>
+
-
  </div>
+
-
+
-
  <script>
+
-
      document.write('<script src=js/vendor/' +
+
-
  ('__proto__' in {} ? 'zepto' : 'jquery') +
+
-
  '.js><\/script>')
+
-
  </script>
+
-
  <script src="js/foundation.min.js"></script>
+
-
  <script>
+
-
      $(document).foundation();
+
-
  </script>
+
-
<!-- End Footer -->
+
-
</body>
+
</html>
</html>

Revision as of 18:51, 7 August 2013

<!DOCTYPE html>




<head> <meta charset="utf-8" /> <title>Orbit Demo</title>


<link rel="stylesheet" href="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/orbit-1.2.3.css"> <link rel="stylesheet" href="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/demo/demo-style.css">


<script type="text/javascript" src="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="https://www.dropbox.com/home/iGEM%202013/Communications%3ASuzi%20Projects/Website/Templates/orbit-1.2.3/jquery.orbit-1.2.3.min.js"></script>



<script type="text/javascript"> $(window).load(function() { $('#featured').orbit(); }); </script>

</head> <body>

ZURB's Orbit Slider

<a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a>



I'm A Badass Caption: I can haz <a href="#">links</a>, style or anything that is valid markup :)


</body> </html>

Retrieved from "http://2013.igem.org/Team:UCSF/Home1"