Allen850413 (Talk | contribs) |
|||
(47 intermediate revisions by 2 users not shown) | |||
Line 53: | Line 53: | ||
} | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | padding-bottom: 0px!important; | ||
+ | } | ||
#top { | #top { | ||
Line 74: | Line 78: | ||
header{ | header{ | ||
margin:0 auto; | margin:0 auto; | ||
− | top: | + | top:1.7vh; |
width:100%; | width:100%; | ||
position: fixed; | position: fixed; | ||
Line 89: | Line 93: | ||
height:7vh; | height:7vh; | ||
width: 100%; | width: 100%; | ||
− | |||
box-shadow:0px 4px 6px 0px #444444; | box-shadow:0px 4px 6px 0px #444444; | ||
} | } | ||
Line 102: | Line 105: | ||
left:4vw; | 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 111: | 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; | ||
Line 143: | Line 173: | ||
padding:0; | padding:0; | ||
z-index:9!important; | z-index:9!important; | ||
− | |||
box-shadow:3px 3px 3px 0px #444444; | box-shadow:3px 3px 3px 0px #444444; | ||
} | } | ||
#sub_home{ | #sub_home{ | ||
− | height: | + | height:40.5vh; |
+ | background:#55c97e; | ||
} | } | ||
#sub_project{ | #sub_project{ | ||
height:40.5vh; | height:40.5vh; | ||
+ | background:#74cf7e; | ||
} | } | ||
#sub_parts{ | #sub_parts{ | ||
− | height: | + | height:24.5vh; |
+ | background:#92cd7e; | ||
} | } | ||
#sub_modeling{ | #sub_modeling{ | ||
− | height: | + | height:24.5vh; |
+ | background:#a6ca7e; | ||
} | } | ||
#sub_drylab{ | #sub_drylab{ | ||
height:24.5vh; | height:24.5vh; | ||
+ | background:#bec37e; | ||
} | } | ||
#sub_human_practice{ | #sub_human_practice{ | ||
− | height: | + | height:40.5vh; |
+ | background:#d1c17e; | ||
} | } | ||
#sub_notebook{ | #sub_notebook{ | ||
height:40.5vh; | height:40.5vh; | ||
+ | background:#d1ad7e; | ||
} | } | ||
Line 209: | Line 245: | ||
} | } | ||
.list:hover { | .list:hover { | ||
− | background-color:# | + | background-color:#567256; |
transition: 500ms; | transition: 500ms; | ||
} | } | ||
Line 501: | Line 537: | ||
font-family: 'CCUfontsBold', Arial, sans-serif; | font-family: 'CCUfontsBold', Arial, sans-serif; | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 739: | Line 770: | ||
width: 10%!important; | width: 10%!important; | ||
color: black; | color: black; | ||
− | top: | + | top: 20%; |
} | } | ||
Line 774: | Line 805: | ||
font-size: 4vh!important; | 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: 20%!important; | width: 20%!important; | ||
color: white; | color: white; | ||
− | top: | + | top: 18%; |
} | } | ||
Line 798: | Line 829: | ||
} | } | ||
− | + | #section2container { | |
+ | margin-top: 120px; | ||
} | } | ||
Line 859: | Line 891: | ||
#abp { | #abp { | ||
− | font-size: | + | font-size: 3.5vh!important; |
position: absolute; | position: absolute; | ||
margin-left: 1vw; | margin-left: 1vw; | ||
Line 865: | 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,101: | Line 1,133: | ||
#abp2 { | #abp2 { | ||
− | font-size: | + | font-size: 3.5vh!important; |
position: absolute; | position: absolute; | ||
margin-left: 60vw; | margin-left: 60vw; | ||
Line 1,215: | Line 1,247: | ||
#abp3 { | #abp3 { | ||
− | font-size: | + | font-size: 3vh!important; |
position: absolute; | position: absolute; | ||
margin-left: 5vw; | margin-left: 5vw; | ||
Line 1,221: | Line 1,253: | ||
font-family: 'CCUfontsBold', Arial, sans-serif!important; | font-family: 'CCUfontsBold', Arial, sans-serif!important; | ||
width: 40%!important; | width: 40%!important; | ||
− | top: | + | top: 15%; |
z-index: 80; | z-index: 80; | ||
} | } | ||
.footer { | .footer { | ||
− | + | height: 110px; | |
− | + | background-color: #333F50; | |
− | + | right: 0; | |
− | + | bottom: 0; | |
+ | left: 0; | ||
} | } | ||
+ | |||
#BSlogo { | #BSlogo { | ||
Line 1,236: | Line 1,270: | ||
width: 6%; | width: 6%; | ||
height: auto; | height: auto; | ||
− | + | margin-left: 150px; | |
− | margin-left: | + | margin-top: 4px; |
− | + | ||
} | } | ||
Line 1,245: | Line 1,278: | ||
width: 6%; | width: 6%; | ||
height: auto; | height: auto; | ||
− | + | margin-left: 275px; | |
− | margin-left: | + | margin-top: 10px; |
− | + | ||
} | } | ||
Line 1,254: | Line 1,286: | ||
width: 6%; | width: 6%; | ||
height: auto; | height: auto; | ||
− | + | margin-left: 430px; | |
− | margin-left: | + | margin-top: 10px; |
− | + | ||
} | } | ||
+ | |||
#CCUFBlogo { | #CCUFBlogo { | ||
Line 1,285: | Line 1,317: | ||
z-index: 90; | 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