Difference between revisions of "Template:East Chapel Hill"

 
(65 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<body>
+
<head>
−
<table width=100%>
+
<meta charset="utf-8">
−
<tr><td height="50" bgcolor=#ffffff></td><td class="no-padding" bgcolor=#ffffff height="32" width="960" align=center>
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  
−
</div><div class="dropdown">
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
−
   <a href="https://2018.igem.org/Team:East_Chapel_Hill"><button class="dropbtnProject dropbtn"><p><b>Project</b></p></button></a> <div class="dropdown-contentDescription dropdown-content">
+
 
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill</b></p></a>
+
<!-- icons -->
−
  </div>
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
  <div class="dropdown-contentDesign dropdown-content">
+
 
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Design"><p><b>Design</b></p></a>
+
<!--Fonts-->
−
  </div>
+
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
−
  <div class="dropdown-contentDemonstration dropdown-content">
+
 
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Demonstrate"><p><b>Demonstrate</b></p></a>
+
 
−
   </div>  
+
<!--W3 School Stylesheet -->
−
  <div class="dropdown-contentMeasurement dropdown-content">
+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Measurement"><p><b>Measurement</b></p></a>
+
 
 +
<!--Bootstrap-->
 +
<!-- Latest compiled and minified CSS -->
 +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 +
 
 +
<!-- Optional theme -->
 +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 +
 
 +
<!-- Latest compiled and minified JavaScript -->
 +
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 +
 
 +
<!--Mathjax-->
 +
<script type="text/javascript" async
 +
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
 +
</script>
 +
 
 +
<!--jquery-->
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
 
 +
<style>
 +
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
 +
/* Clear the default wiki settings */
 +
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:50px; margin-left:0px;}
 +
body {background-color:#ffffff; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
 
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
body {
 +
  background-color: #ffffff;
 +
  width: 100%;
 +
}
 +
 
 +
#bodyContent h1,
 +
#bodyContent h2,
 +
#bodyContent h3,
 +
#bodyContent h4,
 +
#bodyContent h5 {
 +
  margin-bottom: 0px;
 +
}
 +
</style>
 +
 
 +
<style>
 +
.description{
 +
color: #7C7D7D !important;
 +
font-family: 'Josefin Sans', sans-serif;
 +
padding-left: 10%;
 +
padding-right: 10%;
 +
margin: 0 auto;
 +
position: relative;
 +
max-width: 100em;
 +
}
 +
 
 +
</style>
 +
<style>
 +
img {
 +
    max-width: 100%;
 +
    height: auto;
 +
    width: auto\9; /* ie8 */
 +
}
 +
</style>
 +
<style>
 +
@charset "UTF-8";
 +
.navigation {
 +
  height: 61px;
 +
  margin-top:10px;
 +
  padding:0;
 +
  font-size: 80%;
 +
background:white;
 +
 
 +
}
 +
 
 +
.brand {
 +
  position: absolute;
 +
  float: left;
 +
  padding-left:2%;
 +
  line-height: 70px;
 +
  text-transform: uppercase;
 +
  font-size: 1.4em;
 +
}
 +
 
 +
.brand a,
 +
.brand a:visited{
 +
  color: #8B8D8E;
 +
  text-decoration: none;
 +
  font-family: 'Josefin Sans', sans-serif;
 +
  font-size: 100%;
 +
}
 +
 
 +
.nav-container {
 +
  max-width: 1500px;
 +
  margin: 0 auto;
 +
}
 +
 
 +
nav {
 +
  float: right;
 +
  background: none;
 +
}
 +
 
 +
/* spacing between box in small window */
 +
nav ul {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  background: #FFFFFF;
 +
 
 +
}
 +
nav ul li {
 +
  float: left;
 +
  position: relative;
 +
 
 +
}
 +
 
 +
/* text inside navbar before */
 +
nav ul li a,
 +
