Difference between revisions of "Template:CCA SanDiego"

 
(45 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
 +
<head>
 +
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 +
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
 +
<script src="https://static.igem.org/mediawiki/2015/4/47/Cca_sanDiego_bootstrap.txt"></script>
 +
<style>
 +
body{font-family:courier}
 +
</style>
 +
<script>
  
−
<!-- Start of CSS-->
 
−
<style type="text/css">
 
−
/*
 
−
* Skeleton V2.0.4
 
−
* Copyright 2014, Dave Gamache
 
−
* www.getskeleton.com
 
−
* Free to use under the MIT license.
 
−
* http://www.opensource.org/licenses/mit-license.php
 
−
* 12/29/2014
 
−
*/
 
  
−
 
+
$(document).ready(function(){
−
/* Table of contents
+
$(".firstHeading").remove();
−
––––––––––––––––––––––––––––––––––––––––––––––––––
+
// navigation click actions      
−
- Grid
+
−
- Base Styles
+
−
- Typography
+
−
- Links
+
−
- Buttons
+
−
- Forms
+
−
- Lists
+
−
- Code
+
−
- Tables
+
−
- Spacing
+
−
- Utilities
+
−
- Clearing
+
−
- Media Queries
+
−
*/
+
−
 
+
−
 
+
−
/* Grid
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
.container {
+
−
  position: relative;
+
−
  width: 100%;
+
−
  max-width: 960px;
+
−
  margin: 0 auto;
+
−
  padding: 0 20px;
+
−
  box-sizing: border-box; }
+
−
.column,
+
−
.columns {
+
−
  width: 100%;
+
−
  float: left;
+
−
  box-sizing: border-box; }
+
−
 
+
−
/* For devices larger than 400px */
+
−
@media (min-width: 400px) {
+
−
  .container {
+
−
     width: 85%;
+
−
    padding: 0; }
+
 
}
 
}
 +
);
  
−
/* For devices larger than 550px */
+
</script>
−
@media (min-width: 550px) {
+
<style>
−
  .container {
+
#content{
−
    width: 80%; }
+
width:100%
−
  .column,
+
−
  .columns {
+
−
    margin-left: 4%; }
+
−
  .column:first-child,
+
−
  .columns:first-child {
+
−
    margin-left: 0; }
+
−
 
+
−
  .one.column,
+
−
  .one.columns                    { width: 4.66666666667%; }
+
−
  .two.columns                    { width: 13.3333333333%; }
+
−
  .three.columns                  { width: 22%;            }
+
−
  .four.columns                  { width: 30.6666666667%; }
+
−
  .five.columns                  { width: 39.3333333333%; }
+
−
  .six.columns                    { width: 48%;            }
+
−
  .seven.columns                  { width: 56.6666666667%; }
+
−
  .eight.columns                  { width: 65.3333333333%; }
+
−
  .nine.columns                  { width: 74.0%;          }
+
−
  .ten.columns                    { width: 82.6666666667%; }
+
−
  .eleven.columns                { width: 91.3333333333%; }
+
−
  .twelve.columns                { width: 100%; margin-left: 0; }
+
−
 
+
−
  .one-third.column              { width: 30.6666666667%; }
+
−
  .two-thirds.column              { width: 65.3333333333%; }
+
−
 
+
−
  .one-half.column                { width: 48%; }
+
−
 
+
−
  /* Offsets */
+
−
  .offset-by-one.column,
+
−
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+
−
  .offset-by-two.column,
+
−
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+
−
  .offset-by-three.column,
+
−
  .offset-by-three.columns        { margin-left: 26%;            }
+
−
  .offset-by-four.column,
+
−
  .offset-by-four.columns        { margin-left: 34.6666666667%; }
+
−
  .offset-by-five.column,
+
−
  .offset-by-five.columns        { margin-left: 43.3333333333%; }
+
−
  .offset-by-six.column,
+
−
  .offset-by-six.columns          { margin-left: 52%;            }
+
−
  .offset-by-seven.column,
+
−
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+
−
  .offset-by-eight.column,
+
−
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+
−
  .offset-by-nine.column,
+
−
  .offset-by-nine.columns        { margin-left: 78.0%;          }
+
−
  .offset-by-ten.column,
+
−
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+
−
  .offset-by-eleven.column,
+
−
  .offset-by-eleven.columns      { margin-left: 95.3333333333%; }
+
−
 
+
−
  .offset-by-one-third.column,
+
−
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+
−
  .offset-by-two-thirds.column,
+
−
  .offset-by-two-thirds.columns  { margin-left: 69.3333333333%; }
+
−
 
+
−
  .offset-by-one-half.column,
+
−
  .offset-by-one-half.columns    { margin-left: 52%; }
+
−
 
+
 
}
 
}
−
 
