|
|
(3 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| {{Open_Science_Global/main}} | | {{Open_Science_Global/main}} |
| {{Open_Science_Global/navbar}} | | {{Open_Science_Global/navbar}} |
| + | {{Open_Science_Global/secondary}} |
| <html> | | <html> |
| <style> | | <style> |
| @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); | | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); |
| | | |
− | body {
| + | .content-image{ |
− | margin: 0; | + | margin-left: 56px; |
− | background-color: #E5E5E5 !important;
| + | |
| } | | } |
| | | |
− | html {
| |
− | scroll-behavior: smooth;
| |
− | }
| |
− |
| |
− | .container {
| |
− | height: auto;
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-orient: horizontal;
| |
− | -webkit-box-direction: normal;
| |
− | -ms-flex-direction: row;
| |
− | flex-direction: row;
| |
− | -ms-flex-pack: distribute;
| |
− | justify-content: space-around;
| |
− | -ms-flex-wrap: wrap;
| |
− | flex-wrap: wrap;
| |
− | -webkit-column-gap: 18px;
| |
− | column-gap: 18px;
| |
− | margin-left: 78px;
| |
− | }
| |
− |
| |
− | .top-banner {
| |
− | height: 220px;
| |
− | top: 16px;
| |
− | background: #FF8552;
| |
− | }
| |
− |
| |
− | .Title {
| |
− | font-family: Roboto;
| |
− | text-transform: uppercase;
| |
− | font-weight: bold;
| |
− | font-size: 2.5vw;
| |
− | -ms-flex-item-align: center;
| |
− | -ms-grid-row-align: center;
| |
− | align-self: center;
| |
− | }
| |
− |
| |
− | .Subtitle {
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | gap: 28vw;
| |
− | height: 20vh;
| |
− | justify-content: center;
| |
− | margin-left: 78px;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle {
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-align: center;
| |
− | -ms-flex-align: center;
| |
− | align-items: center;
| |
− | gap: 50px;
| |
− | margin-left: 20px;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle .main-subtitle {
| |
− | font-family: Roboto;
| |
− | font-style: normal;
| |
− | font-weight: bold;
| |
− | font-size: 1.3vw;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle .line {
| |
− | width: 2px;
| |
− | height: 26px;
| |
− | background: #000000;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle .subtopic {
| |
− | font-family: Roboto;
| |
− | font-style: normal;
| |
− | font-weight: bold;
| |
− | font-size: 1vw;
| |
− | }
| |
− |
| |
− | .subsite-container {
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-orient: vertical;
| |
− | -webkit-box-direction: normal;
| |
− | -ms-flex-direction: column;
| |
− | flex-direction: column;
| |
− | -webkit-box-align: center;
| |
− | -ms-flex-align: center;
| |
− | align-items: center;
| |
− | font-family: Roboto;
| |
− | font-weight: bold;
| |
− | -webkit-box-ordinal-group: 2;
| |
− | -ms-flex-order: 1;
| |
− | order: 1;
| |
− | -webkit-box-flex: 2;
| |
− | -ms-flex-positive: 2;
| |
− | flex-grow: 2;
| |
− | width: 100px;
| |
− | height: 250px;
| |
− | -ms-flex-negative: 1;
| |
− | flex-shrink: 1;
| |
− | margin-left: 7px;
| |
− | }
| |
− |
| |
− | .subsite-container .submenu-title {
| |
− | font-size: 1.3vw;
| |
− | margin-bottom: 7px;
| |
− | }
| |
− |
| |
− | .subsite-container .index-box {
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-orient: vertical;
| |
− | -webkit-box-direction: normal;
| |
− | -ms-flex-direction: column;
| |
− | flex-direction: column;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | font-size: 1.1vw;
| |
− | background: #F8F8F8;
| |
− | border-radius: 15px;
| |
− | -webkit-box-align: center;
| |
− | -ms-flex-align: center;
| |
− | align-items: center;
| |
− | -webkit-box-pack: space-evenly;
| |
− | -ms-flex-pack: space-evenly;
| |
− | justify-content: space-evenly;
| |
− | border-radius: 15px;
| |
− | }
| |
− |
| |
− | .subsite-container .index-box a {
| |
− | text-decoration: none;
| |
− | text-transform: uppercase;
| |
− | color: black;
| |
− | width: 80%;
| |
− | border-bottom: 0.5px solid #DCDCDC;
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | .nav-menu {
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-orient: vertical;
| |
− | -webkit-box-direction: normal;
| |
− | -ms-flex-direction: column;
| |
− | flex-direction: column;
| |
− | font-family: Roboto;
| |
− | font-weight: bold;
| |
− | -webkit-box-ordinal-group: 4;
| |
− | -ms-flex-order: 1;
| |
− | order: 1;
| |
− | -webkit-box-flex: 2;
| |
− | -ms-flex-positive: 2;
| |
− | flex-grow: 0.5;
| |
− | -ms-flex-negative: 1;
| |
− | flex-shrink: 1;
| |
− | width: 100px;
| |
− | height: 250px;
| |
− | margin-right: 7px;
| |
− | margin-left: 25px;
| |
− |
| |
− | }
| |
− |
| |
− | .nav-menu .submenu-title {
| |
− | font-size: 1.3vw;
| |
− | text-align: center;
| |
− | text-transform: uppercase;
| |
− | margin-bottom: 7px;
| |
− | }
| |
− |
| |
− | .nav-menu .submenu-content {
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-orient: vertical;
| |
− | -webkit-box-direction: normal;
| |
− | -ms-flex-direction: column;
| |
− | flex-direction: column;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | background: #F8F8F8;
| |
− | border-radius: 15px;
| |
− | -webkit-box-align: center;
| |
− | -ms-flex-align: center;
| |
− | align-items: center;
| |
− | -webkit-box-pack: space-evenly;
| |
− | -ms-flex-pack: space-evenly;
| |
− | justify-content: space-evenly;
| |
− | border-radius: 15px;
| |
− | }
| |
− |
| |
− | .nav-menu .submenu-content a {
| |
− | text-decoration: none;
| |
− | color: black;
| |
− | font-family: Roboto;
| |
− | font-size: 1.1vw;
| |
− | font-weight: bold;
| |
− | width: 80%;
| |
− | border-bottom: 0.5px solid #DCDCDC;
| |
− | text-align: center;
| |
− | text-transform: uppercase;
| |
− | }
| |
− |
| |
− | .text-container {
| |
− | display: -webkit-box;
| |
− | display: -ms-flexbox;
| |
− | display: flex;
| |
− | -webkit-box-orient: vertical;
| |
− | -webkit-box-direction: normal;
| |
− | -ms-flex-direction: column;
| |
− | flex-direction: column;
| |
− | width: 400px;
| |
− | height: auto;
| |
− | padding-bottom: 2%;
| |
− | padding-top: 2%;
| |
− | background: #F9F9F9;
| |
− | border-radius: 38px;
| |
− | -webkit-box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65);
| |
− | box-shadow: 0px 11px 15px 1px rgba(0, 0, 0, 0.65);
| |
− | -webkit-box-align: start;
| |
− | -ms-flex-align: start;
| |
− | align-items: flex-start;
| |
− | overflow: hidden;
| |
− | -webkit-box-ordinal-group: 3;
| |
− | -ms-flex-order: 2;
| |
− | order: 2;
| |
− | -webkit-box-flex: 4;
| |
− | -ms-flex-positive: 4;
| |
− | flex-grow: 2;
| |
− | -ms-flex-negative: 0.5;
| |
− | flex-shrink: 0.5;
| |
− | margin-right: 50px;
| |
− | }
| |
− |
| |
− | .text-container h2 {
| |
− | -ms-flex-item-align: start !important;
| |
− | align-self: flex-start !important;
| |
− | font-family: Roboto;
| |
− | font-weight: bold;
| |
− | font-size: 2.5vw;
| |
− | width: 55vw;
| |
− | letter-spacing: 0.01em;
| |
− | text-decoration: none !important;
| |
− | color: #000000;
| |
− | margin-left: 40px;
| |
− | margin-top: 35px !important;
| |
− | margin-bottom: 35px !important;
| |
− | border-bottom: 2.5px solid #000000;
| |
− | }
| |
− |
| |
− | .text-container .text p {
| |
− | font-family: Roboto !important;
| |
− | font-weight: normal;
| |
− | font-size: 1.3vw !important;
| |
− | letter-spacing: 0.01em;
| |
− | color: #000000;
| |
− | text-align: justify;
| |
− | margin-right: 40px;
| |
− | margin-left: 40px;
| |
− | }
| |
− |
| |
− | footer {
| |
− | height: 300px;
| |
− | width: 100vw;
| |
− | bottom: 0;
| |
− | background: #1E2833;
| |
− | -ms-flex-item-align: end;
| |
− | align-self: flex-end;
| |
− | -webkit-box-ordinal-group: 5;
| |
− | -ms-flex-order: 4;
| |
− | order: 4;
| |
− | padding-top: 2%;
| |
− | margin-top: 5%;
| |
− | }
| |
− |
| |
− | @media screen and (max-width: 900px) {
| |
− | .Title {
| |
− | font-size: 3vw;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle .main-subtitle {
| |
− | font-size: 2.5vw;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle .subtopic {
| |
− | font-size: 2vw;
| |
− | }
| |
− |
| |
− | .nav-menu {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | .subsite-container {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | .text-container {
| |
− | margin-left: 20px;
| |
− | margin-right: 20px;
| |
− | }
| |
− |
| |
− | .text-container .text {
| |
− | font-size: 2vw;
| |
− | }
| |
− |
| |
− | h2 {
| |
− | font-size: 4vw;
| |
− | }
| |
− | }
| |
− |
| |
− | @media screen and (max-width: 600px) {
| |
− | .Title {
| |
− | font-size: 4vw;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle .main-subtitle {
| |
− | font-size: 2.5vw;
| |
− | }
| |
− |
| |
− | .Subtitle .mini-subtitle .subtopic {
| |
− | font-size: 2vw;
| |
− | }
| |
− |
| |
− | .nav-menu {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | .subsite-container {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | .text-container {
| |
− | margin-left: 20px;
| |
− | margin-right: 20px;
| |
− | }
| |
− |
| |
− | .text-container .text {
| |
− | font-size: 3vw;
| |
− | }
| |
− |
| |
− | h2 {
| |
− | font-size: 6vw;
| |
− | }
| |
− | }
| |
− | .content-image{
| |
− | margin-left: 10%;
| |
− | width: 80%;
| |
− | }
| |
− | h3{
| |
− | font-family: Roboto !important;
| |
− | font-weight: bold;
| |
− | font-size: 1.5vw !important;
| |
− | margin-right: 40px;
| |
− | margin-left: 40px;
| |
− | }
| |
− | .custom-li{
| |
− | font-family: Roboto !important;
| |
− | font-weight: normal;
| |
− | font-size: 1.3vw !important;
| |
− | letter-spacing: 0.01em;
| |
− | color: #000000;
| |
− | text-align: justify;
| |
− | margin-right: 40px;
| |
− | margin-left: 40px;
| |
− | margin-bottom: 5px;
| |
− | }
| |
| </style> | | </style> |
| <!-------------------- HTML CONTENT --------------------------------> | | <!-------------------- HTML CONTENT --------------------------------> |
Line 390: |
Line 21: |
| <div class="container"> | | <div class="container"> |
| | | |
| + | <div class="subsite-container"> |
| + | <div class = "submenu-title">Menu</div> |
| + | <div class = index-box> |
| + | <a href="https://2021.igem.org/Team:Open_Science_Global/Description">Description</a> |
| + | <a href="https://2021.igem.org/Team:Open_Science_Global/Engineering">Engineering Success</a> |
| + | <a href="https://2021.igem.org/Team:Open_Science_Global/Implementation">Proposed Implementation</a> |
| + | <a href="https://2021.igem.org/Team:Open_Science_Global/Proof_Of_Concept">Proof of Concept</a> |
| + | <a href="https://2021.igem.org/Team:Open_Science_Global/Software">Software</a> |
| + | <a href="https://2021.igem.org/Team:Open_Science_Global/Hardware">Hardware</a> |
| + | </div> |
| + | </div> |
| | | |
| | | |
Line 404: |
Line 46: |
| | | |
| <div class="text-container"> | | <div class="text-container"> |
− | <h2 id="We would like to deal with our proposed implementation in 2 dimensions">We would like to deal with our proposed implementation in 2 dimensions</h2> | + | |
| + | <div class="title-container"><h2 id="We would like to deal with our proposed implementation in 2 dimensions">We would like to deal with our proposed implementation in 2 dimensions</h2></div> |
| <div class="text"> | | <div class="text"> |
| <h3>1. <b>To set up frugal processes in a single bio-foundry for local enzyme production.</b></h3> | | <h3>1. <b>To set up frugal processes in a single bio-foundry for local enzyme production.</b></h3> |
Line 414: |
Line 57: |
| </div> | | </div> |
| <br> | | <br> |
− | <h2 id="To create a distributed network of frugal bio-foundries to enable distributed enzyme manufacturing">To create a distributed network of frugal bio-foundries to enable distributed enzyme manufacturing</h2> | + | <div class="title-container"><h2 id="To create a distributed network of frugal bio-foundries to enable distributed enzyme manufacturing">To create a distributed network of frugal bio-foundries to enable distributed enzyme manufacturing</h2></div> |
| | | |
| <div class="text"> | | <div class="text"> |
Line 424: |
Line 67: |
| | | |
| </div> | | </div> |
− | <h2 id="We envision that our end-users can be categorised into two types:">We envision that our end-users can be categorised into two types:</h2> | + | <div class="title-container"><h2 id="We envision that our end-users can be categorised into two types:">We envision that our end-users can be categorised into two types:</h2></div> |
| <div class="text"> | | <div class="text"> |
| <h3>1. <b>Public benefit ventures</b></h3> | | <h3>1. <b>Public benefit ventures</b></h3> |