Line 280: | Line 280: | ||
font-size: 2em; | font-size: 2em; | ||
} | } | ||
− | + | </style> | |
<html> | <html> | ||
Revision as of 03:17, 10 September 2016
.MathJax nobr>span.math>span{border-left-width:0 !important};
<style>
} .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;
}
@media (min-width: 992px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left;
{
.col-md-3 { width: 25%;
}
}
.section-with-hover .project {
position: relative; width: 100%; overflow: hidden;
} .section-with-hover .project .animate {
position: relative; z-index: 2;
} .section-with-hover .project .over-area {
display: inline-block; text-align: center; position: absolute; z-index: 3; padding: 10% 8%; top: 0; left: 0; content: ""; width: 100%; height: 100%; color: white; opacity: 0; background: rgba(0, 0, 0, 0.55); -webkit-transition: background 0.5s, opacity 0.5s 0.5s; -moz-transition: background 0.5s, opacity 0.5s 0.5s; -o-transition: background 0.5s, opacity 0.5s 0.5s; -ms-transition: background 0.5s, opacity 0.5s 0.5s; transition: background 0.5s, opacity 0.5s 0.5s;
} .section-with-hover .project .over-area:hover {
opacity: 1; -webkit-transition: background 0.25s, opacity 0.25s 0s; -moz-transition: background 0.25s, opacity 0.25s 0s; -o-transition: background 0.25s, opacity 0.25s 0s; -ms-transition: background 0.25s, opacity 0.25s 0s; transition: background 0.25s, opacity 0.25s 0s; transition-delay: 0; -webkit-transition-delay: 0;
} .section-with-hover .project .over-area:hover .content {
opacity: 1; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; -ms-transition: opacity 0.2s; transition: opacity 0.2s;
} .section-with-hover .project .over-area:hover .content h4 {
opacity: 1; -moz-transition: opacity 0.3s, -moz-transform 0.3s; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
} .section-with-hover .project .over-area:hover .content p {
opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
} .section-with-hover .project .over-area:hover .content .btn {
opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
} .section-with-hover .project .over-area:hover .btn {
opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);
} .section-with-hover .project .over-area.no-opacity {
background-color: #333333;
} .section-with-hover .project .over-area.over-area-sm {
padding: 20px 30px;
} .section-with-hover .project .over-area.over-area-sm .content {
text-align: center;
} .section-with-hover .project .over-area.over-area-sm .content h4 {
font-size: 1.75em;
} .section-with-hover .project .over-area.over-area-sm .content p {
font-size: 1em;
} .section-with-hover .project .over-area.color-black {
background: rgba(52, 52, 52, 0.7);
} .section-with-hover .project .over-area.color-green {
background: rgba(39, 94, 76, 0.55);
} .section-with-hover .project .over-area.color-gold {
background: rgba(197, 164, 126, 0.55);
} .section-with-hover .project .over-area.color-blue {
background: rgba(61, 146, 207, 0.55);
} .section-with-hover .project .over-area.color-purple {
background: rgba(89, 57, 111, 0.55);
} .section-with-hover .project .over-area.gradient-1 {
background: -moz-linear-gradient(-45deg, rgba(151, 78, 32, 0.4) 0%, rgba(244, 218, 138, 0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(151, 78, 32, 0.4)), color-stop(100%, rgba(244, 218, 138, 0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(151, 78, 32, 0.4) 0%, rgba(244, 218, 138, 0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(151, 78, 32, 0.4) 0%, rgba(244, 218, 138, 0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(151, 78, 32, 0.4) 0%, rgba(244, 218, 138, 0.4) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(151, 78, 32, 0.4) 0%, rgba(244, 218, 138, 0.4) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66954d20', endColorstr='#66f4d887',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
} .section-with-hover .project .over-area.gradient-2 {
background: -moz-linear-gradient(-45deg, rgba(216, 44, 73, 0.4) 0%, rgba(217, 99, 131, 0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(216, 44, 73, 0.4)), color-stop(100%, rgba(217, 99, 131, 0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(216, 44, 73, 0.4) 0%, rgba(217, 99, 131, 0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(216, 44, 73, 0.4) 0%, rgba(217, 99, 131, 0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(216, 44, 73, 0.4) 0%, rgba(217, 99, 131, 0.4) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(216, 44, 73, 0.4) 0%, rgba(217, 99, 131, 0.4) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66d82c49', endColorstr='#66d96383',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
} .section-with-hover .project .over-area.gradient-3 {
background: -moz-linear-gradient(-45deg, rgba(223, 212, 139, 0.4) 0%, rgba(236, 101, 101, 0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(223, 212, 139, 0.4)), color-stop(100%, rgba(236, 101, 101, 0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(223, 212, 139, 0.4) 0%, rgba(236, 101, 101, 0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(223, 212, 139, 0.4) 0%, rgba(236, 101, 101, 0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(223, 212, 139, 0.4) 0%, rgba(236, 101, 101, 0.4) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(223, 212, 139, 0.4) 0%, rgba(236, 101, 101, 0.4) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66dfd48b', endColorstr='#66ec6565',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
} .section-with-hover .project .over-area.gradient-4 {
background: -moz-linear-gradient(-45deg, rgba(174, 97, 167, 0.4) 0%, rgba(210, 121, 135, 0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(174, 97, 167, 0.4)), color-stop(100%, rgba(210, 121, 135, 0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(174, 97, 167, 0.4) 0%, rgba(210, 121, 135, 0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(174, 97, 167, 0.4) 0%, rgba(210, 121, 135, 0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(174, 97, 167, 0.4) 0%, rgba(210, 121, 135, 0.4) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(174, 97, 167, 0.4) 0%, rgba(210, 121, 135, 0.4) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ae61a8', endColorstr='#66d27987',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
} .section-with-hover .project .over-area.gradient-5 {
background: #6c3aad; /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(107, 57, 172, 0.4) 0%, rgba(200, 254, 206, 0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(107, 57, 172, 0.4)), color-stop(100%, rgba(200, 254, 206, 0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(107, 57, 172, 0.4) 0%, rgba(200, 254, 206, 0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(107, 57, 172, 0.4) 0%, rgba(200, 254, 206, 0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(107, 57, 172, 0.4) 0%, rgba(200, 254, 206, 0.4) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(107, 57, 172, 0.4) 0%, rgba(200, 254, 206, 0.4) 100%); /* W3C */
} .section-with-hover .project .content {
position: relative; opacity: 0; text-align: left; vertical-align: middle; display: inline-block; width: 100%; min-height: 165px; word-break: break; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; transition: opacity 0.5s; -webkit-perspective: 300px; -moz-perspective: 300px; -o-perspective: 300px; -ms-perspective: 300px; perspective: 300px;
} .section-with-hover .project h4 {
font-size: 3em; line-height: 1.3em; font-weight: 700; opacity: 0; text-transform: uppercase; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); -moz-transition: opacity 0.2s, -moz-transform 0.2s; -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s;
} .section-with-hover .project p {
font-size: 1em; color: #FFFFFF; opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); -moz-transition: background-color 0.5s, opacity 0.5s 0.15s, -moz-transform 0.5s 0.15s; -webkit-transition: background-color 0.5s, opacity 0.5s 0.15s, -webkit-transform 0.5s 0.15s; transition: background-color 0.5s, opacity 0.5s 0.15s, transform 0.5s 0.15s;
} .section-with-hover .project .btn {
opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); -moz-transition: background-color 0.3s, opacity 0.3s 0.3s, -moz-transform 0.3s 0.3s; -webkit-transition: background-color 0.3s, opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s; transition: background-color 0.3s, opacity 0.3s 0.3s, transform 0.3s 0.3s; color: #fff; border-color: #fff;
} .section-with-hover .col-md-4 h4, .section-with-hover .col-sm-4 h4, .section-with-hover .col-xs-4 h4 {
font-size: 2em;
} </style>
Composite Part
An original integrator suite for the E. coli chromosome.
Welcome to iGEM 2016!
Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season! Your team has been approved and you are ready to start the iGEM season!