Difference between revisions of "Team:OUC-China/Team"

Line 12: Line 12:
  
 
<style type="text/css">
 
<style type="text/css">
−
<link rel="stylesheet" type="text/css"
+
@charset "utf-8";
−
href="https://2018.igem.org/Team:OUC-China/CSS0 &action=raw&ctype=text/css" />
+
/* Body */
 +
body {
 +
font-family: source-sans-pro;
 +
background-color: #f2f2f2;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
font-style: normal;
 +
font-weight: 200;
 +
color: #FFFFFF;
 +
}
 +
/* Container */
 +
.container {
 +
width: 90%;
 +
margin-left: auto;
 +
margin-right: auto;
 +
height: 1000px;
 +
background-color: #FFFFFF;
 +
}
 +
/* Navigation */
 +
header {
 +
width: 100%;
 +
height: 8.2%;
 +
background-color: #52bad5;
 +
border-bottom: 1px solid #2C9AB7;
 +
}
 +
.logo {
 +
color: #fff;
 +
font-weight: bold;
 +
text-align: undefined;
 +
width: 10%;
 +
float: left;
 +
margin-top: 32px;
 +
margin-left: 25px;
 +
letter-spacing: 4px;
 +
}
 +
nav {
 +
float: right;
 +
text-align: right;
 +
margin-right: 70px;
 +
}
 +
header nav ul {
 +
list-style: none;
 +
float: right;
 +
}
 +
nav ul li {
 +
float: left;
 +
color: #FFFFFF;
 +
font-size: 14px;
 +
text-align: left;
 +
margin-right: 25px;
 +
letter-spacing: 2px;
 +
font-weight: bold;
 +
transition: all 0.3s linear;
 +
}
 +
ul li a {
 +
color: #FFFFFF;
 +
text-decoration: none;
 +
}
 +
ul li:hover a {
 +
color: #2C9AB7;
 +
}
 +
.dropbtn {
 +
    background-color: #52bad5;
 +
    color: white;
 +
    padding: 18.5px;
 +
    font-size: 16px;
 +
    border: none;
 +
    cursor: pointer;
 +
}
 +
 
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 0.1px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
}
 +
 
 +