nav ul li a:visited {
 +
  display: block;
 +
  height: 56px;
 +
  padding: 0 20px;
 +
  background: #FFFFFF;
 +
  line-height: 60px;
 +
  color: #8B8D8E;
 +
  text-decoration: none;
 +
  font-family: 'Josefin Sans', sans-serif;
 +
  font-size: 120%;
 +
}
 +
nav ul li a:hover,
 +
nav ul li a:visited:hover {
 +
  background: #B3D8F5;
 +
  color: #FFFFFF;
 +
  text-decoration: none;
 +
}
 +
nav ul li a:not(:only-child):after,
 +
nav ul li a:visited:not(:only-child):after {
 +
  padding-left: 4px;
 +
  content: '▾';
 +
  text-decoration: none;
 +
}
 +
 
 +
nav ul li ul {
 +
  height: 5px;
 +
}
 +
 
 +
 
 +
nav ul li ul li {
 +
  min-width: 150px;
 +
  height: 40px;
 +
  width: 100%;
 +
  //text-align: center;
 +
 
 +
 
 +
  /* make dropdown stick to top */
 +
  top: -13px;
 +
}
 +
nav ul li ul li a {
 +
  padding: 15px;
 +
  line-height: 50%;
 +
  margin: 0px;
 +
  text-decoration: none;
 +
 
 +
}
 +
 
 +
.nav-dropdown {
 +
  position: absolute;
 +
  display: none;
 +
  left: -23px;
 +
  top: 65px;
 +
  z-index: 1;
 +
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
 +
  height: 100%;
 +
}
 +
 
 +
/* Mobile navigation */
 +
.nav-mobile {
 +
  float:right;
 +
  display: none;
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  height: 20px;
 +
  width: 70px;
 +
  background: #FFFFFF;
 +
 
 +
}
 +
 
 +
@media only screen and (max-width: 950px) {
 +
  .nav-mobile {
 +
    display: block;
 +
  }
 +
 
 +
  nav {
 +
    width: 100%;
 +
    padding: 0 0 0;
 +
  }
 +
 
 +
  /* background of mobile dropdown */
 +
  nav ul {
 +
    display: none;
 +
 
 +
    /* width of dropdown */
 +
    position: fixed;
 +
    width: 180px;
 +
    height: auto;
 +
   
 +
    top: 65px;
 +
    right: 0px;
 +
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
 +
 
 +
  }
 +
  nav ul li {
 +
    float: none;
 +
    text-align: center;
 +
  }
 +
  nav ul li a {
 +
    padding: 15px;
 +
    line-height: 20px;
 +
   
 +
  }
 +
  nav ul li ul{
 +
    float: right;
 +
 
 +
  }
 +
 
 +
  /* second toggle dropdown */
 +
  .nav-dropdown {
 +
  position:absolute;
 +
 
 +
  top: 9px;
 +
  left: -212px;
 +
  width: 190px;
 +
  height: auto;
 +
 
 +
  }
 +
 
 +
 
 +
  .brand{
 +
    padding-left: 15px;
 +
    font-size: 120%;
 +
  }
 +
}
 +
 
 +
 
 +
/* background of toggle (mobile) */
 +
#nav-toggle {
 +
  position: absolute;
 +
  left: 5px;
 +
  top: 22px;
 +
  cursor: pointer;
 +
  padding: 10px 35px 16px 0px;
 +
  background: #FFFFFF;
 +
}
 +
 
 +
/* toggle button (mobile) */
 +
#nav-toggle span,
 +
#nav-toggle span:before,
 +
#nav-toggle span:after {
 +
  cursor: pointer;
 +
  border-radius: 1px;
 +
  height: 5px;
 +
  width: 35px;
 +
  background: #8B8D8E;
 +
  position: absolute;
 +
  display: block;
 +
  content: '';
 +
  transition: all 300ms ease-in-out;
 +
}
 +
#nav-toggle span:before {
 +
  top: -10px;
 +
}
 +
#nav-toggle span:after {
 +
  bottom: -10px;
 +
}
 +
