Difference between revisions of "Team:GZHS-United/CSS/homestyle"

Revision as of 15:48, 24 September 2017 (view source) Jin Honglei (Talk | contribs) ← Older edit		Revision as of 15:58, 24 September 2017 (view source) Jin Honglei (Talk | contribs) Newer edit →
Line 142:		Line 142:
	height: 61px;		height: 61px;
	width: 38px;		width: 38px;
−	background: transparent url("https://static.igem.org/mediawiki/2017/5/58/T--GZHS-United--home_themes.gif") no-repeat left top;
	margin-top: -45px;		margin-top: -45px;
	}		}
Line 447:		Line 446:
	border: none;		border: none;
	text-indent: 100%;		text-indent: 100%;
−	background: url("https://static.igem.org/mediawiki/2017/8/8e/T--GZHS-United--home_up-arrow.png") no-repeat 0px 0px;
	}		}

---

Revision as of 15:58, 24 September 2017

body a{

   transition:0.5s all;

-webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } input[type="button"]{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; }

h1,h2,h3,h4,h5,h6{ padding:0 0; margin:0 0; } p{ padding:0 0; margin:0 0; } ul{ padding:0 0; margin:0 0; } body{ padding:0 0; margin:0 0; font-family: 'Open Sans', sans-serif;} .logo a {

 font-size: 5em;
 text-transform: uppercase;
 color: #2A579A;
 font-weight: 900;
 text-decoration: none;
 font-family: 'Roboto Slab', serif;

} .logo a:hover{

 color: #fff;

} /*--- slider-css --*/ .slider { position: relative; } .rslides {

 position: relative;
 list-style: none;
 overflow: hidden;
 width: 100%;
 padding: 0;
 margin: 0;
 }

.rslides li {

 -webkit-backface-visibility: hidden;
 position: absolute;
 display: none;
 width: 100%;
 left: 0;
 top: 0;
 }

.rslides li:first-child {

 position: relative;
 display: block;
 float: left;
 }

.rslides img {

 display: block;
 height: auto;
 float: left;
 width: 100%;
 border: 0;
}

.caption{ position: absolute; text-align:center; border-top: 7px solid #2A579A;

 	border-bottom: 7px solid #2A579A;

} .caption h3{ color: #2A579A; font-weight: 700; font-size: 2.5em; text-transform: uppercase; margin-bottom: 0.5em; } a.morebtn{ background:#3D3D3D; padding:0.8em 0; display:block; font-size:0.875em; text-transform:uppercase; color:#FFF; width:20%; margin:0 auto; transition:0.5s all ease; -webkit-transition:0.5s all ease; -moz-transition:0.5s all ease; -o-transition:0.5s all ease; -ms-transition:0.5s all ease; } a.morebtn:hover{ background:#585686; } .callbacks_tabs a:after { content: "\f111"; font-size: 0; font-family: FontAwesome; visibility: visible; display: block; height: 12px; width: 12px; display: inline-block; border: 2px solid #747474; } .callbacks_here a:after{ border: 2px solid #FFF; } .callbacks_tabs a{ visibility:hidden; } .callbacks_tabs li{ display:inline-block; } ul.callbacks_tabs.callbacks1_tabs { position: absolute; bottom: 14px; z-index: 999; left: 13px; } .callbacks_nav {

 position: absolute;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 top: 50%;
 left: 0;
 opacity: 0.7;
 z-index: 3;
 text-indent: -9999px;
 overflow: hidden;
 text-decoration: none;
 height: 61px;
 width: 38px;
 margin-top: -45px;
 }

.callbacks_nav.next {

 left: auto;
 background-position: right top;
 right: 0;
}

.caption { width: 45%; top: 31%; left: 22.5%; }

.callbacks_nav { top: 63%;

}

.caption h3{ font-size:3em; } /*-- sticky-nav --*/ .fixed{ position: fixed; top: 0; width: 100%; margin: 0 auto; left:0; z-index: 999; } /*-- sticky-nav --*/ .fixed-header{ background:#2A579A; text-align: center; padding: 2.5em 0; } .top-menu ul li{ display: inline-block; } .top-menu ul li a{

 font-size: 1.5em;
 text-decoration: none;
 margin: 0 1em;
 color: #fff;
 font-family: 'Roboto Slab', serif;

} .top-menu ul li a:hover {

 color: #323232;

} .header-bottom {

 border-bottom: 2px solid #78b907;

} span.menu {

 display: none;

} nav a { position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; }

