Difference between revisions of "Team:Groningen"

 
(154 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 
{{Groningen}}
 
{{Groningen}}
 
<html>
 
<html>
   
 
<style>
 
   
 
h1,h2,h3,h4,h5{
 
    color: #0C1948;
 
}
 
   
 
.header_img{
 
    background: url(bronze.png) no-repeat center center scroll;
 
    width: 100%;
 
    height: 100%;
 
    -webkit-background-size: cover;
 
    -moz-background-size: cover;
 
    -o-background-size: cover;
 
    background-size: cover;
 
    /*MUSHROOM: https://www.google.nl/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Ff%2Ffa%2FPanellusStipticusAug12_2009_Animated.gif&imgrefurl=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3APanellusStipticusAug12_2009_Animated.gif&docid=XwyN6eisgYu6wM&tbnid=EybkmibTyPoYlM%3A&vet=1&w=1350&h=920&bih=759&biw=1600&q=gif%20biology&ved=0ahUKEwiKxdf5oNHSAhXGCMAKHXwSAE4QMwg8KBYwFg&iact=mrc&uact=8#h=920&imgrc=EybkmibTyPoYlM:&vet=1&w=1350
 
        'http://stormandsky.com/gif/7.gif'
 
    CLOUD: http://stormandsky.com/gif/7.gif
 
  
    FLOWER:https://a.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2014/03/3028382-poster-g-slow-life.gif
+
<body>
  
    WATER: http://ipolitics.ca/wp-content/uploads/2016/06/Underwater-slowed-1.gif*/
 
}
 
   
 
.header {
 
    display: table;
 
    position: relative;
 
    width: 100%;
 
    height: 100%;
 
    margin-bottom: 0px;
 
    background: url('https://static.igem.org/mediawiki/2017/7/7d/Grun_wiki.jpeg') no-repeat center center scroll;
 
    -webkit-background-size: cover;
 
    -moz-background-size: cover;
 
    background-size: cover;
 
    -o-background-size: cover;
 
    z-index: 1;
 
}
 
   
 
#title_container{
 
    position: relative;
 
    padding-top: 200px;
 
    padding-bottom: 100px;
 
    height:375px;
 
}
 
   
 
#title{
 
    position: relative;
 
    text-align: center;
 
    vertical-align: middle;
 
    color: #0C1948;
 
    font-size: 150px;
 
}
 
  
#subtitle{
+
<div class="main-col">
    position: relative;
+
    margin-top: -100px;
+
    text-align: center;
+
    vertical-align: middle;
+
    color: white;
+
    font-size: 50px;
+
}
+
   
+
.main-col{
+
    /*background-image: url("../imgs/gradient.jpg");*/
+
/*    background-color: aqua;*/
+
    background-attachment: fixed;
+
    background-position: center;
+
    background-repeat: no-repeat;
+
    background-size: cover;
+
    margin-left:auto;
+
    margin-right:auto;
+
/*  margin-top: auto;
+
    margin-bottom: auto;*/
+
    text-align: center;
+
    padding-top: 5px;
+
/*  padding-bottom: 0px;*/
+
    height: auto !important;
+
    height:1000px;
+
    width: 1000px;
+
    overflow: auto;
+
    overflow-y: hidden; // hide vertical
+
    overflow-x: hidden; // hide horizontal
+
}
+
   
+
.fixed-bg {
+
    /* The background image */
+
    background-image: url("../imgs/projectBack.jpg");
+
/*    background-color: brown;*/
+
    /*height: auto !important;*/
+
    height: 1000px;
+
    /*width: auto !important;*/
+
    width: 100%;
+
    /* Set a specified height, or the minimum height for the background image */
+
    min-height: 750px;
+
    /* Set background image to fixed (don't scroll along with the page) */
+
    background-attachment: scroll;
+
    overflow-x: hidden;
+
    /* Center the background image */
+
    background-position: center;
+
    /* Set the background image to no repeat */
+
    background-repeat: no-repeat;
+
    /* Scale the background image to be as large as possible */
+
    background-size: cover;
+
    overflow-y: hidden; // hide vertical
+
    overflow-x: hidden; // hide horizontal
+
}
+
   
+
.content {
+
    margin-left:auto;
+
    margin-right:auto;
+
    margin-top: auto;
+
    margin-bottom: auto;
+
    text-align: center;
+
    padding-top: 1px;
+
    padding-bottom: 0px;
+
    height:100%;
+
}
+
   
+
.about{
+
    height: 150px;
+
}
+
  
