Difference between revisions of "Template:XJTU-China/home.css"

Revision as of 17:31, 13 October 2018 (view source) RandolphLiu (Talk | contribs) ← Older edit		Latest revision as of 01:10, 18 October 2018 (view source) RandolphLiu (Talk | contribs) (minor on sponsor styles)
(20 intermediate revisions by 2 users not shown)
Line 2:		Line 2:
	margin-top: 70px;		margin-top: 70px;
	padding: 0;		padding: 0;
−	width: 100;	+	width: 100%;
	}		}
	#globalWrapper {		#globalWrapper {
Line 10:		Line 10:
	margin: 0;		margin: 0;
	}		}
−
−	/* HEADER NAVIGATIONAR BAR*/
−
	body {		body {
	margin: 0;		margin: 0;
	padding: 0;		padding: 0;
		+	min-width: 1200px;
	}		}
−	a:hover {	+	html {
−	text-decoration: none;	+	font-size: 100%;
−	}	+
−	header {	+
−	z-index: 100;	+
−	margin-top: 15px;	+
−	padding: 0;	+
−	position: fixed;	+
−	width: 100%;	+
−	height: 74px;	+
−	top: 0;	+
−	background: none;	+
−		+
−	}	+
−	.nav-background {	+
−	position: absolute;	+
−	top: 0;	+
−	margin: 0;	+
−	width: 100%;	+
−	height: 100%;	+
−	background: white;	+
−	opacity: 0.4;	+
−	box-shadow: 0 6px 15px #ecf0f1;	+
−	}	+
−		+
−	header .navbar {	+
−	padding: 0;	+
−	margin: 0;	+
−	margin-right: 10%;	+
−	padding: 0;	+
−	float: right;	+
−	display: inline-block;	+
−	}	+
−	header .navbar-nav {	+
−	margin: 0;	+
−	padding: 0;	+
−	list-style-type: none;	+
−	}	+
−	.navbar-nav > li {	+
−	display: inline-block;	+
−	margin: 0;	+
−	}	+
−	.navbar-nav > li > a {	+
−	display: block;	+
−	position: relative;	+
−	color: black;	+
−	text-decoration: none;	+
−	text-align: center;	+
−	line-height: 74px;	+
−	padding: 0 !important;	+
−	margin: 0;	+
−	width: 90px;	+
−	font-family: Tahoma, Arial;	+
−	font-size: 16px;	+
−	}	+
−	.navbar-nav > li > a:before {	+
−	content: "";	+
−	position: absolute;	+
−	width: 0;	+
−	left: 20%;	+
−	bottom: 0;	+
−	margin-left: 30%;	+
−	border-bottom: 4px solid #f1c40f;	+
−	-webkit-transition: all 0.3s ease-in-out;	+
−	-moz-transition: all 0.3s ease-in-out;	+
−	-ms-transition: all 0.3s ease-in-out;	+
−	}	+
−	.navbar-nav > li > a:hover:before {	+
−	margin: 0;	+
−	width: 60%;	+
−	}	+
−	.navbar-nav > li > a:hover:not(.active) {	+
−	background-color: #ecf0f1 !important;	+
−	color: #34495e !important;	+
−	}	+
−	.navbar-nav > li > a:visited {	+
−	color: black;	+
−	}	+
−	.navbar-nav > li > .active:before {	+
−	content: "";	+
−	position: absolute;	+
−	bottom: 0;	+
−	left: 20%;	+
−	width: 60%;	+
−	margin: 0;	+
−	border-bottom: 4px solid #d35400;	+
−	}	+
−	.nav-item > .dropdown-menu {	+
−	color: black;	+
−	text-align: left;	+
−	margin: 0;	+
−	border: 0;border-radius:4px;	+
−	width: 140px;	+
−	}	+
−	.nav-item > .dropdown-menu > li > a {	+
−	line-height: 2.6rem;	+
−	text-decoration: none;	+
−	color: black;	+
−	padding-left: 15%;	+
−	width: 100%;	+
−	}	+
−	.nav-item > .dropdown-menu > li:hover {	+
−	background-color: #ecf0f1;	+
−	}	+
−	.nav-item > .dropdown-menu > li > a:hover {	+
−	color: #34495e;	+
−	}	+
−	.nav-item:hover .dropdown-menu {	+
−	display: block;	+
−	}	+
−	header .nav-head-wrapper {	+
−	display: inline-block;	+
−	height: 54px;	+
−	width: 30%;	+
−	position: relative;	+
−	top: 10px;	+
−	}	+
−	header .nav-logo {	+
−	display: inline-block;	+
−	vertical-align: bottom;	+
−	width: 52px;	+
−	margin: 0 5% 0 5%;	+
−	padding: 0;	+
−	}	+
−	header .nav-head {	+
−	display: inline-block;	+
−	margin: 0 5% 0 5%;	+
−	padding: 0;	+
−	line-height: 54px;	+
−	font-family: Tahoma, Arial;	+
−	font-size: 24px;	+
	}		}
