Difference between revisions of "Team:Wellesley TheTech"
Line 1: | Line 1: | ||
− | + | ||
+ | |||
<html> | <html> | ||
+ | <head> | ||
+ | <!-- Start of CSS--> | ||
+ | <style type="text/css"> | ||
+ | |||
+ | |||
+ | /* PAGE LAYOUT */ | ||
+ | |||
+ | /* Change Background color*/ | ||
+ | body { | ||
+ | background-image: url("https://2015.igem.org/File:Wellesley_TheTech_Background.png"); | ||
+ | width: 980px; | ||
+ | margin: auto; | ||
+ | background-color: #565656; | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'SlimJoe'; | ||
+ | src: url("https://2015.igem.org/File:Wellesley_TheTech_SlimJoeFont.otf") | ||
+ | } | ||
+ | |||
+ | /* Creates a container that will wrap all of the content inside your wiki pages. */ | ||
+ | #mainContainer { | ||
+ | width: 998px; | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | top: 0; | ||
+ | margin: auto; | ||
+ | background-color: #fff; | ||
+ | border-bottom: 14px solid #57c7da; | ||
+ | border-top: 20px solid #57c7da; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | /* Creates the container for the menu */ | ||
+ | #menuContainer { | ||
+ | background-color: #E8E8E9; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* Creates the container for the content */ | ||
+ | #contentContainer { | ||
+ | padding-right:10px; | ||
+ | margin-bottom: 20px; | ||
+ | width: 814px; | ||
+ | padding-left: 20px; | ||
+ | float: left; | ||
+ | background-color: #fff; | ||
+ | border-top: 14px solid #565656; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | } | ||
+ | |||
+ | /*Set up height place holder for the banner*/ | ||
+ | #bannerContainer { | ||
+ | color: #24B694; | ||
+ | position:absolute; | ||
+ | bottom: 0px; | ||
+ | margin-left: -45px; | ||
+ | width: 1061px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #topContainer{ | ||
+ | |||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | #topContainer h1 { | ||
+ | color: #5d6bb2; | ||
+ | font-weight: bold; | ||
+ | font-family: "Roboto", sans-serif; | ||
+ | font-size: 40px; | ||
+ | margin: 25px 50px 5px; | ||
+ | } | ||
+ | |||
+ | #topContainer h2 { | ||
+ | color: #5d6bb2; | ||
+ | font-family: "SlimJoe"; | ||
+ | font-size: 45px; | ||
+ | margin: -60px 410px -40px; | ||
+ | } | ||
+ | |||
+ | #topContainer h3 { | ||
+ | color: #5d6bb2; | ||
+ | font-family: "SlimJoe"; | ||
+ | font-size: 45px; | ||
+ | margin: -13px 2000px; | ||
+ | } | ||
+ | |||
+ | #topContainer a { | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .nextLine{ | ||
+ | margin-top: -40px; | ||
+ | margin-left: 30px; | ||
+ | } | ||
+ | |||
+ | .leftFloat { | ||
+ | float:left; | ||
+ | } | ||
+ | |||
+ | .rightFloat{ | ||
+ | float:right; | ||
+ | } | ||
+ | |||
+ | #menuBar { | ||
+ | background-color: #7a86c2; | ||
+ | position: absolute; | ||
+ | bottom: 430px; | ||
+ | left: 0; | ||
+ | height: 50px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */ | ||
+ | |||
+ | /*Change the styling of text for everything inside main container*/ | ||
+ | #mainContainer p { | ||
+ | font-size: 13px; | ||
+ | color: #000000; | ||
+ | } | ||
+ | |||
+ | /*This changes the color and font family */ | ||
+ | #contentContainer h1, h2, h3, h4, h5, h6 { | ||
+ | color: #565656; | ||
+ | border-bottom: none; | ||
+ | font-weight: bold; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | /*Style of the links - links are different inside the menu */ | ||
+ | #contentContainer a { | ||
+ | font-weight: bold; | ||
+ | color: #23b593; | ||
+ | } | ||
+ | |||
+ | /* Styling links on hover- links are different inside the menu */ | ||
+ | #contentContainer a:hover { | ||
+ | color: #59bf92; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of tables */ | ||
+ | #contentContainer table { | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | width: 90% | ||
+ | } | ||
+ | |||
+ | /*Change the styling of table cells*/ | ||
+ | #contentContainer td { | ||
+ | padding: 10px; | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of table headers */ | ||
+ | #contentContainer th { | ||
+ | background-color: #E8E8E9; | ||
+ | padding: 10px; | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | vertical-align: text-top; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*MENU STYLING */ | ||
+ | |||
+ | #menuwrapper { | ||
+ | height: auto; | ||
+ | text-align: justify; | ||
+ | -ms-text-justify: distribute-all-lines; | ||
+ | text-justify: distribute-all-lines; | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | |||
+ | #menuwrapper ul li { | ||
+ | width: auto; | ||
+ | height: 40px; | ||
+ | vertical-align: top; | ||
+ | display: inline-block; | ||
+ | *display: inline; | ||
+ | margin-right: 50px; | ||
+ | } | ||
+ | |||
+ | .stretcher { | ||
+ | width: 90%; | ||
+ | display: inline-block; | ||
+ | font-size: 0; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | |||
+ | /*Styling for the links in the menu */ | ||
+ | #menuContainer a { | ||
+ | color: #565656; | ||
+ | text-decoration:none; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /* Sets the style for lists inside menuContainer */ | ||
+ | #menuContainer ul { | ||
+ | list-style: none; | ||
+ | margin-left:0px; | ||
+ | } | ||
+ | |||
+ | /*Styles the list items to become menu buttons */ | ||
+ | #menuContainer ul li { | ||
+ | text-align: center; | ||
+ | height:30px; | ||
+ | display:inline; | ||
+ | padding: 0px 0px 20px 20px; | ||
+ | } | ||
+ | |||
+ | /*For the menu buttons, changes the color when hovering*/ | ||
+ | #menuContainer li:hover { | ||
+ | color: #FFF; | ||
+ | background-color: #C2A3FF; | ||
+ | } | ||
+ | |||
+ | /*Submenus are not displayed as default*/ | ||
+ | #menuContainer li ul { | ||
+ | display: none; | ||
+ | padding-top:15px; | ||
+ | margin-left: -19px; | ||
+ | } | ||
+ | |||
+ | /*Submenus are displayed when hovering the menu button */ | ||
+ | #menuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | float:right; | ||
+ | margin-left: 134px; | ||
+ | margin-top:-42px; | ||
+ | } | ||
+ | |||
+ | /*Style the submenu buttons*/ | ||
+ | #menuContainer li ul li{ | ||
+ | background-color: #C2A3FF; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | margin-top:-2px; | ||
+ | color: #565656; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | /*CLASSES */ | ||
+ | |||
+ | /*Clear class for all the pages, adds spacing too*/ | ||
+ | .clear{ | ||
+ | clear:both; | ||
+ | height: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* highlight box for special messages */ | ||
+ | .highlightBox { | ||
+ | width:500px; | ||
+ | margin:auto; | ||
+ | background-color: #E8E8E9; | ||
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | padding: 15px; | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <!-- End of CSS --> | ||
<div id="bannerContainer"> | <div id="bannerContainer"> | ||
Line 16: | Line 301: | ||
<div class="nextLine"> | <div class="nextLine"> | ||
<br> | <br> | ||
− | <h1><a href="https://www.thetech.org" target="_blank">the Tech Museum of | + | <h1><a href="https://www.thetech.org" target="_blank">the Tech Museum of Innovation</a></h1> |
</div> | </div> |
Revision as of 18:48, 6 September 2015