Difference between revisions of "Template:CCU Taiwan"

 
(41 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:2vh;
+
top:1.7vh;
 
width:100%;
 
width:100%;
 
position: fixed;
 
position: fixed;
Line 89: Line 93:
 
height:7vh;
 
height:7vh;
 
width: 100%;
 
width: 100%;
−
background:#41ce6f;
 
 
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.5vh;
+
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;
−
background:#36BF36;
 
 
box-shadow:3px 3px 3px 0px #444444;
 
box-shadow:3px 3px 3px 0px #444444;
 
}
 
}
  
 
#sub_home{
 
#sub_home{
−
height:32.5vh;
+
height:40.5vh;
 +
        background:#55c97e;
 
}
 
}
  
 
#sub_project{
 
#sub_project{
 
height:40.5vh;
 
height:40.5vh;
 +
        background:#74cf7e;
 
}
 
}
  
 
#sub_parts{
 
#sub_parts{
−
height:32.5vh;
+
height:24.5vh;
 +
        background:#92cd7e;
 
}
 
}
  
 
#sub_modeling{
 
#sub_modeling{
−
height:32.5vh;
+
height:24.5vh;
 +
        background:#a6ca7e;
 
}
 
}
  
 
#sub_drylab{
 
#sub_drylab{
 
height:24.5vh;
 
height:24.5vh;
 +
        background:#bec37e;
 
}
 
}
  
 
#sub_human_practice{
 
#sub_human_practice{
−
height:32.5vh;
+
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:#000;
+
background-color:#567256;
 
transition: 500ms;
 
transition: 500ms;
 
}
 
}
Line 501: Line 537:
 
font-family: 'CCUfontsBold', Arial, sans-serif;
 
font-family: 'CCUfontsBold', Arial, sans-serif;
 
}
 
}
−
.wrap{
+
 
−
margin-left: auto;
+
−
margin-right: auto;
+
−
width: 960px;
+
−
position: relative;
+
−
}
+
  
  
Line 739: Line 770:
 
       width: 10%!important;
 
       width: 10%!important;
 
       color: black;
 
       color: black;
−
       top: 17%;
+
       top: 20%;
 
}
 
}
  
Line 798: Line 829:
 
}
 
}
  
−
.section .intro #ab {
+
#section2container {
−
        z-index: -1;
+
      margin-top: 120px;
−
        position: relative;
+
 
}
 
}
  
Line 861: Line 891:
  
 
#abp {
 
#abp {
−
       font-size: 4vh!important;
+
       font-size: 3.5vh!important;
 
       position: absolute;
 
       position: absolute;
 
       margin-left: 1vw;
 
       margin-left: 1vw;
Line 867: Line 897:
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       width: 40%!important;
 
       width: 40%!important;
−
       margin-top: 6vh;
+
       margin-top: 5.5vh;
  
 
}
 
}
Line 1,103: Line 1,133:
  
 
#abp2 {
 
#abp2 {
−
       font-size: 4vh!important;
+
       font-size: 3.5vh!important;
 
       position: absolute;
 
       position: absolute;
 
       margin-left: 60vw;
 
       margin-left: 60vw;
Line 1,217: Line 1,247:
  
 
#abp3 {
 
#abp3 {
−
       font-size: 4vh!important;
+
       font-size: 3vh!important;
 
       position: absolute;
 
       position: absolute;
 
       margin-left: 5vw;
 
       margin-left: 5vw;
Line 1,223: Line 1,253:
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       width: 40%!important;
 
       width: 40%!important;
−
       top: 20%;
+
       top: 15%;
 
       z-index: 80;
 
       z-index: 80;
 
}
 
}
  
 
.footer {
 
.footer {
−
      background: #909F86;
+
    height: 110px;
−
        width: 100%;
+
    background-color: #333F50;
−
        height: 15vh;
+
  right: 0;
−
        position: absolute;
+
  bottom: 0;
 +
  left: 0;
 
}
 
}
 +
  
 
#BSlogo {
 
#BSlogo {
Line 1,238: Line 1,270:
 
         width: 6%;
 
         width: 6%;
 
         height: auto;
 
         height: auto;
−
        top: 81%;
+
         margin-left: 150px;
−
         margin-left: 10vw;
+
         margin-top: 4px;
−
         z-index: 90;
+
 
}
 
}
  
Line 1,247: Line 1,278:
 
         width: 6%;
 
         width: 6%;
 
         height: auto;
 
         height: auto;
−
        top: 82%;
+
         margin-left: 275px;
−
         margin-left: 18vw;
+
         margin-top: 10px;
−
         z-index: 90;
+
 
}
 
}
  
Line 1,256: Line 1,286:
 
         width: 6%;
 
         width: 6%;
 
         height: auto;
 
         height: auto;
−
        top: 82%;
+
         margin-left: 430px;
−
         margin-left: 28vw;
+
         margin-top: 10px;
−
         z-index: 90;
+
 
}
 
}
 +
  
 
#CCUFBlogo {
 
#CCUFBlogo {
Line 1,287: 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