Difference between revisions of "Team:NTU-Singapore/Interlab"

Line 22: Line 22:
 
<script src="https://use.fontawesome.com/597ba5ca72.js"></script>
 
<script src="https://use.fontawesome.com/597ba5ca72.js"></script>
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
−
 
+
<link href="https://fonts.googleapis.com/css?family=Amatic+SC:700|Annie+Use+Your+Telescope|Gloria+Hallelujah|Just+Me+Again+Down+Here|Nothing+You+Could+Do|Reenie+Beanie|Rock+Salt|Schoolbell|Shadows+Into+Light|Sue+Ellen+Francisco" rel="stylesheet">
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
Line 37: Line 37:
  
 
         <!-- Navigation -->
 
         <!-- Navigation -->
−
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
−
<!-- Brand and toggle get grouped for better mobile display -->
+
            <!-- Brand and toggle get grouped for better mobile display -->
−
<div class="navbar-header">
+
            <div class="navbar-header">
−
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
−
<span class="sr-only">Toggle navigation</span>
+
                    <span class="sr-only">Toggle navigation</span>
−
<span class="icon-bar"></span>
+
                    <span class="icon-bar"></span>
−
<span class="icon-bar"></span>
+
                    <span class="icon-bar"></span>
−
<span class="icon-bar"></span>
+
                    <span class="icon-bar"></span>
−
</button>
+
                </button>
−
<a class="navbar-brand" href="index.html">NTU-Singapore</a>
+
                <a class="navbar-brand" href="index.html">NTU-Singapore</a>
−
</div>
+
            </div>
−
<!-- Top Menu Items -->
+
            <!-- Top Menu Items -->
−
<ul class="nav navbar-right top-nav">
+
            <ul class="nav navbar-right top-nav">
−
<li class="dropdown">
+
<!-- <li class="dropdown">
 +
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
 +
<ul id="demo" class="collapse">
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
</ul>
 +
                </li>  -->
 +
<li class="dropdown">
 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-home"></i> <span class="navbar-name"> Home</span> </a>
 
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-home"></i> <span class="navbar-name"> Home</span> </a>
 
</li>
 
</li>
 +
 +
 +
<!-- <li class="dropdown">
 +
<a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
 +
<ul id="demo" class="collapse">
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
<li>
 +
<a href="#">Dropdown Item</a>
 +
</li>
 +
</ul>
 +
</li> -->
 
 
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-globe"></i><span class="navbar-name"> Collaboration</span></a>
 +
</li>
 
 
 
<li class="dropdown">
 
<li class="dropdown">
Line 64: Line 91:
 
<a href="#"><i class="fa fa-fw fa-2x fa-book"></i><span style="left: 9px;" class="navbar-name"> Description</span> </a>
 
<a href="#"><i class="fa fa-fw fa-2x fa-book"></i><span style="left: 9px;" class="navbar-name"> Description</span> </a>
 
</li>
 
</li>
−
+
 
 
<li>
 
<li>
 
<a href="#"><i class="fa fa-2x fa-paint-brush"></i><span style="left: 16px;" class="navbar-name"> Design</span> </a>
 
<a href="#"><i class="fa fa-2x fa-paint-brush"></i><span style="left: 16px;" class="navbar-name"> Design</span> </a>
Line 118: Line 145:
 
</li>
 
</li>
 
 
−
<li class="dropdown">
 
−
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-2x fa-globe"></i><span class="navbar-name"> Collaboration</span></a>
 
−
</li>
 
 
 
 
<li class="dropdown">
 
<li class="dropdown">
Line 126: Line 150:
 
 
 
</li>
 
</li>
−
 
−
 
−
 
−
</ul>
 
−
</nav>
 
  
−
        <div id="page-wrapper">
 
  
−
             <div class="container-fluid">
+
 
 +
            </ul>
 +
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens
 +
            <div class="collapse navbar-collapse navbar-ex1-collapse">
 +
                <ul class="nav navbar-nav side-nav">
 +
                    <li>
 +
                        <a href="index.html"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="charts.html"><i class="fa fa-fw fa-bar-chart-o"></i> Charts</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="tables.html"><i class="fa fa-fw fa-table"></i> Tables</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="forms.html"><i class="fa fa-fw fa-edit"></i> Forms</a>
 +
                    </li>
 +
                    <li class="active">
 +
                        <a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> Bootstrap Elements</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a>
 +
                        <ul id="demo" class="collapse">
 +
                            <li>
 +
                                <a href="#">Dropdown Item</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Dropdown Item</a>
 +
                            </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li>
 +
                        <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a>
 +
                    </li>
 +
                </ul>
 +
            </div> -->
 +
            <!-- /.navbar-collapse -->
 +
        </nav>
 +
 
 +
        <div id="page-wrapper" >
 +
 
 +
             <div class="container-fluid" style="height:650px;">
  
 
                 <!-- Page Heading
 
                 <!-- Page Heading
Line 155: Line 220:
  
 
                 <!-- Main jumbotron for a primary marketing message or call to action -->
 
                 <!-- Main jumbotron for a primary marketing message or call to action -->
−
+
                <div class="jumbotron content-page" style="font-family: 'Just Me Again Down Here', cursive;">
−
<div>
+
<h1 style="font-size: 70px;"><span style="color: #0089A7; ">Interlab</span> Measurement</h1>
−
<img class="cover-image" src="css/humanprac.jpg" alt="Mountain View">
+
<p style="font-family: 'Annie Use Your Telescope', cursive; font-size: 31px;">subtittle text</p>
 
</div>
 
</div>
  
−
 
+
<div class="separator" id="3dprint" style="border-bottom: 0px;">
−
                <div class="jumbotron content-page">
+
−
                    <h1>Interlab measurement</h1>
+
−
                    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+
−
+
−
<!--
+
−
                    <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a>
+
−
                    </p>  -->
+
−
+
−
<div class="content-overview">
+
−
+
−
<div class="circle-overview circle1">
+
−
</div>
+
−
<div class="circle-overview circle2">
+
−
</div>
+
−
<div class="circle-overview circle3">
+
−
</div>
+
−
+
−
</div>
+
−
+
−
                </div>
+
−
 
+
−
                <div class="page-header">
+
−
                    <h1>Wells</h1>
+
−
                </div>
+
−
                <div class="well">
+
−
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
−
                </div>
+
 
 
−
<div class="page-header">
+
</div>
−
<h1>Wells</h1>
+
−
</div>
+
<div class="page-header">
−
<div class="well-right">
+
<h1>Header</h1>
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
</div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
<div class="well">
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
−
</div>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
−
<div class="page-header">
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
−
<h1>Wells</h1>
+
</div>
−
</div>
+
−
<div class="well-left">
+
<div class="separator" id="separator-exhibition">
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
</div>
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+
<div id="exhibition" class="page-header">
−
</div>
+
<h1>Header</h1>
−
 
+
</div>
−
 
+
<div class="well">
−
            </div>
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
−
            <!-- /.container-fluid -->
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
−
 
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
 +
</div>
 +
<!-- /.container-fluid -->
 +
<div style="height: 150px; background-color: rgba(120,194,196,1);">
 +
 +
</div>
 
         </div>
 
         </div>
 
         <!-- /#page-wrapper -->
 
         <!-- /#page-wrapper -->

Revision as of 05:28, 5 October 2016

NTU-Singapore

Interlab Measurement

subtittle text

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.