Line 5: | Line 5: | ||
<title>PROJECT</title> | <title>PROJECT</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <style> | ||
+ | /* -------------------------------- | ||
+ | |||
+ | Primary style | ||
+ | |||
+ | -------------------------------- */ | ||
+ | |||
+ | @font-face{ | ||
+ | font-family: Ubuntu; | ||
+ | src: url("https://static.igem.org/mediawiki/2019/6/6d/T--Tongji_Software--fonts-Ubuntu.ttf"); | ||
+ | } | ||
+ | |||
+ | 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; | ||
+ | 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 | ||
+ | |||
+ | -------------------------------- */ | ||
+ | .cd-section { | ||
+ | min-height: 100%; | ||
+ | position: relative; | ||
+ | padding: 2em 0; | ||
+ | } | ||
+ | .cd-section:nth-of-type(odd) { | ||
+ | background-color: #3e3947; | ||
+ | } | ||
+ | .cd-section:nth-of-type(odd) p { | ||
+ | color: #898099; | ||
+ | } | ||
+ | .cd-section:nth-of-type(even) { | ||
+ | background-color: #745360; | ||
+ | } | ||
+ | .cd-section:nth-of-type(even) p { | ||
+ | color: #bda3ad; | ||
+ | } | ||
+ | .cd-section h1, .cd-section p { | ||
+ | position: relative; | ||
+ | /*position: absolute;*/ | ||
+ | /*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%);*/ | ||
+ | /*width: 90%;*/ | ||
+ | /*max-width: 768px;*/ | ||
+ | /*text-align: center;*/ | ||
+ | } | ||
+ | .cd-section h1#description { | ||
+ | color: red; | ||
+ | font-weight: 300; | ||
+ | text-transform: uppercase; | ||
+ | /*font-size: 200px;*/ | ||
+ | font-size: 10.25rem; | ||
+ | } | ||
+ | .cd-section p { | ||
+ | line-height: 1.6; | ||
+ | } | ||
+ | |||
+ | /*/*/ | ||
+ | @media only screen and (min-width: 768px) { | ||
+ | .cd-section h1 { | ||
+ | font-size: 30px; | ||
+ | font-size: 1.875rem; | ||
+ | } | ||
+ | .cd-section p { | ||
+ | font-size: 20px; | ||
+ | font-size: 1.25rem; | ||
+ | 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("../img/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: 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: 10px; | ||
+ | /*padding: .4em .5em;*/ | ||
+ | padding: 0; | ||
+ | color: white; | ||
+ | font-size: 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; z-index:0.5; margin:20px 0px 0px 24px;margin-top:30vh; width:100%;border:none"> | |
− | + | <nav id="cd-vertical-nav"> | |
+ | <ul> | ||
+ | <li> | ||
+ | <a href="#section1" data-number="1"> | ||
+ | <span class="cd-dot"></span> | ||
+ | <span class="cd-label">Public Number</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#section2" data-number="2"> | ||
+ | <span class="cd-dot"></span> | ||
+ | <span class="cd-label">High School</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="#section3" data-number="3"> | ||
+ | <span class="cd-dot"></span> | ||
+ | <span class="cd-label">Tongji University</span> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 15:53, 6 October 2019