RandolphLiu (Talk | contribs) |
RandolphLiu (Talk | contribs) |
||
Line 57: | Line 57: | ||
/*NOW START YOUR WON STYLINGS*/ | /*NOW START YOUR WON STYLINGS*/ | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
+ | |||
+ | #universal-wrapper { | ||
+ | margin-top: 70px; | ||
+ | padding: 0; | ||
+ | width: 100; | ||
+ | } | ||
+ | |||
+ | /* HEADER NAVIGATIONAR BAR*/ | ||
#universal-wrapper { | #universal-wrapper { | ||
Line 75: | Line 83: | ||
header { | header { | ||
z-index: 100; | z-index: 100; | ||
− | margin-top: | + | margin-top: 20px; |
padding: 0; | padding: 0; | ||
position: fixed; | position: fixed; | ||
Line 120: | Line 128: | ||
bottom: 0; | bottom: 0; | ||
margin-left: 30%; | margin-left: 30%; | ||
− | border-bottom: 4px solid # | + | border-bottom: 4px solid #f1c40f; |
-webkit-transition: all 0.3s ease-in-out; | -webkit-transition: all 0.3s ease-in-out; | ||
-moz-transition: all 0.3s ease-in-out; | -moz-transition: all 0.3s ease-in-out; | ||
Line 143: | Line 151: | ||
width: 60%; | width: 60%; | ||
margin: 0; | margin: 0; | ||
− | border-bottom: 4px solid # | + | border-bottom: 4px solid #d35400; |
} | } | ||
header .nav-logo { | header .nav-logo { | ||
Line 176: | Line 184: | ||
overflow: hidden; | overflow: hidden; | ||
position: fixed; | position: fixed; | ||
− | /* igem menu bar | + | /* igem menu bar 20px, navigation bar 54px */ |
top: 74px; | top: 74px; | ||
z-index: -100; | z-index: -100; | ||
Line 183: | Line 191: | ||
margin: 0; | margin: 0; | ||
position: relative; | position: relative; | ||
− | /* igem menu bar | + | /* igem menu bar 20px, navigation bar 54px */ |
margin-top: 74px; | margin-top: 74px; | ||
padding: 0; | padding: 0; | ||
Line 197: | Line 205: | ||
.banner-pic:not(.active) { | .banner-pic:not(.active) { | ||
display: none; | display: none; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.banner-text { | .banner-text { | ||
Line 208: | Line 210: | ||
border: none; | border: none; | ||
top: 10%; | top: 10%; | ||
− | width: | + | width: 60%; |
left: 0; right: 0; | left: 0; right: 0; | ||
margin: 0 auto 0 auto; | margin: 0 auto 0 auto; | ||
Line 214: | Line 216: | ||
font-size: 160px; | font-size: 160px; | ||
letter-spacing: 0.4em; | letter-spacing: 0.4em; | ||
− | font-family: "Helvetica Neue"; | + | font-family: Ubuntu,"Helvetica Neue", Arial; |
font-weight: bolder; | font-weight: bolder; | ||
} | } | ||
Line 223: | Line 225: | ||
} | } | ||
#text-d { | #text-d { | ||
− | color: # | + | color: #d35400; |
} | } | ||
#text-e { | #text-e { | ||
− | color: # | + | color: #f1c40f; |
} | } | ||
#text-cose { | #text-cose { | ||
Line 239: | Line 241: | ||
line-height: 1.8em; | line-height: 1.8em; | ||
letter-spacing: 0.1em; | letter-spacing: 0.1em; | ||
− | font-family: "Helvetica Neue"; | + | font-family: Lato,"Helvetica Neue",Arial; |
font-weight: bolder; | font-weight: bolder; | ||
text-align: center; | text-align: center; | ||
Line 252: | Line 254: | ||
height: 80px; | height: 80px; | ||
opacity: 0.8; | opacity: 0.8; | ||
− | bottom: | + | bottom: 5%; |
z-index: 50; | z-index: 50; | ||
+ | } | ||
+ | |||
+ | /* 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 { | ||
+ | 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 { | ||
+ | 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(pic/bg-6.png); | ||
+ | } | ||
+ | #content-block-2 .content-text-wrapper { | ||
+ | float: right; | ||
+ | } | ||
+ | #content-block-2 img { | ||
+ | height: 100%; | ||
+ | } | ||
+ | #content-block-2 { | ||
+ | height: 450px; | ||
+ | } | ||
+ | #content-block-3 { | ||
+ | background-color: #f7f7f7; | ||
+ | } | ||
+ | #content-block-4 { | ||
+ | background-color: #f7f7f7; | ||
+ | } | ||
+ | #content-block-4 .content-title { | ||
+ | margin: 0; | ||
+ | margin-right: 10%; | ||
+ | text-align: right; | ||
+ | } | ||
+ | #content-block-dummy { | ||
+ | |||
} | } | ||
</style> | </style> |
Revision as of 03:21, 7 October 2018