Difference between revisions of "Team:TU Darmstadt"
(Prototype team page) |
|||
(18 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{Template_All_Teams}} |
− | + | ||
− | + | ||
− | + | ||
− | < | + | <!-- Declare that you are going to use html code instead of wiki code --> |
− | + | <html> | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | < | + | <!-- Start of CSS--> |
− | + | <style type="text/css"> | |
− | + | ||
− | < | + | |
− | + | ||
− | + | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic); | |
− | + | /* | |
− | + | @import url(https://fonts.googleapis.com/css?family=Indie+Flower); | |
− | + | @import url(https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,700,700italic,500italic,500); | |
+ | */ | ||
+ | /* PAGE LAYOUT */ | ||
− | + | /* Change Background color*/ | |
− | + | body { | |
− | + | background-color: #fff; | |
+ | } | ||
+ | #globalWrapper { | ||
+ | position: relative; | ||
+ | font-size: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | /* Center contents*/ | ||
+ | #content { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | color: #0d1112; | ||
+ | } | ||
− | + | #bodyContent { | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | position: absolute; | |
− | + | top: -0.5em; | |
− | + | color: #0d1112; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* | ||
+ | #top_menu_inside { | ||
+ | width: 978px; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | #landingContent { | ||
+ | margin-bottom: 200px; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* Creates a container that will wrap all of the content inside your wiki pages. */ | |
− | + | #mainContainer { | |
− | + | width: 980px; | |
+ | margin: 0 auto; | ||
+ | overflow:hidden; | ||
+ | margin-bottom: 10px; | ||
+ | /*background-color: #fff; | ||
+ | font-family: "Trebuchet MS", Helvetica, sans-serif;*/ | ||
− | <a href="https://2015.igem.org/ | + | background-color: #fff; |
+ | color: #0d1112; | ||
+ | font-family: 'Open Sans', Helvetica, sans-serif; | ||
+ | font-size: 14px; | ||
+ | font-weight: normal; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | #mainContainerContainer { | ||
+ | witdh: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | /* Creates the container for the content */ | ||
+ | #contentContainer { | ||
+ | padding-top:20px; | ||
+ | padding-right:10px; | ||
+ | margin-bottom: 20px; | ||
+ | width: 750px; | ||
+ | padding-left: 20px; | ||
+ | float: left; | ||
+ | background-color: #fff; | ||
+ | /*font-family: "Trebuchet MS", Helvetica, sans-serif;*/ | ||
+ | } | ||
+ | |||
+ | /*Set up height place holder for the banner*/ | ||
+ | #bannerContainer { | ||
+ | width: 100%; | ||
+ | height: 255px; | ||
+ | background-color: #0f2a58; | ||
+ | border-bottom: 8px solid #e6eb14; | ||
+ | |||
+ | color: #0d1112; | ||
+ | font-family: 'Open Sans', Helvetica, sans-serif; | ||
+ | font-size: 14px; | ||
+ | font-weight: normal; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | |||
+ | #bannerContent { | ||
+ | width: 978px; | ||
+ | height: 255px; | ||
+ | margin: 0 auto; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2015/1/1b/TU_Darmstadt_banner.png"); | ||
+ | } | ||
+ | |||
+ | #bannerMenu { | ||
+ | width: 978px; | ||
+ | margin: 0 auto; | ||
+ | font-size: 28px; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /*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: #0f2a58; | ||
+ | border-bottom: none; | ||
+ | font-weight: 600; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | #contentContainer h1 { | ||
+ | border-bottom: 1px solid #0f2a58; | ||
+ | padding-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Style of the links - links are different inside the menu */ | ||
+ | #contentContainer a { | ||
+ | font-weight: bold; | ||
+ | color: #4e7085; | ||
+ | } | ||
+ | |||
+ | /* Styling links on hover- links are different inside the menu */ | ||
+ | #contentContainer a:hover { | ||
+ | color: #4e7085; | ||
+ | } | ||
+ | |||
+ | /*Change the styling of tables */ | ||
+ | #contentContainer table { | ||
+ | border: 1px solid #565656; | ||
+ | border-collapse: collapse; | ||
+ | width: 90% | ||
+ | margin: auto; | ||
+ | margin-bottom: 15px; | ||
+ | margin-top: 15px; | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | |||
+ | /*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; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*BANNER MENU STYLING */ | ||
+ | |||
+ | /*Styling for the links in the menu */ | ||
+ | #bannerMenuContainer { | ||
+ | width: 978px; | ||
+ | margin: 0 auto; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | padding-top: 215px; | ||
+ | font-size: 116%; | ||
+ | } | ||
+ | |||
+ | #bannerMenuContainer a { | ||
+ | color: #fff; | ||
+ | text-decoration:none; | ||
+ | font-weight: bold; | ||
+ | margin: 0px 20px; | ||
+ | } | ||
+ | |||
+ | /* Sets the style for lists inside menuContainer */ | ||
+ | #bannerMenuContainer ul { | ||
+ | list-style: none; | ||
+ | margin-left:0px; | ||
+ | font-size: larger; | ||
+ | |||
+ | } | ||
+ | |||
+ | /*Styles the list items to become menu buttons */ | ||
+ | #bannerMenuContainer ul li { | ||
+ | text-align: center; | ||
+ | display: inline; | ||
+ | width: 100%; | ||
+ | height: 30px; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | |||
+ | /*For the menu buttons, changes the color when hovering*/ | ||
+ | #bannerMenuContainer li:hover { | ||
+ | color: #3380f5; | ||
+ | } | ||
+ | |||
+ | #bannerMenuContainer a:hover { | ||
+ | color: #e6eb14; | ||
+ | } | ||
+ | |||
+ | /*Submenus are not displayed as default*/ | ||
+ | #bannerMenuContainer li ul { | ||
+ | display: none; | ||
+ | padding-top:15px; | ||
+ | margin-left: -19px; | ||
+ | } | ||
+ | |||
+ | /*Submenus are displayed when hovering the menu button */ | ||
+ | #bannerMenuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | float:right; | ||
+ | margin-left: 134px; | ||
+ | margin-top:-42px; | ||
+ | } | ||
+ | |||
+ | /*Style the submenu buttons*/ | ||
+ | #bannerMenuContainer li ul li{ | ||
+ | background-color: #59BF92; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | height:30px; | ||
+ | padding-top:10px; | ||
+ | margin-top:-2px; | ||
+ | color: #0d1112; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | /*CLASSES */ | ||
+ | |||
+ | /*Clear class for all the pages, adds spacing too*/ | ||
+ | .clear{ | ||
+ | clear:both; | ||
+ | height: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* highlight box for special messages */ | ||
+ | .highlightBox { | ||
+ | width:700px; | ||
+ | margin:auto; | ||
+ | background-color: #d1e0db; | ||
+ | padding: 10px; | ||
+ | margin-top: 10px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | /* Figure classes to include images */ | ||
+ | .centerFig { | ||
+ | color: #4e7085; | ||
+ | max-width: 760px; | ||
+ | margin:0 auto; | ||
+ | text-align: center; | ||
+ | overflow: hidden; | ||
+ | |||
+ | padding-top: 15px; | ||
+ | padding-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | .leftFig { | ||
+ | color: #4e7085; | ||
+ | width: 50%; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .rightFig { | ||
+ | color: #4e7085; | ||
+ | width: 50%; | ||
+ | float: right; | ||
+ | text-align: center; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .contentSection { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | figcaption { | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | <!-- End of CSS --> | ||
+ | |||
+ | <div id="bannerContainer"> | ||
+ | <div id="bannerContent"> | ||
+ | <!-- Banner menu --> | ||
+ | <div id="bannerMenuContainer"> | ||
+ | <ul> | ||
+ | <li class="active first"><a href="https://2015.igem.org/Team:TU_Darmstadt/Project">Home</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:TU_Darmstadt/Project/Tech">SLA 3D-Printer</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:TU_Darmstadt/Project/PnP/LabSurfing">LabSurfing</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:TU_Darmstadt/Part_Collection">Bricks</a></li> | ||
+ | <li><a href="https://2015.igem.org/Team:TU_Darmstadt/Project/Bio/Modeling/sec2">RnD-Nerf</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div id="mainContainerContainer"> | ||
+ | </html> | ||
+ | {{:Team:TU_Darmstadt/Templates/Footer}} | ||
+ | <html> | ||
+ | <div style="width:100%; height=100%; background-color:#0f2a58; text-align:center; padding-top:30px; padding-bottom:320px; position:relative; top:-5px; left:0px;"> | ||
+ | </html> | ||
+ | {{:Team:TU_Darmstadt/Templates/FrontPageOverview}} | ||
+ | {{:Team:TU_Darmstadt/Templates/FrontPageFigure}} | ||
+ | <html> | ||
+ | </div> | ||
+ | </div> | ||
+ | <style> | ||
+ | <!-- yes this really needs to be here ... or anywhere beneat the Footer include to overwrite / extend its css --> | ||
+ | #footerContainer | ||
+ | { | ||
+ | background: #FFF none repeat scroll 0% 0%; | ||
+ | border-top: 4px solid #E6EB14; | ||
+ | background: white; | ||
+ | } | ||
− | + | #footerSponsors | |
+ | { | ||
+ | border: 0px transparent; | ||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
</html> | </html> |
Latest revision as of 03:14, 19 September 2015