ProtoCat

From 2014.igem.org

(Difference between revisions)
Line 103: Line 103:
[[ProtoCat]]
[[ProtoCat]]
-
/*
+
<!DOCTYPE html>
-
Theme Name: 1stwebdesigner HTML5/CSS3 Layout
+
<html lang="en">
-
Date: March 2013
+
<head>
-
Description: Basic HTML5/CSS3 layout built on a responsive framework
+
<title>ProtoCat - Protocol Catalogue and Calculator</title>
-
Version: 1.0
+
<meta charset="utf-8" />
-
Author: Christian Vasile
+
-
Author URL: http://christianvasile.com
+
-
*/
+
-
 
+
-
/* ===========================
+
-
  ======= Body style ========
+
-
  =========================== */
+
-
 
+
-
body {
+
-
background-image: url('img/bg.png');
+
-
color: black;
+
-
font-size: 87.5%; /* Base font size: 14px */
+
-
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+
-
line-height: 1.429;
+
-
margin: 0;
+
-
padding: 0;
+
-
text-align: left;
+
-
}
+
-
+
-
.body {
+
-
clear: both;
+
-
margin: 0 auto;
+
-
width: 70%;
+
-
}
+
-
/* ===========================
+
<link rel="stylesheet" href="style.css" type="text/css" />
-
  ========= Headings ========
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
  =========================== */
+
-
h2 {font-size: 1.571em} /* 22px */
+
-
h3 {font-size: 1.429em} /* 20px */
+
-
h4 {font-size: 1.286em} /* 18px */
+
-
h5 {font-size: 1.143em} /* 16px */
+
-
h6 {font-size: 1em} /* 14px */
+
-
h2, h3, h4, h5, h6 {
+
</head>
-
font-weight: 400;
+
-
line-height: 1.1;
+
-
margin-bottom: .8em;
+
-
color: black;
+
-
}
+
-
/* ===========================
+
<body class="body">
-
  ======= Anchor style ======
+
-
  =========================== */
+
-
a {
+
-
outline: 0;
+
-
}
+
-
 
+
-
 
