Difference between revisions of "Template:Amsterdam"

 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
−
<head>
 
−
<title>iGEM amsterdam 2017</title>
 
−
    <meta charset="utf-8">
 
−
    <link rel="stylesheet"  href="style.css">
 
−
    <meta name="viewport" content="width=device-width , initial-scale=1.0">
 
−
</head>
 
  
−
<body class="body">
+
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<title>mohammad</title>
 +
<link rel="stylesheet" type="text/css" href="style.css">
 +
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=open+Sans">
 +
</head>
  
  
−
<header class="mainheader">
+
<body>
−
<img src="https://static.igem.org/mediawiki/2017/1/13/T_TeamAmsterdam_team.jpg">
+
<nav class="menu">
 +
 +
<ul id="rmenu">
 +
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam"> HOME</a>
 +
 +
</li>
 +
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/team">TEAM</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
 +
<li><a href="https://2017.igem.org/Team:Amsterdam/team" class="sub-item">The Team</a></li>
 +
<li><a href="#" class="sub-item">Team Attribution</a></li>
 +
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Sponsors">Sponsors</a> </li>
 +
<li><a href="#" class="sub-item">Collaborations</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Project">PROJECT</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
 +
<li><a href="https://2017.igem.org/Team:Amsterdam/Project" class="sub-item">Home</a></li>
 +
<li><a href="#" class="sub-item">Modeling</a></li>
 +
<li><a href="#" class="sub-item">Glyoxylate Shunt</a></li>
 +
<li><a href="#" class="sub-item">Biosensor</a></li>
 +
<li><a href="#" class="sub-item">Transporter</a>
 +
<ul id="subx-menu">
 +
<li><a href="#" class="subx-item">Bioinformatics</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li> <a class="menu-item" href="#">PRACTICES</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
 +
<li><a href="https://2017.igem.org/Team:Amsterdam/News" class="sub-item">Carbon Accounting</a></li>
 +
<li> <a class="sub-item" href="https://2017.igem.org/Team:Amsterdam/Outreach">Outreach</a> </li>
 +
<li> <a class="sub-item" href="#">Articles</a> </li>
 +
<li> <a class="sub-item" href="#">Entrepreneurship</a> </li>
 +
<li> <a class="sub-item" href="#">Safety</a> </li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Laboratory">LAB</a>
 +
<div class="sub-content">
 +
<div class="sub-drop">
 +
<ul>
 +
<li><a href="#" class="sub-item">Parts</a></li>
 +
<li><a href="https://2017.igem.org/Team:Amsterdam/InterLab" class="sub-item">Interlab Study</a></li>
 +
<li><a href="#" class="sub-item">Labjournal</a></li>
 +
<li><a href="#" class="sub-item">Protocols</a></li>
 +
<li><a href="#" class="sub-item">Methods</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Achievements">ACHIEVEMENTS</a> </li>
 +
</ul>
 +
</nav>
 +
</body>
  
−
<nav><ul>
+
<!-- //////////////////////////////////////////// -->
−
<li> <a href="#"> HOME</a> </li>
+
−
<li> <a href="#">TEAM</a> </li>
+
−
<li> <a href="#">PROJECT</a> </li>
+
−
<li> <a href="#">PARTS</a> </li>
+
−
<li> <a href="#">SAFETY</a> </li>
+
−
<li> <a href="#">HUMAN PRACTCE</a> </li>
+
−
<li> <a href="#">AWARDS</a> </li>
+
−
<li> <a href="#">JUDGING FORM</a> </li>
+
−
</ul></nav>
+
−
</header>
+
−
<!-- //////////////////////////////////////////// -->
+
−
<div class="mainContant">
+
−
 
