Difference between revisions of "Team:NKU CHINA/interlab/style6"

(Created page with " * { margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; outline: none!important; } a { text-decoration: none!important; } body { overflo...")
 
Line 215: Line 215:
  
 
.banner {
 
.banner {
−
   background-image: url(../img/banner-bg.jpg);
+
   background-image: url(http://202.113.18.146/cache/9/04/2018.igem.org/73e5440d19d21f6373572116a84660bd/T--NKU_CHINA--banner-bg.jpg);
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
 
   background-size: cover;
 
   background-size: cover;

Revision as of 14:32, 25 July 2018


  • {
   margin: 0;
   padding: 0;
   font-family: 'Source Sans Pro', sans-serif;
   outline: none!important;

}

a { 

 text-decoration: none!important;

}

body { 

 overflow-x: hidden;

}

ul { 

 list-style: none;
 margin: 0px;

}

p { 

 font-size: 16px;
 line-height: 26px;
 letter-spacing: 0.25px;
 font-weight: 300;

}

.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { 

   position: relative;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;

}

.col-xs-15 { 

   width: 20%;
   float: left;

}

@media (min-width: 768px) { .col-sm-15 { 

       width: 20%;
       float: left;
   }

}

@media (min-width: 992px) { 

   .col-md-15 {
       width: 20%;
       float: left;
   }

}

@media (min-width: 1200px) { 

   .col-lg-15 {
       width: 20%;
       float: left;
   }

}

.primary-button a { 

 padding: 13px 20px;
 letter-spacing: 0.5px;
 background-color: #46bae2;
 color: #fff;
 text-transform: uppercase;
 font-size: 13px;
 font-weight: 700;
 text-decoration: none;

}

.secondary-button a { 

 padding: 13px 20px;
 letter-spacing: 0.5px;
 background-color: #f2745f;
 color: #fff;
 text-transform: uppercase;
 font-size: 13px;
 font-weight: 700;
 text-decoration: none;

}

.border-button a { 

 padding: 13px 20px;
 letter-spacing: 0.5px;
 background-color: transparent;
 border: 1px solid #fff;
 color: #fff;
 text-transform: uppercase;
 font-size: 13px;
 font-weight: 700;
 text-decoration: none;

}


.section-heading { 

 text-align: center;
 margin-top: 80px;
 margin-bottom: 60px;

}

.section-heading h4 { 

 margin-top: 0px;
 font-size: 28px;
 text-transform: uppercase;
 font-weight: 300;
 color: #121212;

} .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} .section-heading p { 

 color: #7a7a7a;
 padding: 0px 25%;

}

.navbar-inverse { 

 background-color: #fff;
 border: none;

}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { 

 background-color: #f2745f;

}

.main-header { 

 position: fixed;
 width: 100%;
 height: 80px;
 margin: 0 auto;
 z-index: 1000;
 top: 30px;
 -webkit-transition: all 150ms ease-in-out;
 -moz-transition: all 150ms ease-in-out;
 transition: all 150ms ease-in-out;

}

.navbar { 

 margin-bottom: 0px;

}

.navbar-header { 

 float: none;

}

.scrolled { 

 position: fixed;
 left: 0;
 top: 0;
 -webkit-transition: all 150ms ease-in-out;
 -moz-transition: all 150ms ease-in-out;
 transition: all 150ms ease-in-out;

}

  1. menu-wrapper {
 background-color: white;
 overflow: hidden;
 -moz-box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.07);
 -webkit-box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.07);
 box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.07);

}

.navbar-brand { 

 font-family: 'Open Sans', sans-serif;
 font-size: 26px;
 line-height: 50px;
 font-weight: 900;
 text-transform: uppercase;
 color: #46bae2!important;
 transition: all 0.5s;
 margin-left: 30px;

}

.menu-first ul li { 

 display: inline-block;
 margin: 0px;

} .menu-first ul li:last-child { 

 margin-right: 60px!important;

} .menu-first { 

 float: right;
 margin-left:

} .menu-first li a { 

 color: #7a7a7a;
 font-size: 14px;
 font-weight: 300;
 text-transform: uppercase;
 text-shadow: none;
 display: inline-block;
 line-height: 80px;
 padding: 0px 20px;
 letter-spacing: 0.5px;
 transition: all 0.5s;
 outline: none;

} .menu-first ul li.active a { 

 color: #fff;
 background-color: #f2745f;

}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { 

 color: #7a7a7a;

}

.navbar-inverse .navbar-toggle { 

 border-color: #f2745f;
 background-color: #f2745f;
 right: 15px;

}

