|
|
Line 1: |
Line 1: |
| {{Open_Science_Global/main}} | | {{Open_Science_Global/main}} |
| + | {{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 { | + | |
− | margin: 0;
| + | |
− | 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;
| + | |
− | }
| + | |
− | | + | |
− | .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;
| + | |
− | }
| + | |
− | | + | |
− | .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: 3;
| + | |
− | order: 3;
| + | |
− | -webkit-box-flex: 2;
| + | |
− | -ms-flex-positive: 2;
| + | |
− | flex-grow: 2;
| + | |
− | -ms-flex-negative: 1;
| + | |
− | flex-shrink: 1;
| + | |
− | width: 100px;
| + | |
− | height: 250px;
| + | |
− | margin-right: 7px;
| + | |
− | }
| + | |
− | | + | |
− | .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: 4;
| + | |
− | -ms-flex-negative: 0.5;
| + | |
− | flex-shrink: 0.5;
| + | |
− | }
| + | |
− | | + | |
− | .text-container h2 {
| + | |
− | -ms-flex-item-align: start !important;
| + | |
− | align-self: flex-start !important;
| + | |
− | font-family: Roboto;
| + | |
− | font-weight: bold;
| + | |
− | font-size: 2.5vw;
| + | |
− | height: 5vw; <!-- in prev Attrib was 3vw -->
| + | |
− | width: 39vw;
| + | |
− | letter-spacing: 0.01em;
| + | |
− | text-decoration: none !important;
| + | |
− | color: #000000;
| + | |
− | margin-left: 40px;
| + | |
− | margin-top: 35px !important; <!-- in prev Attrib was 15px -->
| + | |
− | 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;
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | <!-- Extra styles, not present in Software template (added by Almiro?) -->
| + | |
− | 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;
| + | |
− | }
| + | |
− | h3{
| + | |
− | font-family: Roboto!important;
| + | |
− | font-weight: bold;
| + | |
− | font-size: 1.5vw!important;
| + | |
− | margin-right: 40px;
| + | |
− | margin-left: 40px;
| + | |
− | }
| + | |
− | ul{
| + | |
− | font-family: Roboto!important;
| + | |
− | font-weight: normal;
| + | |
− | font-size: 1.3vw!important;
| + | |
− | letter-spacing: 0.01em;
| + | |
− | color: #000000;
| + | |
− | text-align: justify;
| + | |
− | list-style-type:none;
| + | |
− | | + | |
− | }
| + | |
− | table,td,th {
| + | |
− | border-collapse:collapse;
| + | |
− | border: 2px solid #000000;
| + | |
− | margin-left: 10px;
| + | |
− | margin-right: 10px;
| + | |
− | }
| + | |
− | <!-- End of Extra styles, not present in Software template (added by Almiro?) -->
| + | |
− | | + | |
| </style> | | </style> |
| <!-------------------- HTML CONTENT --------------------------------> | | <!-------------------- HTML CONTENT --------------------------------> |
Line 402: |
Line 19: |
| <div class="container"> | | <div class="container"> |
| | | |
− | <!-- Copied from "S3_G1_HP_YKH.html" -->
| + | |
| <div class="subsite-container"> | | <div class="subsite-container"> |
− | <div class = "submenu-title">INDEX</div> | + | <div class = "submenu-title">Team</div> |
| <div class = index-box> | | <div class = index-box> |
− | <a href="#">Main</a> | + | <a href="https://2021.igem.org/Team:Open_Science_Global/Attributions">Attributions</a> |
− | <a href="#">Subheading_1</a> | + | <a href="https://2021.igem.org/Team:Open_Science_Global/Inclusivity">Inclusivity</a> |
− | <a href="#">Subheading_2</a> | + | <a href="https://2021.igem.org/Team:Open_Science_Global/Collaborations">Collaborations</a> |
| </div> | | </div> |
| </div> | | </div> |
− | <!-- End of Copy from "S3_G1_HP_YKH.html" -->
| |
| | | |
− | <!-- <div class="Title">Attributions</div> -->
| |
− |
| |
− | <!-- <div class="Subtitle"> -->
| |
− | <!-- <div class = mini-subtitle> -->
| |
− | <!-- <div class="main-subtitle">Attributions</div> -->
| |
− | <!-- <div class="line"></div> -->
| |
− | <!-- <div class="subtopic">Main</div> -->
| |
− | <!-- </div> -->
| |
− | <!-- </div> -->
| |
− | <!-- <div class = "container"> -->
| |
− |
| |
− | <!-- <div class="subsite-container"> -->
| |
− | <!-- <div class = "submenu-title">INDEX</div> -->
| |
− | <!-- <div class = index-box> -->
| |
− | <!-- <a href="#">Main</a> -->
| |
− | <!-- </div> -->
| |
− | <!-- </div> -->
| |
| | | |
| <div class = "nav-menu"> | | <div class = "nav-menu"> |
Line 446: |
Line 45: |
| | | |
| <div class="text-container"> | | <div class="text-container"> |
| + | <div class = "title-container"> |
| <h2 id="Team Attribution">Team Attribution</h2> | | <h2 id="Team Attribution">Team Attribution</h2> |
| + | </div> |
| <div class="text"> | | <div class="text"> |
| <br><p><b>Team student members, advisors, instructors, and PIs</b></p> | | <br><p><b>Team student members, advisors, instructors, and PIs</b></p> |
Line 491: |
Line 92: |
| | | |
| </div> | | </div> |
− | | + | <div class = "title-container"> |
| <h2 id="Attributions">Attributions</h2> | | <h2 id="Attributions">Attributions</h2> |
− | | + | </div> |
| <div class="text"> | | <div class="text"> |
| <p> | | <p> |
Line 503: |
Line 104: |
| | | |
| </div> | | </div> |
− | | + | <div class = "title-container"> |
| <h2 id="Team Leads">Team Leads</h2> | | <h2 id="Team Leads">Team Leads</h2> |
| + | </div> |
| <div class="text"> | | <div class="text"> |
| <p> | | <p> |
Line 510: |
Line 112: |
| </p> | | </p> |
| </div> | | </div> |
| + | <div class = "title-container"> |
| <h2 id="Instructors and Advisors">Instructors and Advisors</h2> | | <h2 id="Instructors and Advisors">Instructors and Advisors</h2> |
| + | </div> |
| <div class="text"> | | <div class="text"> |
| <p> | | <p> |
Line 522: |
Line 126: |
| </p> | | </p> |
| </div> | | </div> |
− | | + | <div class = "title-container"> |
| <h2 id="PI">PI</h2> | | <h2 id="PI">PI</h2> |
| + | </div> |
| <div class="text"> | | <div class="text"> |
| <p> | | <p> |
Line 543: |
Line 148: |
| </p> | | </p> |
| </div> | | </div> |
| + | <div class = "title-container"> |
| <h2 id="Subteams">Subteams</h2> | | <h2 id="Subteams">Subteams</h2> |
| + | </div> |
| <div class="text"> | | <div class="text"> |
| <p> | | <p> |