Team:StuyGem NYC/Team

From 2014hs.igem.org

(Difference between revisions)
Line 9: Line 9:
   </head>
   </head>
   <body>
   <body>
 +
 
 +
 +
 +
 +
 +
 +
 +
 +
 +
    <div class="row">
 +
    <div class="large-3 columns">
 +
      <h1><img src="http://placehold.it/400x100&text=Logo" /></h1>
 +
    </div>
 +
    <div class="large-9 columns">
 +
      <ul class="right button-group">
 +
      <li><a href="#" class="button">Link 1</a></li>
 +
      <li><a href="#" class="button">Link 2</a></li>
 +
      <li><a href="#" class="button">Link 3</a></li>
 +
      <li><a href="#" class="button">Link 4</a></li>
 +
      </ul>
 +
    </div>
 +
  </div>
 +
 
 +
<!-- End Header and Nav -->
 +
 +
<!-- First Band (Slider) -->
 +
 +
  <div class="row">
 +
    <div class="large-12 columns">
 +
    <div id="slider">
 +
      <img src="http://placehold.it/1000x400&text=[ img 1 ]" />
 +
    </div>
      
      
-
     <div class="row">
+
     <hr />
-
      <div class="large-12 columns">
+
    </div>
-
        <h1>Welcome to Foundation</h1>
+
  </div>
-
       </div>
+
 
 +
<!-- Three-up Content Blocks -->
 +
 +
  <div class="row">
 +
    <div class="large-4 columns">
 +
      <img src="http://placehold.it/400x300&text=[img]" />
 +
      <h4>This is a content section.</h4>
 +
       <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
     </div>
     </div>
      
      
-
     <div class="row">
+
     <div class="large-4 columns">
-
      <div class="large-12 columns">
+
      <img src="http://placehold.it/400x300&text=[img]" />
-
      <div class="panel">
+
      <h4>This is a content section.</h4>
-
        <h3>We&rsquo;re stoked you want to try Foundation! </h3>
+
      <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
-
        <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+
-
        <p>Once you've exhausted the fun in this document, you should check out:</p>
+
-
        <div class="row">
+
-
        <div class="large-4 medium-4 columns">
+
-
    <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
+
-
    </div>
+
-
        <div class="large-4 medium-4 columns">
+
-
        <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
+
-
        </div>
+
-
        <div class="large-4 medium-4 columns">
+
-
        <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
+
-
        </div>       
+
-
</div>
+
-
      </div>
+
-
      </div>
+
     </div>
     </div>
-
 
+
   
-
     <div class="row">
+
     <div class="large-4 columns">
-
       <div class="large-8 medium-8 columns">
+
       <img src="http://placehold.it/400x300&text=[img]" />
-
        <h5>Here&rsquo;s your basic grid:</h5>
+
      <h4>This is a content section.</h4>
-
        <!-- Grid Example -->
+
      <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
-
 
+
    </div>
 +
 
 +
    </div>
 +
   
 +
<!-- Call to Action Panel -->
 +
<div class="row">
 +
    <div class="large-12 columns">
 +
   
 +
      <div class="panel">
 +
        <h4>Get in touch!</h4>
 +
           
         <div class="row">
         <div class="row">
-
           <div class="large-12 columns">
+
           <div class="large-9 columns">
-
             <div class="callout panel">
+
             <p>We'd love to hear from you, you attractive person you.</p>
-
              <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
+
-
            </div>
+
           </div>
           </div>
-
        </div>
+
           <div class="large-3 columns">
-
        <div class="row">
+
             <a href="#" class="radius button right">Contact Us</a>
-
           <div class="large-6 medium-6 columns">
+
-
             <div class="callout panel">
+
-
              <p>Six columns</p>
+
-
            </div>
+
-
          </div>
+
-
          <div class="large-6 medium-6 columns">
+
-
            <div class="callout panel">
+
-
              <p>Six columns</p>
+
-
            </div>
+
           </div>
           </div>
         </div>
         </div>
-
        <div class="row">
+
      </div>
-
          <div class="large-4 medium-4 small-4 columns">
+
     
-
            <div class="callout panel">
+
    </div>
-
              <p>Four columns</p>
+
  </div>
-
            </div>
+
-
          </div>
+
  <!-- Footer -->
-
          <div class="large-4 medium-4 small-4 columns">
+
 
-
            <div class="callout panel">
+
  <footer class="row">
-
              <p>Four columns</p>
+
    <div class="large-12 columns">
