Difference between revisions of "Team:NTHU Formosa"

Line 14: Line 14:
 
     /* Fixed header and footer.
 
     /* Fixed header and footer.
 
     * --------------------------------------- */
 
     * --------------------------------------- */
−
 
−
 
  
 
     #header {
 
     #header {
Line 136: Line 134:
 
       background-color: #4CAF50;
 
       background-color: #4CAF50;
 
       color: white;
 
       color: white;
 +
    }
 +
 +
    @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
 +
    * {
 +
      transition: 0.33s ease;
 +
    }
 +
 +
    .rela-block {
 +
      display: block;
 +
      position: relative;
 +
      overflow: hidden;
 +
    }
 +
 +
    .side-bar {
 +
      z-index: 100;
 +
      position: fixed;
 +
      width: 80px;
 +
      top: 0;
 +
      bottom: 0;
 +
      left: 0;
 +
      background-color: #fff;
 +
      box-shadow: 4px 0px 25px -1px rgba(0, 0, 0, 0.5);
 +
      font-family: "Raleway";
 +
      font-weight: 600;
 +
      font-size: 18px;
 +
      line-height: 24px;
 +
      letter-spacing: 2px;
 +
      text-transform: uppercase;
 +
      transition: 0.33s ease;
 +
    }
 +
 +
    .side-bar:hover {
 +
      width: 250px;
 +
    }
 +
 +
    .side-bar:hover .side-button::before {
 +
      left: 6%;
 +
      transition: 0.33s ease, left 0.25s 0.15s ease;
 +
    }
 +
 +
    .side-bar:hover .hover-svg {
 +
      height: 130px;
 +
      width: 130px;
 +
    }
 +
 +
    .side-container {
 +
      position: absolute;
 +
      width: 100%;
 +
    }
 +
 +
    .side-container.top {
 +
      height: 20%;
 +
      top: 1%;
 +
    }
 +
 +
    .side-container.middle {
 +
      padding-top: 10px;
 +
      height: 65%;
 +
      top: 55%;
 +
      -webkit-transform: translateY(-50%);
 +
      transform: translateY(-50%);
 +
    }
 +
 +
    .hover-svg {
 +
      position: absolute;
 +
      top: 50%;
 +
      left: 50%;
 +
      -webkit-transform: translate(-50%, -50%);
 +
      transform: translate(-50%, -50%);
 +
      height: 80px;
 +
      width: 80px;
 +
      fill: none;
 +
      stroke: rgba(0, 0, 0, 0.5);
 +
      stroke-width: 2;
 +
      cursor: pointer;
 +
      transition: 0s ease, height 0.33s ease, width 0.33s ease;
 +
    }
 +
 +
    .hover-svg:hover {
 +
      stroke: #000;
 +
    }
 +
 +
    .side-button {
 +
      height: 15%;
 +
      margin: 5px 0;
 +
      background-color: #e4e9e9;
 +
      cursor: pointer;
 +
    }
 +
 +
    .side-button:hover {
 +
      background-color: #c4c9c9;
 +
    }
 +
 +
    .side-button::before {
 +
      position: absolute;
 +
      top: 50%;
 +
      left: -250px;
 +
      -webkit-transform: translateY(-50%);
 +
      transform: translateY(-50%);
 +
      transition: 0.33s ease;
 +
    }
 +
 +
    .side-button::after {
 +
      content: "";
 +
      position: absolute;
 +
      height: 40px;
 +
      width: 40px;
 +
      top: 50%;
 +
      right: 20px;
 +
      -webkit-transform: translateY(-50%);
 +
      transform: translateY(-50%);
 +
      background-size: cover !important;
 +
      transition: 0.33s ease;
 +
    }
 +
 +
    .side-button.facebook::before {
 +
      content: "Facebook";
 +
    }
 +
 +
    .side-button.facebook:after {
 +
      background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center;
 +
    }
 +
 +
    .side-button.twitter::before {
 +
      content: "Twitter";
 +
    }
 +
 +
    .side-button.twitter:after {
 +
      background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Twitter-07-128.png") no-repeat center;
 +
    }
 +
 +
    .side-button.instagram::before {
 +
      content: "Instagram";
 +
    }
 +
 +
    .side-button.instagram:after {
 +
      background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Instagram-128.png") no-repeat center;
 +
    }
 +
 +
    .side-button.soundcloud::before {
 +
      content: "Soundcloud";
 +
    }
 +
 +
    .side-button.soundcloud:after {
 +
      background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_SoundCloud-128.png") no-repeat center;
 +
    }
 +
 +
    .side-button.linked-in::before {
 +
      content: "LinkedIn";
 +
    }
 +
 +
    .side-button.linked-in:after {
 +
      background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_LinkedIn-128.png") no-repeat center;
 +
    }
 +
 +
    .side-button.pinterest::before {
 +
      content: "Pinterest";
 +
    }
 +
 +
    .side-button.pinterest:after {
 +
      background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") no-repeat center;
 +
    }
 +
 +
    .plus-button {
 +
      position: absolute;
 +
      bottom: 30px;
 +
      right: 30px;
 +
      z-index: 100;
 +
      height: 75px;
 +
      width: 75px;
 +
      border-radius: 100%;
 +
      background-color: #e91e63;
 +
      box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.58);
 +
      -webkit-backface-visibility: hidden;
 +
      backface-visibility: hidden;
 +
      -webkit-transform: scale(0.92);
 +
      transform: scale(0.92);
 +
    }
 +
 +
    .plus-button::before {
 +
      content: "+";
 +
      position: absolute;
 +
      top: 50%;
 +
      left: 50%;
 +
      -webkit-transform: translate(-50%, -50%);
 +
      transform: translate(-50%, -50%);
 +
      color: #fff;
 +
      font-size: 28px;
 +
      font-weight: 600;
 +
    }
 +
 +
    .plus-button:hover {
 +
      -webkit-transform: scale(1);
 +
      transform: scale(1);
 +
      box-shadow: 3px 3px 12px 2px rgba(0, 0, 0, 0.5);
 +
    }
 +
 +
    .plus-button:active {
 +
      -webkit-transform: scale(0.96);
 +
      transform: scale(0.96);
 +
      box-shadow: 2px 3px 11px 1px rgba(0, 0, 0, 0.53);
 +
    }
 +
 +
    .plus-button.open {
 +
      -webkit-transform: rotate(45deg) scale(0.92);
 +
      transform: rotate(45deg) scale(0.92);
 +
      background-color: #333;
 +
      box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.58);
 +
    }
 +
 +
    .plus-button.open:hover {
 +
      -webkit-transform: scale(1) rotate(45deg);
 +
      transform: scale(1) rotate(45deg);
 +
      box-shadow: 3px 3px 12px 2px rgba(0, 0, 0, 0.5);
 +
    }
 +
 +
    .plus-button.open:active {
 +
      -webkit-transform: scale(0.96) rotate(45deg);
 +
      transform: scale(0.96) rotate(45deg);
 +
      box-shadow: 2px 3px 11px 1px rgba(0, 0, 0, 0.53);
 +
    }
 +
 +
    .social-button {
 +
      position: absolute;
 +
      bottom: 43px;
 +
      right: 41px;
 +
      height: 50px;
 +
      width: 50px;
 +
      -webkit-transform: scale(0.8);
 +
      transform: scale(0.8);
 +
      background-size: 153% !important;
 +
      border-radius: 100%;
 +
      box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.4);
 +
      cursor: pointer;
 +
      z-index: 99;
 +
      -webkit-backface-visibility: hidden;
 +
      backface-visibility: hidden;
 +
    }
 +
 +
    .social-button:hover {
 +
      -webkit-transform: scale(1);
 +
      transform: scale(1);
 +
      transition: 0.35s cubic-bezier(0.3, 0.2, 0, 2.5);
 +
    }
 +
 +
    .social-button.twitter-button {
 +
      background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/twitter-256.png") no-repeat center;
 +
    }
 +
 +
    .social-button.twitter-button.active {
 +
      bottom: 110px;
 +
      right: 21px;
 +
    }
 +
 +
    .social-button.facebook-button {
 +
      background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/facebook-256.png") no-repeat center;
 +
    }
 +
 +
    .social-button.facebook-button.active {
 +
      bottom: 105px;
 +
      right: 73px;
 +
    }
 +
 +
    .social-button.pinterest-button {
 +
      background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/pinterest-256.png") no-repeat center;
 +
    }
 +
 +
    .social-button.pinterest-button.active {
 +
      bottom: 67px;
 +
      right: 109px;
 +
    }
 +
 +
    .social-button.insta-button {
 +
      background: url("https://cdn4.iconfinder.com/data/icons/social-icon-4/842/instagram-256.png") no-repeat center;
 +
    }
 +
 +
    .social-button.insta-button.active {
 +
      bottom: 15px;
 +
      right: 105px;
 
     }
 
     }
 
   </style>
 
   </style>
 +
 +
  <script>
 +
    $(document).ready(function() {
 +
 +
      // Social plus button function
 +
      $('.plus-button').click(function() {
 +
        $(this).toggleClass('open');
 +
        $('.social-button').toggleClass('active');
 +
      });
 +
 +
    });
 +
  </script>
 