+
-
a:link, a:visited {
+
-
color: black;
+
-
padding: 0 1px;
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
a:hover, a:active {
+
-
background-color: #B9D3E3;
+
-
color: #fff;
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
/* ===========================
+
-
  ===== Main Navigation =====
+
-
  =========================== */
+
-
 
+
-
.mainHeader h1 {
+
-
font-size: 400%;
+
-
text-align: center;
+
-
float: none;
+
-
margin: 3% 0 3% 0;
+
-
color: #4682B4;
+
-
}
+
-
 
+
-
.mainHeader nav {
+
-
background: #4682B4;
+
-
font-size: 1.143em;
+
-
height: 40px;
+
-
line-height: 30px;
+
-
margin: 0 auto 30px auto;
+
-
text-align: center;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
.mainHeader nav ul {
+
<header class="mainHeader">
-
list-style: none;
+
-
margin: 0 auto;
+
-
}
+
-
.mainHeader nav ul li {
+
<h1> ProtoCat </h1>
-
float: left;
+
<nav><ul>
-
display: inline;
+
<li class="active"><a href="#">Home</a></li>
-
}
+
<li><a href="#">About</a></li>
 +
<li><a href="#">My Protocols</a></li>
 +
<li><a href="#">Catalog</a></li>
 +
</ul></nav>
 +
</header>
 +
 +
<div class="mainContent">
 +
<div class="content">
 +
<article class="topcontent">
 +
<header>
 +
<h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Home</a></h2>
 +
</header>
 +
<content>
 +
<p>Welcome to ProtoDB, the free online catalogue of laboratory protocols. With over [number] protocols and a built-in calculator, we are simplifying laboratory procedures one protocol at a time.</p> </content>
 +
 +
</article>
 +
</div>
 +
-
.mainHeader nav a:link, .mainHeader nav a:visited {
+
<aside class="top-sidebar">
-
text-transform: uppercase;
+
<article>
-
color: #FFFFFF;
+
<h2>Top Rated</h2>
-
display: inline-block;
+
-
height: 30px;
+
          <ol>
-
padding: 5px 23px;
+
              <li><a href="#">Pro1</a></li>
-
text-decoration: none;
+
              <li><a href="#">Pro2</a></li>                <li><a href="#">Pro3</a></li>
-
}
+
            </ol>
-
.mainHeader nav a:hover, .mainHeader nav a:active,
+
-
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
+
-
background: #B9D3E3;
+
-
color: #FFFFFF;
+
-
text-shadow: none !important;
+
-
}
+
-
+
-
.mainHeader nav li a {
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
/* ===========================
+
</article>
-
  ======= Content Area ======
+
</aside>
-
  =========================== */
+
-
.mainContent {
+
<img src="img/blue_test_tubes.jpg">
-
overflow: hidden;
+
-
line-height: 25px;
+
<aside class="middle-sidebar">
-
border-radius: 5px;
+
<article>
-
-moz-border-radius: 5px;
+
<h2>Top Favorited</h2>
-
-webkit-border-radius: 5px;
+
<ol>
-
float: left;
+
              <li><a href="#">Pro1</a></li>
-
}
+
              <li><a href="#">Pro2</a></li>                <li><a href="#">Pro3</a></li>
 +
            </ol>
-
.mainContent img {
+
    </article>
-
border: 0px;
+
</aside>
-
text-decoration: none;
+
-
float: left;
+
-
width: 68%;
+
-
height: auto;
+
-
margin: 0 0 1% 0;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
.topcontent {
+
<aside class="bottom-sidebar">
-
background-color: #FFF;
+
<article>
-
border-radius: 5px;
+
<h2>Recent Uploads</h2>
-
-moz-border-radius: 5px;
+
<ol>
-
-webkit-border-radius: 5px;
+
              <li><a href="#">Pro1</a></li>
-
padding: 3% 5%;
+
              <li><a href="#">Pro2</a></li>                <li><a href="#">Pro3</a></li>
-
margin-bottom: 3%;
+
            </ol>
-
float: left;
+
-
}
+
-
.content {
+
    </article>
-
width: 68%;
+
</aside>
-
float: left;
+
</div>
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
 
+
-
/* ===========================
+
-
  ======== Sidebar ==========
+
-
  =========================== */
+
-
 
+
-
.top-sidebar {
+
-
width: 22%;
+
-
float: left;
+
-
margin-left: 2%;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
padding: 2% 3%;
+
-
margin-bottom: 2%;
+
-
}
+
-
 
+
-
.middle-sidebar {
+
-
width: 22%;
+
-
float: left;
+
-
margin-left: 2%;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
padding: 2% 3%;
+
-
margin-bottom: 2%;
+
-
}
+
-
 
+
-
.bottom-sidebar {
+
-
width: 22%;
+
-
float: left;
+
-
margin-left: 2%;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
padding: 2% 3%;
+
-
}
+
-
 
+
-
/* ===========================
+
-
  ========= Footer ==========
+
-
  =========================== */
+
-
 
+
-
.mainFooter {
+
-
width: 100%;
+
-
float: left;
+
-
margin-top: 2%;
+
-
margin-bottom: 2%;
+
-
padding-left: 0;
+
-
background-color: #4682B4;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
color: #FFF;
+
-
}
+
-
 
+
-
.mainFooter p {
+
-
width: 91%;
+
-
margin: 2% auto;
+
-
}
+
-
 
+
-
/* ===========================
+
-
  ====== Media Queries ======
+
-
  =========================== */
+
-
 
+
-
@media only screen and (min-width : 150px) and (max-width : 780px)
+
-
{
+
-
.body {
+
-
clear: both;
+
-
margin: 0 auto;
+
-
width: 90%;
+
-
font-size: 90%;
+
-
}
+
-
.mainHeader nav {
+
<footer class="mainFooter">
-
background: #666;
+
<p>Copyright &copy; 2013 <a href="http://1stwebdesigner.com">1stwebdesigner</a></p>
-
font-size: 1.143em;
+
<p> Team info! </p>
-
height: 160px;
+
</footer>
-
line-height: 30px;
+
-
margin-bottom: 0;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
+
-
.mainHeader nav ul {
+
-
list-style: none;
+
-
margin: 0 auto;
+
-
padding-left: 0;
+
-
}
+
-
+
-
.mainHeader nav li {
+
-
margin-left: 0 auto;
+
-
width: 100%;
+
-
}
+
-
+
-
.mainHeader nav a:link, .mainHeader nav a:visited {
+
-
color: #FFF;
+
-
display: block;
+
-
height: 30px;
+
-
padding: 5px 0;
+
-
text-decoration: none;
+
-
}
+
-
+
-
.mainHeader nav a:active,
+
-
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
+
-
background: #CF5C3F;
+
-
color: #fff;
+
-
text-shadow: none !important;
+
-
}
+
-
+
-
.mainHeader nav li a {
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
+
-
.mainHeader img {
+
-
width: 68%;
+
-
height: auto;
+
-
}
+
-
+
-
.mainContent {
+
-
overflow: hidden;
+
-
line-height: 25px;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
margin-top: 4%;
+
-
margin-bottom: 2%;
+
-
}
+
-
+
-
.topcontent {
+
-
background-color: #FFF;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
padding: 2% 5%;
+
-
margin-bottom: 4%;
+
-
}
+
-
+
-
.content {
+
-
width: 100%;
+
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
.top-sidebar {
+
</body>
-
width: 86%;
+
</html>
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
margin-top: 4%;
+
-
margin-left: 0;
+
-
padding: 0 7%;
+
-
margin-bottom: 0;
+
-
}
+
-
+
-
.top-sidebar p {
+
-
width: 90%;
+
-
}
+
-
 
+
-
.middle-sidebar {
+
-
width: 86%;
+
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
margin-top: 4%;
+
-
margin-left: 0;
+
-
padding: 0 7%;
+
-
margin-bottom: 0;
+
-
}
+
-
+
-
.middle-sidebar p {
+
-
width: 90%;
+
-
}
+
-
+
-
.bottom-sidebar {
+
-
width: 86%;
+
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
margin-top: 4%;
+
-
margin-left: 0%;
+
-
padding: 0 7%;
+
-
margin-bottom: 1%;
+
-
}
+
-
+
-
.bottom-sidebar p {
+
-
width: 90%;
+
-
}
+
-
+
-
.mainFooter {
+
-
width: 100%;
+
-
float: left;
+
-
margin: 2% 0;
+
-
padding-left: 0;
+
-
background-color: #B9D3E3;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
color: #FFF;
+
-
}
+
-
+
-
.mainFooter p {
+
-
width: 86%;
+
-
margin: 2% auto;
+
-
}
+
-
}
+

Revision as of 23:26, 19 September 2014



WELCOME TO iGEM 2014!

Your team has been approved and you are ready to start the iGEM season!
On this page you can document your project, introduce your team members, document your progress
and share your iGEM experience with the rest of the world!


Click here to edit this page!

Home Team Official Team Profile Project Parts Modeling Notebook Safety Attributions

Notebook

You should make use of the calendar feature on the wiki and start a lab notebook. This may be looked at by the judges to see how your work progressed throughout the summer. It is a very useful organizational tool as well.

ProtoCat

<!DOCTYPE html> ProtoCat - Protocol Catalogue and Calculator

ProtoCat

Home

Welcome to ProtoDB, the free online catalogue of laboratory protocols. With over [number] protocols and a built-in calculator, we are simplifying laboratory procedures one protocol at a time.

Retrieved from "http://2014.igem.org/ProtoCat"