Line 1: | Line 1: | ||
− | {{Paris_Bettencourt}} | + | {{Paris_Bettencourt/Menu}} |
+ | {{Paris_Bettencourt/Wiki}} | ||
+ | |||
+ | <!-- Code by the 2016 Paris Bettencourt --> | ||
+ | |||
<html> | <html> | ||
+ | <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> | ||
+ | <style> | ||
+ | a:hover { | ||
+ | text-decoration : none; | ||
+ | } | ||
+ | html { | ||
+ | height : 100%; | ||
+ | } | ||
+ | body { | ||
+ | position : relative; | ||
+ | height : 100%; | ||
+ | margin-left : 0; | ||
+ | margin-right : 0; | ||
+ | margin-top : 0; | ||
+ | } | ||
+ | #topheader { | ||
+ | position : relative; | ||
+ | margin-top : -80px; | ||
+ | margin-left : 0px; | ||
+ | margin-right : 0; | ||
+ | padding:0; | ||
+ | width : 100%; | ||
+ | height : 400px; | ||
+ | background-image : url("https://static.igem.org/mediawiki/2016/1/10/T--Paris_Bettencourt--Achievements.jpg"); | ||
+ | background-size : cover; | ||
+ | } | ||
+ | #subheader { | ||
+ | position : relative ; | ||
+ | width : 100%; | ||
+ | height : 100%; | ||
+ | text-align : center; | ||
+ | background-color : rgb(255,255,255); | ||
+ | } | ||
+ | #definition { | ||
+ | width : 80%; | ||
+ | vertical-align : middle; | ||
+ | display : inline-block; | ||
+ | line-height : normal; | ||
+ | text-align : center; | ||
+ | position : relative; | ||
+ | margin-top : 0px; | ||
+ | } | ||
+ | #project { | ||
+ | font-family: Open Sans, sans-serif; | ||
+ | text-align : center; | ||
+ | font-size : 22px; | ||
+ | vertical-align : middle; | ||
+ | color : rgb(150,149,149); | ||
+ | } | ||
+ | .definition { | ||
+ | position : inline-block; | ||
+ | font-family: Open Sans, sans-serif; | ||
+ | text-align : center; | ||
+ | font-size : 22px; | ||
+ | vertical-align : middle; | ||
+ | color : rgb(150,149,149); | ||
+ | } | ||
+ | |||
+ | .descript2 { | ||
+ | width : 60%; | ||
+ | margin-left : 0%; | ||
+ | font-size : 18px; | ||
+ | text-align : center; | ||
+ | color : rgb(255,0,99); | ||
+ | margin-top : 0px; | ||
+ | display : none; | ||
+ | vertical-align : middle; | ||
+ | line-height : normal; | ||
+ | background-color : transparent; | ||
+ | z-index : 91; | ||
+ | } | ||
+ | |||
+ | .layout { | ||
+ | display : inline-block; | ||
+ | width : 100%; | ||
+ | height : 100%; | ||
+ | z-index : 90; | ||
+ | vertical-align : middle; | ||
+ | line-height : 300px; | ||
+ | text-align : center; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | -webkit-display: flex; | ||
+ | -webkit-justify-content: center; | ||
+ | -webkit-align-items: center; | ||
+ | vertical-align : middle; | ||
+ | } | ||
+ | |||
+ | .separation { | ||
+ | width: 100%; | ||
+ | height : 100px; | ||
+ | } | ||
+ | |||
+ | /* Panels */ | ||
+ | .panel { | ||
+ | margin: 0 auto; | ||
+ | color: rgb(30,39,43); | ||
+ | font-family: 'Open Sans', sans-serif; | ||
+ | } | ||
+ | .panel a { | ||
+ | display: inline-block; | ||
+ | color: rgb(46,43,52); | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | /* Subpanels */ | ||
+ | .narrowimg {/* Subpanels background*/ | ||
+ | /*position:absolute;*/ | ||
+ | z-index:2; | ||
+ | opacity:0.3; | ||
+ | filter: alpha(opacity=30); | ||
+ | } | ||
+ | .titlebox {/* Subpanels Title*/ | ||
+ | z-index:1; | ||
+ | position:relative; | ||
+ | bottom: 200px; | ||
+ | background:transparent; | ||
+ | } | ||
+ | |||
+ | .subpanel2 { /* Projects */ | ||
+ | float: left; | ||
+ | width:250px; | ||
+ | height:250px; | ||
+ | font-size:20px; | ||
+ | text-align:center; | ||
+ | margin-top:5px; | ||
+ | margin-bottom:5px; | ||
+ | margin-right:5px; | ||
+ | margin-left:5px; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | .subpanel2:hover{ | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .subpanel2:hover .narrowimg { | ||
+ | opacity:0.8; | ||
+ | filter: alpha(opacity=80); | ||
+ | } | ||
+ | /* pages */ | ||
+ | .subpanel4 { /* divide page in 3 */ | ||
+ | float:left; | ||
+ | width:364px; | ||
+ | height:492px; | ||
+ | font-size:22px; | ||
+ | margin-top:0; | ||
+ | margin-right:10px; | ||
+ | } | ||
+ | .subpanel6 { /* Pages */ | ||
+ | height:240.5px; | ||
+ | margin:0; | ||
+ | margin-bottom:11px; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | background:rgb(255,255,255); | ||
+ | color:Black; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .subpanel6:hover{ | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .subpanel6:hover .narrowimg { | ||
+ | opacity:0.8; | ||
+ | filter: alpha(opacity=80); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* Medal BOXES */ | ||
+ | .medal_boxes { | ||
+ | margin: 0 auto; | ||
+ | display : inline-block; | ||
+ | } | ||
+ | .medal_box_left { | ||
+ | float:left; | ||
+ | width:300px; | ||
+ | height: 430px; | ||
+ | background-color: #CCCC99; | ||
+ | margin-left:15px; | ||
+ | margin-right:15px; | ||
+ | margin-top:15px; | ||
+ | border-radius: 25px; | ||
+ | } | ||
+ | .medal_box_middle { | ||
+ | float:left; | ||
+ | width:300px; | ||
+ | height: 430px; | ||
+ | background-color: #E4D9D9; | ||
+ | margin-left:15px; | ||
+ | margin-right:15px; | ||
+ | margin-top:15px; | ||
+ | border-radius: 25px; | ||
+ | } | ||
+ | .medal_box_right { | ||
+ | float:left; | ||
+ | width:300px; | ||
+ | height: 430px; | ||
+ | background-color: #FFED6F; | ||
+ | margin-left:15px; | ||
+ | margin-right:15px; | ||
+ | margin-top:15px; | ||
+ | text-align:justify; | ||
+ | border-radius: 25px; | ||
+ | } | ||
+ | .text { | ||
+ | padding-top: 10px; | ||
+ | padding-left: 25px; | ||
+ | padding-right: 25px; | ||
+ | text-align:justify; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Cool checkmarks*/ | ||
+ | |||
+ | ul li {margin-bottom: 12px;} | ||
+ | .checkmark li {list-style:none} | ||
+ | .checkmark li:before { | ||
+ | content:"\2714"; | ||
+ | font-size:25px; | ||
+ | vertical-align:top; | ||
+ | margin-left: -20px; | ||
+ | } | ||
+ | a{text-decoration: underline;} | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | <head></head> | ||
+ | |||
+ | |||
+ | <body> | ||
+ | |||
+ | <div id=topheader></div> | ||
+ | |||
+ | <div id=subheader> | ||
+ | <div id=definition> | ||
+ | <div style="margin-top:20px; margin-bottom:20px"></div> | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </body> | ||
</html> | </html> | ||
+ | {{Paris_Bettencourt/Footer}} |
Revision as of 17:34, 19 October 2016