</head>
 
</head>
  
 
<body>
 
<body>
 +
 +
  <div class="side-bar">
 +
    <div class="side-container top">
 +
      <svg viewbox="0 0 120 120" class="hover-svg">
 +
            <path D="M 60 25 L 20 95 L 100 95 Z"/>
 +
            <path D="M 36 67 L 53 95"/>
 +
            <path D="M 33 72 L 47 95"/>
 +
            <path D="M 30 78 L 41 95"/>
 +
            <path D="M 27 83 L 35 95"/>
 +
        </svg>
 +
    </div>
 +
    <div class="side-container middle">
 +
      <div class="rela-block side-button facebook"></div>
 +
      <div class="rela-block side-button twitter"></div>
 +
      <div class="rela-block side-button instagram"></div>
 +
      <div class="rela-block side-button soundcloud"></div>
 +
      <div class="rela-block side-button linked-in"></div>
 +
      <div class="rela-block side-button pinterest"></div>
 +
    </div>
 +
  </div>
 +
  <div class="plus-button"></div>
 +
  <div class="social-button twitter-button"></div>
 +
  <div class="social-button facebook-button"></div>
 +
  <div class="social-button pinterest-button"></div>
 +
  <div class="social-button insta-button"></div>
  
 
   <!-- Fixed Header -->
 
   <!-- Fixed Header -->
Line 156: Line 470:
 
     <div class="section" id="section1">
 
     <div class="section" id="section1">
 
       <p>Project</p>
 
       <p>Project</p>
−
 
−
      <div class="btn-group">
 
−
        <button class="button_home button1">Button</button>
 
−
        <button class="button_home button1">Button</button>
 
−
        <button class="button_home button1">Button</button>
 
−
        <button class="button_home button1">Button</button>
 
−
      </div>
 
−
 
 
       <a href="https://2018.igem.org/Team:NTHU_Formosa/Description" class="button">Introduction</a>
 
       <a href="https://2018.igem.org/Team:NTHU_Formosa/Description" class="button">Introduction</a>
 
       <br>
 
       <br>

Revision as of 03:11, 10 October 2018