.dropdown-content a {
 +
    color: royalblue;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
 
 +
.dropdown-content a:hover {background-color: #f1f1f1}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
.dropdown:hover .dropbtn {
 +
    background-color: #8AB8FF;
 +
}
 +
.hero_header {
 +
color: #FFFFFF;
 +
text-align: center;
 +
margin-top: 10px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
letter-spacing: 8px;
 +
font-size:100px
 +
}
 +
/* Hero Section */
 +
.hero {
 +
background-color: #B3B3B3;
 +
background-image:url(../images/3.jpg);
 +
padding-top: 150px;
 +
padding-bottom: 150px;
 +
background-size:1250px 500px
 +
}
 +
.light {
 +
font-weight: bold;
 +
color: #717070;
 +
}
 +
.tagline {
 +
text-align: center;
 +
color: #FFFFFF;
 +
margin-top: 4px;
 +
font-weight: lighter;
 +
text-transform: uppercase;
 +
letter-spacing: 1px;
 +
}
 +
/* About Section */
 +
.text_column {
 +
width: 29%;
 +
text-align: justify;
 +
font-weight: lighter;
 +
line-height: 25px;
 +
float: left;
 +
padding-left: 20px;
 +
padding-right: 20px;
 +
color: #A3A3A3;
 +
}
 +
.about {
 +
padding-left: 25px;
 +
padding-right: 25px;
 +
padding-top: 35px;
 +
display: inline-block;
 +
background-color: #FFFFFF;
 +
margin-top: 0px;
 +
}
 +
/* Stats Gallery */
 +
.stats {
 +
color: #717070;
 +
margin-bottom: 3px;
 +
}
 +
.blockquote {
 +
width: 100%;
 +
}
 +
.gallery {
 +
clear: both;
 +
display: inline-block;
 +
width: 100%;
 +
background-color: #FFFFFF;
 +
/* [disabled]min-width: 400px;
 +
*/
 +
padding-bottom: 35px;
 +
padding-top: 0px;
 +
margin-top: -100px;
 +
margin-bottom: 0px;
 +
}
 +
.thumbnail {
 +
width: 100%;
 +
float: left;
 +
margin-top: 35px;
 +
}
 +
.gallery .thumbnail h4 {
 +
margin-top: 5px;
 +
margin-right: 5px;
 +
margin-bottom: 5px;
 +
margin-left: 5px;
 +
color: #52BAD5;
 +
}
 +
.gallery .thumbnail p {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
color: #A3A3A3;
 +
}
 +
/* Parallax Section */
 +
.banner {
 +
background-color: #2D9AB7;
 +
background-image: url(../images/parallax.png);
 +
height: 400px;
 +
background-attachment: fixed;
 +
background-size: cover;
 +
background-repeat: no-repeat;
 +
}
 +
.parallax {
 +
color: #FFFFFF;
 +
text-align: right;
 +
padding-right: 100px;
 +
padding-top: 110px;
 +
letter-spacing: 2px;
 +
margin-top: 0px;
 +
}
 +
.parallax_description {
 +
color: #FFFFFF;
 +
text-align: right;
 +
padding-right: 100px;
 +
width: 30%;
 +
float: right;
 +
font-weight: lighter;
 +
line-height: 23px;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
}
 +
/* More info */
 +
footer {
 +
background-color: #FFFFFF;
 +
padding-bottom: 35px;
 +
}
 +
.footer_column {
 +
width: 50%;
 +
text-align: center;
 +
padding-top: 30px;
 +
float: left;
 +
}
 +
footer .footer_column h3 {
 +
color: #B3B3B3;
 +
text-align: center;
 +
}
 +
footer .footer_column p {
 +
color: #717070;
 +
background-color: #FFFFFF;
 +
}
 +
.cards {
 +
width: 100%;
 +
height: auto;
 +
max-width: 400px;
 +
max-height: 400px;
 +
}
 +
footer .footer_column p {
 +
padding-left: 30px;
 +
padding-right: 30px;
 +
text-align: justify;
 +
line-height: 25px;
 +
font-weight: lighter;
 +
margin-left: 20px;
 +
margin-right: 20px;
 +
}
 +
.button {
 +
width: 200px;
 +
margin-top: 40px;
 +
margin-right: auto;
 +
margin-bottom: auto;
 +
margin-left: auto;
 +
padding-top: 20px;
 +
padding-right: 10px;
 +
padding-bottom: 20px;
 +
padding-left: 10px;
 +
text-align: center;
 +
vertical-align: middle;
 +
border-radius: 0px;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
letter-spacing: 2px;
 +
border: 3px solid #FFFFFF;
 +
color: #FFFFFF;
 +
transition: all 0.3s linear;
 +
}
 +
.button:hover {
 +
background-color: #FEFEFE;
 +
color: #C4C4C4;
 +
cursor: pointer;
 +
}
 +
.copyright {
 +
text-align: center;
 +
padding-top: 20px;
 +
padding-bottom: 20px;
 +
background-color: #52bad5;
 +
color: #FFFFFF;
 +
text-transform: uppercase;
 +
font-weight: lighter;
 +
letter-spacing: 2px;
 +
border-top-width: 2px;
 +
}
 +
.footer_banner {
 +
background-color: #B3B3B3;
 +
padding-top: 60px;
 +
padding-bottom: 60PX;
 +
margin-bottom: 0px;
 +
background-image: url(../images/pattern.png);
 +
background-repeat: repeat;
 +
}
 +
footer {
 +
display: inline-block;
 +
}
 +
.hidden {
 +
display: none;
 +
}
 +
 
 +
/* Mobile */
 +
@media (max-width: 320px) {
 +
.logo {
 +
width: 100%;
 +
text-align: center;
 +
margin-top: 13px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
}
 +
.container header nav {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
float: none;
 +
display: none;
 +
}
 +
header nav ul {
 +
}
 +
nav ul li {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
text-align: center;
 +
}
 +
.text_column {
 +
width: 100%;
 +
text-align: justify;
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
}
 +
.thumbnail {
 +
width: 100%;
 +
}
 +
.footer_column {
 +
width: 100%;
 +
margin-top: 0px;
 +
}
 +
.parallax {
 +
text-align: center;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-top: 40%;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
width: 100%;
 +
font-size: 18px;
 +
}
 +
.parallax_description {
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
width: 90%;
 +
margin-top: 25px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 12px;
 +
float: none;
 +
text-align: center;
 +
}
 +
.banner {
 +
background-color: #2D9AB7;
 +
background-image: none;
 +
}
 +
.tagline {
 +
margin-top: 20px;
 +
line-height: 22px;
 +
}
 +
.hero_header {
 +
padding-left: 10px;
 +
padding-right: 10px;
 +
line-height: 22px;
 +
text-align: center;
 +
}
 +
}
 +
 
 +
/* Small Tablets */
 +
@media (min-width: 321px)and (max-width: 767px) {
 +
.logo {
 +
width: 100%;
 +
text-align: center;
 +
margin-top: 13px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
color: #043745;
 +
}
 +
.container header nav {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
float: none;
 +
overflow: auto;
 +
display: inline-block;
 +
background: #52bad5;
 +
}
 +
header nav ul {
 +
padding: 0px;
 +
float: none;
 +
}
 +
nav ul li {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
text-align: center;
 +
padding-top: 8px;
 +
padding-bottom: 8px;
 +
}
 +
.text_column {
 +
width: 100%;
 +
text-align: left;
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
}
 +
.thumbnail {
 +
width: 100%;
 +
}
 +
.footer_column {
 +
width: 100%;
 +
margin-top: 0px;
 +
}
 +
.parallax {
 +
text-align: center;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-top: 40%;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
width: 100%;
 +
font-size: 18px;
 +
}
 +
.parallax_description {
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
margin-top: 30%;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
float: none;
 +
width: 100%;
 +
text-align: center;
 +
}
 +
.thumbnail {
 +
width: 50%;
 +
}
 +
.parallax {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
padding-top: 20%;
 +
}
 +
.parallax_description {
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
width: 100%;
 +
padding-top: 30px;
 +
}
 +
.banner {
 +
padding-left: 20px;
 +
padding-right: 20px;
 +
}
 +
.footer_column {
 +
width: 100%;
 +
}
 +
}
 +
 
 +
/* Small Desktops */
 +
@media (min-width: 768px) and (max-width: 1096px) {
 +
.text_column {
 +
width: 100%;
 +
}
 +
.thumbnail {
 +
width: 50%;
 +
}
 +
.text_column {
 +
width: 100%;
 +
margin-top: 0px;
 +
margin-right: 0px;
 +
margin-bottom: 0px;
 +
margin-left: 0px;
 +
padding-top: 0px;
 +
padding-right: 0px;
 +
padding-bottom: 0px;
 +
padding-left: 0px;
 +
}
 +
.banner {
 +
margin-top: 0px;
 +
padding-top: 0px;
 +
}
 +
.dropbtn {
 +
    background-color: #4CAF50;
 +
    color: white;
 +
    padding: 16px;
 +
    font-size: 16px;
 +
    border: none;
 +
    cursor: pointer;
 +
}
 +
 
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
}
 +
 
 +
.dropdown-content a {
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
 
 +
.dropdown-content a:hover {background-color: #f1f1f1}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
.dropdown:hover .dropbtn {
 +
    background-color: #3e8e41;
 +
}
 +
}
  
 
a:link {
 
a:link {

Revision as of 13:31, 2 September 2018

<!doctype html> Light Theme

TEAM

&nbsp&nbsp&nbsp&nbsp&nbsp Hey&nbsp&nbsp!

Here we are, we are OUC-iGEM. It has been 8 years since we first took part in iGEM in 2011. This time the team which is made up of 8 members pursues a more particular and creative aim. All the members met in May 2017 when we were unfamiliar with each other and knew nothing about synthetic biology. We struck to intergrate the related disciplines and during this time we became not only teammates but also good friends. We come from different colleges and have diverse specialties which ensure that we join our abilities and insights to make our goal clearer as efficiently as possible.

Yunqian Zhang

I am a senior in OUC whose major is biotechnology. To my surprise, I attend the iGEM competition in my last year of university. It is am amazing experience with my teammates to explore in the synthetic biology. Not only the lab work but also dry lab make me feel exciting and fresh.

Yanju Chen

Hello！I am YanjuChen, major in food science and engineering. It is my pleasure to meet some cute friends in OUC-iGEM team. For me, iGEM provides me a broader platform that helps me learn a lot about synthetic biology. Thank a fortunate encounter. Thank my dear friends.

Jiacheng Huang

I'm an undergraduate from Institute of Economics who majors in Economics. In life, I love computer and math. In iGEM, I do mathematical modeling to help the project implementation

Xudong Liu

I am Xudong Liu，a student in the Department of Biological Sciences. And I like to think about some mysteries of the universe and philosophical issues. I am mainly responsible for the experimental part of the team. I have greatly improved my ability through iGEM.

QinBo Qiao

Hay! I’m QinBo Qiao. My interest in synthetic biology stems from its unlimited potential for improvement. I have held on to the idea of it as my little joy to look forward to. When not iGEM-ing you will see me singing (or trying to), exploring this world by myself and controlling my weight of all time. See you guys in jamboree!

Qingjie Li

This is Qingjie Li. Glad to participate in this competition! The days I spend in iGEM give me quantities of valuable experience, It’s lucky for me to have this chance to meet my teammates and work with them in this competition. I always eager to know somethings new and fancy as well I have always been longing for embracing new skills and theories. I find those in my life and in iGEM, It’s happy to be a iGEMer.

Anyi Li

I‘m Anyi Li，an undergraduate of College of Marines Life Science. In our team, mainly responsible for HP, and I also enjoy doing experiments with my teammates. It's a great pleasure to participate in this competition, to learn more knowledge as well as to meet more interesting people. I think it must be a very special experience.

Kai Sun

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

Contact Us : oucigem@163.com | ©2018 OUC IGEM.All Rights Reserved. | Based On Dreamweaver