(刪掉空白) |
Allen850413 (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
− | + | /*DEFAULT WIKI SETTINGS*/ | |
− | /*************************************************************************************************************************************** | + | /*DONT TOUCH*/ |
− | + | /*************************************************************************************************************************************************************************************************************************************************************************************************************************************/ | |
− | + | #home_logo, #sideMenu { display:none; } | |
− | + | ||
− | + | ||
− | + | ||
#sideMenu, #top_title, .patrollink {display:none;} | #sideMenu, #top_title, .patrollink {display:none;} | ||
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} | ||
Line 113: | Line 12: | ||
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;} | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
/*mobile*/ | /*mobile*/ | ||
− | |||
− | |||
− | |||
/* 1800px */ | /* 1800px */ | ||
/************************************************/ | /************************************************/ | ||
@media only screen and (max-width: 1800px) { | @media only screen and (max-width: 1800px) { | ||
.igem_2018_team_content { width: 85%;} | .igem_2018_team_content { width: 85%;} | ||
− | .igem_2018_team_menu {display:block;} | + | .igem_2018_team_menu {display:block;} |
} | } | ||
− | |||
/* 1400px */ | /* 1400px */ | ||
/************************************************/ | /************************************************/ | ||
Line 136: | Line 26: | ||
.igem_2018_team_menu {display:block;} | .igem_2018_team_menu {display:block;} | ||
} | } | ||
− | |||
@media only screen and (max-width: 1001px) { | @media only screen and (max-width: 1001px) { | ||
.igem_2018_team_menu {display:block;} | .igem_2018_team_menu {display:block;} | ||
} | } | ||
− | |||
/* 1000px */ | /* 1000px */ | ||
/************************************************/ | /************************************************/ | ||
Line 150: | Line 38: | ||
} | } | ||
− | |||
− | |||
@media only screen and (max-width: 500px) { | @media only screen and (max-width: 500px) { | ||
.igem_2018_team_menu {min-width:100%; width:100%; } | .igem_2018_team_menu {min-width:100%; width:100%; } | ||
} | } | ||
+ | /*************************************************************************************************************************************************************************************************************************************************************************************************************************************/ | ||
+ | /*DEFAULT WIKI SETTINGS ENDS HERE*/ | ||
+ | @font-face { | ||
+ | font-family: 'CCUfontsBold'; | ||
+ | src: url('https://static.igem.org/mediawiki/2018/c/c2/T--CCU_Taiwan--CCUfontsBold.eot') ; | ||
+ | src: url('https://static.igem.org/mediawiki/2018/4/42/T--CCU_Taiwan--CCUfontsBold.ttf') format('truetype'), | ||
+ | url('https://static.igem.org/mediawiki/2018/6/68/T--CCU_Taiwan--CCUfontsBold.svg') format('svg'), | ||
+ | url('https://static.igem.org/mediawiki/2018/6/68/T--CCU_Taiwan--CCUfontsBold.svg') format('svg'), | ||
+ | url('https://static.igem.org/mediawiki/2018/d/dc/T--CCU_Taiwan--CCUfontsBold.woff') format('woff'); | ||
+ | } | ||
− | / | + | |
− | / | + | #globalWrapper { |
− | / | + | padding-bottom: 0px!important; |
− | . | + | } |
+ | |||
+ | #top { | ||
+ | position: fixed; | ||
+ | top: 100px; | ||
+ | z-index: 6; | ||
+ | } | ||
+ | |||
+ | body::-webkit-scrollbar { | ||
+ | display: none; | ||
+ | } | ||
+ | .background { | ||
+ | width:100%; | ||
+ | height: 100%; | ||
+ | z-index:1; | ||
+ | margin-bottom:-10%; | ||
+ | padding-top:10%; | ||
+ | padding-bottom:10%; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2018/0/0a/T--CCU_Taiwan--BC.PNG'); | ||
+ | } | ||
+ | header{ | ||
+ | margin:0 auto; | ||
+ | top:1.7vh; | ||
+ | width:100%; | ||
position: fixed; | position: fixed; | ||
− | + | z-index:10; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | header a { | ||
+ | text-decoration:none!important; | ||
+ | } | ||
+ | |||
nav { | nav { | ||
− | height: | + | margin:0; |
+ | padding:0; | ||
+ | height:7vh; | ||
+ | width: 100%; | ||
+ | box-shadow:0px 4px 6px 0px #444444; | ||
} | } | ||
− | + | .front { | |
− | + | z-index:11; | |
− | + | ||
− | + | ||
} | } | ||
− | + | .title { | |
− | + | float:left; | |
− | + | display: inline-block; | |
− | + | position: relative; | |
− | + | padding-top:10px; | |
+ | left:4vw; | ||
+ | width: 13.5vw; | ||
+ | height: 5.7vh; | ||
+ | text-align:center; | ||
+ | margin-left:0vw; | ||
+ | margin-right:0vw; | ||
+ | list-style-type: none; | ||
+ | font-size: 18px!important; | ||
+ | color: #F8F8FF; | ||
+ | line-height:25px; | ||
} | } | ||
− | + | .container #Home { | |
+ | background:#55c97e; | ||
+ | } | ||
+ | .container #Project { | ||
+ | background:#74cf7e; | ||
+ | } | ||
+ | |||
+ | .container #Parts { | ||
+ | background:#92cd7e; | ||
+ | } | ||
+ | |||
+ | .container #Modeling { | ||
+ | background:#a6ca7e; | ||
+ | } | ||
+ | |||
+ | .container #Drylab { | ||
+ | background:#bec37e; | ||
+ | } | ||
+ | |||
+ | .container #Human_Practice { | ||
+ | background:#d1c17e; | ||
+ | } | ||
+ | |||
+ | .container #Notebook { | ||
+ | background:#d1ad7e; | ||
+ | } | ||
+ | |||
+ | #home_button{ | ||
position:absolute; | position:absolute; | ||
− | + | left:0vw; | |
− | + | width:5.5vw; | |
− | + | height:7vh; | |
− | + | text-align:center; | |
− | + | z-index:10; | |
− | + | background:#9c957e; | |
− | + | ||
} | } | ||
− | + | #home_button img { | |
− | margin- | + | height:4.5vh!important; |
− | position: | + | width:2vw; |
+ | margin-top:1.2vh; | ||
+ | } | ||
+ | |||
+ | .img_title { | ||
+ | height:4vh; | ||
+ | padding-right: 1vw; | ||
+ | } | ||
+ | |||
+ | |||
+ | .sub { | ||
+ | display: none; | ||
+ | position:absolute; | ||
text-align: center; | text-align: center; | ||
+ | right:0vw; | ||
+ | top:6.2vh; | ||
+ | width:13.5vw!important; | ||
+ | height:40vh; | ||
+ | margin: 0 auto; | ||
+ | padding:0; | ||
+ | z-index:9!important; | ||
+ | box-shadow:3px 3px 3px 0px #444444; | ||
+ | } | ||
+ | |||
+ | #sub_home{ | ||
+ | height:40.5vh; | ||
+ | background:#55c97e; | ||
+ | } | ||
+ | |||
+ | #sub_project{ | ||
+ | height:40.5vh; | ||
+ | background:#74cf7e; | ||
+ | } | ||
+ | |||
+ | #sub_parts{ | ||
+ | height:24.5vh; | ||
+ | background:#92cd7e; | ||
+ | } | ||
+ | |||
+ | #sub_modeling{ | ||
+ | height:24.5vh; | ||
+ | background:#a6ca7e; | ||
+ | } | ||
+ | |||
+ | #sub_drylab{ | ||
+ | height:24.5vh; | ||
+ | background:#bec37e; | ||
+ | } | ||
+ | |||
+ | #sub_human_practice{ | ||
+ | height:40.5vh; | ||
+ | background:#d1c17e; | ||
+ | } | ||
+ | |||
+ | #sub_notebook{ | ||
+ | height:40.5vh; | ||
+ | background:#d1ad7e; | ||
+ | } | ||
+ | |||
+ | .sub a { | ||
+ | color: #F5F5F5; | ||
+ | } | ||
+ | |||
+ | .sub li { | ||
float:none; | float:none; | ||
− | display: | + | margin: auto; |
+ | /*margin-top: 1vh;*/ | ||
+ | height: 8vh; | ||
+ | width: 13.5vw; | ||
+ | display:block!important; | ||
+ | border-top-style:solid; | ||
+ | border-top-width:1px; | ||
+ | border-top-color: #F8F8FF; | ||
+ | } | ||
+ | .sub a { | ||
+ | font-size:15px; | ||
+ | line-height:8vh; | ||
} | } | ||
nav a { | nav a { | ||
− | color:# | + | color:#fcfcfc; |
− | font-family: | + | font-family: 'CCUfontsBold', Arial, sans-serif; |
− | font-size: | + | font-size: 1.5vw; |
− | + | ||
} | } | ||
− | nav a::before { | + | .title:hover { |
− | content: ''; | + | background-color:#36BF36; |
+ | transition: 500ms; | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | .list { | ||
+ | -webkit-animation: fadein 2s; | ||
+ | } | ||
+ | .list:hover { | ||
+ | background-color:#567256; | ||
+ | transition: 500ms; | ||
+ | } | ||
+ | nav hr { | ||
+ | position:relative; | ||
+ | border: 0; | ||
+ | height: 1.5px; | ||
+ | width: 20%; | ||
+ | top: -2.7vh; | ||
+ | left: 12.18vw; | ||
+ | background-image: linear-gradient(to right, rgba(54, 191, 54, 0.5), rgba(225, 255, 255, 1), rgba(54, 191, 54, .5)); | ||
+ | transform:rotate(90deg); | ||
+ | -o-transform:rotate(90deg); | ||
+ | -moz-transform:rotate(90deg); | ||
+ | -webkit-transform:rotate(90deg); | ||
+ | } | ||
+ | /*! | ||
+ | * fullPage 3.0.1 | ||
+ | * https://github.com/alvarotrigo/fullPage.js | ||
+ | * | ||
+ | * @license GPLv3 for open source use only | ||
+ | * or Fullpage Commercial License for commercial use | ||
+ | * http://alvarotrigo.com/fullPage/pricing/ | ||
+ | * | ||
+ | * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo | ||
+ | */ | ||
+ | |||
+ | html.fp-enabled, | ||
+ | .fp-enabled body { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | overflow:hidden; | ||
+ | |||
+ | /*Avoid flicker on slides transitions for mobile phones #336 */ | ||
+ | -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
+ | } | ||
+ | .fp-section { | ||
+ | position: relative; | ||
+ | -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */ | ||
+ | -moz-box-sizing: border-box; /* <=28 */ | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | .fp-slide { | ||
+ | float: left; | ||
+ | } | ||
+ | .fp-slide, .fp-slidesContainer { | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | } | ||
+ | .fp-slides { | ||
+ | z-index:1; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */ | ||
+ | transition: all 0.3s ease-out; | ||
+ | } | ||
+ | .fp-section.fp-table, .fp-slide.fp-table { | ||
+ | display: table; | ||
+ | table-layout:fixed; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .fp-tableCell { | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .fp-slidesContainer { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | .fp-controlArrow { | ||
+ | -webkit-user-select: none; /* webkit (safari, chrome) browsers */ | ||
+ | -moz-user-select: none; /* mozilla browsers */ | ||
+ | -khtml-user-select: none; /* webkit (konqueror) browsers */ | ||
+ | -ms-user-select: none; /* IE10+ */ | ||
+ | position: absolute; | ||
+ | z-index: 4; | ||
+ | top: 50%; | ||
+ | cursor: pointer; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-style: solid; | ||
+ | margin-top: -38px; | ||
+ | -webkit-transform: translate3d(0,0,0); | ||
+ | -ms-transform: translate3d(0,0,0); | ||
+ | transform: translate3d(0,0,0); | ||
+ | } | ||
+ | .fp-controlArrow.fp-prev { | ||
+ | left: 15px; | ||
+ | width: 0; | ||
+ | border-width: 38.5px 34px 38.5px 0; | ||
+ | border-color: transparent #fff transparent transparent; | ||
+ | } | ||
+ | .fp-controlArrow.fp-next { | ||
+ | right: 15px; | ||
+ | border-width: 38.5px 0 38.5px 34px; | ||
+ | border-color: transparent transparent transparent #fff; | ||
+ | } | ||
+ | .fp-scrollable { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | .fp-scroller{ | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .iScrollIndicator{ | ||
+ | border: 0 !important; | ||
+ | } | ||
+ | .fp-notransition { | ||
+ | -webkit-transition: none !important; | ||
+ | transition: none !important; | ||
+ | } | ||
+ | #fp-nav { | ||
+ | position: fixed; | ||
+ | z-index: 100; | ||
+ | margin-top: -32px; | ||
+ | top: 50%; | ||
+ | opacity: 1; | ||
+ | -webkit-transform: translate3d(0,0,0); | ||
+ | } | ||
+ | #fp-nav.fp-right { | ||
+ | right: 17px; | ||
+ | } | ||
+ | #fp-nav.fp-left { | ||
+ | left: 17px; | ||
+ | } | ||
+ | .fp-slidesNav{ | ||
+ | position: absolute; | ||
+ | z-index: 4; | ||
+ | opacity: 1; | ||
+ | -webkit-transform: translate3d(0,0,0); | ||
+ | -ms-transform: translate3d(0,0,0); | ||
+ | transform: translate3d(0,0,0); | ||
+ | left: 0 !important; | ||
+ | right: 0; | ||
+ | margin: 0 auto !important; | ||
+ | } | ||
+ | .fp-slidesNav.fp-bottom { | ||
+ | bottom: 17px; | ||
+ | } | ||
+ | .fp-slidesNav.fp-top { | ||
+ | top: 17px; | ||
+ | } | ||
+ | #fp-nav ul, | ||
+ | .fp-slidesNav ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #fp-nav ul li, | ||
+ | .fp-slidesNav ul li { | ||
+ | display: block; | ||
+ | width: 14px; | ||
+ | height: 13px; | ||
+ | margin: 7px; | ||
+ | position:relative; | ||
+ | } | ||
+ | .fp-slidesNav ul li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | #fp-nav ul li a, | ||
+ | .fp-slidesNav ul li a { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | cursor: pointer; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #fp-nav ul li a.active span, | ||
+ | .fp-slidesNav ul li a.active span, | ||
+ | #fp-nav ul li:hover a.active span, | ||
+ | .fp-slidesNav ul li:hover a.active span{ | ||
+ | height: 12px; | ||
+ | width: 12px; | ||
+ | margin: -6px 0 0 -6px; | ||
+ | border-radius: 100%; | ||
+ | } | ||
+ | #fp-nav ul li a span, | ||
+ | .fp-slidesNav ul li a span { | ||
+ | border-radius: 50%; | ||
+ | position: absolute; | ||
+ | z-index: 1; | ||
+ | height: 4px; | ||
+ | width: 4px; | ||
+ | border: 0; | ||
+ | background: #333; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | margin: -2px 0 0 -2px; | ||
+ | -webkit-transition: all 0.1s ease-in-out; | ||
+ | -moz-transition: all 0.1s ease-in-out; | ||
+ | -o-transition: all 0.1s ease-in-out; | ||
+ | transition: all 0.1s ease-in-out; | ||
+ | } | ||
+ | #fp-nav ul li:hover a span, | ||
+ | .fp-slidesNav ul li:hover a span{ | ||
+ | width: 10px; | ||
+ | height: 10px; | ||
+ | margin: -5px 0px 0px -5px; | ||
+ | } | ||
+ | #fp-nav ul li .fp-tooltip { | ||
+ | position: absolute; | ||
+ | top: -2px; | ||
+ | color: #fff; | ||
+ | font-size: 14px; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif; | ||
+ | white-space: nowrap; | ||
+ | max-width: 220px; | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | opacity: 0; | ||
+ | width: 0; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #fp-nav ul li:hover .fp-tooltip, | ||
+ | #fp-nav.fp-show-active a.active + .fp-tooltip { | ||
+ | -webkit-transition: opacity 0.2s ease-in; | ||
+ | transition: opacity 0.2s ease-in; | ||
+ | width: auto; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #fp-nav ul li .fp-tooltip.fp-right { | ||
+ | right: 20px; | ||
+ | } | ||
+ | #fp-nav ul li .fp-tooltip.fp-left { | ||
+ | left: 20px; | ||
+ | } | ||
+ | .fp-auto-height.fp-section, | ||
+ | .fp-auto-height .fp-slide, | ||
+ | .fp-auto-height .fp-tableCell{ | ||
+ | height: auto !important; | ||
+ | } | ||
+ | |||
+ | .fp-responsive .fp-auto-height-responsive.fp-section, | ||
+ | .fp-responsive .fp-auto-height-responsive .fp-slide, | ||
+ | .fp-responsive .fp-auto-height-responsive .fp-tableCell { | ||
+ | height: auto !important; | ||
+ | } | ||
+ | |||
+ | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, | ||
+ | form,fieldset,input,textarea,p,blockquote,th,td { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | a{ | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | table { | ||
+ | border-spacing: 0; | ||
+ | } | ||
+ | fieldset,img { | ||
+ | border: 0; | ||
+ | } | ||
+ | address,caption,cite,code,dfn,em,strong,th,var { | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | strong{ | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | ol,ul { | ||
+ | list-style: none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | caption,th { | ||
+ | text-align: left; | ||
+ | |||
+ | } | ||
+ | h1,h2,h3,h4,h5,h6 { | ||
+ | font-weight: normal; | ||
+ | font-size: 100%; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | color:#444; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif; | ||
+ | } | ||
+ | q:before,q:after { | ||
+ | content:''; | ||
+ | } | ||
+ | abbr,acronym { border: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Custom CSS | ||
+ | * --------------------------------------- */ | ||
+ | body{ | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #menu li { | ||
+ | display:inline-block; | ||
+ | margin: 10px; | ||
+ | color: #000; | ||
+ | background:#fff; | ||
+ | background: rgba(255,255,255, 0.5); | ||
+ | -webkit-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | } | ||
+ | #menu li.active{ | ||
+ | background:#666; | ||
+ | background: rgba(0,0,0, 0.5); | ||
+ | color: #fff; | ||
+ | } | ||
+ | #menu li a{ | ||
+ | text-decoration:none; | ||
+ | color: #000; | ||
+ | } | ||
+ | #menu li.active a:hover{ | ||
+ | color: #000; | ||
+ | } | ||
+ | #menu li:hover{ | ||
+ | background: rgba(255,255,255, 0.8); | ||
+ | } | ||
+ | #menu li a, | ||
+ | #menu li.active a{ | ||
+ | padding: 9px 18px; | ||
+ | display:block; | ||
+ | } | ||
+ | #menu li.active a{ | ||
+ | color: #fff; | ||
+ | } | ||
+ | #menu{ | ||
+ | position: fixed; | ||
+ | margin-top: 50%; | ||
+ | height: 40px; | ||
+ | z-index: 70; | ||
+ | width: auto; | ||
+ | } | ||
+ | #homelogo { | ||
+ | height: inherit; | ||
+ | width: inherit; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | |||
+ | .scroll-down { | ||
+ | background: none; | ||
+ | position: absolute; | ||
+ | transition: all .5s ease-in 3s; | ||
+ | margin-top: 85vh; | ||
+ | left: 50%; | ||
+ | margin-left: -24px; | ||
+ | z-index: 3; | ||
+ | -webkit-transition: all .5s ease-in 3s; | ||
+ | -webkit-animation: bounce 2s infinite 2s; | ||
+ | animation: bounce 2s infinite 2s; | ||
+ | -webkit-transition: all .2s ease-in; | ||
+ | transition: all .2s ease-in; | ||
+ | } | ||
+ | |||
+ | .scroll-down img:hover { | ||
+ | opacity: .5; | ||
+ | } | ||
+ | |||
+ | /*.a { | ||
+ | background: transparent; | ||
+ | }*/ | ||
+ | |||
+ | .scroll-down: before { | ||
+ | |||
+ | position: absolute; | ||
+ | |||
+ | top: calc(50% - 8px); | ||
+ | |||
+ | left: calc(50% - 6px); | ||
+ | |||
+ | transform: rotate(-45deg); | ||
+ | |||
+ | display: block; | ||
+ | |||
+ | width: 12px; | ||
+ | |||
+ | height: 12px; | ||
+ | |||
+ | content: ""; | ||
+ | |||
+ | border: 2px solid white; | ||
+ | |||
+ | border-width: 0px 0 2px 2px; | ||
+ | |||
+ | } | ||
+ | |||
+ | @keyframes bounce { | ||
+ | |||
+ | 0%, | ||
+ | |||
+ | 100%, | ||
+ | |||
+ | 20%, | ||
+ | |||
+ | 50%, | ||
+ | |||
+ | 80% { | ||
+ | |||
+ | -webkit-transform: translateY(0); | ||
+ | |||
+ | -ms-transform: translateY(0); | ||
+ | |||
+ | transform: translateY(0); | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | 40% { | ||
+ | |||
+ | -webkit-transform: translateY(-10px); | ||
+ | |||
+ | -ms-transform: translateY(-10px); | ||
+ | |||
+ | transform: translateY(-10px); | ||
+ | |||
+ | } | ||
+ | |||
+ | 60% { | ||
+ | |||
+ | -webkit-transform: translateY(-5px); | ||
+ | |||
+ | -ms-transform: translateY(-5px); | ||
+ | |||
+ | transform: translateY(-5px); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /* INTRO-Slide1 | ||
+ | * --------------------------------------- */ | ||
+ | #slide1 { | ||
+ | z-index: 70; | ||
+ | } | ||
+ | |||
+ | |||
+ | #INback1 { | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | z-index: 70; | ||
+ | } | ||
+ | |||
+ | |||
+ | #section2 .intro { | ||
+ | z-index: 70; | ||
+ | position: absolute; | ||
+ | top: 10%; | ||
+ | bottom: 70%; | ||
+ | width: inherit; | ||
+ | margin-left: 2vw | ||
+ | } | ||
+ | |||
+ | #slide1 .intro { | ||
+ | z-index: 70; | ||
+ | position: absolute; | ||
+ | top: 10%; | ||
+ | bottom: 70%; | ||
+ | width: inherit; | ||
+ | } | ||
+ | |||
+ | |||
+ | #slide1introh2 { | ||
+ | font-size: 4vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 45vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 10%!important; | ||
+ | color: white; | ||
+ | top: 32%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #slide4intro { | ||
+ | text-align: center; | ||
+ | z-index: 100; | ||
+ | } | ||
+ | |||
+ | /* INTRO-Slide2 | ||
+ | * --------------------------------------- */ | ||
+ | #slide2 { | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | #INback2 { | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | #slide3intro { | ||
+ | font-size: 4vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 57vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 8%!important; | ||
+ | color: white; | ||
+ | top: 23%; | ||
+ | } | ||
+ | |||
+ | #orange { | ||
+ | font-size: 5.8vh!important; | ||
+ | } | ||
+ | /* INTRO-Slide3 | ||
+ | * --------------------------------------- */ | ||
+ | |||
+ | #INback3 { | ||
+ | height: auto; | ||
+ | width: 100%; | ||
+ | align: bottom; | ||
+ | } | ||
+ | |||
+ | |||
+ | #slide4intro { | ||
+ | font-size: 4vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 54vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 10%!important; | ||
+ | color: black; | ||
+ | top: 20%; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* INTRO-Slide4 | ||
+ | * --------------------------------------- */ | ||
+ | #INback4 { | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | #slide5intro { | ||
+ | font-size: 5vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 12vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 15%!important; | ||
+ | color: white; | ||
+ | top: 15%; | ||
+ | } | ||
+ | |||
+ | /* INTRO-Slide5 | ||
+ | * --------------------------------------- */ | ||
+ | |||
+ | #INback5 { | ||
+ | height: 100%; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | #slide6intro { | ||
+ | font-size: 4vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 13vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 20%!important; | ||
+ | color: white; | ||
+ | top: 18%; | ||
+ | } | ||
+ | |||
+ | #maincup { | ||
+ | height: auto; | ||
+ | width: 29vw; | ||
+ | position: absolute; | ||
+ | top: 39%; | ||
+ | margin-left: 37vw; | ||
+ | } | ||
+ | |||
+ | /* ABSTRACT | ||
+ | * --------------------------------------- */ | ||
+ | h1 { | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | font-size: 7vw!important; | ||
+ | line-height: normal!important; | ||
+ | } | ||
+ | |||
+ | #section2container { | ||
+ | margin-top: 120px; | ||
+ | } | ||
+ | |||
+ | .box3 { | ||
+ | height: auto; | ||
+ | width: 13vw; | ||
+ | position: absolute; | ||
+ | left: 66vw; | ||
+ | margin-top: 20vh; | ||
+ | } | ||
+ | |||
+ | #abhalf { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | |||
+ | .box2 { | ||
+ | height: auto; | ||
+ | width: 13vw; | ||
+ | position: inherit; | ||
+ | left: 52vw; | ||
+ | margin-top: 38vh; | ||
+ | } | ||
+ | |||
+ | #abwa { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | |||
+ | .box1 { | ||
+ | height: auto; | ||
+ | width: 13vw; | ||
+ | position: inherit; | ||
+ | left: 80vw; | ||
+ | margin-top: 38vh; | ||
+ | } | ||
+ | |||
+ | #abhe { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | |||
+ | .box { | ||
+ | height: auto; | ||
+ | width: 12vw; | ||
+ | position: inherit; | ||
+ | left: 66.5vw; | ||
+ | margin-top: -12vh; | ||
+ | } | ||
+ | |||
+ | #abde { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | |||
+ | |||
+ | #abp { | ||
+ | font-size: 3.5vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 1vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 40%!important; | ||
+ | margin-top: 5.5vh; | ||
+ | |||
+ | } | ||
+ | |||
+ | /* ABSTRACT-DECOMPOSE | ||
+ | * --------------------------------------- */ | ||
+ | |||
+ | .box:hover #abde { | ||
+ | -webkit-transform: scale3d(1.2, 1.2, 1); | ||
+ | transform: scale3d(1.2, 1.2, 1); | ||
+ | } | ||
+ | |||
+ | |||
+ | .tooltip { | ||
display: block; | display: block; | ||
− | + | width: 100%; | |
− | + | height: auto; | |
+ | } | ||
+ | .overlay { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
− | + | bottom: 0; | |
− | transition: | + | left: 0; |
+ | right: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | opacity: 0; | ||
+ | transition: .5s ease; | ||
} | } | ||
− | + | ||
− | + | .box:hover .overlay { | |
− | + | opacity: 1; | |
− | + | -webkit-transform: scale3d(1.2, 1.2, 1); | |
− | + | transform: scale3d(1.2, 1.2, 1); | |
} | } | ||
− | + | ||
+ | .text { | ||
+ | height: auto; | ||
+ | width: 12vw; | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .changeimage { | ||
+ | height: 100%; | ||
width: 100%; | width: 100%; | ||
} | } | ||
− | + | ||
− | + | /* ABSTRACT-HEAT-RESISTANT | |
+ | * --------------------------------------- */ | ||
+ | |||
+ | .box1:hover #abhe { | ||
+ | -webkit-transform: scale3d(1.2, 1.2, 1); | ||
+ | transform: scale3d(1.2, 1.2, 1); | ||
} | } | ||
− | . | + | |
− | + | .tooltip1 { | |
− | width: | + | display: block; |
− | height: | + | width: 100%; |
− | + | height: auto; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .overlay1 { |
− | + | position: absolute; | |
− | + | top: 0; | |
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | height: 100%; | ||
width: 100%; | width: 100%; | ||
− | + | opacity: 0; | |
− | + | transition: .5s ease; | |
} | } | ||
− | . | + | .box1:hover .overlay1 { |
+ | opacity: 1; | ||
+ | -webkit-transform: scale3d(1.3, 1.3, 1); | ||
+ | transform: scale3d(1.3, 1.3, 1); | ||
+ | } | ||
+ | |||
+ | .text1 { | ||
+ | height: auto; | ||
+ | width: 12vw; | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .changeimage1 { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* ABSTRACT-WATERPROOF | ||
+ | * --------------------------------------- */ | ||
+ | |||
+ | .box2:hover #abhe { | ||
+ | -webkit-transform: scale3d(1.2, 1.2, 1); | ||
+ | transform: scale3d(1.2, 1.2, 1); | ||
+ | } | ||
+ | |||
+ | |||
+ | .tooltip2 { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .overlay2 { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | opacity: 0; | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | |||
+ | .box2:hover .overlay2 { | ||
+ | opacity: 1; | ||
+ | -webkit-transform: scale3d(1.3, 1.3, 1); | ||
+ | transform: scale3d(1.3, 1.3, 1); | ||
+ | } | ||
+ | |||
+ | .text2 { | ||
+ | height: auto; | ||
+ | width: 12vw; | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .changeimage2 { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | /* ABSTRACT-CUP | ||
+ | * --------------------------------------- */ | ||
+ | |||
+ | .box3:hover #abhalf { | ||
+ | -webkit-transform: scale3d(1.1, 1.1, 1); | ||
+ | transform: scale3d(1.1, 1.1, 1); | ||
+ | } | ||
+ | |||
+ | |||
+ | .tooltip3 { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .overlay3 { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | opacity: 0; | ||
+ | transition: .5s ease; | ||
+ | } | ||
+ | |||
+ | .box3:hover .overlay3 { | ||
+ | opacity: 1; | ||
+ | -webkit-transform: scale3d(1.3, 1.3, 1); | ||
+ | transform: scale3d(1.3, 1.3, 1); | ||
+ | } | ||
+ | |||
+ | .text3 { | ||
+ | height: auto; | ||
+ | width: 12vw; | ||
+ | color: white; | ||
+ | font-size: 20px; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .changeimage3 { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | margin-top: 6%; | ||
+ | margin-left: 0.5%; | ||
+ | } | ||
+ | |||
+ | #ABback { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | /* ABSTRACT-second page | ||
+ | * --------------------------------------- */ | ||
+ | |||
+ | #section3 .intro { | ||
+ | position: absolute; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | padding: auto; | ||
+ | margin: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #ABback2 { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #abp2 { | ||
+ | font-size: 3.5vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 60vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 35vw!important; | ||
+ | margin-top: -80vh; | ||
+ | z-index: 70; | ||
+ | } | ||
+ | |||
+ | |||
+ | .popup { | ||
+ | position: absolute; | ||
+ | z-index: 70; | ||
+ | width: 20vw; | ||
+ | height: 30vh; | ||
+ | margin-left: 140px; | ||
+ | margin-top: -120px; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #wood { | ||
+ | width: auto; | ||
+ | height: 40%; | ||
+ | position: absolute; | ||
+ | z-index: 80; | ||
+ | margin-left: 20px; | ||
+ | } | ||
+ | |||
+ | .monos { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | z-index: 80; | ||
+ | |||
+ | } | ||
+ | .monopic { | ||
+ | position: absolute; | ||
+ | width: 120%; | ||
+ | height: auto; | ||
+ | z-index: 80; | ||
+ | margin-left: -60px; | ||
+ | margin-top: -15vw; | ||
+ | } | ||
+ | |||
+ | /* The actual popup */ | ||
+ | .popup .popuptext { | ||
+ | visibility: hidden; | ||
+ | width: 200%; | ||
+ | height: 200%; | ||
+ | position: absolute; | ||
+ | z-index: 70; | ||
+ | bottom: 18px; | ||
+ | } | ||
+ | |||
+ | /* Popup arrow */ | ||
+ | .popup .popuptext::after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | margin-right: 10px; | ||
+ | top: 70%; | ||
+ | z-index: 50; | ||
+ | } | ||
+ | |||
+ | /* Toggle this class - hide and show the popup */ | ||
+ | .popup .show { | ||
+ | visibility: visible; | ||
+ | -webkit-animation: fadeIn 1s; | ||
+ | animation: fadeIn 1s; | ||
+ | z-index: 70; | ||
+ | } | ||
+ | |||
+ | /* Add animation (fade in the popup) */ | ||
+ | @-webkit-keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity: 1;} | ||
+ | } | ||
+ | |||
+ | @keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity:1 ;} | ||
+ | } | ||
+ | |||
+ | #clickme { | ||
+ | position: absolute; | ||
+ | height: auto; | ||
+ | width: 10vw; | ||
+ | margin-top: -100px; | ||
+ | margin-left: 10vw; | ||
+ | z-index: 99; | ||
+ | } | ||
+ | |||
+ | /* ABSTRACT-final page | ||
+ | * --------------------------------------- */ | ||
+ | |||
+ | #ABback3 { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #section4 .intro { | ||
+ | position: absolute; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | padding: auto; | ||
+ | margin: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | #abp3 { | ||
+ | font-size: 3vh!important; | ||
+ | position: absolute; | ||
+ | margin-left: 5vw; | ||
+ | text-align: center!important; | ||
+ | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
+ | width: 40%!important; | ||
+ | top: 15%; | ||
+ | z-index: 80; | ||
+ | } | ||
+ | |||
+ | .footer { | ||
+ | height: 110px; | ||
+ | background-color: #333F50; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | #BSlogo { | ||
+ | position: absolute; | ||
+ | width: 6%; | ||
+ | height: auto; | ||
+ | margin-left: 150px; | ||
+ | margin-top: 4px; | ||
+ | } | ||
+ | |||
+ | #CCUlogo { | ||
+ | position: absolute; | ||
+ | width: 6%; | ||
+ | height: auto; | ||
+ | margin-left: 275px; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | #CCUTEAMlogo { | ||
+ | position: absolute; | ||
+ | width: 6%; | ||
+ | height: auto; | ||
+ | margin-left: 430px; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #CCUFBlogo { | ||
+ | position: absolute; | ||
+ | width: 6%; | ||
+ | height: auto; | ||
+ | top: 82%; | ||
+ | margin-left: 26vw; | ||
+ | z-index: 90; | ||
+ | } | ||
+ | |||
+ | #CCUPHlogo { | ||
+ | position: absolute; | ||
+ | width: 6%; | ||
+ | height: auto; | ||
+ | top: 83%; | ||
+ | margin-left: 26vw; | ||
+ | z-index: 90; | ||
+ | } | ||
+ | |||
+ | #CCUMLlogo { | ||
+ | position: absolute; | ||
+ | width: 6%; | ||
+ | height: auto; | ||
+ | top: 83%; | ||
+ | margin-left: 26vw; | ||
+ | z-index: 90; | ||
+ | } | ||
+ | |||
+ | #startvideo { | ||
+ | vertical-align: top; | ||
+ | width: 100vw; | ||
+ | height: auto; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | #pagination { | ||
position: fixed; | position: fixed; | ||
− | + | top: 300px; | |
− | + | transform: translateY(-50%); | |
− | top: | + | right: 30px; |
− | + | list-style: none; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | background- | + | #pagination li { |
− | + | position: relative; | |
− | + | margin: 20px 0; | |
− | + | background: #24221F; | |
− | + | border-radius: 100% ; | |
− | + | width: 8px; | |
− | + | height: 8px; | |
− | + | transition: all .2s ease; | |
+ | |||
+ | &:hover { | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #pagination a { | ||
+ | position: absolute; | ||
+ | text-decoration: none; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | color: inherit; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
} | } | ||
− | + | body { | |
− | + | @for $i from 0 to 6 { | |
+ | &.section-#{$i} { | ||
+ | #pagination li:nth-of-type(#{$i}) { | ||
+ | @extend %active-dot; | ||
+ | } | ||
+ | } | ||
+ | } | ||
} | } | ||
− | + | ||
− | + | #pagination ul li a span { | |
− | margin | + | background: #24221F; |
+ | width: 8px; | ||
+ | height: 8px; | ||
+ | margin: -4px 0 0 -4px; | ||
} | } | ||
− | + | ||
− | + | #pagination ul li a.active span, | |
− | + | #pagination li:hover a.active span { | |
+ | width: 16px; | ||
+ | height: 16px; | ||
+ | margin: -8px 0 0 -8px; | ||
+ | background:#24221F; | ||
+ | box-sizing: border-box; | ||
+ | border: 1px solid #24221F; | ||
+ | } | ||
+ | |||
+ | %active-dot { | ||
+ | transform: scale(2); | ||
+ | } | ||
+ | |||
+ | .wrap { | ||
+ | width: 100vw; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
+ | </html> |
Latest revision as of 09:05, 1 December 2018