|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | + | <head> |
| | + | <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> |
| | <style> | | <style> |
| | | | |
| Line 19: |
Line 21: |
| | /***************************************************** CONTENT OF THE PAGE ****************************************************/ | | /***************************************************** CONTENT OF THE PAGE ****************************************************/ |
| | | | |
| − | /* Wrapper for the content */ | + | html, body { |
| − | .igem_2017_content_wrapper { | + | height: 100%; |
| − | width: 81%; | + | min-height: 100%; |
| − | margin: 2%; | + | margin: 0px; |
| − | display:block; | + | background-color: #6c0d00; |
| − | float:left; | + | } |
| − | background-color:white; | + | |
| − | font-family:Tahoma, Geneva, sans-serif; | + | .coming-soon { |
| | + | height: 100%; |
| | + | min-height: 100%; |
| | + | background-image: url(https://static.igem.org/mediawiki/2017/0/00/T--AQA_Unesp--lactis_background.png); |
| | + | background-repeat: no-repeat; |
| | + | background-position: center; |
| | + | height: 280px; |
| | + | display: flex; |
| | + | justify-content: center; |
| | + | align-items: center; |
| | } | | } |
| − | | + | |
| − | | + | .coming-soon h1 { |
| − | /********************************* HTML STYLING *********************************/
| + | text-align: center; |
| − | | + | font-size: 40pt; |
| − | /* styling for the titles h1 h2 */ | + | font-family: 'Quicksand', sans-serif; |
| − | .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { | + | color: white; |
| − | padding:5px 15px; | + | text-shadow: 0px 0px 10px black; |
| − | border-bottom: 0px; | + | |
| − | color: #3399ff; | + | |
| | } | | } |
| − | | + | |
| − | | + | .synbio { |
| − | /* styling for the titles h3 h4 h5 h6*/ | + | width: 100%; |
| − | .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 { | + | position: absolute; |
| − | padding:5px 15px; | + | bottom: 0; |
| − | border-bottom:0px; | + | align-items: center; |
| − | color: #000000; | + | display: flex; |
| | + | flex-direction: row; |
| | + | flex-wrap: wrap; |
| | + | justify-content: center; |
| | } | | } |
| − | | + | |
| − | | + | .igem { |
| − | /* font and text */ | + | width: 100%; |
| − | .igem_2017_content_wrapper p { | + | position: absolute; |
| − | padding: 0px 15px;
| + | top: 0; |
| − | font-size: 13px;
| + | align-items: center; |
| − | }
| + | display: flex; |
| − | | + | flex-direction: row; |
| − | /* Links */
| + | flex-wrap: wrap; |
| − | .igem_2017_content_wrapper a {
| + | justify-content: center; |
| − | 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 h1 { |
| − | /* adds extra spacing when clearing content */
| + | text-align: center; |
| − | .igem_2017_content_wrapper .clear.extra_space { | + | font-size: 34pt; |
| − | height: 30px; | + | font-family: 'Quicksand', sans-serif; |
| − | }
| + | color: white; |
| − | | + | text-shadow: 0px 0px 10px black; |
| − | | + | |
| − | /* 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;
| + | |
| | } | | } |
| | | | |
| Line 253: |
Line 129: |
| | | | |
| | | | |
| − | <head> | + | </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>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| | | | |
| | + | <body> |
| | + | <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/thumb/e/e2/T--AQA_Unesp--logoTime.png/800px-T--AQA_Unesp--logoTime.png" width="250px"></div> |
| | + | </body> |
| | </html> | | </html> |
