|
|
Line 12: |
Line 12: |
| | | |
| <!-- main --> | | <!-- main --> |
− | <style type="text/css">
| |
− |
| |
− | @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
| |
− | #top_title,#sideMenu { display: none !important; }
| |
− | #content {
| |
− | width: 100%;
| |
− | margin: 0;
| |
− | padding: 0;
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | #footer{
| |
− | padding-botton:-60px;
| |
− | }
| |
− |
| |
− | #content{
| |
− | background-color: #FFe4e1; !important;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | html, body {
| |
− | margin: 0 !important;
| |
− | padding: 0 !important;
| |
− |
| |
− | }
| |
− | body {
| |
− | background-color: #FFe4e1;
| |
− | font-family: 'Montserrat', sans-serif;
| |
− | font-weight: 400;
| |
− | line-height: 45px;
| |
− | font-size: 20px;
| |
− | color: #555;
| |
− |
| |
− |
| |
− | -webkit-font-smoothing: antialiased;
| |
− | -webkit-overflow-scrolling: touch;
| |
− | }
| |
− |
| |
− | /* Titles */
| |
− | h1, h2, h3, h4, h5, h6,p {
| |
− | font-family: 'Montserrat', sans-serif;
| |
− | font-weight: 600;
| |
− | color: #333;
| |
− | line-height:30pt;
| |
− | }
| |
− |
| |
− | h1 {
| |
− | font-size: 35px;
| |
− | margin-top: 30px;
| |
− | margin-bottom: 50px;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | /* Paragraph Typographic */
| |
− | p {
| |
− | line-height: 50px;
| |
− | margin-bottom: 35px;
| |
− | font-size: 16px;
| |
− | }
| |
− |
| |
− | .centered {
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | /* Links */
| |
− | a {
| |
− | color: #20B2AA;
| |
− | word-wrap: break-word;
| |
− |
| |
− | -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | -o-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | }
| |
− |
| |
− | a:hover,
| |
− | a:focus {
| |
− | color: #7b7b7b;
| |
− | text-decoration: none;
| |
− | outline: 0;
| |
− | }
| |
− |
| |
− | a:before,
| |
− | a:after {
| |
− | -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | -o-transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | transition: color 0.1s ease-in, background 0.1s ease-in;
| |
− | }
| |
− |
| |
− | hr {
| |
− | display: block;
| |
− | height: 1px;
| |
− | border: 0;
| |
− | border-top: 1px solid #ccc;
| |
− | margin: 1em 0;
| |
− | padding: 0;
| |
− | }
| |
− |
| |
− |
| |
− | .navbar {
| |
− | text-transform: uppercase;
| |
− | margin-bottom: 0px;
| |
− | }
| |
− |
| |
− | top1 {
| |
− | padding-top: -20px;
| |
− | ]
| |
− | .navbar-inverse {
| |
− | padding-bottom: 70px;
| |
− | padding-top: 70px;
| |
− | }
| |
− |
| |
− | .navbar-inverse {
| |
− | background-color: #FFA07A;
| |
− | border-color: #FA8072;
| |
− | }
| |
− |
| |
− | .navbar-inverse .navbar-nav > li > a {
| |
− | color: white;
| |
− | }
| |
− |
| |
− | .navbar-inverse .navbar-nav > li > a:hover {
| |
− | color: #222222;
| |
− | }
| |
− |
| |
− | .navbar-brand {
| |
− | font-weight: 700;
| |
− | font-size: 20px;
| |
− | letter-spacing: 2px;
| |
− | }
| |
− |
| |
− | .navbar-inverse .navbar-brand {
| |
− | color: white;
| |
− | }
| |
− |
| |
− | .navbar-inverse .navbar-toggle {
| |
− | border-color: transparent;
| |
− | }
| |
− |
| |
− | .progress-bar-theme {
| |
− | background-color: #FFA07A;
| |
− | }
| |
− |
| |
− |
| |
− | /* Helpers */
| |
− |
| |
− | .mt {
| |
− | margin-top: 40px;
| |
− | margin-bottom: 40px;
| |
− | }
| |
− |
| |
− | .pt {
| |
− | padding-top: 50px;
| |
− | padding-bottom: 50px;
| |
− | }
| |
− | .lr {
| |
− | PADDING-LEFT: 100PX;
| |
− | padding-right: 100px;
| |
− | }
| |
− |
| |
− | /* +++++ WRAP SECTIONS +++++ */
| |
− |
| |
− | #ww {
| |
− | padding-top: 0px;
| |
− | padding-bottom: 70px;
| |
− | background-color: #f2f2f2;
| |
− | }
| |
− |
| |
− |
| |
− | #footer {
| |
− | background-color: #ADD8E6;
| |
− | padding-top: 50px;
| |
− | padding-bottom: 50px;
| |
− | }
| |
− |
| |
− | #footer p {
| |
− | color: white;
| |
− | }
| |
− |
| |
− | #footer h4 {
| |
− | color: white;
| |
− | text-transform: uppercase;
| |
− | padding-bottom: 20px;
| |
− | }
| |
− |
| |
− |
| |
− | /* +++++ Color Wraps / Blog Page +++++ */
| |
− |
| |
− | #grey {
| |
− | padding-top: 60px;
| |
− | padding-bottom: 60px;
| |
− | background-color: #f2f2f2;
| |
− | }
| |
− |
| |
− | #white {
| |
− | padding-top: 60px;
| |
− | padding-bottom: 60px;
| |
− | background-color: #ffffff;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | /* Blog Date*/
| |
− | bd {
| |
− | font-size: 12px;
| |
− | text-transform: uppercase;
| |
− | color: #d2d2d2;
| |
− | font-weight: 700;
| |
− | }
| |
− |
| |
− | /* Blog Author*/
| |
− | ba {
| |
− | font-size: 12px;
| |
− | text-transform: uppercase;
| |
− | }
| |
− |
| |
− | /* Blog Quote */
| |
− | .bq {
| |
− | font-size: 22px;
| |
− | padding-top: 30px;
| |
− | }
| |
− |
| |
− | /* Blog Tags */
| |
− | bt {
| |
− | font-size: 12px;
| |
− | }
| |
− |
| |
− | /* ================== PORTFOLIO IMAGES HOVER EFFECT ================== */
| |
− | /* Effects also are controled by hover.zoom.js */
| |
− | .zoom {
| |
− | display:block;
| |
− | position:relative;
| |
− | overflow:hidden;
| |
− | background:transparent url(https://static.igem.org/mediawiki/2017/f/fe/Bgic_loader.gif) no-repeat center;
| |
− | }
| |
− |
| |
− |
| |
− | .zoomOverlay {
| |
− | position:absolute;
| |
− | top:0; left:0;
| |
− | bottom:0; right:0;
| |
− | display:none;
| |
− | background-image:url(../img/zoom.png);
| |
− | background-repeat:no-repeat;
| |
− | background-position:center;
| |
− | }
| |
− |
| |
− | .zoom2 {
| |
− | opacity: 1;
| |
− | }
| |
− |
| |
− | .zoom2:hover {
| |
− | opacity: 0.5;
| |
− | }
| |
− |
| |
− | /* glyphicon Configuration */
| |
− |
| |
− | .glyphicon {
| |
− | font-size: 40px;
| |
− | color: #1abc9c;
| |
− | }
| |
− | </style>
| |
− |
| |
| | | |
| <!-- Bootstrap core CSS --> | | <!-- Bootstrap core CSS --> |
Line 291: |
Line 22: |
| | | |
| <!-- main --> | | <!-- main --> |
− | <link href="https://2017.igem.org/Team:BGIC-Union/finalcss/main-css?action=raw&ctype=text/css" rel="stylesheet"> | + | <link href="https://2017.igem.org/Team:BGIC-Union/mainstyle!/css?action=raw&ctype=text/css" rel="stylesheet"> |
| <!-- slider --> | | <!-- slider --> |
− | <style type="text/css">
| + | |
− | | + | |
− | /* Section Slider
| + | |
− | ========================================================= */
| + | |
− | | + | |
− | /* Carousel Slider
| + | |
− | ============================================== */
| + | |
− | #slider_part {
| + | |
− | height: 900px;
| + | |
− | width: 100%;
| + | |
− | overflow: hidden;
| + | |
− | background-color: #f2f2f2;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-caption {
| + | |
− | top: 30%;
| + | |
− | margin-top: -70px;
| + | |
− | text-shadow: none!important;
| + | |
− | left: 9%;
| + | |
− | right: 10%;
| + | |
− | -webkit-transition: all.3s ease 0s;
| + | |
− | -o-transition: all.3s ease 0s;
| + | |
− | transition: all.3s ease 0s;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-caption h3 {
| + | |
− | text-shadow: none;
| + | |
− | font-size: 70px;
| + | |
− | line-height: 92px;
| + | |
− | font-weight: 300;
| + | |
− | margin: 0 0px;
| + | |
− | transition-delay: .3s;
| + | |
− | -webkit-transition-delay: .3s;
| + | |
− | -o-transition-delay: .3s;
| + | |
− | text-transform: capitalize!important;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-caption p {
| + | |
− | font-size: 46px;
| + | |
− | line-height: 62px;
| + | |
− | font-weight: 500;
| + | |
− | color: #fff;
| + | |
− | transition-delay: .3s;
| + | |
− | -moz-transition-delay: .3s;
| + | |
− | -o-transition-delay: .3s;
| + | |
− | margin: 40px 0px;
| + | |
− | text-transform: uppercase;
| + | |
− | font-family: Comic Sans MS;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-caption img {
| + | |
− | border: 2px solid#fff;
| + | |
− | padding: 10px 10px 10px 20px;
| + | |
− | }
| + | |
− | | + | |
− | .line {
| + | |
− | width: 100px;
| + | |
− | height: 5px;
| + | |
− | color: #222;
| + | |
− | margin: 0px auto;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-caption p i {
| + | |
− | font-size: 7px;
| + | |
− | margin: 0px 3px;
| + | |
− | position: relative;
| + | |
− | top: -3px;
| + | |
− | }
| + | |
− | | + | |
− | .carousel .item {
| + | |
− | -webkit-transition: opacity .3s;
| + | |
− | -moz-transition: opacity .3s;
| + | |
− | -ms-transition: opacity .3s;
| + | |
− | -o-transition: opacity .3s;
| + | |
− | transition: opacity .3s;
| + | |
− | }
| + | |
− | | + | |
− | .btn-featured {
| + | |
− | text-decoration: none;
| + | |
− | position: relative;
| + | |
− | -webkit-transition: all .3s ease-in-out;
| + | |
− | -o-transition: all .3s ease-in-out;
| + | |
− | transition: all .3s ease-in-out;
| + | |
− | background: transparent;
| + | |
− | border-radius: 2px;
| + | |
− | z-index: 1;
| + | |
− | font-weight: 500;
| + | |
− | font-size: 18px;
| + | |
− | line-height: 20px;
| + | |
− | padding: 15px 40px !important;
| + | |
− | text-transform: uppercase;
| + | |
− | margin-top: 20px;
| + | |
− | margin-right: 10px;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-control.left,.carousel-control.right {
| + | |
− | background-image: none !important;
| + | |
− | background-repeat: no-repeat !important;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-control {
| + | |
− | width: 4% !important;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-caption img {
| + | |
− | height: auto;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-indicators {
| + | |
− | bottom: 100px;
| + | |
− | width: 10%;
| + | |
− | left: 45%;
| + | |
− | margin: 0 auto;
| + | |
− | bottom: 30%;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-indicators li {
| + | |
− | width: 20px !important;
| + | |
− | height: 20px !important;
| + | |
− | border: 2px solid #FFF !important;
| + | |
− | margin: 0px !important;
| + | |
− | border-radius: 50%;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-control.left span {
| + | |
− | padding: 15px;
| + | |
− | }
| + | |
− | | + | |
− | .slides-control .carousel-control i {
| + | |
− | line-height: 36px;
| + | |
− | font-size: 32px;
| + | |
− | padding-top: 6px;
| + | |
− | -moz-transition: all 500ms ease;
| + | |
− | -webkit-transition: all 500ms ease;
| + | |
− | -ms-transition: all 500ms ease;
| + | |
− | -o-transition: all 500ms ease;
| + | |
− | transition: all 500ms ease;
| + | |
− | border-radius: 50%;
| + | |
− | width: 50px;
| + | |
− | height: 50px;
| + | |
− | }
| + | |
− | | + | |
− | .slides-control .carousel-control {
| + | |
− | position: absolute;
| + | |
− | width: 240px;
| + | |
− | top: 45%;
| + | |
− | z-index: 10;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-control.left {
| + | |
− | left: -15px;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-control.right {
| + | |
− | right: 0px;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-control.left {
| + | |
− | width: 120px;
| + | |
− | height: 40px;
| + | |
− | }
| + | |
− | | + | |
− | .carousel-control.right {
| + | |
− | width: 120px;
| + | |
− | height: 40px;
| + | |
− | }
| + | |
− | | + | |
− | .overlay-slide {
| + | |
− | background: #000;
| + | |
− | height: 65%;
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .overlay-slide img {
| + | |
− | opacity: 1;
| + | |
− | width: 100%;
| + | |
− | height: auto;
| + | |
− | }
| + | |
− | | + | |
− | /*-- Animation --*/
| + | |
− | | + | |
− | .carousel .item.active .animated2 {
| + | |
− | -webkit-animation: lightSpeedIn 1s ease-in 200ms both;
| + | |
− | animation: lightSpeedIn 1s ease-in 200ms both;
| + | |
− | }
| + | |
− | | + | |
− | .carousel .item.active .animated3 .animated4 {
| + | |
− | -webkit-animation: bounceInLeft 1s ease-in-out 500ms both;
| + | |
− | animation: bounceInLeft 1s ease-in-out 500ms both;
| + | |
− | }
| + | |
− | .animated4 {color:#4169E1
| + | |
− | }
| + | |
− | .img{
| + | |
− | -webkit-filter: brightness(1);
| + | |
− | }
| + | |
− | | + | |
− | </style>
| + | |
| <!-- script --> | | <!-- script --> |
| <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> | | <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> |