|
|
Line 4: |
Line 4: |
| <head> | | <head> |
| | | |
− | }
| + | <html lang="en"> |
− | .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 {
| + | <cfheader name="X-XSS-Protection" value="1"> |
− | position: relative;
| + | <head> |
− | min-height: 1px;
| + | <meta charset="utf-8" /> |
− | padding-right: 15px;
| + | <link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2015/e/ea/WMFavicon.png"> |
− | padding-left: 15px;
| + | |
− | }
| + | |
| | | |
− | @media (min-width: 992px) {
| + | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
− | .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 {
| + | <title>NOISE - W&M iGEM</title> |
− | float: left;
| + | <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> |
− | {
| + | <link href="https://2015.igem.org/Team:William_and_Mary/bootstrap?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | .col-md-3 {
| + | <link href="https://2015.igem.org/Team:Stockholm/fixbootstrap?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | width: 25%;
| + | <link href="https://2015.igem.org/Team:William_and_Mary/rubick?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
− | }
| + | <link href="https://2015.igem.org/Team:William_and_Mary/demo?action=raw&ctype=text/css" rel="stylesheet" type="text/css"/> |
| + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:William_and_Mary/jquerybxsliderCSS?action=raw&ctype=text/css" /> |
| | | |
− | }
| |
− |
| |
− | .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;
| |
− | }
| |
| </head> | | </head> |
| | | |