+
#bodyContent{
−
 
+
width:100%
−
/* Base Styles
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
/* NOTE
+
−
html is set to 62.5% so that all the REM measurements throughout Skeleton
+
−
are based on 10px sizing. So basically 1.5rem = 15px :) */
+
−
html {
+
−
  font-size: 62.5%; }
+
−
body {
+
−
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+
−
  line-height: 1.6;
+
−
  font-weight: 400;
+
−
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
−
  color: #222; }
+
−
 
+
−
 
+
−
/* Typography
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
h1, h2, h3, h4, h5, h6 {
+
−
  margin-top: 0;
+
−
  margin-bottom: 2rem;
+
−
  font-weight: 300; }
+
−
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+
−
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+
−
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+
−
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+
−
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+
−
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
−
 
+
−
/* Larger than phablet */
+
−
@media (min-width: 550px) {
+
−
  h1 { font-size: 5.0rem; }
+
−
  h2 { font-size: 4.2rem; }
+
−
  h3 { font-size: 3.6rem; }
+
−
  h4 { font-size: 3.0rem; }
+
−
  h5 { font-size: 2.4rem; }
+
−
  h6 { font-size: 1.5rem; }
+
 
}
 
}
 +
</style>
 +
</head>
 +
<body>
 +
<div id ="mainContainer" class="container">
 +
    <div class="row">
 +
        <div class="twelve columns">
 +
            <nav class="navbar navbar-default navbar-fixed-top">
 +
                <div class="container">
 +
                    <div class="navbar-header">
 +
                        <a class="navbar-brand" href="https://2015.igem.org/Team:CCA_SanDiego">CCA San Diego iGEM</a>
 +
                    </div>
 +
                        <div>
 +
                        <ul class="nav navbar-nav ">       
 +
<li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2015.igem.org/Team:CCA_SanDiego/Project#introduction">Introduction</a></li>
 +
<li><a href="https://2015.igem.org/Team:CCA_SanDiego/Project#methods">Methods</a></li>
 +
<li><a href="https://2015.igem.org/Team:CCA_SanDiego/Project#results">Results</a></li>
 +
          </ul>
 +
        </li>
 +
                            <li><a href="https://2015.igem.org/Team:CCA_SanDiego/Team">Team</a></li>
 +
                            <li><a href="https://2015.igem.org/Team:CCA_SanDiego/Notebook">Notebook</a></li>
 +
                            <li><a href="https://2015.igem.org/Team:CCA_SanDiego/Attributions">Attributions</a></li>
 +
                            <li><a href="https://2015.igem.org/Team:CCA_SanDiego/HumanPractice">Human Practices</a></li>
 +
                        </ul>
 +
                    </div>
 +
                </div>
 +
            </nav>
 +
        </div>
 +
    </div>
 +
    <div class="row">
 +
        <!-- Start of content -->
 +
        <div id="contentContainer" class="twelve columns">
 +
        <!-- PUT YOUR CONTENT HERE -->
  
−
p {
+
        <!-- END OF CONTENT -->
−
  margin-top: 0; }
+
        </div>
−
 
+
    </div>
−
 
