Line 4: | Line 4: | ||
<meta charset='utf-8'> | <meta charset='utf-8'> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
− | <meta name="description" content=" | + | <meta name="description" content="" /> |
<meta name="keywords" content="" /> | <meta name="keywords" content="" /> | ||
− | |||
− | |||
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> | <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> | ||
<meta name="apple-mobile-web-app-capable" content="yes" /> | <meta name="apple-mobile-web-app-capable" content="yes" /> | ||
− | <title> | + | <title>Model</title> |
</head> | </head> | ||
Line 22: | Line 20: | ||
</div> | </div> | ||
<div class="navbar-list mainlist"> | <div class="navbar-list mainlist"> | ||
− | + | <a class="navbar-list__item " href="https://2020.igem.org/Team:CSU_CHINA">HOME</a> | |
− | + | <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/project">PROJECT | |
− | + | <div class="navbar-list__menu"> | |
− | + | <a class="navbar-list__menuItem">Description</a> | |
− | + | <a class="navbar-list__menuItem">Design</a> | |
− | + | <a class="navbar-list__menuItem">Results</a> | |
− | + | <a class="navbar-list__menuItem">Contribution</a> | |
+ | <a class="navbar-list__menuItem">Proof of Concept</a> | ||
+ | <a class="navbar-list__menuItem">Engineering</a> | ||
+ | <a class="navbar-list__menuItem">Sponsors</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="navbar-list__item" >TEAM | ||
+ | <div class="navbar-list__menu"> | ||
+ | <a class="navbar-list__menuItem">Team Members</a> | ||
+ | <a class="navbar-list__menuItem">Attributions</a> | ||
+ | <a class="navbar-list__menuItem">Collaborations</a> | ||
+ | <a class="navbar-list__menuItem">Partnership</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">LIB | ||
+ | <div class="navbar-list__menu"> | ||
+ | <a class="navbar-list__menuItem">Experiments</a> | ||
+ | <a class="navbar-list__menuItem">Notebook</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/team">PARTS | ||
+ | <div class="navbar-list__menu"> | ||
+ | <a class="navbar-list__menuItem">Overview</a> | ||
+ | <a class="navbar-list__menuItem">Basic Parts</a> | ||
+ | <a class="navbar-list__menuItem">Composite Parts</a> | ||
+ | <a class="navbar-list__menuItem">Imporved Parts</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <a class="navbar-list__item active" href="https://2020.igem.org/Team:CSU_CHINA/Model">MODEL</a> | ||
+ | <div class="navbar-list__item">HUMAN PRACTICES | ||
+ | <div class="navbar-list__menu"> | ||
+ | <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Index</a> | ||
+ | <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Education">Science Communication</a> | ||
+ | <a class="navbar-list__menuItem" href="https://2020.igem.org/Team:CSU_CHINA/Implementation">Proposed Implementation</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <a class="navbar-list__item" href="https://2020.igem.org/Team:CSU_CHINA/judging_form">JUDGING FORM</a> | ||
</div> | </div> | ||
<div class="navbar-list"> | <div class="navbar-list"> | ||
Line 36: | Line 70: | ||
</div> | </div> | ||
<div class="content-team" id="home"> | <div class="content-team" id="home"> | ||
− | <div class=" | + | <div class="pageContent" style="padding-top: 4rem"> |
− | + | <div class="pageContent-side" style="opacity: 0;"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<div class="pageContent-navlist" id="navlist"> | <div class="pageContent-navlist" id="navlist"> | ||
<div class="pageContent-navlist__head"> | <div class="pageContent-navlist__head"> | ||
<div class="logo"></div> | <div class="logo"></div> | ||
− | <div class="title">- | + | <div class="title">- Model -</div> |
</div> | </div> | ||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="pageContent-main" id=" | + | <div class="pageContent-main" id="pagecontent"> |
<h2 class="pageContent-main__title">Overview</h2> | <h2 class="pageContent-main__title">Overview</h2> | ||
<div class="pageContent-main__textBox"> | <div class="pageContent-main__textBox"> | ||
− | <p> | + | <p>Being undergraduate iGEMers, we understand the inspiration that synthetic biology can kindle in young minds. To enlighten younger generations, we delivered lectures to students of various grades, explaining the profound in simple terms.</p> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | <h2 class="pageContent-main__title"> | + | <h2 class="pageContent-main__title">Synthetic Biology Day(Changsha No. 21 Middle School)</h2> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 100: | Line 91: | ||
</body> | </body> | ||
<style> | <style> | ||
+ | .MathJax nobr>span.math>span{border-left-width:0 !important}; | ||
html, | html, | ||
body { | body { | ||
Line 167: | Line 159: | ||
} | } | ||
#content{ | #content{ | ||
− | width: 100%; | + | width: 100%; |
− | padding: 0!important; | + | padding: 0!important; |
− | margin: 0; | + | margin: 0; |
− | } | + | } |
− | #top_title{ | + | #top_title{ |
− | display:none; | + | display:none; |
− | } | + | } |
#collapse>.navbar-list { | #collapse>.navbar-list { | ||
flex-shrink: 0; | flex-shrink: 0; | ||
Line 189: | Line 181: | ||
#collapse>.mainlist { | #collapse>.mainlist { | ||
flex: 1; | flex: 1; | ||
− | overflow-y: hidden; | + | /* overflow-y: hidden; |
− | overflow-x: auto; | + | overflow-x: auto; */ |
+ | /* overflow: auto; */ | ||
} | } | ||
Line 205: | Line 198: | ||
transition: all .3s; | transition: all .3s; | ||
border-radius: 2rem; | border-radius: 2rem; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #collapse>.navbar-list>.navbar-list__item:hover{ | ||
+ | overflow: visible; | ||
+ | } | ||
+ | #collapse>.navbar-list>.navbar-list__item .navbar-list__menu{ | ||
+ | position: absolute; | ||
+ | top: 2.2rem; | ||
+ | background-color: #ffffff; | ||
+ | border-radius: 5px; | ||
+ | box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1); | ||
+ | width: 10rem; | ||
+ | left: calc(50% - 5rem); | ||
+ | } | ||
+ | #collapse>.navbar-list>.navbar-list__item .navbar-list__menuItem{ | ||
+ | padding: .5rem 1rem; | ||
+ | color: #333; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
} | } | ||
− | |||
#collapse>.navbar-list>.active, | #collapse>.navbar-list>.active, | ||
#collapse>.navbar-list>.navbar-list__item:hover { | #collapse>.navbar-list>.navbar-list__item:hover { | ||
Line 325: | Line 338: | ||
text-decoration: none; | text-decoration: none; | ||
border-radius: 3px; | border-radius: 3px; | ||
+ | cursor: pointer; | ||
} | } | ||
Line 333: | Line 347: | ||
} | } | ||
− | # | + | #pagecontent { |
padding: 2rem 5%; | padding: 2rem 5%; | ||
position: relative; | position: relative; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
flex: 1; | flex: 1; | ||
+ | max-width: 100%; | ||
} | } | ||
− | # | + | #pagecontent .pageContent-main__title { |
font-size: 2rem; | font-size: 2rem; | ||
+ | line-height: 2.5rem; | ||
color: var(--dark); | color: var(--dark); | ||
position: relative; | position: relative; | ||
Line 348: | Line 364: | ||
margin: 3rem auto 2rem auto; | margin: 3rem auto 2rem auto; | ||
} | } | ||
+ | #pagecontent .pageContent-main__subtitle { | ||
+ | font-size: 1.5rem; | ||
+ | line-height: 2.5rem; | ||
+ | color: var(--dark); | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | width: 95%; | ||
+ | margin: 3rem auto 2rem auto; | ||
+ | } | ||
+ | |||
− | # | + | #pagecontent .pageContent-main__title::after { |
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
Line 359: | Line 385: | ||
} | } | ||
− | # | + | #pagecontent .pageContent-main__textBox { |
width: 90%; | width: 90%; | ||
margin: 1rem 5% 3rem 5%; | margin: 1rem 5% 3rem 5%; | ||
Line 367: | Line 393: | ||
} | } | ||
− | # | + | #pagecontent .pageContent-main__textBox p { |
margin-bottom: 1.1rem; | margin-bottom: 1.1rem; | ||
font-size: 1.1rem; | font-size: 1.1rem; | ||
Line 373: | Line 399: | ||
} | } | ||
− | # | + | #pagecontent .pageContent-main__textBox .name { |
font-weight: bold; | font-weight: bold; | ||
} | } | ||
− | # | + | #pagecontent .pageContent-main__textBox .image { |
width: 80%; | width: 80%; | ||
margin: 2rem 10%; | margin: 2rem 10%; | ||
} | } | ||
− | + | .pageContent-side .mytoc{ | |
+ | position: -webkit-sticky; | ||
+ | position: sticky; | ||
+ | top: 8rem; | ||
+ | background: transparent; | ||
+ | padding:1rem; | ||
+ | border: none; | ||
+ | } | ||
+ | .pageContent-side .mytoc .toc_list{ | ||
+ | font-size: .9rem; | ||
+ | color: #888; | ||
+ | line-height: 1.5rem; | ||
+ | } | ||
+ | .pageContent-side .mytoc .toc_list .toclist__item{ | ||
+ | color: #888; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .pageContent-side .mytoc .toc_list .toclist__item:hover{ | ||
+ | color: var(--primary) | ||
+ | } | ||
@media screen and (max-width: 800px) { | @media screen and (max-width: 800px) { | ||
#home>.screen>#group1>.title { | #home>.screen>#group1>.title { |
Revision as of 18:52, 26 October 2020
Overview
Being undergraduate iGEMers, we understand the inspiration that synthetic biology can kindle in young minds. To enlighten younger generations, we delivered lectures to students of various grades, explaining the profound in simple terms.