.banner { 

 background-image: url(T--NKU_CHINA--banner-bg.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;

}

.banner-content { 

 text-align: center;
 padding: 280px 0px 200px 0px;

}

.banner-content h6 { 

 font-size: 18px;
 color: #fff;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 2px;
 margin-bottom: 5px;

}

.banner-content h2 { 

 font-size: 80px;
 font-weight: 700;
 text-transform: uppercase;
 color: #fff;
 letter-spacing: 2px;
 margin-top: 0px;
 margin-bottom: 30px;

}

.banner-content ul { 

 padding: 0;
 margin: 0;
 list-style: none;

}

.banner-content ul li { 

 display: inline-block;
 margin: 10px;

}


.intro { 

 background-color: #46bae2;
 text-align: center;
 padding: 80px 0px;

}

.intro h4 { 

 margin-top: 0px;
 font-size: 44px;
 font-weight: 300;
 color: #fff;

}

.intro h6 { 

 margin-top: 15px;
 font-size: 17px;
 font-weight: 700;
 color: #fff;
 letter-spacing: 1px;

}

.intro .border-button { 

 margin-top: 45px;

}


  1. about {
 padding: 0px;
 background-image: url(../img/services-bg.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
 background-attachment: fixed;

}

  1. about .service-item {
 text-align: center;
 margin: 0px -15px;
 padding: 120px 45px;

}

  1. about .service-item h4 {
 margin-top: 45px;
 margin-bottom: 20px;
 font-size: 22px;
 font-weight: 700;
 color: #fff;
 text-transform: uppercase;

}

  1. about .service-item p {
 margin-bottom: 0px;
 color: #fff;

}

  1. about .first-service {
 background-color: rgba(242, 116, 95, 0.75);

}

  1. about .second-service {
 background-color: rgba(54, 62, 80, 0.75);

}

  1. about .third-service {
 background-color: rgba(70, 186, 226, 0.75);

}

  1. about .service-item .icon {
 width: 70px;
 height: 70px;
 display: inline-block;
 text-align: center;
 line-height: 74px;
 background-color: transparent;

}



.what-we-do { 

 background-color: #fff;
 padding-bottom: 80px;

}

.what-we-do .tabs li a { 

 text-decoration: none;
 color: #121212;

}

.what-we-do .tabs .active .list-item { 

 background-color: #f2745f!important;
 color: #fff!important;

}

.what-we-do .tabs .active .list-item .icon { 

 background-color: #fff;

}

.what-we-do .list-item { 

 background-color: #f4f4f4;
 text-align: center;
 padding: 40px 0px;
 margin: 15px 0px;
 transition: all 0.5s;

}

.what-we-do .list-item .icon { 

 width: 90px;
 height: 90px;
 border-radius: 50%;
 display: inline-block;
 text-align: center;
 line-height: 90px;
 background-color: transparent;

}

.what-we-do .list-item h4 { 

 margin-top: 20px;
 margin-bottom: 0px;
 font-size: 17px;
 font-weight: 700;
 text-transform: uppercase;

}

.what-we-do .tab-content-services { 

 margin-top: 60px;

}

.what-we-do .tab-content-services .right-image img { 

 width: 100%;
 overflow: hidden;

}

.what-we-do .tab-content-services .left-text h4 { 

 font-size: 22px;
 text-transform: uppercase;
 font-weight: 700;
 margin-top: 0px;
 margin-bottom: 20px;

}

.what-we-do .tab-content-services .left-text p { 

 color: #7a7a7a;

}

.what-we-do .tab-content-services .left-text .primary-button { 

 margin-top: 35px;
 margin-bottom: 50px;

}



  1. portfolio {
 text-align: center;

}

  1. portfolio .item {
 margin: 0px 5px;

}

.portfolio-section { 

 background-color: #363e50;
 padding-bottom: 80px;

}

  1. portfolio .section-heading h4 {
 color: #fff;

}

  1. portfolio .section-heading h5 {
 font-size:19px;
 color: #aaa;

}

  1. portfolio .portfolio-item img {
 max-width: 100%;
 overflow: hidden;

}

.owl-pagination { 

 margin-top: 30px;
 opacity: 1;
 display: inline-block;

}

.owl-page span { 

 display: block;
 width: 10px;
 height: 10px;
 margin: 0px 5px;
 filter: alpha(opacity=50);
 opacity: 0.5;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
 background: #46bae2;

}


  1. blog {
 background-color: #f4f4f4;

}

  1. blog .section-heading {
 text-align: center;

}

.wrapper { 

 text-align: left;

}

  1. blog .tabs {
 list-style: none;
 margin-top: 0px;

}

  1. blog .tabs li {
 display: block;
 text-align: left;
 margin-bottom: 29px;

}

  1. blog .tabs a {
 display:block;
 text-align: left;
 text-decoration:none;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 color:#121212;
 font-size: 20px;
 font-weight: 700;
 padding: 24px 25px;
 background-color: #fff;
 transition: all 0.3s;
 box-shadow: 0px 0px 10px #cdcdcd;

}

  1. blog .tabs .active {
 background-color: #46bae2;
 color: #fff!important;

}

  1. blog .tabs .active .info-post li {
 color: #fff!important;

}

  1. blog .tabs .active .info-post li i {
 color: #fff!important;

}

  1. first-tab-group {
 margin-top: 0px;
 margin-bottom: 15px;

}

  1. first-tab-group img {
 width: 100%;
 overflow: hidden;

} .tabgroup .text-content { 

 background-color: #fff;
 color: #fff;
 padding: 25px;
 text-align: left;
 margin-top: -10px;
 margin-left: 10px;
 margin-right: 10px;
 position: relative;
 box-shadow: 0px 0px 10px #cdcdcd;

} .tabgroup .text-content h4 { 

 font-size: 20px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 color: #121212;
 margin-top: 0px;
 margin-bottom: 15px;

} .tabgroup .text-content span { 

 font-size: 13px;
 color: #33c1cf;

} .tabgroup .text-content a { 

 font-size: 13px;
 color: #33c1cf;
 text-decoration: none;

} .tabgroup .text-content p { 

 margin-top: 17px;
 color: #7a7a7a;

}

.tabgroup .text-content .primary-button { 

 margin-bottom: 15px;
 margin-top: 30px;

}

.tabgroup .text-content .primary-button a { 

 color: #fff;

}

.clearfix:after { 

 content:"";
 display:table;
 clear:both;

}

  1. blog {
 padding-bottom: 80px;

}

  1. blog .info-post li {
 display: inline;
 margin-right: 15px;

}

  1. blog .info-post li {
 color: #343434;
 font-size: 15px;
 font-weight: 300;
 text-transform: capitalize;

}

  1. blog .info-post li i {
 color: #46bae2;
 margin-right: 5px;

}



  1. contact-us {
 background-color: #fff;
 text-align: left;
 padding-bottom: 100px;

}

  1. contact-us .section-heading {
 color: #121212;

}


  1. contact-us .pop-button {
 margin-top: 30px;

}

  1. contact input {
 border-radius: 0px;
 padding-left: 15px;
 font-size: 15px;
 font-weight: 300;
 color: #7a7a7a;
 background-color: rgba(0, 0, 0, 0.03);
 outline: none;
 border: none;
 box-shadow: none;
 line-height: 50px;
 height: 50px;
 width: 100%;
 margin-bottom: 30px;

}

  1. contact textarea {
 border-radius: 0px;
 padding-left: 15px;
 padding-top: 10px;
 font-size: 15px;
 font-weight: 300;
 color: #232323;
 background-color: rgba(0, 0, 0, 0.03);
 outline: none;
 border: none;
 box-shadow: none;
 height: 165px;
 max-height: 220px;
 width: 100%;
 max-width: 100%;
 margin-bottom: 25px;

}

  1. contact button {
   padding: 13px 20px;
 letter-spacing: 0.5px;
 background-color: #46bae2;
 color: #fff;
 text-transform: uppercase;
 font-size: 13px;
 font-weight: 700;
 text-decoration: none;
 border-radius: 0px;

}


footer { 

 background-color: #363e50;
 padding: 0px 0px;

}

footer p { 

 font-size: 25px;
 text-transform: uppercase;
 color: #fff;
 margin-bottom: 0px;
 padding: 75px 0px;

}

footer img { 

 width:auto;
 height:auto;

} footer a { 

 color: #9CF;

}

footer a:hover { 

 color: #FC6;

}

footer .social-icons { 

 text-align: center;
 padding: 77px 0px;
 margin: 0px;

}

footer .social-icons li { 

 display: inline;
 margin: 0px 10px;

}

footer .social-icons a { 

 color: #a3afc9;
 font-size: 14px;
 text-transform: uppercase;
 font-weight: 700;
 text-decoration: none;
 letter-spacing: 0.3px;
 transition: all 0.5s;

}

footer .social-icons a:hover { 

 color: #46bae2;

}

footer .back-to-top a { 

 text-align: center;
 background-color: #46bae2;
 display: inline-block;
 width: 100%;
 padding: 60px 0px;
 color: #fff;
 font-size: 15px;
 text-transform: uppercase;
 font-weight: 700;
 text-decoration: none;
 letter-spacing: 1px;

}

footer .back-to-top i { 

 display: block;
 font-size: 36px;

}


/* RESPONSIVE */

@media (max-width: 991px){ 

 footer {
   text-align: center;
 }

 footer p {
   padding: 30px 0px 0px 0px;
 }

 footer .social-icons {
   padding: 30px 0px 30px 0px;
 }

 footer .back-to-top a {
   padding: 30px 0px;
 }

}

@media (max-width: 767px){ 

 .navbar-brand {
   float: none;
 }
 
 .menu-first {
   margin: 0px;
   padding: 0px;
   width: 100%;
   text-align: center;
   float: none;
 }

 .menu-first li:first-child {
   border-top: 1px solid #eee;
 }

 .menu-first li {
   border-bottom: 1px solid #eee;
 }

 .menu-first li:last-child {
   border-bottom: none;
 }

 .menu-first li a {
   width: 100%;
   line-height: 50px;
 }

 .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
   border-color: transparent;
 }

 .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
   background-color: #f2745f;
 }

}