.services{
+
<div>
    height: 350px;
+
<video src="https://static.igem.org/mediawiki/2017/3/36/IGEM_Groningen_2017_-_full_version_-720p-.mp4#t=1" controls preload="metadata" style="width:850px; height:auto; margin-left:7%"></video>
}
+
  
.video{
+
<!--<iframe width="853" height="480" src="https://www.youtube.com/embed/wbPHk28Z9uQ?rel=0" frameborder="0" allowfullscreen style="margin-left:6%;"></iframe> -->
    height: 500px;
+
</div>
}
+
  
.contact{
+
<a class="button" style="background-color:gold; color:black; position:relative; text-decoration:none; left:630px; top:175px; z-index:3;" href="https://2017.igem.org/Team:Groningen/Achievements">Go directly to Achievements</a>
    width: 500px;
+
    height: 350px;
+
}
+
  
.intro{
+
<div style="height:2000px; margin: 0 auto;">
padding-top: 10px;
+
margin-top: 10px;
+
}
+
   
+
.first-text{
+
    padding-top: 20px;
+
    width:100%;
+
}
+
  
.second-text{
+
<img style="position:absolute; top:900px; width:1000px; z-index:2;" src="https://static.igem.org/mediawiki/2017/6/63/HomeviewF.svg">
    width:100%;
+
<img style="position:absolute; top:950px; width:1000px; z-index:1;" src="https://static.igem.org/mediawiki/2017/b/bb/HomeviewF-1.jpg">
}
+
</div>
   
+
body {
+
    width: auto !important;
+
    height: 100%;
+
    width: 100%;
+
    margin: 0;
+
    padding: 0;
+
    font-family: "Calibri";
+
}
+
  
html {
+
<!-- <div>
    height: 100%;
+
<img style="width: 100%;" src="https://static.igem.org/mediawiki/2017/0/04/Homeview_base.svg">
    margin: 0;
+
</div> -->
    padding: 0;
+
}
+
  
a.intro-txt{
+
<br>
    color: black;
+
<center>
    text-align: center;
+
<a class="button" style="text-decoration: none; color:white;" href="https://2017.igem.org/Team:Groningen/Description">Next: Description</a>
    font-weight: bold;
+
<h1><a href="https://2017.igem.org/Team:Groningen/Team">The Groningen iGEM Team !</a></h1>
    text-decoration:none;
+
</center>
}
+
</div> <!-- main-col -->
  
a.intro-txt:hover {
+
<div style="height:458px; background-image: url('https://static.igem.org/mediawiki/2017/d/de/17groupgroningen.jpg'); background-position:center; background-repeat: no-repeat; overflow:visible;">
    text-decoration: underline;
+
<br>
}
+
 
+
a
+
+
    text-decoration:none;
+
}
+
   
+
.container {
+
    display: flex;
+
    padding-top: 20px;
+
    vertical-align: middle;
+
    text-align: center;
+
}
+
   
+
#container {
+
    position: relative;
+
    padding-top: 1px;
+
    padding-bottom: 0px;
+
    height:1000px;
+
}
+
 
+
.column {
+
    flex: 1;
+
}
+
 
+
.column-one {
+
    order: 2;
+
}
+
.column-two {
+
    order: 3;
+
}
+
.column-three {
+
    order: 4;
+
}
+
.column-four {
+
    order: 5;
+
}
+
   
+
.2-rows div {
+
    height:100%;padding:50px 0;
+
}
+
 
+
.3-rows div {
+
    height:100%;padding:20px 0;
+
}
+
 
+
.icon-text{
+
    padding-top: 20px;
+
    height: 100%;
+
}
+
   
+
.imgsize{
+
    position: relative;
+
    vertical-align: middle;
+
    text-align: center;
+
    padding-top: 20px;
+
    max-width: 500px;
+
    height: 100px;
+
}
+
 
+
.scmedimgsize{
+
    position: relative;
+
    vertical-align: middle;
+
    text-align: center;
+
    padding-top: 20px;
+
    max-width: 200px;
+
    height: 50px;
+
}
+
   
+
.button {
+
    display: inline-block;
+
    margin-left: 10px;
+
    padding: 0.75rem 1rem;
+
    border: 0;
+
    border-style: solid;
+
    border-width: 1px;
+
    border-color: #969696;
+
    border-radius: 0.317rem;
+
    background-color: #0C1948;
+
    color: white;
+
    width: 100px;
+
    text-decoration: none;
+
    font-weight: 500;
+
    font-size: 1rem;
+
    line-height: 1.5;
+
    font-family: "Calibri";
+
    cursor: pointer;
+
    -webkit-appearance: none;
+
    -webkit-font-smoothing: antialiased;
+
}
+
 