nav a:hover, nav a:focus { outline: none; } /* Effect 5: same word slide in */ .cl-effect-5 a { overflow: hidden; }

.cl-effect-5 a span { padding:2px; position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }

.cl-effect-5 a span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 700; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

.cl-effect-5 a:hover span, .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } .about-section {

 padding: 4em 0;
 background: #2d4652 repeat;
}

.about-section h3 {

 font-size: 2.5em;
 text-transform: uppercase;
 color: #fff;
 font-weight: 600;
  margin: 0 0 1em 0.5em;
   font-family: 'Roboto Slab', serif;

} .view {

  width: 350px;
  height:320px;
  margin: 10px;
  float: left;
  border: 10px solid #fff;
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  background: #fff no-repeat center center;
    border-radius: 20px;

} .view .mask,.view .content {

  width: 350px;
  height: 320px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
    border-radius: 20px;

} .view img {

  display: block;
  position: relative;

} .view h2 {

  text-transform: uppercase;
  color: #78b907;
  text-align: center;
  position: relative;
  font-size: 25px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  margin: 20px 0 0 0;
  font-weight: 600;

} .view p {

 font-family: Georgia, serif;
 font-style: italic;
 font-size: 20px;
 position: relative;
 color: #fff;
 padding: 15px 20px 15px;
 text-align: center;

} .view a.info {

  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 1px #000;
  -moz-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;

} .view a.info: hover {

  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
  

} .view img {

 width: 100%;
 height: 300px;

} .menu-section{

  padding: 4em 0;
  background: #ffffff;

} .menu-section h3 {

 font-size: 2.5em;
 text-transform: uppercase;
 color: #000;
 font-weight: 600;
 margin: 0 0 1em 0.5em;
   font-family: 'Roboto Slab', serif;

} .manu-grid {

 position: relative;

} .menu-info { position: absolute; width: 90%; top:76%; left:15px; display: none; background: rgba(0, 0, 0, 0.5); } .menu-grid:hover div.menu-info {

 display: block;

} .menu-info h4 {

 font-size: 2.5em;
 text-align: right;
 color:#78b907;
 padding: 0.5em 1em 0;
 font-weight: 600;

} .menu-info h5 {

 font-size: 1.5em;
 color: #fff;
 padding: 1em 0.3em;
 text-transform:uppercase;

} .our_work{

 padding-bottom: 4em;

} .our_work h3 {

 font-size: 2.5em;
 font-weight: 600;
 margin: 0 0 1em 0.5em;
 font-family: 'Roboto Slab', serif;

} .our_work p {

 font-size: 1.2em;
 margin: 0 0 1em 0.5em;
 font-family: 'Roboto Slab', serif;

} .contact-section {

 padding: 4em 0;
 min-height: 400px;
}

.contact-section h3 {

 font-size: 2.5em;
 text-transform: uppercase;
 color: #fff;
 font-weight: 600;
 margin: 0 0 1em 0.5em;
 font-family: 'Roboto Slab', serif;

} .contactgrid {

padding-bottom: 2em;

} .contactgrid input[type="text"] { width: 100%; background: none; outline: none; border: none; border-bottom: 1.5px solid#05b6ea;

  font-size: 1.5em;
 color: #05b6ea;
 text-transform: capitalize;
 padding: 10px 0;
 text-align: left;

}

.contactgrid1 textarea { width: 100%; background: none; outline: none; border: none; resize: none; border-bottom: 1.5px solid#05b6ea; font-size: 1.5em; color: #05b6ea; text-transform: capitalize; padding: 10px 0; height: 2.8em; } .contactgrid2 {

 padding: 1em 0 0 12em;

} .contactgrid2 input[type="button"] {

 color: #fb4b4b;
 background: none;
 border: none;
 font-size: 1.5em;
 outline: none;
 text-transform: uppercase;
 padding: 1em 1em;
 margin: 40px 0 0 40px;
 border: 1.5px solid;

} .contactgrid2 input[type="button"]:hover { color: #d5d6d7; }

1. toTop {

display: none; text-decoration: none; position: fixed; bottom: 10px; right: 10px; overflow: hidden; width: 48px; height: 48px; border: none; text-indent: 100%; }