Line 171:		Line 40:
	padding: 0;		padding: 0;
	width: 100%;		width: 100%;
−	height: 650px;	+	height: 600px;
	}		}
	.banner-pic {		.banner-pic {
Line 240:		Line 109:
	margin-top: 76.8px;		margin-top: 76.8px;
	}		}
		+
	/* CONTENT */		/* CONTENT */
	.content-wrapper {		.content-wrapper {
	width: 100%;		width: 100%;
−	padding :0;	+	padding: 0;
	margin: 0;		margin: 0;
	}		}
Line 249:		Line 119:
	width:100%;		width:100%;
	height: 400px;		height: 400px;
		+	/*background-color: #542426;*/
	background-color: white;		background-color: white;
	margin: 0;		margin: 0;
	padding: 0;		padding: 0;
−	border-bottom: 1px solid #ecf0f1;
	overflow: hidden;		overflow: hidden;
	}		}
Line 264:		Line 134:
	font-family: "Helvetica Neue",Arial;		font-family: "Helvetica Neue",Arial;
	text-align: center;		text-align: center;
−	color: #d35400;	+	color: #c23616;
	}		}
	.content-text {		.content-text {
Line 276:		Line 146:
	line-height: 2.4rem;		line-height: 2.4rem;
	text-align: left;		text-align: left;
		+	/*color: #dbba84;*/
	}		}
	.content-text-wrapper {		.content-text-wrapper {
Line 290:		Line 161:
	float: left;		float: left;
	text-align: center;		text-align: center;
		+	}
		+	#content-block-1 {
		+	background-color: #f7f7f7;
	}		}
	#content-block-1 video {		#content-block-1 video {
Line 295:		Line 169:
	display: inline-block;		display: inline-block;
	margin-top: 40px;		margin-top: 40px;
−	}
−	#content-block-1 {
−	background-image: url(https://static.igem.org/mediawiki/2018/0/04/T--XJTU-China--Bg-6.png);
	}		}
	#content-block-2 .content-text-wrapper {		#content-block-2 .content-text-wrapper {
Line 312:		Line 183:
	}		}
	#content-block-3 {		#content-block-3 {
		+	position: relative;
	background-color: #f7f7f7;		background-color: #f7f7f7;
	height: 450px;		height: 450px;
		+	}
		+	#content-block-3 > .content-text-wrapper {
		+	position: absolute;
		+	}
		+	#content-block-3 img {
		+	height: 100%;
		+	float: right;
	}		}
	#content-block-4 {		#content-block-4 {
Line 351:		Line 230:
	}		}
	#content-block-5 {		#content-block-5 {
−	height: 140px;	+	height: 220px;
		+	text-align: center;
		+	background: #ffffff;
	}		}
	#content-block-5 .content-title:before {		#content-block-5 .content-title:before {
	display: none;		display: none;
	}		}
−	footer {	+	.sponsor-img {
−	height: 40px;	+	display: inline-block;
−	background-color: black;	+	position: relative;
−	}	+	top: -20px;
−	.footer-msg {	+	/*opacity: 0;*/
		+	padding: 0 5.0rem 0 5.0rem;
	margin: 0;		margin: 0;
−	color: white;	+	height: 75px;
−	width: 100%;	+	vertical-align: top;
−	line-height: 40px;	+
−	text-align: center;	+
−	font-size: 0.8em;	+
−	font-family: Ubuntu,"Helvetica Neue",Arial;	+
	}		}

---

Latest revision as of 01:10, 18 October 2018

1. universal-wrapper {

 margin-top: 70px;
 padding: 0;
 width: 100%;

}

1. globalWrapper {

 padding: 0;

}

1. mw-content-text p {

 margin: 0;

} body {

 margin: 0;
 padding: 0;
 min-width: 1200px;

} html {

 font-size: 100%;

}