+
.button:hover {
+
opacity: 0.85;
+
}
+
 
+
.button:active {
+
box-shadow: inset 0 3px 4px hsla(0, 0%, 0%, 0.2);
+
}
+
 
+
.button:focus {
+
outline: thin dotted #444;
+
outline: 5px auto -webkit-focus-ring-color;
+
outline-offset: -2px;
+
}
+
 
+
.button-icon {
+
display: inline-block;
+
  position: relative;
+
  top: -0.1em;
+
  vertical-align: middle;
+
margin-right: 0.317rem;
+
}
+
   
+
.btn-content {
+
    margin: 64px auto;
+
    width: 94%;
+
    max-width: 640px;
+
    text-align: center;
+
}
+
   
+
.menu{
+
/*    background-color: coral;*/
+
    text-align: left;
+
    margin-top: 0;
+
    padding-top: 0;
+
}
+
   
+
hr.small {
+
    max-width: 1000px;
+
    border: 0;
+
    height: 1px;
+
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(50, 50, 50, 0.75), rgba(0, 0, 0, 0));
+
}
+
 
+
.navbar {
+
    position: absolute
+
  overflow: hidden;
+
  background-color: #333;
+
  position: fixed;
+
  top: 0;
+
  width: 100%;
+
    z-index: -1;
+
}
+
 
+
.navbar a {
+
  float: left;
+
  display: block;
+
  color: #f2f2f2;
+
  text-align: center;
+
  padding: 14px 16px;
+
  text-decoration: none;
+
  font-size: 17px;
+
}
+
   
+
   
+
</style>
+
 
+
<body>
+
 
+
<div class="navbar" style="z-index: 3000;margin-top: 10px"> <!--id="cssmenu"-->
+
  <a href="https://2017.igem.org/Team:Groningen">Home</a>
+
  <a href="https://2017.igem.org/Team:Groningen/Project">Project</a>
+
  <a href="https://2017.igem.org/Team:Groningen/Team">Team</a>
+
  <a href="https://2017.igem.org/Team:Groningen/Sponsors">Sponsors</a>
+
 
</div>
 
</div>
  
<header class="header" style="margin-top: 20px;">
+
<!--
    <div id="title_container">
+
<!--         <h2 id="title">
+
    Under construction
+
    </h2> -->
+
<!--    <h2 id="subtitle">
+
        #teamGroningen2017
+
    </h2> -->
+
    </div>
+
</header>
+
 
+
 
+
 
+
<div class="fixed-bg">
+
 
+
<div class="main-col">
+
 
+
     
+
<section class="content about">
+
    <h2 class="intro-txt first-text">
+
        Welcome!
+
    </h2>
+
    <p class="intro-txt second-text">
+
        <span>
+
            This is the official page of <a class="intro-txt" href="">#teamGroningen</a> for the competition of <a class="intro-txt" href="https://igem.org/Main_Page">iGem</a> 2017.
+
        </span>
+
        <span>
+
            You want to know more? Check out our awesome <a class="intro-txt" href=""> project</a>!
+
        </span>
+
    </p>
+
 
</section>  
 
</section>  
 
<hr class="small">
 
   
 
 
<section class="content services">   
 
<section class="content services">   
     <h2>Find out more!</h2>
+
     <h1>Summary</h1>
 
     <div class="container">
 
     <div class="container">
         <div class="column column-one">
+
         <p class="left">
            <div class="3-rows">
+
        In the Netherlands, export of dairy products, such as cheese, buttermilk, and yogurt generate a combined yearly income of billions of euros with the Netherlands being responsible for 5% of the world’s dairy product trade. The bacteria used for the fabrication of these commodities are severely susceptible to viral infections, which can disrupt production capabilities of the product.
 +
The iGEM (international Genetically Engineered Machine competition) Groningen team is determined to improve the current quality control standard practices by developing an improved system for the detection of phage infections. By implementation of our system, the Groningen iGEM team hopes to contribute to the on-going efforts to safeguard the production and ensure better quality product and subsequent export of our world famous dairy products.
 +
