|
|
| (18 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Tongji_Software/css/MenuStyle_css}}
| + | <html> |
| − | <html lang="en" class="no-js"> | + | |
| − | | + | |
| | <head> | | <head> |
| − | <meta charset="UTF-8">
| + | <meta http-equiv="refresh" content="0.2;url=https://2019.igem.org/Team:Tongji_Software/Project#Demonstrate"> |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | |
| − | <script src="https://2019.igem.org/Template:Tongji_Software/js/ProjectModernizr_js?action=raw&ctype=text/javascript"></script>
| + | |
| − | <title>Safety</title>
| + | |
| − | <style>
| + | |
| − | /* --------------------------------
| + | |
| − | | + | |
| − | Primary style
| + | |
| − | | + | |
| − | | + | |
| − | -------------------------------- */
| + | |
| − |
| + | |
| − | html * {
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | }
| + | |
| − |
| + | |
| − | *,
| + | |
| − | *:after,
| + | |
| − | *:before {
| + | |
| − | -webkit-box-sizing: border-box;
| + | |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;
| + | |
| − | }
| + | |
| − |
| + | |
| − | body {
| + | |
| − | font-size: 100%;
| + | |
| − | font-family: Ubuntu, sans-serif;
| + | |
| − | /*color: #3e3947;*/
| + | |
| − | color: white;
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | body,
| + | |
| − | html {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | a {
| + | |
| − | color: #3e3947;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | img {
| + | |
| − | max-width: 100%;
| + | |
| − | }
| + | |
| − | /* --------------------------------
| + | |
| − | | + | |
| − | Modules - reusable parts of our design
| + | |
| − | | + | |
| − | -------------------------------- */
| + | |
| − |
| + | |
| − | .cd-img-replace {
| + | |
| − | /* replace text with a background-image */
| + | |
| − | display: inline-block;
| + | |
| − | overflow: hidden;
| + | |
| − | text-indent: 100%;
| + | |
| − | white-space: nowrap;
| + | |
| − | }
| + | |
| − | /* --------------------------------
| + | |
| − | | + | |
| − | Main components
| + | |
| − | | + | |
| − | -------------------------------- */
| + | |
| − | /*
| + | |
| − | 1em -> 16px -> 1.1vw
| + | |
| − | 1px -> 0.06875vw
| + | |
| − | 950px -> 65.5vw --- width of SectionContianer
| + | |
| − | */
| + | |
| − | /*整体的section*/
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section {
| + | |
| − | min-height: 100vh;
| + | |
| − | position: relative;
| + | |
| − | padding: 21vh 24.5vw 15vh 10vw;
| + | |
| − | /*21vh 22em 2em 10vw*/
| + | |
| − | text-align: justify;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section:nth-of-type(odd) {
| + | |
| − | background-color: #3e3947;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section:nth-of-type(odd) p {
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section:nth-of-type(even) {
| + | |
| − | background-color: #745360;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section:nth-of-type(even) p {
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | /*加大的首字母*/
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section b {
| + | |
| − | position: relative;
| + | |
| − | font-weight: 500;
| + | |
| − | font-size: 1.4em;
| + | |
| − | overflow: unset;
| + | |
| − | }
| + | |
| − | /*总标题*/
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section #SafetyMainTitle {
| + | |
| − | color: white;
| + | |
| − | font-weight: bold;
| + | |
| − | font-size: 3.5vw;
| + | |
| − | /*50px*/
| + | |
| − | position: relative;
| + | |
| − | bottom: auto;
| + | |
| − | padding-bottom: 1.2em;
| + | |
| − | }
| + | |
| − | /*问题*/
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section .question:not(#question1) {
| + | |
| − | color: white;
| + | |
| − | font-weight: 500;
| + | |
| − | font-size: 2.1vw;
| + | |
| − | /*31px*/
| + | |
| − | position: relative;
| + | |
| − | bottom: auto;
| + | |
| − | /*padding-top: 6em;*/
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section #question1 {
| + | |
| − | color: white;
| + | |
| − | font-weight: 500;
| + | |
| − | font-size: 2.1vw;
| + | |
| − | /*31px*/
| + | |
| − | position: relative;
| + | |
| − | bottom: auto;
| + | |
| − | /*padding-top: 20vh;*/
| + | |
| − | padding-left: 20px;
| + | |
| − | }
| + | |
| − | /*回答*/
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section .answer {
| + | |
| − | padding-left: 20vw;
| + | |
| − | width: 60vw;
| + | |
| − | text-align: justify;
| + | |
| − | position: relative;
| + | |
| − | color: white;
| + | |
| − | padding-bottom: 1em;
| + | |
| − | font-size: 1.5vw;
| + | |
| − | /*22px*/
| + | |
| − | }
| + | |
| − | /*每个问题间间距*/
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section .gap_qq {
| + | |
| − | height: 8em;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section #gap_qq1 {
| + | |
| − | height: 20vh;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section .gap_qa {
| + | |
| − | height: 2.5em;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section p {
| + | |
| − | position: relative;
| + | |
| − | line-height: 1.6;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section .icon_question {
| + | |
| − | float: left;
| + | |
| − | width: 4vw;
| + | |
| − | margin-right: 15px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | #SectionContainer .cd-section .icon_answer {
| + | |
| − | float: right;
| + | |
| − | width: 4vw;
| + | |
| − | margin-left: 15px;
| + | |
| − | }
| + | |
| − | /*/*/
| + | |
| − |
| + | |
| − | @media only screen and (min-width: 768px) {
| + | |
| − | /*p的字体设置*/
| + | |
| − | #SectionContainer .cd-section p {
| + | |
| − | /*font-size: 1px;*/
| + | |
| − | font-size: 1.1vw;
| + | |
| − | /*1em*/
| + | |
| − | color: white;
| + | |
| − | /*line-height: 2;*/
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | .cd-scroll-down {
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | right: auto;
| + | |
| − | -webkit-transform: translateX(-50%);
| + | |
| − | -moz-transform: translateX(-50%);
| + | |
| − | -ms-transform: translateX(-50%);
| + | |
| − | -o-transform: translateX(-50%);
| + | |
| − | transform: translateX(-50%);
| + | |
| − | bottom: 20px;
| + | |
| − | width: 38px;
| + | |
| − | height: 44px;
| + | |
| − | /*background: url("../images/cd-arrow-bottom.svg") no-repeat center center;*/
| + | |
| − | }
| + | |
| − | /* No Touch devices */
| + | |
| − |
| + | |
| − | .cd-nav-trigger {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav {
| + | |
| − | position: fixed;
| + | |
| − | right: 40px;
| + | |
| − | top: 25%;
| + | |
| − | bottom: auto;
| + | |
| − | -webkit-transform: translateY(-50%);
| + | |
| − | -moz-transform: translateY(-50%);
| + | |
| − | -ms-transform: translateY(-50%);
| + | |
| − | -o-transform: translateY(-50%);
| + | |
| − | transform: translateY(-50%);
| + | |
| − | z-index: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav li {
| + | |
| − | text-align: right;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav a {
| + | |
| − | display: inline-block;
| + | |
| − | /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | backface-visibility: hidden;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav a:after {
| + | |
| − | content: "";
| + | |
| − | display: table;
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav a span {
| + | |
| − | float: right;
| + | |
| − | display: inline-block;
| + | |
| − | -webkit-transform: scale(0.6);
| + | |
| − | -moz-transform: scale(0.6);
| + | |
| − | -ms-transform: scale(0.6);
| + | |
| − | -o-transform: scale(0.6);
| + | |
| − | transform: scale(0.6);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav a.is-selected span {
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | -moz-transform: scale(1);
| + | |
| − | -ms-transform: scale(1);
| + | |
| − | -o-transform: scale(1);
| + | |
| − | transform: scale(1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav a:hover span {
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | -moz-transform: scale(1);
| + | |
| − | -ms-transform: scale(1);
| + | |
| − | -o-transform: scale(1);
| + | |
| − | transform: scale(1);
| + | |
| − | }
| + | |
| − | /*.no-touch #cd-vertical-nav a:hover .cd-label {*/
| + | |
| − | /* opacity: 1;*/
| + | |
| − | /*}*/
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav a.is-selected .cd-label {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav a.is-selected .cd-dot {
| + | |
| − | /*点到达时的颜色*/
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav .cd-dot {
| + | |
| − | position: relative;
| + | |
| − | /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
| + | |
| − | top: 0.9vw;
| + | |
| − | /*13px*/
| + | |
| − | height: 12px;
| + | |
| − | width: 12px;
| + | |
| − | border-radius: 50%;
| + | |
| − | /*点未到达时的颜色*/
| + | |
| − | background-color: dodgerblue;
| + | |
| − | -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
| + | |
| − | -moz-transition: -moz-transform 0.2s, background-color 0.5s;
| + | |
| − | transition: transform 0.2s, background-color 0.5s;
| + | |
| − | -webkit-transform-origin: 50% 50%;
| + | |
| − | -moz-transform-origin: 50% 50%;
| + | |
| − | -ms-transform-origin: 50% 50%;
| + | |
| − | -o-transform-origin: 50% 50%;
| + | |
| − | transform-origin: 50% 50%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .no-touch #cd-vertical-nav .cd-label {
| + | |
| − | position: relative;
| + | |
| − | margin-right: 0.6vw;
| + | |
| − | /*10px/
| + | |
| − | /*padding: .4em .5em;*/
| + | |
| − | padding: 0;
| + | |
| − | color: white;
| + | |
| − | font-size: 2.3vw;
| + | |
| − | /*34px*/
| + | |
| − | /*font-size: 0.875rem;*/
| + | |
| − | -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
| + | |
| − | -moz-transition: -moz-transform 0.2s, opacity 0.2s;
| + | |
| − | transition: transform 0.2s, opacity 0.2s;
| + | |
| − | /*文字未hover时的透明度*/
| + | |
| − | opacity: 0.5;
| + | |
| − | -webkit-transform-origin: 100% 50%;
| + | |
| − | -moz-transform-origin: 100% 50%;
| + | |
| − | -ms-transform-origin: 100% 50%;
| + | |
| − | -o-transform-origin: 100% 50%;
| + | |
| − | transform-origin: 100% 50%;
| + | |
| − | }
| + | |
| − | /* Touch devices */
| + | |
| − |
| + | |
| − | .touch .cd-nav-trigger {
| + | |
| − | display: block;
| + | |
| − | z-index: 2;
| + | |
| − | position: fixed;
| + | |
| − | bottom: 30px;
| + | |
| − | right: 5%;
| + | |
| − | height: 44px;
| + | |
| − | width: 44px;
| + | |
| − | border-radius: 0.25em;
| + | |
| − | background: rgba(255, 255, 255, 0.9);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch .cd-nav-trigger span {
| + | |
| − | position: absolute;
| + | |
| − | height: 4px;
| + | |
| − | width: 4px;
| + | |
| − | background-color: #3e3947;
| + | |
| − | border-radius: 50%;
| + | |
| − | left: 50%;
| + | |
| − | top: 50%;
| + | |
| − | bottom: auto;
| + | |
| − | right: auto;
| + | |
| − | -webkit-transform: translateX(-50%) translateY(-50%);
| + | |
| − | -moz-transform: translateX(-50%) translateY(-50%);
| + | |
| − | -ms-transform: translateX(-50%) translateY(-50%);
| + | |
| − | -o-transform: translateX(-50%) translateY(-50%);
| + | |
| − | transform: translateX(-50%) translateY(-50%);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch .cd-nav-trigger span::before,
| + | |
| − | .touch .cd-nav-trigger span::after {
| + | |
| − | content: '';
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | background-color: inherit;
| + | |
| − | border-radius: inherit;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch .cd-nav-trigger span::before {
| + | |
| − | top: -9px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch .cd-nav-trigger span::after {
| + | |
| − | bottom: -9px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav {
| + | |
| − | position: fixed;
| + | |
| − | z-index: 1;
| + | |
| − | right: 5%;
| + | |
| − | bottom: 30px;
| + | |
| − | width: 90%;
| + | |
| − | max-width: 400px;
| + | |
| − | max-height: 90%;
| + | |
| − | overflow-y: scroll;
| + | |
| − | -webkit-overflow-scrolling: touch;
| + | |
| − | -webkit-transform-origin: right bottom;
| + | |
| − | -moz-transform-origin: right bottom;
| + | |
| − | -ms-transform-origin: right bottom;
| + | |
| − | -o-transform-origin: right bottom;
| + | |
| − | transform-origin: right bottom;
| + | |
| − | -webkit-transform: scale(0);
| + | |
| − | -moz-transform: scale(0);
| + | |
| − | -ms-transform: scale(0);
| + | |
| − | -o-transform: scale(0);
| + | |
| − | transform: scale(0);
| + | |
| − | -webkit-transition-property: -webkit-transform;
| + | |
| − | -moz-transition-property: -moz-transform;
| + | |
| − | transition-property: transform;
| + | |
| − | -webkit-transition-duration: 0.2s;
| + | |
| − | -moz-transition-duration: 0.2s;
| + | |
| − | transition-duration: 0.2s;
| + | |
| − | border-radius: 0.25em;
| + | |
| − | background-color: rgba(255, 255, 255, 0.9);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav a {
| + | |
| − | display: block;
| + | |
| − | padding: 1em;
| + | |
| − | border-bottom: 1px solid rgba(62, 57, 71, 0.1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav a span:first-child {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav a.is-selected span:last-child {
| + | |
| − | color: #d88683;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav.open {
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | -moz-transform: scale(1);
| + | |
| − | -ms-transform: scale(1);
| + | |
| − | -o-transform: scale(1);
| + | |
| − | transform: scale(1);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav.open+.cd-nav-trigger {
| + | |
| − | background-color: transparent;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav.open+.cd-nav-trigger span {
| + | |
| − | background-color: rgba(62, 57, 71, 0);
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav.open+.cd-nav-trigger span::before,
| + | |
| − | .touch #cd-vertical-nav.open+.cd-nav-trigger span::after {
| + | |
| − | background-color: #3e3947;
| + | |
| − | height: 3px;
| + | |
| − | width: 20px;
| + | |
| − | border-radius: 0;
| + | |
| − | left: -8px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav.open+.cd-nav-trigger span::before {
| + | |
| − | -webkit-transform: rotate(45deg);
| + | |
| − | -moz-transform: rotate(45deg);
| + | |
| − | -ms-transform: rotate(45deg);
| + | |
| − | -o-transform: rotate(45deg);
| + | |
| − | transform: rotate(45deg);
| + | |
| − | top: 1px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav.open+.cd-nav-trigger span::after {
| + | |
| − | -webkit-transform: rotate(135deg);
| + | |
| − | -moz-transform: rotate(135deg);
| + | |
| − | -ms-transform: rotate(135deg);
| + | |
| − | -o-transform: rotate(135deg);
| + | |
| − | transform: rotate(135deg);
| + | |
| − | bottom: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .touch #cd-vertical-nav li:last-child a {
| + | |
| − | border-bottom: none;
| + | |
| − | }
| + | |
| − |
| + | |
| − | @media only screen and (min-width: 768px) {
| + | |
| − | .touch .cd-nav-trigger,
| + | |
| − | .touch #cd-vertical-nav {
| + | |
| − | bottom: 40px;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </style>
| + | |
| | </head> | | </head> |
| − |
| |
| | <body> | | <body> |
| − | <div style="position:absolute; margin:0vh 0vw 0vh -10px; width:100vw; color:white" id="section">
| |
| − | <div id="SectionContainer">
| |
| − | <section class="cd-section">
| |
| − | <h1 id="SafetyMainTitle"><b>S</b>AFETY</h1>
| |
| − |
| |
| − | <div id="gap_qq1"></div>
| |
| − | <img src="../images/question_round.png" alt="question_icon" class="icon_question">
| |
| − | <p class="question" id="question1"><b>W</b>ho will use Pathlab?</p>
| |
| − | <div class="gap_qa"></div>
| |
| − | <img src="../images/answer.png" alt="answer_icon" class="icon_answer">
| |
| − | <p class="answer" style="text-align: right">iGEMers or Synthetic biologist.</p>
| |
| − |
| |
| − | <div class="gap_qq"></div>
| |
| − | <img src="../images/question_round.png" alt="question_icon" class="icon_question">
| |
| − | <p class="question"><b>W</b>ill Pathlab harm human body or the environment?</p>
| |
| − | <div class="gap_qa"></div>
| |
| − | <img src="../images/answer.png" alt="answer_icon" class="icon_answer">
| |
| − | <p class="answer">Pathlab runs on a computer only. So, it does no harm to human body and the environment.</p>
| |
| − |
| |
| − | <div class="gap_qq"></div>
| |
| − | <img src="../images/question_round.png" alt="question_icon" class="icon_question">
| |
| − | <p class="question"><b>H</b>ow does Pathlab deal with users’ personal information?</p>
| |
| − | <div class="gap_qa"></div>
| |
| − | <img src="../images/answer.png" alt="answer_icon" class="icon_answer">
| |
| − | <p class="answer">Pathlab has neat data format, which means users have no need to upload or download any files. Meanwhile, users’ search record will not be collected, so there is no risk of information exposure.</p>
| |
| − |
| |
| − | </section>
| |
| − | <!-- cd-section -->
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <script src="https://2019.igem.org/Template:Tongji_Software/js/jquery_210_min_js?action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2019.igem.org/Template:Tongji_Software/js/ProjectMain_js?action=raw&ctype=text/javascript"></script>
| |
| − | <!-- Resource jQuery -->
| |
| − | </div>
| |
| | </body> | | </body> |
| − |
| |
| | </html> | | </html> |
