|
|
Line 1: |
Line 1: |
| + | <!doctype html> |
| <html> | | <html> |
| + | <head> |
| + | <meta charset="utf-8"> |
| + | <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> |
| + | <title>Team: AQA_Unesp</title> |
| <style> | | <style> |
− | | + | html, body { |
− | | + | height: 100%; |
− | | + | min-height: 100%; |
− | /***************************************************** DEFAULT WIKI SETTINGS ****************************************************/
| + | margin: 0px; |
| + | background-color: #6c0d00; |
| + | } |
| | | |
− | /* Clear the default wiki settings */ | + | .coming-soon { |
| + | height: 100%; |
| + | min-height: 100%; |
| + | background-image: url(images/lactis_background.png); |
| + | background-repeat: no-repeat; |
| + | background-position: center; |
| + | height: 280px; |
| + | display: flex; |
| + | justify-content: center; |
| + | align-items: center; |
| + | } |
| | | |
− | #home_logo, #sideMenu { display:none; } | + | .coming-soon h1 { |
− | #sideMenu, #top_title, .patrollink {display:none;}
| + | text-align: center; |
− | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
| + | font-size: 40pt; |
− | body {background-color:white; }
| + | font-family: 'Quicksand', sans-serif; |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | color: white; |
− | | + | text-shadow: 0px 0px 10px black; |
| + | } |
| | | |
− |
| + | .synbio { |
− | | + | width: 100%; |
− | /***************************************************** CONTENT OF THE PAGE ****************************************************/
| + | position: absolute; |
− | | + | bottom: 0; |
− | /* Wrapper for the content */
| + | align-items: center; |
− | .igem_2017_content_wrapper { | + | display: flex; |
− | width: 81%; | + | flex-direction: row; |
− | margin: 2%; | + | flex-wrap: wrap; |
− | display:block; | + | justify-content: center; |
− | float:left;
| + | |
− | background-color:white;
| + | |
− | font-family:Tahoma, Geneva, sans-serif;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /********************************* HTML STYLING *********************************/
| + | |
− | | + | |
− | /* styling for the titles h1 h2 */
| + | |
− | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
| + | |
− | padding:5px 15px;
| + | |
− | border-bottom: 0px;
| + | |
− | color: #3399ff;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* styling for the titles h3 h4 h5 h6*/
| + | |
− | .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
| + | |
− | padding:5px 15px;
| + | |
− | border-bottom:0px;
| + | |
− | color: #000000;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /* font and text */
| + | |
− | .igem_2017_content_wrapper p {
| + | |
− | padding: 0px 15px;
| + | |
− | font-size: 13px;
| + | |
− | }
| + | |
− | | + | |
− | /* Links */
| + | |
− | .igem_2017_content_wrapper a {
| + | |
− | font-weight: bold;
| + | |
− | text-decoration: underline;
| + | |
− | text-decoration-color: #3399ff;
| + | |
− | color: #3399ff;
| + | |
− | -webkit-transition: all 0.4s ease;
| + | |
− | -moz-transition: all 0.4s ease;
| + | |
− | -ms-transition: all 0.4s ease; | + | |
− | -o-transition: all 0.4s ease;
| + | |
− | transition: all 0.4s ease;
| + | |
− | }
| + | |
− | | + | |
− | /* hover for the links */
| + | |
− | .igem_2017_content_wrapper a:hover {
| + | |
− | text-decoration:none;
| + | |
− | color:#000000;
| + | |
− | }
| + | |
− | | + | |
− | /* non numbered lists */
| + | |
− | .igem_2017_content_wrapper ul {
| + | |
− | padding:0px 20px;
| + | |
− | font-size: 13px;
| + | |
− | font-family:Tahoma, Geneva, sans-serif;
| + | |
− | }
| + | |
− | | + | |
− | /* numbered lists */
| + | |
− | .igem_2017_content_wrapper ol {
| + | |
− | padding:0px;
| + | |
− | font-size: 13px;
| + | |
− | font-family:Tahoma, Geneva, sans-serif;
| + | |
− | }
| + | |
− | | + | |
− | /* Table */
| + | |
− | .igem_2017_content_wrapper table {
| + | |
− | width: 97%;
| + | |
− | margin:15px 10px;
| + | |
− | border: 1px solid #d3d3d3;
| + | |
− | border-collapse: collapse;
| + | |
− | }
| + | |
− | | + | |
− | /* table cells */
| + | |
− | .igem_2017_content_wrapper td {
| + | |
− | padding: 10px;
| + | |
− | vertical-align: text-top;
| + | |
− | border: 1px solid #d3d3d3;
| + | |
− | border-collapse: collapse; | + | |
− | }
| + | |
− | | + | |
− | /* table headers */
| + | |
− | .igem_2017_content_wrapper th {
| + | |
− | padding: 10px;
| + | |
− | vertical-align: text-top; | + | |
− | border: 1px solid #d3d3d3;
| + | |
− | border-collapse: collapse; | + | |
− | background-color:#f2f2f2; | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | /**********************************LAYOUT CLASSES **********************************/
| + | |
− | | + | |
− | /* general class for column divs */
| + | |
− | .igem_2017_content_wrapper .column {
| + | |
− | padding: 10px 0px;
| + | |
− | float:left;
| + | |
− | }
| + | |
− | | + | |
− | /* class for a full width column */
| + | |
− | .column .full_size {
| + | |
− | width:100%;
| + | |
− | }
| + | |
− | | + | |
− | /* styling for images in a full width column*/
| + | |
− | .column.full_size img {
| + | |
− | width:97%;
| + | |
− | padding: 10px 15px;
| + | |
− | }
| + | |
− | | + | |
− | /* class for a half width column */
| + | |
− | .column.half_size {
| + | |
− | width: 50%;
| + | |
− | }
| + | |
− | /* styling for images in a half width column*/
| + | |
− | .column.half_size img {
| + | |
− | width: 94.5%;
| + | |
− | padding: 10px 15px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | /********************************* SUPPORT CLASSES ********************************/
| + | |
− | | + | |
− | /* class that clears content below*/
| + | |
− | .igem_2017_content_wrapper .clear {
| + | |
− | clear:both;
| + | |
| } | | } |
| | | |
− |
| + | .igem { |
− | /* adds extra spacing when clearing content */
| + | width: 100%; |
− | .igem_2017_content_wrapper .clear.extra_space { | + | position: absolute; |
− | height: 30px; | + | top: 0; |
| + | align-items: center; |
| + | display: flex; |
| + | flex-direction: row; |
| + | flex-wrap: wrap; |
| + | justify-content: center; |
| } | | } |
− |
| |
− |
| |
− | /* highlight class, makes content slightly smaller */
| |
− | .igem_2017_content_wrapper .highlight {
| |
− | margin: 0px 15px;
| |
− | padding: 15px 0px;
| |
− | }
| |
− |
| |
− |
| |
− | /* highlight class, adds a gray background */
| |
− | .igem_2017_content_wrapper .highlight.gray {
| |
− | background-color: #f2f2f2;
| |
− | }
| |
− |
| |
− | /* highlight with decoration blue line on top */
| |
− | .igem_2017_content_wrapper .highlight.blue_top {
| |
− | border-top: 4px solid #3399ff;
| |
− | }
| |
− |
| |
− | /* highlight with a full blue border decoration */
| |
− | .igem_2017_content_wrapper .highlight.blue_border {
| |
− | border: 4px solid #3399ff;
| |
− | }
| |
− |
| |
− |
| |
− | /* button class */
| |
− | .igem_2017_content_wrapper .button{
| |
− | max-width: 35%;
| |
− | margin: 30px auto;
| |
− | padding: 12px 10px;
| |
− | background-color: #3399ff;
| |
− | text-align: center;
| |
− | color: #ffffff;
| |
− | -webkit-transition: all 0.4s ease;
| |
− | -moz-transition: all 0.4s ease;
| |
− | -ms-transition: all 0.4s ease;
| |
− | -o-transition: all 0.4s ease; transition: all 0.4s ease;
| |
− | }
| |
− |
| |
− | /* styling for button on hover */
| |
− | .igem_2017_content_wrapper .button:hover{
| |
− | background-color: #3399ff;
| |
− | color: #000000;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | /***************************************************** RESPONSIVE STYLING ****************************************************/
| |
− |
| |
− | /* IF THE SCREEN IS LESS THAN 1200PX */
| |
− | @media only screen and (max-width: 1200px) {
| |
− |
| |
− | #content {width:100%; }
| |
− | .igem_2017_menu_wrapper {width:15%; right:0;}
| |
− | .highlight {padding:10px 0px;}
| |
− | .igem_2017_menu_wrapper #display_menu_control { display:none; }
| |
− | #menu_content { display:block;}
| |
− | .menu_button.direct_to_page {padding-left: 17px;}
| |
− |
| |
− | }
| |
− |
| |
− | /* IF THE SCREEN IS LESS THAN 800PX */
| |
− | @media only screen and (max-width: 800px) {
| |
− |
| |
− | .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
| |
− | .igem_2017_content_wrapper {width:100%; margin-left:0px;}
| |
− | .column.half_size {width:100%; }
| |
− | .column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;}
| |
− | .highlight {padding:15px 5px;}
| |
− | .igem_2017_menu_wrapper #display_menu_control { display:block; }
| |
− | #menu_content { display:none;}
| |
− | .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
| |
− | .menu_bottom_padding {display:none;}
| |
− | .menu_button.direct_to_page { padding-left: 36px; }
| |
− | }
| |
− |
| |
− |
| |
| | | |
− |
| + | .igem h1 { |
− | /* special class that the system uses to make sure the team wants a page to be evaluated */
| + | text-align: center; |
− | .judges-will-not-evaluate { | + | font-size: 34pt; |
− | width: 96.6%;
| + | font-family: 'Quicksand', sans-serif; |
− | margin: 5px 15px;
| + | color: white; |
− | display: block;
| + | text-shadow: 0px 0px 10px black; |
− | border: 4px solid #3399ff; | + | |
− | font-weight: bold;
| + | |
| } | | } |
− |
| |
| </style> | | </style> |
− | | + | </head> |
− | | + | <body> |
− | <!--- THIS IS WHERE THE HTML BEGINS ---> | + | <div class="igem"><h1>iGEM 2017</h1></div> |
− | | + | <div class="coming-soon"><h1>coming soon...</h1></div> |
− | | + | <div class="synbio"><img src="https://static.igem.org/mediawiki/2017/0/00/T--AQA_Unesp--lactis_background.png" width="250px"></div> |
− | | + | </body> |
− | <head> | + | |
− | | + | |
− | </div> | + | |
− | | + | |
− | | + | |
− | | + | |
− | <!-- start of content --> | + | |
− | <div class="igem_2017_content_wrapper"> | + | |
− | <h1>AQA_Unesp</h1> | + | |
− | <div class="column full_size" align="center"> | + | |
− | <img src="https://static.igem.org/mediawiki/2017/5/54/T--AQA_Unesp--logoInsubiota.png"> | + | |
− | </div> | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
| </html> | | </html> |