-
            </div>
+
      <hr />
-
          </div>
+
      <div class="row">
-
          <div class="large-4 medium-4 small-4 columns">
+
        <div class="large-6 columns">
-
            <div class="callout panel">
+
          <p>© Copyright no one at all. Go to town.</p>
-
              <p>Four columns</p>
+
-
            </div>
+
-
          </div>
+
         </div>
         </div>
-
          
+
         <div class="large-6 columns">
-
        <hr />
+
          <ul class="inline-list right">
-
               
+
            <li><a href="#">Link 1</a></li>
-
        <h5>We bet you&rsquo;ll need a form somewhere:</h5>
+
            <li><a href="#">Link 2</a></li>
-
        <form>
+
            <li><a href="#">Link 3</a></li>
-
  <div class="row">
+
            <li><a href="#">Link 4</a></li>
-
    <div class="large-12 columns">
+
           </ul>
-
      <label>Input Label</label>
+
-
      <input type="text" placeholder="large-12.columns" />
+
-
    </div>
+
-
  </div>
+
-
  <div class="row">
+
-
    <div class="large-4 medium-4 columns">
+
-
      <label>Input Label</label>
+
-
      <input type="text" placeholder="large-4.columns" />
+
-
    </div>
+
-
    <div class="large-4 medium-4 columns">
+
-
      <label>Input Label</label>
+
-
      <input type="text" placeholder="large-4.columns" />
+
-
    </div>
+
-
    <div class="large-4 medium-4 columns">
+
-
      <div class="row collapse">
+
-
        <label>Input Label</label>
+
-
        <div class="small-9 columns">
+
-
          <input type="text" placeholder="small-9.columns" />
+
-
        </div>
+
-
        <div class="small-3 columns">
+
-
          <span class="postfix">.com</span>
+
-
        </div>
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
-
  <div class="row">
+
-
    <div class="large-12 columns">
+
-
      <label>Select Box</label>
+
-
      <select>
+
-
        <option value="husker">Husker</option>
+
-
        <option value="starbuck">Starbuck</option>
+
-
        <option value="hotdog">Hot Dog</option>
+
-
        <option value="apollo">Apollo</option>
+
-
      </select>
+
-
    </div>
+
-
  </div>
+
-
  <div class="row">
+
-
    <div class="large-6 medium-6 columns">
+
-
      <label>Choose Your Favorite</label>
+
-
      <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
+
-
      <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
+
-
    </div>
+
-
    <div class="large-6 medium-6 columns">
+
-
      <label>Check these out</label>
+
-
      <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
+
-
      <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
+
-
    </div>
+
-
  </div>
+
-
  <div class="row">
+
-
    <div class="large-12 columns">
+
-
      <label>Textarea Label</label>
+
-
      <textarea placeholder="small-12.columns"></textarea>
+
-
    </div>
+
-
  </div>
+
-
</form>
+
-
      </div>   
+
-
 
+
-
      <div class="large-4 medium-4 columns">
+
-
  <h5>Try one of these buttons:</h5>
+
-
  <p><a href="#" class="small button">Simple Button</a><br/>
+
-
        <a href="#" class="small radius button">Radius Button</a><br/>
+
-
        <a href="#" class="small round button">Round Button</a><br/>          
+
-
        <a href="#" class="medium success button">Success Btn</a><br/>
+
-
        <a href="#" class="medium alert button">Alert Btn</a><br/>
+
-
        <a href="#" class="medium secondary button">Secondary Btn</a></p>            
+
-
<div class="panel">
+
-
        <h5>So many components, girl!</h5>
+
-
        <p>A whole kitchen sink of goodies comes with Foundation. Checkout the docs to see them all, along with details on making them your own.</p>
+
-
        <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>        
+
         </div>
         </div>
       </div>
       </div>
-
     </div>
+
     </div>  
 +
  </footer>
 +
   
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
      
      
     <script src="https://2014hs.igem.org/Team:StuyGem_NYC/jquery.js?action=raw&ctype=text/js"></script>
     <script src="https://2014hs.igem.org/Team:StuyGem_NYC/jquery.js?action=raw&ctype=text/js"></script>

Revision as of 03:44, 5 April 2014

<!doctype html> Foundation | Welcome

This is a content section.

Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.

This is a content section.

Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.

This is a content section.

Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.

Get in touch!

We'd love to hear from you, you attractive person you.

Contact Us

Retrieved from "http://2014hs.igem.org/Team:StuyGem_NYC/Team"