Difference between revisions of "Template:XJTU-China"

m
(move css to individual page)
Line 46: Line 46:
 
   body {background-color:white; }
 
   body {background-color:white; }
 
   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
  .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 
  
 
</style>
 
</style>
Line 57: Line 55:
 
/*NOW START YOUR WON STYLINGS*/
 
/*NOW START YOUR WON STYLINGS*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
#universal-wrapper {
 
  margin-top: 70px;
 
  padding: 0;
 
  width: 100;
 
}
 
#globalWrapper {
 
  padding: 0;
 
}
 
#mw-content-text p {
 
  margin: 0;
 
}
 
 
/* HEADER NAVIGATIONAR BAR*/
 
 
body {
 
  margin: 0;
 
  padding: 0;
 
}
 
a:hover {
 
  text-decoration: none;
 
}
 
header {
 
  z-index: 100;
 
  margin-top: 15px;
 
  padding: 0;
 
  position: fixed;
 
  width: 100%;
 
  top: 0;
 
  background: white;
 
  opacity: 0.85;
 
  box-shadow: 0 6px 15px #ecf0f1;
 
}
 
header nav {
 
  margin: 0;
 
  margin-right: 10%;
 
  padding: 0;
 
  float: right;
 
  display: inline-block;
 
}
 
header .navbar{
 
  padding: 0;
 
}
 
header nav ul {
 
  margin: 0;
 
  padding: 0;
 
  list-style-type: none;
 
}
 
header nav li {
 
  display: inline-block;
 
  margin: 0;
 
}
 
header 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;
 
}
 
header 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;
 
}
 
header nav li a:hover:before {
 
  margin: 0;
 
  width: 60%;
 
}
 
header nav li a:hover:not(.active) {
 
  background-color: #ecf0f1 !important;
 
  color: #34495e !important;
 
}
 
header nav li a:visited {
 
  color: black;
 
}
 
header nav .active:before {
 
  content: "";
 
  position: absolute;
 
  bottom: 0;
 
  left: 20%;
 
  width: 60%;
 
  margin: 0;
 
  border-bottom: 4px solid #d35400;
 
}
 
nav.navbar > div > ul > li .dropdown-menu {
 
  margin: 0;
 
  padding-left: 10px;
 
  border: 0;border-radius:0;
 
}
 
nav.navbar > div > ul > li: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;
 
}
 
 
 
/* BANNER */
 
.banner-pic-wrapper {
 
  margin: 0;
 
  padding: 0;
 
  width: 100%;
 
  height: 650px;
 
  overflow: hidden;
 
  position: fixed;
 
  /* igem menu bar 20px, navigation bar 54px */
 
  top: 20px;
 
  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: 10%;
 
  width: 60%;
 
  left: 0; right: 0;
 
  margin: 0 auto 0 auto;
 
  padding: 0;
 
  min-height: 160px;
 
  font-size: 160px;
 
  letter-spacing: 0.4em;
 
  font-family: Ubuntu,"Helvetica Neue", Arial;
 
  font-weight: bolder;
 
}
 
.banner-text span {
 
  display: none;
 
  margin: 0;
 
  padding: 0;
 
}
 
#text-d {
 
  color: #d35400;
 
}
 
#text-e {
 
  color: #f1c40f;
 
}
 
#text-cose {
 
  color: white;
 
}
 
.banner-sub-text {
 
  display: none;
 
  position: absolute;
 
  padding: 0;
 
  top: 40%;
 
  width: 100%;
 
  font-size: 46px;
 
  line-height: 1.8em;
 
  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;
 
}
 
#content-block-1 video {
 
  width: 600px;
 
  display: inline-block;
 
  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 {
 
  float: right;
 
}
 
#content-block-2 img {
 
  height: 100%;
 
}
 
#content-block-2 {
 
  height: 450px;
 
}
 
#content-block-2 .content-text {
 
  left: 100px;
 
}
 
#content-block-3 {
 
  background-color: #f7f7f7;
 
  height: 450px;
 
}
 
#content-block-4 {
 
  height: 140px;
 
}
 
#content-block-4 .content-title {
 
  margin: 0;
 
  width: 40%;
 
  text-align: center;
 
  float: right;
 
}
 
#content-block-4 .content-text {
 
  margin: 0;
 
  width: 60%;
 
  text-align: center;
 
  float: right;
 
  font-size: 1.7rem;
 
}
 
#content-block-dummy {
 
  overflow: hidden;
 
  background: transparent;
 
}
 
#content-block-4-pic {
 
  display: none;
 
  height: 650px;
 
  position: fixed;
 
  z-index: -1;
 
  bottom: 0;
 
}
 
#content-pic-team {
 
  width: 100%;
 
  height: 100%;
 
  margin: 0;
 
  padding: 0;
 
}
 
#content-block-5 {
 
  height: 140px;
 
}
 
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;
 
}
 
 
</style>
 
</style>

Revision as of 17:23, 13 October 2018