+
</div>
−
/* Links
+
</body>
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
a {
+
−
  color: #1EAEDB; }
+
−
a:hover {
+
−
  color: #0FA0CE; }
+
−
 
+
−
 
+
−
/* Buttons
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
.button,
+
−
button,
+
−
input[type="submit"],
+
−
input[type="reset"],
+
−
input[type="button"] {
+
−
  display: inline-block;
+
−
  height: 38px;
+
−
  padding: 0 30px;
+
−
  color: #555;
+
−
  text-align: center;
+
−
  font-size: 11px;
+
−
  font-weight: 600;
+
−
  line-height: 38px;
+
−
  letter-spacing: .1rem;
+
−
  text-transform: uppercase;
+
−
  text-decoration: none;
+
−
  white-space: nowrap;
+
−
  background-color: transparent;
+
−
  border-radius: 4px;
+
−
  border: 1px solid #bbb;
+
−
  cursor: pointer;
+
−
  box-sizing: border-box; }
+
−
.button:hover,
+
−
button:hover,
+
−
input[type="submit"]:hover,
+
−
input[type="reset"]:hover,
+
−
input[type="button"]:hover,
+
−
.button:focus,
+
−
button:focus,
+
−
input[type="submit"]:focus,
+
−
input[type="reset"]:focus,
+
−
input[type="button"]:focus {
+
−
  color: #333;
+
−
  border-color: #888;
+
−
  outline: 0; }
+
−
.button.button-primary,
+
−
button.button-primary,
+
−
input[type="submit"].button-primary,
+
−
input[type="reset"].button-primary,
+
−
input[type="button"].button-primary {
+
−
  color: #FFF;
+
−
  background-color: #33C3F0;
+
−
  border-color: #33C3F0; }
+
−
.button.button-primary:hover,
+
−
button.button-primary:hover,
+
−
input[type="submit"].button-primary:hover,
+
−
input[type="reset"].button-primary:hover,
+
−
input[type="button"].button-primary:hover,
+
−
.button.button-primary:focus,
+
−
button.button-primary:focus,
+
−
input[type="submit"].button-primary:focus,
+
−
input[type="reset"].button-primary:focus,
+
−
input[type="button"].button-primary:focus {
+
−
  color: #FFF;
+
−
  background-color: #1EAEDB;
+
−
  border-color: #1EAEDB; }
+
−
 
+
−
 
+
−
/* Forms
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
input[type="email"],
+
−
input[type="number"],
+
−
input[type="search"],
+
−
input[type="text"],
+
−
input[type="tel"],
+
−
input[type="url"],
+
−
input[type="password"],
+
−
textarea,
+
−
select {
+
−
  height: 38px;
+
−
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+
−
  background-color: #fff;
+
−
  border: 1px solid #D1D1D1;
+
−
  border-radius: 4px;
+
−
  box-shadow: none;
+
−
  box-sizing: border-box; }
+
−
/* Removes awkward default styles on some inputs for iOS */
+
−
input[type="email"],
+
−
input[type="number"],
+
−
input[type="search"],
+
−
input[type="text"],
+
−
input[type="tel"],
+
−
input[type="url"],
+
−
input[type="password"],
+
−
textarea {
+
−
  -webkit-appearance: none;
+
−
    -moz-appearance: none;
+
−
          appearance: none; }
+
−
textarea {
+
−
  min-height: 65px;
+
−
  padding-top: 6px;
+
−
  padding-bottom: 6px; }
+
−
input[type="email"]:focus,
+
−
input[type="number"]:focus,
+
−
input[type="search"]:focus,
+
−
input[type="text"]:focus,
+
−
input[type="tel"]:focus,
+
−
input[type="url"]:focus,
+
−
input[type="password"]:focus,
+
−
textarea:focus,
+
−
select:focus {
+
−
  border: 1px solid #33C3F0;
+
−
  outline: 0; }
+
−
label,
+
−
legend {
+
−
  display: block;
+
−
  margin-bottom: .5rem;
+
−
  font-weight: 600; }
+
−
fieldset {
+
−
  padding: 0;
+
−
  border-width: 0; }
+
−
input[type="checkbox"],
+
−
input[type="radio"] {
+
−
  display: inline; }
+
−
label > .label-body {
+
−
  display: inline-block;
+
−
  margin-left: .5rem;
+
−
  font-weight: normal; }
+
−
 
+
−
 
