Allen850413 (Talk | contribs) |
|||
(110 intermediate revisions by 2 users not shown) | |||
Line 53: | Line 53: | ||
} | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | padding-bottom: 0px!important; | ||
+ | } | ||
#top { | #top { | ||
Line 60: | Line 64: | ||
} | } | ||
+ | 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{ | header{ | ||
margin:0 auto; | margin:0 auto; | ||
− | top: | + | top:1.7vh; |
width:100%; | width:100%; | ||
position: fixed; | position: fixed; | ||
− | + | z-index:10; | |
} | } | ||
Line 77: | Line 93: | ||
height:7vh; | height:7vh; | ||
width: 100%; | width: 100%; | ||
− | + | box-shadow:0px 4px 6px 0px #444444; | |
} | } | ||
.front { | .front { | ||
Line 87: | Line 103: | ||
position: relative; | position: relative; | ||
padding-top:10px; | padding-top:10px; | ||
− | left: | + | left:4vw; |
width: 13.5vw; | width: 13.5vw; | ||
− | height: 5. | + | height: 5.7vh; |
text-align:center; | text-align:center; | ||
margin-left:0vw; | margin-left:0vw; | ||
Line 98: | Line 114: | ||
line-height:25px; | 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{ | #home_button{ | ||
position:absolute; | position:absolute; | ||
left:0vw; | left:0vw; | ||
− | width:5vw; | + | width:5.5vw; |
height:7vh; | height:7vh; | ||
text-align:center; | text-align:center; | ||
z-index:10; | z-index:10; | ||
− | background:# | + | background:#9c957e; |
− | + | ||
} | } | ||
#home_button img { | #home_button img { | ||
Line 119: | Line 161: | ||
} | } | ||
− | |||
− | |||
− | |||
.sub { | .sub { | ||
Line 127: | Line 166: | ||
position:absolute; | position:absolute; | ||
text-align: center; | text-align: center; | ||
− | top:6. | + | right:0vw; |
− | width: | + | top:6.2vh; |
+ | width:13.5vw!important; | ||
height:40vh; | height:40vh; | ||
margin: 0 auto; | margin: 0 auto; | ||
padding:0; | padding:0; | ||
z-index:9!important; | z-index:9!important; | ||
− | + | box-shadow:3px 3px 3px 0px #444444; | |
} | } | ||
− | #sub_home { | + | |
− | + | #sub_home{ | |
+ | height:40.5vh; | ||
+ | background:#55c97e; | ||
} | } | ||
− | #sub_project { | + | |
− | + | #sub_project{ | |
+ | height:40.5vh; | ||
+ | background:#74cf7e; | ||
} | } | ||
− | #sub_parts { | + | #sub_parts{ |
− | + | height:24.5vh; | |
+ | background:#92cd7e; | ||
} | } | ||
− | #sub_modeling { | + | #sub_modeling{ |
− | + | height:24.5vh; | |
+ | background:#a6ca7e; | ||
} | } | ||
− | #sub_drylab { | + | #sub_drylab{ |
− | + | height:24.5vh; | |
+ | background:#bec37e; | ||
} | } | ||
− | #sub_human_practice { | + | #sub_human_practice{ |
− | + | height:40.5vh; | |
+ | background:#d1c17e; | ||
} | } | ||
− | #sub_notebook { | + | #sub_notebook{ |
− | + | height:40.5vh; | |
+ | background:#d1ad7e; | ||
+ | } | ||
+ | |||
+ | .sub a { | ||
+ | color: #F5F5F5; | ||
} | } | ||
.sub li { | .sub li { | ||
float:none; | float:none; | ||
− | margin | + | margin: auto; |
− | margin-top: | + | /*margin-top: 1vh;*/ |
− | height: | + | height: 8vh; |
− | width: | + | width: 13.5vw; |
display:block!important; | display:block!important; | ||
+ | border-top-style:solid; | ||
+ | border-top-width:1px; | ||
+ | border-top-color: #F8F8FF; | ||
} | } | ||
− | . | + | .sub a { |
font-size:15px; | font-size:15px; | ||
+ | line-height:8vh; | ||
} | } | ||
nav a { | nav a { | ||
Line 179: | Line 236: | ||
} | } | ||
.title:hover { | .title:hover { | ||
− | background-color: # | + | background-color:#36BF36; |
transition: 500ms; | transition: 500ms; | ||
border-radius: 3px; | border-radius: 3px; | ||
Line 188: | Line 245: | ||
} | } | ||
.list:hover { | .list:hover { | ||
− | background-color:# | + | background-color:#567256; |
transition: 500ms; | transition: 500ms; | ||
− | |||
} | } | ||
− | + | nav hr { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | hr { | + | |
position:relative; | position:relative; | ||
border: 0; | border: 0; | ||
− | height: 1. | + | height: 1.5px; |
width: 20%; | width: 20%; | ||
top: -2.7vh; | top: -2.7vh; | ||
left: 12.18vw; | left: 12.18vw; | ||
− | background-image: linear-gradient(to right, rgba(54, 191, 54, 0), rgba(225, 255, 255, 1), rgba(54, 191, 54, | + | 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); | transform:rotate(90deg); | ||
-o-transform:rotate(90deg); | -o-transform:rotate(90deg); | ||
-moz-transform:rotate(90deg); | -moz-transform:rotate(90deg); | ||
-webkit-transform:rotate(90deg); | -webkit-transform:rotate(90deg); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
/*! | /*! | ||
Line 525: | Line 537: | ||
font-family: 'CCUfontsBold', Arial, sans-serif; | font-family: 'CCUfontsBold', Arial, sans-serif; | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 702: | Line 709: | ||
#slide1introh2 { | #slide1introh2 { | ||
− | font-size: | + | font-size: 4vh!important; |
position: absolute; | position: absolute; | ||
− | margin-left: | + | margin-left: 45vw; |
text-align: center!important; | text-align: center!important; | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
width: 10%!important; | width: 10%!important; | ||
color: white; | color: white; | ||
− | top: | + | top: 32%; |
} | } | ||
Line 732: | Line 739: | ||
#slide3intro { | #slide3intro { | ||
− | font-size: | + | font-size: 4vh!important; |
position: absolute; | position: absolute; | ||
− | margin-left: | + | margin-left: 57vw; |
text-align: center!important; | text-align: center!important; | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
Line 749: | Line 756: | ||
#INback3 { | #INback3 { | ||
− | height: 100%; | + | height: auto; |
− | + | width: 100%; | |
+ | align: bottom; | ||
} | } | ||
#slide4intro { | #slide4intro { | ||
− | font-size: | + | font-size: 4vh!important; |
position: absolute; | position: absolute; | ||
− | margin-left: | + | margin-left: 54vw; |
text-align: center!important; | text-align: center!important; | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
− | width: | + | width: 10%!important; |
− | color: | + | color: black; |
− | top: | + | top: 20%; |
} | } | ||
Line 777: | Line 785: | ||
font-size: 5vh!important; | font-size: 5vh!important; | ||
position: absolute; | position: absolute; | ||
− | margin-left: | + | margin-left: 12vw; |
text-align: center!important; | text-align: center!important; | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
− | width: | + | width: 15%!important; |
color: white; | color: white; | ||
− | top: | + | top: 15%; |
} | } | ||
Line 795: | Line 803: | ||
#slide6intro { | #slide6intro { | ||
− | font-size: | + | font-size: 4vh!important; |
position: absolute; | position: absolute; | ||
− | margin-left: | + | margin-left: 13vw; |
text-align: center!important; | text-align: center!important; | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
− | width: | + | width: 20%!important; |
color: white; | color: white; | ||
− | top: | + | top: 18%; |
} | } | ||
Line 821: | Line 829: | ||
} | } | ||
− | + | #section2container { | |
+ | margin-top: 120px; | ||
} | } | ||
Line 882: | Line 891: | ||
#abp { | #abp { | ||
− | font-size: | + | font-size: 3.5vh!important; |
position: absolute; | position: absolute; | ||
margin-left: 1vw; | margin-left: 1vw; | ||
Line 888: | Line 897: | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
width: 40%!important; | width: 40%!important; | ||
− | margin-top: | + | margin-top: 5.5vh; |
} | } | ||
Line 1,124: | Line 1,133: | ||
#abp2 { | #abp2 { | ||
− | font-size: | + | font-size: 3.5vh!important; |
position: absolute; | position: absolute; | ||
margin-left: 60vw; | margin-left: 60vw; | ||
Line 1,141: | Line 1,150: | ||
height: 30vh; | height: 30vh; | ||
margin-left: 140px; | margin-left: 140px; | ||
− | margin-top: - | + | margin-top: -120px; |
-webkit-user-select: none; | -webkit-user-select: none; | ||
-moz-user-select: none; | -moz-user-select: none; | ||
Line 1,152: | Line 1,161: | ||
#wood { | #wood { | ||
width: auto; | width: auto; | ||
− | height: | + | height: 40%; |
position: absolute; | position: absolute; | ||
z-index: 80; | z-index: 80; | ||
Line 1,171: | Line 1,180: | ||
z-index: 80; | z-index: 80; | ||
margin-left: -60px; | margin-left: -60px; | ||
− | margin-top: - | + | margin-top: -15vw; |
} | } | ||
Line 1,181: | Line 1,190: | ||
position: absolute; | position: absolute; | ||
z-index: 70; | z-index: 70; | ||
− | bottom: | + | bottom: 18px; |
} | } | ||
Line 1,223: | Line 1,232: | ||
/* ABSTRACT-final page | /* ABSTRACT-final page | ||
* --------------------------------------- */ | * --------------------------------------- */ | ||
+ | |||
+ | #ABback3 { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #section4 .intro { | ||
+ | position: absolute; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | padding: auto; | ||
+ | margin: auto; | ||
+ | |||
+ | } | ||
#abp3 { | #abp3 { | ||
− | font-size: | + | font-size: 3vh!important; |
position: absolute; | position: absolute; | ||
margin-left: 5vw; | margin-left: 5vw; | ||
Line 1,231: | Line 1,253: | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
width: 40%!important; | width: 40%!important; | ||
− | + | top: 15%; | |
− | z-index: | + | z-index: 80; |
} | } | ||
.footer { | .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; | ||
+ | top: 300px; | ||
+ | transform: translateY(-50%); | ||
+ | right: 30px; | ||
+ | list-style: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | #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 { | ||
+ | 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> | </html> |
Latest revision as of 09:05, 1 December 2018