(Prototype team template page) |
|||
(141 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | |||
<html> | <html> | ||
Line 87: | Line 88: | ||
− | + | <style type="text/css">body { cursor: url('data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1lPABNuFAAWlDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACIiIAARAAAAAAAAAAAAACIiMyMyIAAAAAAAAAAAACIiMzMiIiAAAAAAAAAAAAIiMyIiIiIgAAAAAAAAAAACIzMzMiIzIAAAAAAAAAAAIjIiIiIyIiAAAAAAAAAAACIzMzIiMyIgAAAAAAAAAAAiIiIiMiMyIAAAAAAAAAAAIjMzIjMjIiAAAAAAAAAAACMyIiIzIyIgAAAAAAAAAAAiIiIyMzMiAAAAAAAAAAAAIzIiMjMyIgAAAAAAAAAAACMiMjMzIiAAAAAAAAAAAAAiIzIzIiIAAAAAAAAAAAAAIjMyMyIAAAAAAAAAAAAAACIiIiIAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////////////////////Bz///AB///AAf//gAH//4AB//8AAf//AAH//wAB//8AAf//AAH//wAD//8AA///AAf//wAP//8AP///AP///w=='), auto; } | |
<style> | <style> | ||
− | |||
− | |||
/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/ | ||
Line 99: | Line 98: | ||
#home_logo, #sideMenu { display:none; } | #home_logo, #sideMenu { display:none; } | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
− | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | + | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px; margin-right:0px;} |
− | body {background- | + | body {background-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; } | ||
Line 118: | Line 117: | ||
background-color:#dddddd; | background-color:#dddddd; | ||
text-align:left; | text-align:left; | ||
− | font-family: | + | font-family:Calibri; |
overflow-y: auto; | overflow-y: auto; | ||
overflow-x: hidden; | overflow-x: hidden; | ||
Line 146: | Line 145: | ||
float:left; | float:left; | ||
border-bottom: 1px solid #d3d3d3; | border-bottom: 1px solid #d3d3d3; | ||
− | font-size: | + | font-size: 18px; |
font-weight: bold; | font-weight: bold; | ||
color: #5e5f5f; | color: #5e5f5f; | ||
Line 181: | Line 180: | ||
/* styling for the menu buttons on hover */ | /* styling for the menu buttons on hover */ | ||
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover , .submenu_button.current_page:hover { | .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover , .submenu_button.current_page:hover { | ||
− | background-color: # | + | background-color: #e6ffe6; |
text-decoration: none; | text-decoration: none; | ||
color:#ffffff; | color:#ffffff; | ||
Line 200: | Line 199: | ||
background-color:#f2f2f2; | background-color:#f2f2f2; | ||
border-bottom: 1px solid #d3d3d3; | border-bottom: 1px solid #d3d3d3; | ||
− | font-size: | + | font-size: 18px; |
color: #5e5f5f; | color: #5e5f5f; | ||
cursor: pointer; | cursor: pointer; | ||
Line 221: | Line 220: | ||
/* Wrapper for the content */ | /* Wrapper for the content */ | ||
.igem_2017_content_wrapper { | .igem_2017_content_wrapper { | ||
− | width: | + | width: 100%; |
− | margin: | + | margin: 0%; |
display:block; | display:block; | ||
float:left; | float:left; | ||
− | background-color: | + | background-color: #e6ffe6; |
− | font-family: | + | font-family:Calibri; |
} | } | ||
Line 236: | Line 235: | ||
padding:5px 15px; | padding:5px 15px; | ||
border-bottom: 0px; | border-bottom: 0px; | ||
− | + | ||
} | } | ||
Line 244: | Line 243: | ||
padding:5px 15px; | padding:5px 15px; | ||
border-bottom:0px; | border-bottom:0px; | ||
− | + | ||
} | } | ||
Line 251: | Line 250: | ||
.igem_2017_content_wrapper p { | .igem_2017_content_wrapper p { | ||
padding: 0px 15px; | padding: 0px 15px; | ||
− | + | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
/* Links */ | /* Links */ | ||
.igem_2017_content_wrapper a { | .igem_2017_content_wrapper a { | ||
font-weight: bold; | font-weight: bold; | ||
− | text-decoration: | + | text-decoration: none; |
− | text-decoration-color: # | + | text-decoration-color: #009900; |
− | color: # | + | color: #009900; |
-webkit-transition: all 0.4s ease; | -webkit-transition: all 0.4s ease; | ||
-moz-transition: all 0.4s ease; | -moz-transition: all 0.4s ease; | ||
Line 270: | Line 273: | ||
.igem_2017_content_wrapper a:hover { | .igem_2017_content_wrapper a:hover { | ||
text-decoration:none; | text-decoration:none; | ||
− | color:# | + | color:#b3ffb3; |
} | } | ||
Line 276: | Line 279: | ||
.igem_2017_content_wrapper ul { | .igem_2017_content_wrapper ul { | ||
padding:0px 20px; | padding:0px 20px; | ||
− | font-size: | + | font-size: 18px; |
− | font-family: | + | font-family:Calibri; |
} | } | ||
Line 283: | Line 286: | ||
.igem_2017_content_wrapper ol { | .igem_2017_content_wrapper ol { | ||
padding:0px; | padding:0px; | ||
− | font-size: | + | font-size: 18px; |
− | font-family: | + | font-family:Calibri; |
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | |||
/**********************************LAYOUT CLASSES **********************************/ | /**********************************LAYOUT CLASSES **********************************/ | ||
Line 323: | Line 304: | ||
/* class for a full width column */ | /* class for a full width column */ | ||
.column .full_size { | .column .full_size { | ||
− | width:100%; | + | width:100%; |
} | } | ||
Line 329: | Line 310: | ||
.column.full_size img { | .column.full_size img { | ||
width:97%; | width:97%; | ||
− | padding: 10px | + | padding: 10px 10px; |
} | } | ||
/* class for a half width column */ | /* class for a half width column */ | ||
.column.half_size { | .column.half_size { | ||
− | width: | + | width: 47%; |
} | } | ||
/* styling for images in a half width column*/ | /* styling for images in a half width column*/ | ||
.column.half_size img { | .column.half_size img { | ||
width: 94.5%; | width: 94.5%; | ||
+ | padding: 10px 15px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /************************************** ADDED ******************************/ | ||
+ | /* class for a third width column */ | ||
+ | .column.third_size { | ||
+ | width: 30%; | ||
+ | } | ||
+ | |||
+ | /* styling for images in a half width column*/ | ||
+ | .column.third_size img { | ||
+ | width: 92%; | ||
padding: 10px 15px; | padding: 10px 15px; | ||
} | } | ||
Line 373: | Line 367: | ||
/* highlight with decoration blue line on top */ | /* highlight with decoration blue line on top */ | ||
.igem_2017_content_wrapper .highlight.blue_top { | .igem_2017_content_wrapper .highlight.blue_top { | ||
− | border-top: 4px solid # | + | border-top: 4px solid #b3ffb3; |
} | } | ||
/* highlight with a full blue border decoration */ | /* highlight with a full blue border decoration */ | ||
.igem_2017_content_wrapper .highlight.blue_border { | .igem_2017_content_wrapper .highlight.blue_border { | ||
− | border: 4px solid # | + | border: 4px solid #b3ffb3; |
} | } | ||
Line 387: | Line 381: | ||
margin: 30px auto; | margin: 30px auto; | ||
padding: 12px 10px; | padding: 12px 10px; | ||
− | background-color: # | + | background-color: #b3ffb3; |
text-align: center; | text-align: center; | ||
color: #ffffff; | color: #ffffff; | ||
Line 398: | Line 392: | ||
/* styling for button on hover */ | /* styling for button on hover */ | ||
.igem_2017_content_wrapper .button:hover{ | .igem_2017_content_wrapper .button:hover{ | ||
− | background-color: # | + | background-color: #b3ffb3; |
color: #000000; | color: #000000; | ||
} | } | ||
Line 442: | Line 436: | ||
margin: 5px 15px; | margin: 5px 15px; | ||
display: block; | display: block; | ||
− | border: 4px solid # | + | border: 4px solid #b3ffb3; |
font-weight: bold; | font-weight: bold; | ||
} | } | ||
− | |||
− | |||
+ | /************************** OUR STYLE ***************************/ | ||
+ | #content { | ||
+ | width: 100% !important; | ||
+ | padding: 0px !important; | ||
+ | margin: 0px !important; | ||
+ | top: 0px !important; | ||
+ | position: absolute !important; | ||
− | + | } | |
− | + | html,body,h2,h3,h4,h5,h6,par{ | |
− | + | font-family: Calibri; | |
+ | color:#004d00; | ||
+ | } | ||
− | + | h1 { | |
+ | color: #004d00; | ||
+ | font-family: Calibri" | ||
+ | |||
+ | } | ||
+ | h1,h2,h3,h4,h5,h6,p { | ||
+ | margin-top: 5px; | ||
+ | margin-bottom: 20px; | ||
+ | margin-right: 50px; | ||
+ | margin-left: 50px; | ||
+ | padding: 0px, 50px, 50px, 20px; | ||
+ | color: #004d00; | ||
+ | } | ||
+ | li { | ||
+ | color: #004d00; | ||
+ | font-family: Calibri | ||
+ | font-color: white | ||
+ | |||
+ | } | ||
+ | body { | ||
+ | background-color: #e6ffe6; | ||
+ | } | ||
+ | p { | ||
+ | color:#004d00; | ||
+ | font-family: Calibri; | ||
+ | font-size: 22px; | ||
+ | } | ||
+ | img { margin-top: 0px; | ||
+ | margin-bottom: 0px; | ||
+ | margin-right: 0px; | ||
+ | margin-left: 0px; | ||
+ | } | ||
− | |||
+ | .container { | ||
+ | overflow: hidden; | ||
+ | background-color: #00802b; | ||
+ | font-family: Calibri; | ||
+ | } | ||
+ | .container a { | ||
+ | float: left; | ||
+ | font-size: 16px; | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | padding: 14px 16px; | ||
+ | text-decoration: none; | ||
+ | } | ||
− | + | .dropdown { | |
− | + | float: left; | |
− | + | overflow: hidden; | |
+ | } | ||
+ | .dropdown .dropbtn { | ||
+ | font-size: 16px; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | color: white; | ||
+ | padding: 14px 16px; | ||
+ | background-color: inherit; | ||
+ | } | ||
− | + | .container a:hover, .dropdown:hover .dropbtn { | |
− | + | background-color: #00b33c; opacity:1.0; | |
− | + | } | |
− | + | ||
− | + | .dropdown-content { | |
− | + | display: none; | |
+ | position: absolute; | ||
+ | background-color: #00b33c; | ||
+ | min-width: 160px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .dropdown-content a { | ||
+ | float: none; | ||
+ | color: white; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .dropdown-content a:hover { | ||
+ | background-color: #00cc44; | ||
+ | } | ||
− | + | .dropdown:hover .dropdown-content { | |
− | + | display: block; | |
− | + | } | |
− | + | ||
− | + | ||
+ | div.background { | ||
+ | background-color: black; | ||
+ | border: 2px solid black; | ||
+ | background-attachment: scroll; | ||
+ | background-position: center; | ||
+ | opacity: 0.95; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | + | div.transbox { | |
− | + | margin: 0px; | |
− | + | background-color: #000000; | |
− | + | border: 0px solid black; | |
− | + | opacity: 1; | |
− | + | height:100% | |
− | + | } | |
− | + | hr { | |
− | + | display: block; | |
− | + | margin-top: 1em; | |
− | + | margin-bottom: 1em; | |
− | + | margin-left: 5em; | |
− | + | margin-right: 5em; | |
− | + | border-style: solid; | |
− | + | border-width: 3px; | |
+ | color: #e6ffe6 | ||
+ | } | ||
+ | table, th, td, td1 { | ||
+ | border: 1px solid black; | ||
+ | border-collapse: collapse; | ||
+ | padding:15px} | ||
− | + | th { | |
− | + | background-color: #004d00; | |
+ | text-align: center; | ||
+ | font-size: 18px; | ||
+ | font-family: Calibri; | ||
+ | color: white} | ||
− | |||
− | |||
− | |||
− | + | td { | |
− | + | background-color: #ffffff; | |
− | + | text-align: left; | |
− | + | font-size: 16px; | |
− | + | font-family: Calibri; | |
− | + | color: #004d00} | |
− | + | ||
− | + | ||
− | + | #rcorners1 { | |
− | + | border-radius: 500px; | |
− | + | background-color: #ffffff; | |
− | + | border: 2px solid #ffffff; | |
− | + | padding: 0px; | |
+ | |||
+ | } | ||
− | + | #rcorners2 { | |
− | + | border-radius: 50px; | |
− | + | border: 2px solid #ffffff; | |
− | + | padding: 0px; | |
− | + | background-color: #ffffff; | |
+ | } | ||
+ | #rcorners3 { | ||
+ | border-radius: 50px; | ||
+ | background-color: #ffffff; | ||
+ | border: 2px solid #ffffff; | ||
+ | padding: 0px; | ||
+ | |||
+ | |||
+ | } | ||
− | + | .img-circle { | |
− | + | border-radius: 50%; | |
− | + | } | |
− | + | </style> | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <!--- THIS IS WHERE THE HTML BEGINS ---> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <head> | ||
− | + | <!-- This tells the browser that your page is responsive --> | |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | </head> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <nav> | ||
+ | <div class="container"> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales">Home</a> | ||
+ | <div class="container"> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Team</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/meet_the_team">Meet the Team</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Team_TSH">Team TSH</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Team_Luc">Team Luciferase</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Team_PlantP">Team Plant Promoter</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Attributions">Attributions</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container"> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Project</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/projectdescription">Project Description</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/results">Results</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/basicparts">Basic Parts</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/compositeparts">Composite Parts</a> | ||
+ | </div></div> | ||
+ | <div class="container"> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Human Practice</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Human_Practices">Integrated Human Practices</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Public_outreach">Public Outreach</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Survey">Survey</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Collaborations">Collaborations</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Our_research">Our HP Research</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container"> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/Modelling">Modelling</a> | ||
+ | <div class="container"> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Lab book</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/protocols">Protocols</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/diary">Diary</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/health_and_safety">Health and Safety</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container"> | ||
+ | <div class="dropdown"> | ||
+ | <button class="dropbtn">Medal Criteria</button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/goldfulfilment">Gold</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/silverfulfilment">Silver</a> | ||
+ | <a href="https://2017.igem.org/Team:Cardiff_Wales/bronzefulfilment">Bronze</a> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
+ | </nav> | ||
<!-- start of content --> | <!-- start of content --> | ||
+ | <body> | ||
<div class="igem_2017_content_wrapper"> | <div class="igem_2017_content_wrapper"> | ||
− | + | </body> |
Latest revision as of 16:24, 30 October 2017