+
−
/* Lists
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
ul {
+
−
  list-style: circle inside; }
+
−
ol {
+
−
  list-style: decimal inside; }
+
−
ol, ul {
+
−
  padding-left: 0;
+
−
  margin-top: 0; }
+
−
ul ul,
+
−
ul ol,
+
−
ol ol,
+
−
ol ul {
+
−
  margin: 1.5rem 0 1.5rem 3rem;
+
−
  font-size: 90%; }
+
−
li {
+
−
  margin-bottom: 1rem; }
+
−
 
+
−
 
+
−
/* Code
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
code {
+
−
  padding: .2rem .5rem;
+
−
  margin: 0 .2rem;
+
−
  font-size: 90%;
+
−
  white-space: nowrap;
+
−
  background: #F1F1F1;
+
−
  border: 1px solid #E1E1E1;
+
−
  border-radius: 4px; }
+
−
pre > code {
+
−
  display: block;
+
−
  padding: 1rem 1.5rem;
+
−
  white-space: pre; }
+
−
 
+
−
 
+
−
/* Tables
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
th,
+
−
td {
+
−
  padding: 12px 15px;
+
−
  text-align: left;
+
−
  border-bottom: 1px solid #E1E1E1; }
+
−
th:first-child,
+
−
td:first-child {
+
−
  padding-left: 0; }
+
−
th:last-child,
+
−
td:last-child {
+
−
  padding-right: 0; }
+
−
 
+
−
 
+
−
/* Spacing
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
button,
+
−
.button {
+
−
  margin-bottom: 1rem; }
+
−
input,
+
−
textarea,
+
−
select,
+
−
fieldset {
+
−
  margin-bottom: 1.5rem; }
+
−
pre,
+
−
blockquote,
+
−
dl,
+
−
figure,
+
−
table,
+
−
p,
+
−
ul,
+
−
ol,
+
−
form {
+
−
  margin-bottom: 2.5rem; }
+
−
 
+
−
 
+
−
/* Utilities
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
.u-full-width {
+
−
  width: 100%;
+
−
  box-sizing: border-box; }
+
−
.u-max-full-width {
+
−
  max-width: 100%;
+
−
  box-sizing: border-box; }
+
−
.u-pull-right {
+
−
  float: right; }
+
−
.u-pull-left {
+
−
  float: left; }
+
−
 
+
−
 
+
−
/* Misc
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
hr {
+
−
  margin-top: 3rem;
+
−
  margin-bottom: 3.5rem;
+
−
  border-width: 0;
+
−
  border-top: 1px solid #E1E1E1; }
+
−
 
+
−
 
+
−
/* Clearing
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
 
+
−
/* Self Clearing Goodness */
+
−
.container:after,
+
−
.row:after,
+
−
.u-cf {
+
−
  content: "";
+
−
  display: table;
+
−
  clear: both; }
+
−
 
+
−
 
+
−
/* Media Queries
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
/*
+
−
Note: The best way to structure the use of media queries is to create the queries
+
−
near the relevant code. For example, if you wanted to change the styles for buttons
+
−
on small devices, paste the mobile query code up in the buttons section and style it
+
−
there.
+
−
*/
+
−
 
+
−
 
+
−
/* Larger than mobile */
+
−
@media (min-width: 400px) {}
+
−
 
+
−
/* Larger than phablet (also point when grid becomes active) */
+
−
@media (min-width: 550px) {}
+
−
 
+
−
/* Larger than tablet */
+
−
@media (min-width: 750px) {}
+
−
 
+
−
/* Larger than desktop */
+
−
@media (min-width: 1000px) {}
+
−
 
+
−
/* Larger than Desktop HD */
+
−
@media (min-width: 1200px) {}
+
−
</style>
+
−
<!-- End of CSS -->
+
−
 
+
−
 
+
−
<!-- Start of the template html elements. -->
+
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
−
 
+
−
 
+
−
<div id="bannerContainer">
+
−
<br><br>
+
−
<h2> </h2>
+
−
+
−
<p>You can make the image 980px  by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_CCA_SanDiego_banner.jpg</i>" </p>
+
−
</div>
+
−
 
+
−
<!-- Start of menu -->
+
−
<div id="menuContainer">
+
−
 
+
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
−
<ul>
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego"><li>HOME</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Team"><li>TEAM</li></a>
+
−
 
+
−
<a href="#"><li>PROJECT
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Notebook"><li>NOTEBOOK</li></a>
+
−
     
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Attributions"><li>ATTRIBUTIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Collaborations"><li>COLLABORATIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Practices"><li>HUMAN PRACTICES</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:CCA_SanDiego/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
−
 
+
−
</ul>
+
−
</div>
+
−
<!-- End of menu  -->
+
−
 
+
−
<!-- Start of content -->
+
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
 
</html>
 
</html>

Latest revision as of 23:34, 17 September 2015