@media (max-width: 385px){


}


/* LIGHT BOX */

.slbOverlay, .slbWrapOuter, .slbWrap { 

   position: fixed; top: 0; right: 0; bottom: 0; left: 0;

}

.slbOverlay { 

   overflow: hidden; z-index: 2000; background-color: #000; opacity: 0.7; filter: alpha(opacity=70);
   @include animation(slbOverlay 0.5s);

}

.slbWrapOuter { 

   overflow-x: hidden; overflow-y: auto; z-index: 2010;

}

.slbWrap { 

   position: absolute; text-align: center;

   &:before {

       content: ""; display: inline-block; height: 100%; vertical-align: middle;

   }

}

.slbContentOuter { 

   position: relative; display: inline-block; vertical-align: middle; margin: 0px auto; padding: 0 1em; box-sizing: border-box; z-index: 2020; text-align: left;
   max-width: 100%;

   .slbContentEl & {

       padding: 5em 1em;

   }

}

.slbContent { 

   position: relative;

   .slbContentEl & {

       @include animation(slbEnter 0.3s); background-color: #fff; box-shadow: 0 0.2em 1em rgba(#000, 0.4);

   }

}

.slbImageWrap { 

   @include animation(slbEnter 0.3s);
   position: relative;

   &:after {

       content: ""; position: absolute; left: 0; right: 0; top: 5em; bottom: 5em; display: block; z-index: -1;
       box-shadow: 0 0.2em 1em rgba(#000, 0.6); background-color: #FFF;

   }

}

.slbImage { 

   width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 5em 0; margin: 0 auto;

}

.slbCaption { 

   @include ellipsis;
   font-size: 1.4em; position: absolute; left: 0; right: 0; bottom: 0; padding: em(10,14) 0;
   color: #fff; color: rgba(#fff, 0.7); text-align: center;

}

.slbCloseBtn, .slbArrow { 

   margin:0; padding: 0; border: 0; cursor: pointer; background: none;
   &::-moz-focus-inner { padding: 0; border: 0; }

   &:hover { opacity: 0.5; }
   &:active { opacity: 0.8; }

}

.slbCloseBtn { 

 font-size: 36px;

   $size: 50; $iconSize: 30;

   @include animation(slbEnter 0.3s);

   font-size: em($iconSize,10); width: em($size,$iconSize); height: em($size,$iconSize); line-height: em($size,$iconSize);
   position: absolute; right: em(-10,$iconSize); top: 0;
   color: #fff; color: rgba(#fff, 0.7); text-align: center;

   .slbLoading & {

       display: none;

   }

}

.slbLoadingText { 

   font-size: 1.4em; color: #fff; color: rgba(#fff,0.9);

}

.slbArrows { 

   position: fixed; top: 50%; left: 0; right: 0;

   .slbLoading & {

       display: none;

   }

}

.slbArrow { 

   $size: 50; $iconSize: 8;

   position: absolute; top: 50%; margin-top: em(-1*$size,10); width: em($size,10); height: em($size*2,10);
   opacity: 0.7; text-indent: -999em; overflow: hidden;

   &:before {

       content: ""; position: absolute; top: 50%; left: 50%; margin: em(-$iconSize,10) 0 0 em(-$iconSize,10); border: em($iconSize,10) solid transparent;

   }

   &.next {

       right: 0; &:before { border-left-color: #fff; }

   }

   &.prev {

       left: 0; &:before { border-right-color: #fff;}

   }

}

.slbIframeCont { 

   width: 80em; height: 0; overflow: hidden; padding-top: 56.25%; margin: 5em 0;

}

.slbIframe { 

   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   box-shadow: 0 0.2em 1em rgba(#000, 0.6); background: #000;

}

@include keyframes(slbOverlay) { 

   from { opacity: 0; }
   to { opacity: 0.7; }

}

@include keyframes(slbEnter) { 

   from { opacity: 0; @include transform(translate3d(0, -1em, 0)); }
   to { opacity: 1; @include transform(translate3d(0, 0, 0)); }

}