#nav-toggle.active span {
 +
  background-color: transparent;
 +
}
 +
#nav-toggle.active span:before, #nav-toggle.active span:after {
 +
  top: 0;
 +
}
 +
#nav-toggle.active span:before {
 +
  transform: rotate(45deg);
 +
}
 +
#nav-toggle.active span:after {
 +
  transform: rotate(-45deg);
 +
}
 +
 
 +
h1 {
 +
text-align: center;
 +
font-family: 'Josefin Sans', sans-serif !important;
 +
color: #7C7D7D;
 +
}
 +
 
 +
.panel-body {
 +
font-family: 'Arial';
 +
font-size: small;
 +
}
 +
 
 +
ul {
 +
    list-style-type: disc;
 +
}
 +
 
 +
.centerImage
 +
{
 +
text-align:center;
 +
display:block;
 +
margin: auto;
 +
width: 80%;
 +
}
 +
 
 +
</style>
 +
<style>
 +
.gallery {
 +
    margin: 5px;
 +
    border: 1px solid #ccc;
 +
    float: left;
 +
    width: 180px;
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
}
 +
 
 +
.gallery:hover {
 +
    border: 1px solid #777;
 +
}
 +
 
 +
.gallery img {
 +
    width: 100%;
 +
    height: auto;
 +
 
 +
}
 +
 
 +
.imagegallery{
 +
overflow: hidden
 +
}
 +
 
 +
.desc {
 +
    padding: 15px;
 +
    text-align: center;
 +
}
 +
 
 +
#HomeImage1{
 +
  max-width: 100%;
 +
  margin-bottom: 0px;
 +
        margin-left: 0px;
 +
  z-index: 0;
 +
 
 +
#HomeImage{
 +
  max-width: 100%;
 +
  margin-bottom: 0px;
 +
        margin-left: 0px;
 +
  z-index: 0;
 +
position: fixed;
 +
    bottom: 0;
 +
}
 +
 
 +
</style>
 +
<style>
 +
 
 +
div.polaroid {
 +
  width: 80%;
 +
  background-color: #d7dfed;
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
  margin-bottom: 25px;
 +
  display: inline-block;
 +
}
 +
 
 +
div.pocontainer {
 +
  text-align: center;
 +
  padding: 10px 20px;
 +
}
 +
</style>
 +
 
 +
<section class="navigation navbar-fixed-top">
 +
   <div class="nav-container">
 +
    <div class="brand">
 +
      <a rel="nofollow" rel="noreferrer" href="https://2018.igem.org/Team:East_Chapel_Hill">East Chapel Hill</a>
 +
    </div>
 +
    <nav>
 +
      <div class="nav-mobile"><a rel="nofollow" rel="noreferrer"id="nav-toggle" href="#!"><span></span></a></div>
 +
      <ul class="nav-list">
 +
 
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Team</a>
 +
          <ul class="nav-dropdown">
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Team">Team</a></li>
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Collaborations">Collaborations</a></li>
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Attributions">Attributions</a></li>
 +
       
 +
          </ul>
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Project</a>
 +
          <ul class="nav-dropdown">
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Description">Description</a></li>
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Results">Results</a></li>
 +
      <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Measurement">Measurement</a></li>
 +
          </ul>
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Lab</a>
 +
          <ul class="nav-dropdown">
 +
<li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Experiments">Experiments</a></li>
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Safety">Safety</a></li>
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Notebook">Notebook</a></li>
 +
    
 +
          </ul>
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="https://2018.igem.org/Team:East_Chapel_Hill/Parts">Parts</a>
 +
        <!-- <ul class="nav-dropdown">
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Parts">Parts</a></li>
 +
          </ul>-->
 +
        </li>
 +
        <li>
 +
          <a rel="nofollow" rel="noreferrer"href="#!">Human Practices</a>
 +
          <ul class="nav-dropdown">
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Human_Practices">Human Practices</a></li>
 +
   
 +
            <li><a href="https://2018.igem.org/Team:East_Chapel_Hill/Public_Engagement">Public Engagement</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
 
 +
      </ul>
 +
    </nav>
 
   </div>
 
   </div>