/* BANNER */ .banner-pic-wrapper {

 margin: 0;
 padding: 0;
 width: 100%;
 height: 700px;
 overflow: hidden;
 position: fixed;
 /*margin-top: 74px;*/
 /* igem menu bar 20px, navigation bar 54px */
 top: 0;
 z-index: -100;

} .banner-dummy {

 margin: 0;
 position: relative;
 /* igem menu bar 20px, navigation bar 54px */
 margin-top: 74px;
 padding: 0;
 width: 100%;
 height: 600px;

} .banner-pic {

 margin: 0;
 padding: 0;
 width: 100%;
 position: absolute;

} .banner-pic:not(.active) {

 display: none;

} .banner-text {

 position: absolute;
 border: none;
 top: 20%;
 width: 100%;
 left: 0; right: 0;
 margin: 0 auto 0 auto;
 padding: 0;
 min-height: 160px;
 font-size: 120px;
 letter-spacing: 0.4em;
 font-family: Ubuntu,"Helvetica Neue", Arial;
 font-weight: bolder;
 text-align: center;

} .banner-text span {

 opacity: 0;
 margin: 0;
 padding: 0;

}

1. text-d {

 color: #d35400;

}

1. text-e {

 color: #f1c40f;

}

1. text-cose {

 color: white;

} .banner-sub-text {

 opacity: 0;
 position: absolute;
 padding: 0;
 top: 45%;
 width: 60%;
 margin: 0 20% 0 20%;
 font-size: 32px;
 line-height: 1.4em;
 letter-spacing: 0.1em;
 font-family: Lato,"Helvetica Neue",Arial;
 font-weight: bolder;
 text-align: center;
 color: white;

} .banner-up-arrow {

 display: none;
 position: absolute;
 left: 0; right: 0;
 margin: 0 auto 0 auto;
 width: 120px;
 height: 80px;
 opacity: 0.8;
 bottom: 3%;
 z-index: 50;

} header + div.container {

 margin-top: 76.8px;

}

/* CONTENT */ .content-wrapper {

 width: 100%;
 padding: 0;
 margin: 0;

} .content-block {

 width:100%;
 height: 400px;
 /*background-color: #542426;*/
 background-color: white;
 margin: 0;
 padding: 0;
 overflow: hidden;

} .content-title {

 opacity: 0;
 position: relative;
 top: -40px;
 margin: 0;
 padding: 0.8em 0 0.8em 0;
 font-size: 2.6rem;
 font-family: "Helvetica Neue",Arial;
 text-align: center;
 color: #c23616;

} .content-text {

 opacity: 0;
 position: relative;
 left: -100px;
 margin: 0;
 padding: 0.8em 0 0.8em 0;
 font-family: Ubuntu,"Helvetica Neue",Arial;
 font-size: 1.2rem;
 line-height: 2.4rem;
 text-align: left;
 /*color: #dbba84;*/

} .content-text-wrapper {

 width: 55%;
 height: 100%;
 margin: 0;
 padding: 0 7% 0 7%;
 float: left;

} .content-pic-wrapper {

 width: 45%;
 height: 100%;
 margin: 0;
 float: left;
 text-align: center;

}

1. content-block-1 {

 background-color: #f7f7f7;

}

1. content-block-1 video {

 width: 600px;
 display: inline-block;
 margin-top: 40px;

}

1. content-block-2 .content-text-wrapper {

 float: right;

}

1. content-block-2 img {

 height: 100%;

}

1. content-block-2 {

 height: 450px;

}

1. content-block-2 .content-text {

 left: 100px;

}

1. content-block-3 {

 position: relative;
 background-color: #f7f7f7;
 height: 450px;

}

1. content-block-3 > .content-text-wrapper {

 position: absolute;

}

1. content-block-3 img {

 height: 100%;
 float: right;

}

1. content-block-4 {

 height: 140px;

}

1. content-block-4 .content-title {

 margin: 0;
 width: 40%;
 text-align: center;
 float: right;

}

1. content-block-4 .content-title:before {

 display: none;

}

1. content-block-4 .content-text {

 margin: 0;
 width: 60%;
 text-align: center;
 float: right;
 font-size: 1.7rem;

}

1. content-block-dummy {

 overflow: hidden;
 background: transparent;

}

1. content-block-4-pic {

 display: none;
 height: 650px;
 position: fixed;
 z-index: -1;
 bottom: 0;

}

1. content-pic-team {

 width: 100%;
 margin: 0;
 padding: 0;

}

1. content-block-5 {

 height: 220px;
 text-align: center;
 background: #ffffff;

}

1. content-block-5 .content-title:before {

 display: none;

} .sponsor-img {

 display: inline-block;
 position: relative;
 top: -20px;
 /*opacity: 0;*/
 padding: 0 5.0rem 0 5.0rem;
 margin: 0;
 height: 75px;
 vertical-align: top;

}