(Prototype team page) |
|||
(3 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | {{KCL_UK}} | + | {{:Team:KCL_UK/Templates/Header}} |
<html> | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <meta name="viewport" content="width= device-width, initial-scale=1"> | ||
+ | <title>KCL iGEM</title> | ||
− | |||
− | < | + | <style> |
− | + | @import url('https://fonts.googleapis.com/css?family=Raleway'); | |
− | + | #top_title {display:none;} | |
− | + | ||
+ | #HQ_page p { | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | font-size: 1em; | ||
+ | text-align: center; | ||
− | + | } | |
− | + | ||
− | + | #HQ_page h1,h2,h3 { | |
− | + | font-family: 'Raleway', sans-serif; | |
− | + | font-weight: 300; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | #content, #HQ_page { | |
+ | animation : none; | ||
+ | animation-delay : 0; | ||
+ | animation-direction : normal; | ||
+ | animation-duration : 0; | ||
+ | animation-fill-mode : none; | ||
+ | animation-iteration-count : 1; | ||
+ | animation-name : none; | ||
+ | animation-play-state : running; | ||
+ | animation-timing-function : ease; | ||
+ | backface-visibility : visible; | ||
+ | background : 0; | ||
+ | background-attachment : scroll; | ||
+ | background-clip : border-box; | ||
+ | background-color : transparent; | ||
+ | background-image : none; | ||
+ | background-origin : padding-box; | ||
+ | background-position : 0 0; | ||
+ | background-position-x : 0; | ||
+ | background-position-y : 0; | ||
+ | background-repeat : repeat; | ||
+ | background-size : auto auto; | ||
+ | border : 0; | ||
+ | border-style : none; | ||
+ | border-width : medium; | ||
+ | border-color : inherit; | ||
+ | border-bottom : 0; | ||
+ | border-bottom-color : inherit; | ||
+ | border-bottom-left-radius : 0; | ||
+ | border-bottom-right-radius : 0; | ||
+ | border-bottom-style : none; | ||
+ | border-bottom-width : medium; | ||
+ | border-collapse : separate; | ||
+ | border-image : none; | ||
+ | border-left : 0; | ||
+ | border-left-color : inherit; | ||
+ | border-left-style : none; | ||
+ | border-left-width : medium; | ||
+ | border-radius : 0; | ||
+ | border-right : 0; | ||
+ | border-right-color : inherit; | ||
+ | border-right-style : none; | ||
+ | border-right-width : medium; | ||
+ | border-spacing : 0; | ||
+ | border-top : 0; | ||
+ | border-top-color : inherit; | ||
+ | border-top-left-radius : 0; | ||
+ | border-top-right-radius : 0; | ||
+ | border-top-style : none; | ||
+ | border-top-width : medium; | ||
+ | bottom : auto; | ||
+ | box-shadow : none; | ||
+ | box-sizing : content-box; | ||
+ | caption-side : top; | ||
+ | clear : none; | ||
+ | clip : auto; | ||
+ | color : inherit; | ||
+ | columns : auto; | ||
+ | column-count : auto; | ||
+ | column-fill : balance; | ||
+ | column-gap : normal; | ||
+ | column-rule : medium none currentColor; | ||
+ | column-rule-color : currentColor; | ||
+ | column-rule-style : none; | ||
+ | column-rule-width : none; | ||
+ | column-span : 1; | ||
+ | column-width : auto; | ||
+ | content : normal; | ||
+ | counter-increment : none; | ||
+ | counter-reset : none; | ||
+ | cursor : auto; | ||
+ | direction : ltr; | ||
+ | display : inline; | ||
+ | empty-cells : show; | ||
+ | float : none; | ||
+ | font : normal; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | font-size : medium; | ||
+ | font-style : normal; | ||
+ | font-variant : normal; | ||
+ | font-weight : normal; | ||
+ | height : auto; | ||
+ | hyphens : none; | ||
+ | left : auto; | ||
+ | letter-spacing : normal; | ||
+ | line-height : normal; | ||
+ | list-style : none; | ||
+ | list-style-image : none; | ||
+ | list-style-position : outside; | ||
+ | list-style-type : disc; | ||
+ | margin : 0; | ||
+ | margin-bottom : 0; | ||
+ | margin-left : 0; | ||
+ | margin-right : 0; | ||
+ | margin-top : 0; | ||
+ | max-height : none; | ||
+ | max-width : none; | ||
+ | min-height : 0; | ||
+ | min-width : 0; | ||
+ | opacity : 1; | ||
+ | orphans : 0; | ||
+ | outline : 0; | ||
+ | outline-color : invert; | ||
+ | outline-style : none; | ||
+ | outline-width : medium; | ||
+ | overflow : visible; | ||
+ | overflow-x : visible; | ||
+ | overflow-y : visible; | ||
+ | padding : 0; | ||
+ | padding-bottom : 0; | ||
+ | padding-left : 0; | ||
+ | padding-right : 0; | ||
+ | padding-top : 0; | ||
+ | page-break-after : auto; | ||
+ | page-break-before : auto; | ||
+ | page-break-inside : auto; | ||
+ | perspective : none; | ||
+ | perspective-origin : 50% 50%; | ||
+ | position : static; | ||
+ | /* May need to alter quotes for different locales (e.g fr) */ | ||
+ | quotes : '\201C' '\201D' '\2018' '\2019'; | ||
+ | right : auto; | ||
+ | tab-size : 8; | ||
+ | table-layout : auto; | ||
+ | text-align : inherit; | ||
+ | text-align-last : auto; | ||
+ | text-decoration : none; | ||
+ | text-decoration-color : inherit; | ||
+ | text-decoration-line : none; | ||
+ | text-decoration-style : solid; | ||
+ | text-indent : 0; | ||
+ | text-shadow : none; | ||
+ | text-transform : none; | ||
+ | top : auto; | ||
+ | transform : none; | ||
+ | transform-style : flat; | ||
+ | transition : none; | ||
+ | transition-delay : 0s; | ||
+ | transition-duration : 0s; | ||
+ | transition-property : none; | ||
+ | transition-timing-function : ease; | ||
+ | unicode-bidi : normal; | ||
+ | vertical-align : baseline; | ||
+ | visibility : visible; | ||
+ | white-space : normal; | ||
+ | widows : 0; | ||
+ | width : auto; | ||
+ | word-spacing : normal; | ||
+ | z-index : auto; | ||
+ | } | ||
− | + | h1 { | |
− | + | display: block; | |
− | + | font-size: 2em; | |
− | + | margin-top: 0.67em; | |
+ | margin-bottom: 0.67em; | ||
+ | margin-left: 0; | ||
+ | margin-right: 0; | ||
+ | } | ||
− | + | a:hover {text-decoration:none;} | |
− | + | a:visited { | |
− | + | color:red; | |
− | < | + | text-decoration:none; |
− | < | + | } |
− | + | ||
− | </ | + | .dropdown-nav-buttonmasks:visited { |
+ | color:white; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .standalonenav:visited { | ||
+ | color:white; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | body{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | max-width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | width: 95%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | .fixcontainer { | ||
+ | width:100%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | /*typography------------------------------*/ | ||
+ | .title { | ||
+ | font-weight: 900; | ||
+ | font-weight: bold; | ||
+ | font-size: 3.2rem; | ||
+ | margin-bottom: 1em; | ||
+ | padding-bottom: 2em; | ||
+ | text-emphasis: bold; | ||
+ | } | ||
+ | .smallertitle { | ||
+ | font-weight: 900; | ||
+ | font-weight: bold; | ||
+ | font-size: 1.4rem; | ||
+ | margin-bottom: 1em; | ||
+ | padding-top: 3.1em; | ||
+ | padding-bottom: 0em; | ||
+ | text-emphasis: bold; | ||
+ | |||
+ | } | ||
+ | h1 { | ||
+ | font-weight: 300; | ||
+ | font-size: 2.5em; | ||
+ | text-transform: capitalize; | ||
+ | margin-top: 1em; | ||
+ | } | ||
+ | .title span { | ||
+ | margin-top: 1em; | ||
+ | font-weight: 200; | ||
+ | display: block; | ||
+ | font-size: .9em; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*buttonmasks -------------------------------*/ | ||
+ | .buttonmask { | ||
+ | display: inline-block; | ||
+ | font-size: 1.25rem; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | border-width: 2px; | ||
+ | border-style: solid; | ||
+ | padding: .5em 1.75em; | ||
+ | |||
+ | } | ||
+ | .buttonmask} | ||
+ | |||
+ | .buttonmask-small { | ||
+ | font-size: .9rem; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | .buttonmask-accent { | ||
+ | color: #FF0000; | ||
+ | border-color: #FF0000; | ||
+ | } | ||
+ | |||
+ | .buttonmask-accent:hover { | ||
+ | background: #FF0000; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*header------------------------------*/ | ||
+ | |||
+ | header { | ||
+ | background-color: rgba(0,0,0,.75); | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | max-height: 7em; | ||
+ | } | ||
+ | |||
+ | nav ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | float: right; | ||
+ | margin-right: 5em!important; | ||
+ | margin-top: 2em; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | nav li { | ||
+ | display: inline-block; | ||
+ | margin: 1em; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .nav-buttonmasks { | ||
+ | font-weight: 900; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 0.95rem; | ||
+ | padding: .5em; | ||
+ | color: #FFF; | ||
+ | position: relative; | ||
+ | padding-bottom: 3em; | ||
+ | } | ||
+ | |||
+ | .nav-buttonmasks:hover {color: #FF0000;} | ||
+ | .dropdown-nav-buttonmasks:hover {color: #FF0000;} | ||
+ | |||
+ | .dropdown-nav-buttonmasks { | ||
+ | font-weight: 900; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 0.95rem; | ||
+ | padding: .5em; | ||
+ | color: #FFF; | ||
+ | display: none; | ||
+ | background-color: rgba(0,0,0,.75); | ||
+ | z-index: 1; | ||
+ | width: 10em; | ||
+ | margin-left: -3em; | ||
+ | } | ||
+ | #navadjust { | ||
+ | margin-left:-0.3em; | ||
+ | } | ||
+ | |||
+ | |||
+ | .nav-buttonmasks:hover .dropdown-nav-buttonmasks{ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | } | ||
+ | .logo { | ||
+ | height: 90px; | ||
+ | width: 90px; | ||
+ | float: left; | ||
+ | margin-left: 6em; | ||
+ | margin-top: .5em; | ||
+ | } | ||
+ | .backgroundfancy{ | ||
+ | width: 100%; | ||
+ | height: 200em; | ||
+ | background-color: black; | ||
+ | } | ||
+ | |||
+ | .topspacer{height: 6em; | ||
+ | background-color: black;} | ||
+ | .background { | ||
+ | background-image: url(img/humpracticesoverview.png); | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | width: auto; | ||
+ | height: 309em; | ||
+ | } | ||
+ | .backgroundfancy{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | .backgroundfancy { | ||
+ | background-color: black; | ||
+ | height: 0em; | ||
+ | width: auto; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | #backgroundfancy{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | .botspacer{ | ||
+ | height: 1em; | ||
+ | margin-top: -1em; | ||
+ | background-color: black; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | </head> | ||
+ | |||
+ | |||
+ | <body> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="topspacer"></div> | ||
+ | |||
+ | |||
+ | <div class="backgroundfancy"> | ||
+ | <img id="backgroundfancy"src="https://static.igem.org/mediawiki/2018/d/dd/T--KCL_UK--notebook.png"></img> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
</html> | </html> |
Latest revision as of 11:19, 17 October 2018