−
  <div class="dropdown-contentFinalResults dropdown-content">
+
</section>
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Results"><p><b>Final Results</b></p></a>
+
−
  </div>
+
−
</div><div class="dropdown" valign=center>
+
−
<a href="https://2018.igem.org/Team:East_Chapel_Hill/Notebook"><button class="dropbtnWetlab dropbtn" valign=center><p><b>Lab Work</b></p></button></a>
+
−
  <div class="dropdown-contentSafety dropdown-content">
+
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Safety"><p><b>Safety</b></p></a>
+
−
  </div>
+
−
  <div class="dropdown-contentParts dropdown-content">
+
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Parts"><p><b>Parts</b></p></a>
+
−
  </div>
+
−
  <div class="dropdown-contentImprove dropdown-content">
+
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Improve"><p><b>Improved Part</b></p></a>
+
−
  </div>
+
−
  <div class="dropdown-contentCollection dropdown-content">
+
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Part_Collection"><p><b>Part Collection</b></p></a>
+
−
  </div>
+
−
</div><div class="dropdown">
+
  
  
−
</div><div class="dropdown">
+
<script>
−
  <a href="https://2018.igem.org/Team:East_Chapel_Hill/Human_Practices"><button class="dropbtnHP dropbtn"><p><b>Human Practices</b></p></button></a>
+
(function($) { // Begin jQuery
−
  <div class="dropdown-contentHPSilver dropdown-content">
+
  $(function() { // DOM ready
−
     <a href="https://2018.igem.org/Team:East_Chapel_Hill/Human_Practices"><p><b>Overview</b></p></a>
+
    // If a link has a dropdown, add sub menu toggle.
−
  </div>
+
     $('nav ul li a:not(:only-child)').click(function(e) {
−
  <div class="dropdown-contentPublicEngagement dropdown-content">
+
      $(this).siblings('.nav-dropdown').toggle();
−
    <a href="https://2018.igem.org/Team:East_Chapel_Hill/Public_Engagement"><p><b>Engagement</b></p></a>
+
      // Close one dropdown when selecting another
−
  </div>
+
      $('.nav-dropdown').not($(this).siblings()).hide();
−
  <div class="dropdown-contentCollaborations dropdown-content">
+
      e.stopPropagation();
−
     <a href="https://2018.igem.org/Team:East_Chapel_Hill/Collaborations"><p><b>Collaborations</b></p></a>
+
    });
−
  </div>
+
     // Clicking away from dropdown will remove the dropdown class
−
</div><div class="dropdown">
+
    $('html').click(function() {
−
  <a href="https://2018.igem.org/Team:East_Chapel_Hill/Team"><button class="dropbtnTeam dropbtn"><p><b>Team</b></p></button></a>
+
      $('.nav-dropdown').hide();
−
  <div class="dropdown-contentTeamMembers dropdown-content">
+
    });
−
     <a href="https://2018.igem.org/Team:East_Chapel_Hill/Team"><p><b>Team members</b></p></a>
+
     // Toggle open and close nav styles on click
−
  </div> 
+
    $('#nav-toggle').click(function() {
−
  <div class="dropdown-contentAttributions dropdown-content">
+
      $('nav ul').slideToggle();
−
     <a href="https://2018.igem.org/Team:East_Chapel_Hill/Attributions"><p><b>Attributions</b></p></a>
+
    });
−
   </div>
+
     // Hamburger to X toggle
−
+
    $('#nav-toggle').on('click', function() {
−
</div>
+
      this.classList.toggle('active');
−
</td><td height="32" bgcolor=#ffffff></td></tr>
+
    });
−
</table>
+
   }); // end DOM ready
−
</body>
+
})(jQuery); // end jQuery
 +
</script>
 +
</head>
 
</html>
 
</html>

Latest revision as of 23:51, 16 October 2018

East Chapel Hill