+
−
<section class="top-content">
+
−
<header>
+
−
<h2><a href="#"></a> Amsterdm iGEM</h2>
+
−
</header>
+
−
<footer>
+
−
<p class="post-info"> written by: Mohammad </p>
+
−
</footer>
+
−
<article>
+
−
<p>We live in a remarkable time. Ever since the 70’s, we’ve been able to
+
−
read, interpret and manipulate DNA ­ the programming language of life
+
−
itself. Now, backed by the transformation of biology into an information
+
−
science and Moore’s law, we have complete lists of the basic
+
−
components that constitute living systems, accessible from any web
+
−
browser in the world; we have genetic building blocks that are
+
−
standardized and cheap, allowing modular use with predictable
+
−
outcomes; and we have computer aided design, analysis and
+
−
modelling to speed up progress even more. Together with rapid gene
+
−
synthesis and sequencing technologies, engineering life has become
+
−
both more accessible and creative, resulting in a synthetic biology
+
−
revolution poised to transform industries.
+
−
In practice, synthetic biology often involves the design of genetic
+
−
circuits ­ sets of interacting genes that perform a desired task ­ and the
+
−
insertion of the designed circuit into living cells. As such, microbes can
+
−
be programmed to produce fuels, smell like banana’s, or sense and
+
−
break down toxic compounds. We are already remaking ourselves and
+
−
our world, redesigning, recoding, and reinventing nature itself
+
−
in the process</p>
+
−
</article>
+
−
</section>
+
−
</div>
+
−
<!-- /////////////////////////////////////////// -->
+
−
</body>
+
−
<footer class="mainfooter">
+
−
<a href="https://www.unitedconsumers.com/"><img src="https://static.igem.org/mediawiki/2017/d/d6/T_TeamAmsterdam_c.svg"></a>
+
−
<a href="https://www.dsm.com/corporate/home.html"><img src="https://static.igem.org/mediawiki/2017/d/d3/T_TeamAmsterdam_dsm.svg"></a>
+
−
<a href="http://www.uva.nl/home"><img src="https://static.igem.org/mediawiki/2017/7/70/T_TeamAmsterdam_uva.png"></a>
+
−
<a href="https://www.vu.nl/en/"><img src="https://static.igem.org/mediawiki/2017/3/3e/T_TeamAmsterdam_vu.png"></a>
+
−
+
−
</footer>
+
  
  
 
<style>
 
<style>
 +
* {
 +
margin: 0;
 +
padding: 0;
 +
font: 1em "open Sans", sans-serf;
 +
}
 +
body {
  
−
 
+
background-color: #eee;
−
 
+
−
 
+
−
.body {
+
−
background-image: url(https://static.igem.org/mediawiki/2017/c/c9/T_TeamAmsterdam_khlfea.jpg);
+
−
color: #000305;
+
−
font-size: 90%;
+
−
font-family: Arial, 'lucida Sans Unicode';
+
−
line-height: 1.5;
+
−
text-align: left;
+
 
}
 
}
  
−
/*................MAIN HEADER.....................*/
 
  
−
.mainheader img {
+
/*.....................................*/
−
width: 100%
+
−
}
+
  
−
.mainheader nav {
+
.menu {
−
background-color: #e74c3c;
+
position: fixed;
−
height: 40px;
+
left: 0;
−
border-radius: 5px;
+
top: 0;
−
-webkit- border-radius: 5px;
+
border-top: 0;
−
-moz-border-radius: 5px;
+
z-index: 100;
 +
box-shadow: -1px 15px 1px rgba(0,0,0,0.3);
 +
width: 100%;
 +
background-color: #333;
 +
color: white;
 +
height: 60px;
 
}
 
}
−
 
+
.myimg {
−
.mainheader nav ul {
+
width: 100px;
−
text-align: center;;
+
float: left;
−
list-style: none;
+
height: 30px;
−
margin: 0 auto;
+
padding: 15px 30px;
 
}
 
}
−
 
+
.menu #logo {
−
.mainheader nav ul li {
+
float: left;
−
display: inline;
+
height: 30px;
 +
padding: 15px 30px;
 +
font-size: 1.2em;
 +
line-height: 30px;
 +
display: none;
 
}
 
}
−
 
+
.menu > ul {
−
.mainheader a:link, .mainheader a:visited{
+
margin: 0;
−
color: white;
+
padding: 0;
−
padding: 10px 40px;
+
float: left;
−
display: inline-block;
+
list-style-type: none;
−
height: 20px;
+
 
}
 
}
  
−
.mainheader a:hover, .mainheader a:active{
+
.menu > ul > li {
−
color: white;
+
      overflow: hidden;
−
background-color: #f58233;
+
float: left;
−
text-shadow: none;
+
 
}
 
}
  
  
−
 
+
.menu-item {
−
 
+
display: inline-block;
−
/*................MAIN CONTENT.....................*/
+
padding: 15px 10px;
−
 
+
height: 30px;
−
.mainContent {
+
line-height: 30px;
−
width: 70%;
+
color: #fff;
−
float: left;
+
text-decoration: none;
 
}
 
}
  
−
.top-content {
+
.menu-item:hover {
−
background-color: #fff;
+
−
padding: 3%;
+
−
margin: 3%
+
−
border-radius: 5px;
+
−
-webkit- border-radius: 5px;
+
−
-moz-border-radius: 5px;
+
−
}
+
−
.post-info {
+
−
font-size: 90%;
+
−
color: #999;
+
−
font-style: italic;
+
−
margin-top: -3%;
+
−
}
+
  
−
.post-content {
+
background-color: #ff0055;
−
display: inline;
+
 
}
 
}
  
  
 +
/*................STYLING SUB.....................*/
  
 +
