Difference between revisions of "Team:Stanford-Brown"

Line 84: Line 84:
 
<h3 class="panel-title">Plastic Synthesis</h3>
 
<h3 class="panel-title">Plastic Synthesis</h3>
 
</div><!-- end panel-heading -->
 
</div><!-- end panel-heading -->
<img src="images/badge_html5.jpg" alt="HTML5" class="img-circle">
+
<img src="images/badge_html5.jpg" alt="Plastic-Synthesis" class="img-circle">
  
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.</p>
  
<a href="https://www.udemy.com/build-beautiful-html5-website/" target="_blank" class="btn btn-warning btn-block">Learn More</a>
+
<a href="" target="_blank" class="btn btn-warning btn-block">Learn More</a>
 
</div><!-- end panel -->
 
</div><!-- end panel -->
 
</div><!-- end feature -->
 
</div><!-- end feature -->
Line 97: Line 97:
 
<h3 class="panel-title">Self-Folding</h3>
 
<h3 class="panel-title">Self-Folding</h3>
 
</div><!-- end panel-heading -->
 
</div><!-- end panel-heading -->
<img src="images/badge_css3.jpg" alt="CSS3" class="img-circle">
+
<img src="images/badge_css3.jpg" alt="Self-Folding" class="img-circle">
  
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.</p>
  
<a href="https://www.udemy.com/build-beautiful-html5-website/" target="_blank" class="btn btn-danger btn-block">Learn More</a>
+
<a href="" target="_blank" class="btn btn-danger btn-block">Learn More</a>
 
</div><!-- end panel -->
 
</div><!-- end panel -->
 
</div><!-- end feature -->
 
</div><!-- end feature -->
Line 108: Line 108:
 
<div class="panel">
 
<div class="panel">
 
<div class="panel-heading">
 
<div class="panel-heading">
<h3 class="panel-title">CHET</h3>
+
<h3 class="panel-title">CrATER</h3>
 
</div><!-- end panel-heading -->
 
</div><!-- end panel-heading -->
<img src="images/badge_bootstrap.jpg" alt="Bootstrap 3" class="img-circle">
+
<img src="images/badge_bootstrap.jpg" alt="CrATER" class="img-circle">
  
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.</p>
  
<a href="https://www.udemy.com/build-beautiful-html5-website/" target="_blank" class="btn btn-info btn-block">Learn More</a>
+
<a href="" target="_blank" class="btn btn-info btn-block">Learn More</a>
 
</div><!-- end panel -->
 
</div><!-- end panel -->
 
</div><!-- end feature -->
 
</div><!-- end feature -->
Line 120: Line 120:
  
  
<div class="row" id="moreInfo">
+
<div class="col-sm-6">
+
<h3>Neat Tabbable Content</h3>
+
<div class="tabbable">
+
<ul class="nav nav-tabs">
+
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
+
</ul>
+
<div class="tab-content">
+
<div class="tab-pane active" id="tab1">
+
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location <small>More like our favourite surf spot</small></h4>
+
 
+
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6718.564466942968!2d-122.06158767708025!3d37.41026051158688!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb765aa824165%3A0x15bc65e03fbb45b5!2sNASA+Ames+Research+Center!5e1!3m2!1sen!2sus!4v1436724070987" width="100%" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>
+
 
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
</div><!-- end tab-pane -->
+
 
+
<div class="tab-pane" id="tab2">
+
<h4>A Left FLoated Picture <small>Using Placehold.it</small></h4>
+
 
+
<img src="http://placehold.it/140" class="thumbnail pull-left" alt="Placeholder image">
+
 
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
 
+
<hr>
+
 
+
<a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span> Click for a Modal Window!</a>
+
 
+
<div class="modal fade" id="myModal">
+
<div class="modal-dialog">
+
<div class="modal-content">
+
<div class="modal-header">
+
<button class="close" data-dismiss="modal">&times;</button>
+
 
+
<h4 class="modal-title">A Modal Window</h4>
+
</div><!-- end modal-header -->
+
 
+
 
+
<div class="modal-body">
+
<h4>Text in a modal</h4>
+
 
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
 
+
<h4>Popovers in a modal</h4>
+
<a href="#" class="btn btn-danger pop" data-toggle="popover" data-placement="top" data-original-title="You clicked it!" data-content="I knew you would.">Dont click this button</a>
+
 