The mission of the Groningen iGEM 2017 project is to design a system that can be used to survey and detect multiple pre-programmed nucleotide sequences and result in a convenient readout. To do so, a CRISPR-based detection system will be developed that can be utilized to detect bacteriophages, bacterial viruses. This system will rely on the DNA sequence detection capabilities of a modified version of the “adaptive immune system” of bacteria, CRISPR-Cas. Various readout modules will be implemented to allow for proactive, quick, cheap and reliable screening of high-risk bacteriophage infections in the industrial pipeline.     
 +
    </div>
 +
</section>
 +
<br>
 +
<br>
  
                <div>
+
-->
                    <img class="imgsize" src="https://static.igem.org/mediawiki/2017/5/5e/Sponsor_logo_thumbnail.png" alt="sponsor image"/>
+
                </div>
+
  
                <div class="icon-text"><b>Fund us!</b></div>
+
<br>
 +
<hr class="small">
  
            </div>
+
<section class="content contact">
        </div>
+
        <div class="column column-two">
+
            <div class="3-rows">
+
 
+
                <div>
+
                    <img class="imgsize" src="" alt="project image"/>
+
                </div>
+
 
+
                <div class="icon-text"><b>Learn more!</b></div>
+
 
+
            </div>
+
        </div>
+
        <div class="column column-three">
+
            <div class="3-rows">
+
 
+
                <div>
+
                    <img class="imgsize services" scr="" alt="us image"/>
+
                </div>
+
 
+
                <div class="icon-text"><b>This is us!</b></div>
+
 
+
            </div>
+
        </div>
+
    </div>
+
</section>
+
 
      
 
      
<hr class="small">
+
     <h3> Follow us! </h3>
   
+
<section class="content contact">
+
     <h2> Follow us! </h2>
+
 
     <div class="container">
 
     <div class="container">
 
         <div class="column column-one">
 
         <div class="column column-one">
Line 425: Line 66:
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
                 <div style="padding-top: 30px;">
+
                 <div style="padding-top:30px; margin-left:-18px;">
 
                     <p>Like!</p>
 
                     <p>Like!</p>
 
                 </div>
 
                 </div>
Line 437: Line 78:
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
                 <div style="padding-top: 30px;">
+
                 <div style="padding-top:30px; margin-left:-15px;">
 
                     <p>Hashtag</p>
 
                     <p>Hashtag</p>
 
                 </div>
 
                 </div>
Line 445: Line 86:
 
             <div class="2-rows">
 
             <div class="2-rows">
 
                 <div style="padding-top: 0px;">
 
                 <div style="padding-top: 0px;">
                     <a href="mailto:e.karountzos@gmail.com">
+
                     <a href="mailto:igem.2017.groningen@gmail.com">
 
                     <img class="scmedimgsize" src="https://static.igem.org/mediawiki/2017/9/9c/Email_logo_thumbnail.png" />
 
                     <img class="scmedimgsize" src="https://static.igem.org/mediawiki/2017/9/9c/Email_logo_thumbnail.png" />
 
                     </a>
 
                     </a>
 
                 </div>
 
                 </div>
                 <div style="padding-top: 30px;">
+
                 <div style="padding-top:30px; margin-left:-17px;">
 
                     <p>Email</p>
 
                     <p>Email</p>
 
                 </div>
 
                 </div>
Line 457: Line 98:
 
             <div class="2-rows">
 
             <div class="2-rows">
 
                 <div style="padding-top: 0px;">
 
                 <div style="padding-top: 0px;">
 +
                    <a href="https://www.instagram.com/igem.2017.groningen/">
 
                     <img class="scmedimgsize" src="https://static.igem.org/mediawiki/2017/c/c8/Instagram_logo_thumbnail.png" />
 
                     <img class="scmedimgsize" src="https://static.igem.org/mediawiki/2017/c/c8/Instagram_logo_thumbnail.png" />
 +
                    </a>
 
                 </div>
 
                 </div>
                 <div style="padding-top: 30px;">
+
                 <div style="padding-top:30px; margin-left:-8px;">
 
                     <p>Instagram!</p>
 
                     <p>Instagram!</p>
 
                 </div>
 
                 </div>
Line 469: Line 112:
 
</section>  
 
</section>  
  
</div>
+
</div>
  
 +
 +
<div class="footer">
 +
<img id="bannerimg" usemap="#imagemap_sponsors" style="width: 100%;" src="https://static.igem.org/mediawiki/2017/b/b5/Banner.jpg" alt="Sponsors">
 
</div>
 
</div>
</div>
+
 
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 02:34, 2 November 2017





Follow us!

Like!

Hashtag

Email

Instagram!