.sub-content {
 +
 +
position: absolute;
 +
top: 100%;
 +
overflow: hidden;
 +
background-color: #333;
 +
max-height: 0;
 +
}
  
−
/*------------- footer ----------*/
+
.sub-content a {
−
 
+
color: #fff;
−
.mainfooter img {
+
text-decoration: none;
−
width: 30%;
+
 
}
 
}
  
 +
.sub-drop {
  
−
 
+
padding: 0;
−
.mainfooter nav ul {
+
−
text-align: center;;
+
−
list-style: none;
+
−
margin: 0 auto;
+
 
}
 
}
  
−
.mainfooter nav ul li {
+
.sub-drop ul {
−
display: block;
+
width: 100%;
 +
padding: 0;
 +
margin: 0;
 +
list-style-type: none;
 
}
 
}
  
−
mainfooter a:link, .mainfooter a:visited{
+
.sub-drop ul li a {
−
color: white;
+
−
padding: 10px 40px;
+
 
display: inline-block;
 
display: inline-block;
−
height: 20px;
+
padding: 10px 20px;
 
}
 
}
  
−
mainfooter a:hover, .mainfooter a:active{
+
.sub-drop ul li:hover {
−
color: white;
+
−
background-color: #f58233;
+
background-color: #ff0055;
−
text-shadow: none;
+
 
}
 
}
  
 +
/*...............Sub-sub Menu.....................*/
  
 +
ul#subx-menu {
 +
position: absolute;
 +
top: 36px;
 +
left: 99px;
 +
background-color: #333;
 +
overflow: hidden;
 +
max-width: 0;
 +
}
  
 +
ul#subx-menu {
 +
width: 130px;
 +
}
  
 +
.sub-drop ul li:hover > ul#subx-menu {
 +
max-width: 400px;
 +
transition: max-width 0.5s ease-in;
 +
-webkit-transition: max-height 0.3s ease-in;
 +
-moz-transition: max-height 0.3s ease-in;
 +
}
  
−
/*--------------- CSS3 FOR MOBILE -----------*/
 
  
−
@media screen and (max-width: 480px;) {
+
/*...............Sub Drop.....................*/
−
.body {
+
−
width: 80%;
+
−
font-size: 70%;
+
−
}
+
  
−
/*..MAIN HEADER...*/
 
  
  
 +
.sub-drop > ul {
 +
overflow: hidden;
 +
visibility: hidden;
 +
opacity: 0;
 +
}
  
−
.mainheader nav {
+
.menu ul li:hover .sub-drop ul{
−
height: 160px;
+
visibility: visible;
−
}
+
opacity: 1;
 +
transition: visibility 0s, opacity 0.3s ease-in;
 +
}
  
−
.mainheader nav ul {
 
−
width: 100%;
 
−
}
 
  
−
.mainheader nav ul li {
+
/*................Controling.....................*/
−
display: inline;
+
−
}
+
  
−
.mainheader a:link, .mainheader a:visited{
 
−
display: block;
 
−
}
 
  
−
.mainheader a:hover, .mainheader a:active{
+
.menu-item:focus {
−
color: white;
+
−
background-color: #f58233;
+
−
text-shadow: none;
+
−
}
+
  
−
/*...MAIN CONTENT...*/
+
background-color: #ff0055;
 +
}
  
−
.mainContent {
+
.menu ul li:hover .sub-content {
−
width: 100%;
+
max-height: 400px;
−
}
+
overflow: visible;
 +
transition: max-height 0.3s ease-in;
 +
-webkit-transition: max-height 0.3s ease-in;
 +
-moz-transition: max-height 0.3s ease-in;
 
}
 
}
  
−
@media screen and (max-width: 680px;) {
+
#rmenu {
−
.body {
+
−
width: 90%;
+
float:right;
−
font-size: 95%;
+
}
−
}
+
  
−
/*..MAIN HEADER...*/
 
  
−
.mainheader nav {
+
#top_title {
−
font-size: 80%;
+
    display: none;
−
height: 160px;
+
−
}
+
 
}
 
}
  
 +
#content {
 +
    width: 100vw;
 +
    padding: 0px;
 +
    border: none;
 +
    color: black;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    background-color: #fff;
 +
    position: relative;
 +
}
  
 +
#globalWrapper {
 +
    font-size: inherit;
 +
    padding-bottom: 0;
 +
}
 +
#sideMenu {
 +
    display: none;
 +
}
  
 +
#top_menu_under {
 +
    height: 0px;
 +
}
  
−
</style>
 
  
  
−
 
+
</style>
−
 
+
−
 
+
−
 
+
−
 
+
−
</html>
+

Latest revision as of 10:28, 1 September 2017

mohammad