+
<h4>Tooltips in a modal</h4>
+
<a href="" data-original-title="Tooltip" rel="tooltip">This link</a> should have a tooltip, and so should <a href="#" data-original-title="Woohoo!" rel="tooltip">this one</a>!
+
 
+
<hr>
+
 
+
<p><small class="text-muted">PS. This form doesn't do anything. Just a heads up.</small></p>
+
 
+
<form class="form-horizontal">
+
+
<div class="form-group">
+
<label class="col-lg-2 control-label" for="inputName">Name</label>
+
<div class="col-lg-10">
+
<input class="form-control" id="inputName" placeholder="Name" type="text">
+
</div>
+
</div>
+
 
+
<div class="form-group">
+
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
+
<div class="col-lg-10">
+
<input class="form-control" id="inputEmail" placeholder="Email" type="email">
+
</div>
+
</div>
+
 
+
<div class="form-group">
+
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
+
<div class="col-lg-10">
+
<textarea class="form-control" id="inputMessage" placeholder="Message" rows="3"></textarea>
+
<button class="btn btn-success pull-right" type="submit">Send!</button>
+
</div>
+
</div>
+
</form>
+
</div><!-- end modal-body -->
+
+
<div class="modal-footer">
+
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button> <button class="btn btn-primary" type="button">Save changes</button>
+
</div><!-- end modal-footer -->
+
</div><!-- end modal-content -->
+
</div><!-- end modal-dialog -->
+
</div><!-- end myModal -->
+
</div><!-- end tab-pane -->
+
</div><!-- end tab-content -->
+
</div><!-- end tabbable -->
+
</div><!-- end col-sm-6 -->
+
  
 
<div class="col-sm-6">
 
<div class="col-sm-6">
Line 239: Line 147:
 
</div><!-- end moreInfo -->
 
</div><!-- end moreInfo -->
  
 +
 +
<hr>
  
<div class="row" id="bigCallout">
+
<!-- Footer -->
<div class="col-12">
+
 +
<!-- All Javascript at the bottom of the page for faster page loading -->
 +
 +
<!-- First try for the online version of jQuery-->
 +
<script src="http://code.jquery.com/jquery.js"></script>
 +
 +
<!-- If no online access, fallback to our hardcoded version of jQuery -->
 +
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>
 +
 +
<!-- Bootstrap JS -->
 +
<script src="bootstrap/js/bootstrap.min.js"></script>
 +
 +
<!-- Custom JS -->
 +
<script src="includes/js/script.js"></script>
  
<div class="alert alert-success alert-block fade in" id="successAlert">
+
<!-- Latest compiled and minified CSS -->
<button type="button" class="close" data-dismiss="alert">&times;</button>
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  
<h4>Success!</h4>
+
<!-- Optional theme -->
<p>You just made this element display by using jQuery. Click the "x" in the top right corner to close.</p>
+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  
</div><!-- end alert -->
+
<!-- Latest compiled and minified JavaScript -->
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  
<!-- Visible only on small devices -->
 
<div class="well well-small visible-sm">
 
<a href="" class="btn btn-large btn-block btn-default"><span class="glyphicon glyphicon-phone"></span> Give us a call!</a>
 
</div><!-- end well-small -->
 
 
<div class="well">
 
<div class="page-header">
 
<h1>This a Callout <small>A subheader</small></h1>
 
 
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
 
 
<a href="" class="btn btn-large btn-primary" id="alertMe">Click a nice big button</a>
 
<a href="" class="btn btn-large btn-link">or a secondary link</a>
 
</div><!-- end page-header -->
 
</div><!-- end well -->
 
 
</div><!-- end col-12 -->
 
</div><!-- end bigCallout -->
 
 
<hr>
 
 
</body>
 
</body>
 
</html>
 
</html>
  
 
{{Stanford-Brown_Footer}}
 
{{Stanford-Brown_Footer}}

Revision as of 20:24, 10 August 2015

Our Projects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.

Plastic Synthesis

Plastic-Synthesis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.

Learn More

Self-Folding

Self-Folding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.

Learn More

CrATER

CrATER

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus erat dui, sagittis non lectus tristique, commodo dignissim elit. Maecenas id vehicula lacus, at dignissim diam. Vivamus dictum mi nisi, ut eleifend nisi vehicula convallis.

Learn More

About Us!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A List Group

Our Projects!



Copyright © 2015 Stanford-Brown iGEM Team