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

Revision as of 19:41, 13 October 2018 (view source) RandolphLiu (Talk | contribs) m ← Older edit		Revision as of 01:39, 14 October 2018 (view source) RandolphLiu (Talk | contribs) (fix navbar structure) Newer edit →
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 NAVIGATIONAR BAR*/
	header {		header {
−	z-index: 100;	+	z-index: 1;
	margin-top: 15px;		margin-top: 15px;
	padding: 0;		padding: 0;
Line 29:		Line 31:
	top: 0;		top: 0;
	background: none;		background: none;
−		+	min-width: 1200px;
	}		}
−	.nav-background {	+	.navbar {
−	position: absolute;	+	opacity: 0.75;
−	top: 0;	+	border: 0;
−	margin: 0;	+	border-radius: 0;
−	width: 100%;	+	background-color: white;
−	height: 100%;	+
−	background: white;	+
−	opacity: 0.4;	+
	box-shadow: 0 6px 15px #ecf0f1;		box-shadow: 0 6px 15px #ecf0f1;
	}		}
−		+	#top-nav {
−	header .navbar {	+	border-radius: 0;
−	padding: 0;	+
−	margin: 0;	+
−	margin-right: 10%;	+
−	padding: 0;	+
−	float: right;	+
−	display: inline-block;	+
−	}	+
−	#universal-wrapper .navbar-nav {	+
−	margin: 0;	+
−	padding: 0;	+
	list-style-type: none;		list-style-type: none;
	}		}
−	.navbar-nav > li {	+	#top-nav .nav-link {
−	display: inline-block;	+
−	margin: 0;	+
−	}	+
−	.navbar-nav > li > a {	+
−	display: block;	+
−	position: relative;	+
	color: black;		color: black;
	text-decoration: none;		text-decoration: none;
Line 72:		Line 55:
	font-size: 16px;		font-size: 16px;
	}		}
−	.navbar-nav > li > a:before {	+	.nav-link:before {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 84:		Line 67:
	-ms-transition: all 0.3s ease-in-out;		-ms-transition: all 0.3s ease-in-out;
	}		}
−	.navbar-nav > li > a:hover:before {	+	.nav-link:hover:before {
	margin: 0;		margin: 0;
	width: 60%;		width: 60%;
	}		}
−	.navbar-nav > li > a:hover:not(.active) {	+	.nav-link:hover:not(.active) {
	background-color: #ecf0f1 !important;		background-color: #ecf0f1 !important;
	color: #34495e !important;		color: #34495e !important;
	}		}
−	.navbar-nav > li > a:visited {	+	.nav-link:visited {
	color: black;		color: black;
	}		}
−	.navbar-nav > li > .active:before {	+	.nav-item > .active:before {
	content: "";		content: "";
	position: absolute;		position: absolute;
Line 111:		Line 94:
	width: 140px;		width: 140px;
	}		}
−	#nav-hp > .dropdown-menu {	+	#nav-item-hp > .dropdown-menu {
	width: 220px;		width: 220px;
	}		}
Line 130:		Line 113:
	display: block;		display: block;
	}		}
−	header .nav-head-wrapper {	+	.navbar-header {
−	display: inline-block;	+	/*display: inline-block;*/
	height: 54px;		height: 54px;
−	width: 30%;	+	width: 40%;
		+	min-width: 300px;
	position: relative;		position: relative;
	top: 10px;		top: 10px;
	}		}
−	header .nav-logo {	+	.navbar-header > .nav-logo {
	display: inline-block;		display: inline-block;
	vertical-align: top;		vertical-align: top;
Line 144:		Line 128:
	padding: 0;		padding: 0;
	}		}
−	header .nav-head {	+	.navbar-header > .nav-head {
	display: inline-block;		display: inline-block;
	margin: 0 5% 0 5%;		margin: 0 5% 0 5%;
Line 152:		Line 136:
	font-size: 24px;		font-size: 24px;
	}		}
		+

---

Revision as of 01:39, 14 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%;

}

/* HEADER NAVIGATIONAR BAR*/ header {

 z-index: 1;
 margin-top: 15px;
 padding: 0;
 position: fixed;
 width: 100%;
 height: 74px;
 top: 0;
 background: none;
 min-width: 1200px;

} .navbar {

 opacity: 0.75;
 border: 0;
 border-radius: 0;
 background-color: white;
 box-shadow: 0 6px 15px #ecf0f1;

}

1. top-nav {

 border-radius: 0;
 list-style-type: none;

}

1. top-nav .nav-link {

 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;

} .nav-link: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;

} .nav-link:hover:before {

 margin: 0;
 width: 60%;

} .nav-link:hover:not(.active) {

 background-color: #ecf0f1 !important;
 color: #34495e !important;

} .nav-link:visited {

 color: black;

} .nav-item > .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;

}

1. nav-item-hp > .dropdown-menu {

 width: 220px;

} .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;

} .navbar-header {

 /*display: inline-block;*/
 height: 54px;
 width: 40%;
 min-width: 300px;
 position: relative;
 top: 10px;

} .navbar-header > .nav-logo {

 display: inline-block;
 vertical-align: top;
 width: 52px;
 margin: 0 5% 0 5%;
 padding: 0;

} .navbar-header > .nav-head {

 display: inline-block;
 margin: 0 5% 0 5%;
 padding: 0;
 line-height: 54px;
 font-family: Tahoma, Arial;
 font-size: 24px;

}

/* 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: 650px;

} .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: white;
 margin: 0;
 padding: 0;
 border-bottom: 1px solid #ecf0f1;
 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: #d35400;

} .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;

} .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 video {

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

}

1. content-block-1 {

 background-image: url();

}

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 {

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

}

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

}

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

 display: none;

} footer {

 height: 40px;
 background-color: black;

} .footer-msg {

 margin: 0;
 color: white;
 width: 100%;
 line-height: 40px;
 text-align: center;
 font-size: 0.8em;
 font-family: Ubuntu,"Helvetica Neue",Arial;

}