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

Revision as of 15:44, 24 September 2017 (view source) Jin Honglei (Talk | contribs) ← Older edit		Latest revision as of 13:12, 31 October 2017 (view source) Jin Honglei (Talk | contribs)
(32 intermediate revisions by the same user not shown)
Line 1:		Line 1:
	body a{		body a{
	transition:0.5s all;		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;		-webkit-transition:0.5s all;
	-moz-transition:0.5s all;		-moz-transition:0.5s all;
Line 31:		Line 24:
	font-family: 'Open Sans', sans-serif;}		font-family: 'Open Sans', sans-serif;}
	.logo a {		.logo a {
−	font-size: 5em;	+	font-size: 4em;
	text-transform: uppercase;		text-transform: uppercase;
	color: #2A579A;		color: #2A579A;
Line 78:		Line 71:
	border-top: 7px solid #2A579A;		border-top: 7px solid #2A579A;
	border-bottom: 7px solid #2A579A;		border-bottom: 7px solid #2A579A;
		+	padding-top: 25px;
		+	width: 45%;
		+	top: 31%;
		+	left: 27.5%;
	}		}
	.caption h3{		.caption h3{
	color: #2A579A;		color: #2A579A;
	font-weight: 700;		font-weight: 700;
−	font-size: 2.5em;	+	font-size: 2em;
	text-transform: uppercase;		text-transform: uppercase;
	margin-bottom: 0.5em;		margin-bottom: 0.5em;
Line 129:		Line 126:
	z-index: 999;		z-index: 999;
	left: 13px;		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;
−	background: transparent url("https://static.igem.org/mediawiki/2017/5/58/T--GZHS-United--home_themes.gif?action=raw") no-repeat left top;
−	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 --*/		/*-- sticky-nav --*/
Line 175:		Line 140:
	background:#2A579A;		background:#2A579A;
	text-align: center;		text-align: center;
−	padding: 2.5em 0;	+	padding: 1.5em 0 0.6em 0;
	}		}
	.top-menu ul li{		.top-menu ul li{
Line 183:		Line 148:
	font-size: 1.5em;		font-size: 1.5em;
	text-decoration: none;		text-decoration: none;
−	margin: 0 1em;	+	margin: 0 0.5em;
−	color: #fff;	+
	font-family: 'Roboto Slab', serif;		font-family: 'Roboto Slab', serif;
	}		}
Line 221:		Line 185:
	position: relative;		position: relative;
	display: inline-block;		display: inline-block;
		+	color: #fff;
	-webkit-transition: -webkit-transform 0.3s;		-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;		-moz-transition: -moz-transform 0.3s;
Line 256:		Line 221:
	.view {		.view {
	width: 350px;		width: 350px;
−	height:320px;	+	height:250px;
	margin: 10px;		margin: 10px;
	float: left;		float: left;
Line 294:		Line 259:
	font-weight: 600;		font-weight: 600;
	}		}
−	.view p {	+	#view1 p, #view2 p, #view3 p {
	font-family: Georgia, serif;		font-family: Georgia, serif;
	font-style: italic;		font-style: italic;
Line 322:		Line 287:
	.view img {		.view img {
	width: 100%;		width: 100%;
−	height: 300px;	+	height: 250px;
	}		}
	.menu-section{		.menu-section{
Line 364:		Line 329:
	}		}
	.our_work{		.our_work{
−	padding-bottom: 4em;	+	padding-bottom: 1em;
	}		}
	.our_work h3 {		.our_work h3 {
Line 372:		Line 337:
	font-family: 'Roboto Slab', serif;		font-family: 'Roboto Slab', serif;
	}		}
−	.our_work p {	+	#our_work p {
		+	text-align:left;
	font-size: 1.2em;		font-size: 1.2em;
	margin: 0 0 1em 0.5em;		margin: 0 0 1em 0.5em;
	font-family: 'Roboto Slab', serif;		font-family: 'Roboto Slab', serif;
	}		}
−	.contact-section {	+	@media (max-width: 1200px) and (min-width: 1000px){
−	padding: 4em 0;	+	.top-menu ul li a {
−	background-size:cover;	+	font-size: 1.2em;
−	min-height: 400px;	+	}
−	}	+	.view {
−	.contact-section h3 {	+	width: 290px;
−	font-size: 2.5em;	+	height: 207px;
−	text-transform: uppercase;	+	margin: 5px;
−	color: #fff;	+	}
−	font-weight: 600;	+	.view img {
−	margin: 0 0 1em 0.5em;	+	width: 100%;
−	font-family: 'Roboto Slab', serif;	+	height: 207px;
		+	}
		+	.logo a {
		+	font-size: 3.5em;
		+	}
		+	.caption h3 {
		+	font-size: 1.5em;
		+	}
		+	.view .mask,.view .content {
		+	width: 290px;
		+	height: 265px;
		+	}
	}		}
−	.contactgrid {	+	@media (max-width: 999px){
−	padding-bottom: 2em;	+	.top-menu ul li a {
−	}	+	font-size: 0.9em;
−	.contactgrid input[type="text"] {	+	}
−	width: 100%;	+	.view {
−	background: none;	+	width: 220px;
−	outline: none;	+	height: 157px;
−	border: none;	+	margin: 5px;
−	border-bottom: 1.5px solid#05b6ea;	+	}
−	font-size: 1.5em;	+	.view img {
−	color: #05b6ea;	+	width: 100%;
−	text-transform: capitalize;	+	height: 157px;
−	padding: 10px 0;	+	}
−	text-align: left;	+	.logo a {
−	}	+	font-size: 2.3em;
−		+	}
−	.contactgrid1 textarea  {	+	.caption h3 {
−	width: 100%;	+	font-size: 1.5em;
−	background: none;	+	}
−	outline: none;	+	.view .mask,.view .content {
−	border: none;	+	width: 290px;
−	resize: none;	+	height: 265px;
−	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;	+
−	}	+
−	#toTop {	+
−	display: none;	+
−	text-decoration: none;	+
−	position: fixed;	+
−	bottom: 10px;	+
−	right: 10px;	+
−	overflow: hidden;	+
−	width: 48px;	+
−	height: 48px;	+
−	border: none;	+
−	text-indent: 100%;	+
−	background: url("https://static.igem.org/mediawiki/2017/8/8e/T--GZHS-United--home_up-arrow.png") no-repeat 0px 0px;	+
	}		}

---

Latest revision as of 13:12, 31 October 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; }

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: 4em;
 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;
   padding-top: 25px;

width: 45%; top: 31%; left: 27.5%; } .caption h3{ color: #2A579A; font-weight: 700; font-size: 2em; 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; } /*-- 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: 1.5em 0 0.6em 0; } .top-menu ul li{ display: inline-block; } .top-menu ul li a{

 font-size: 1.5em;
 text-decoration: none;
 margin: 0 0.5em;
 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;

       color: #fff;

-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:250px;
  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;

}

1. view1 p, #view2 p, #view3 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: 250px;

} .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: 1em;

} .our_work h3 {

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

}

1. our_work p {

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

} @media (max-width: 1200px) and (min-width: 1000px){ .top-menu ul li a { font-size: 1.2em; } .view { width: 290px; height: 207px; margin: 5px; } .view img {

   width: 100%;
   height: 207px; 

} .logo a { font-size: 3.5em; } .caption h3 { font-size: 1.5em; } .view .mask,.view .content { width: 290px; height: 265px; } } @media (max-width: 999px){ .top-menu ul li a { font-size: 0.9em; } .view { width: 220px; height: 157px; margin: 5px; } .view img {

   width: 100%;
   height: 157px; 

} .logo a { font-size: 2.3em; } .caption h3 { font-size: 1.5em; } .view .mask,.view .content { width: 290px; height: 265px; } }