Difference between revisions of "Template:NCKU Tainan/Header"

Line 7: Line 7:
  
 
/* NavigationBar */
 
/* NavigationBar */
−
.image {
+
@import url("https://fonts.googleapis.com/css?family=Roboto|Open+Sans|Raleway|Montserrat:300|Noto+Sans|Noto+Serif|Kalam");
−
  background-color: #114B5F;
+
−
  background: url(https://www.pakutaso.com/shared/img/thumb/MIYA160131480493_TP_V.jpg) no-repeat center center;
+
−
  background-size: cover;
+
−
  background-attachment: fixed;
+
−
  height: 500px;
+
−
  margin-top: -20px;
+
−
  /*
+
−
  p {
+
−
      text-align: center;
+
−
      padding: 20px 60px;
+
−
      .btn {
+
−
        background-color: transparent;
+
−
        color: #E4FDE1;
+
−
        border: 1.5px solid #E4FDE1;
+
−
        width: 80px;
+
−
        height: 40px;
+
−
        padding: 10px;
+
−
        font-size: 1px;
+
  
−
          &:hover {
+
 
−
            color: #cdf4c8;
+
.navbar{
−
            border-color: #cdf4c8
+
  /*background-color: transparent;*/
−
          }
+
  border: 0px;
−
      }
+
−
  }*/
+
 
}
 
}
−
.image .heading {
+
@media (min-width: 992px) {
−
   color: #E4FDE1;
+
   .navbar{
−
  text-align: center;
+
    padding-left: 80px;
−
  font-family: 'Athiti', sans-serif;
+
    padding-right: 80px;
−
   padding-top: 150px;
+
   }
 
}
 
}
  
−
.navbar {
+
/* Solid class attached on scroll past first section */
−
  height: 70px;
+
/* #E4FDE1 = rgb(228, 253, 225) */
−
   background-color: transparent;
+
.navbar.solid {
−
  border: none;
+
   background-color: rgba(255, 255, 255, 0.75);
−
  color: #E4FDE1;
+
−
  z-index: 100;
+
 
   transition: background-color 1s ease 0s;
 
   transition: background-color 1s ease 0s;
 
}
 
}
 +
/*.navbar.solid .navbar-brand {
 +
  color: #028090;
 +
  transition: color 1s ease 0s;
 +
}
 +
.navbar.solid .navbar-nav > li > a {
 +
  color: #028090;
 +
  transition: color 1s ease 0s;
 +
}*/
  
−
.navbar-default .navbar-brand {
+
.dropdown-li{
−
   margin-top: 10px;
+
   font-size: 24px;
−
  color: #E4FDE1;
+
−
  z-index: 999;
+
 
}
 
}
−
.navbar-default .navbar-brand:hover {
+
 
−
   color: #cdf4c8;
+
span {
 +
  font-family: 'Kalam', cursive;
 +
  font-size: 28px;
 +
  font-weight: bold;
 +
   color: #333;
 
}
 
}
−
.navbar-default .navbar-nav > li > a {
+
 
−
  color: #E4FDE1;
+
.brand {
−
  font-family: 'Athiti', sans-serif;
+
   font-size: 36px;
−
   font-size: 17px;
+
−
  margin: 10px 5px 5px 5px;
+
 
}
 
}
−
.navbar-default .navbar-nav > li > a:hover {
+
 
−
   color: #cdf4c8;
+
.logo {
 +
  height: 30px;
 +
  width: 30px;
 +
  display: inline-block;
 +
  margin-top: 10px;
 +
   margin-left: 10px;
 
}
 
}
−
.navbar-default .navbar-nav > li > a:focus {
+
 
−
   color: #cdf4c8;
+
i {
 +
  font-size: 18px;
 +
  vertical-align: middle;
 +
   margin-bottom: 5px;
 
}
 
}
−
.navbar-default .navbar-nav > li > a:active {
+
 
−
   color: #E4FDE1;
+
.dropdown-main:hover .dropdown-sub{
 +
   display: block;
 
}
 
}
−
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+
.dropdown-sub {
−
   background-color: transparent;
+
   padding-left: 40px;
−
   color: #cdf4c8;
+
   display: none;
 
}
 
}
−
.navbar-default .navbar-nav .menus-dropdown {
+
.dropdown-sub:hover {
−
   position: relative;
+
   background-color: #f5f5f5;
 
}
 
}
−
.navbar-default .navbar-nav .menus-dropdown:hover .dropdown {
+
.dropdown-sub a {
−
  visibility: visible;
+
−
  opacity: 1;
+
−
}
+
−
.navbar-default .navbar-nav .dropdown {
+
−
  position: absolute;
+
−
  opacity: 0;
+
−
  visibility: hidden;
+
−
  border: 1px solid #ECECEC;
+
−
  padding: 10px 30px;
+
−
  z-index: 999;
+
−
  background: rgba(228, 225, 253, 0.8);
+
−
  width: auto;
+
−
  margin-top: 0;
+
−
  transition: all 0.2s ease-in-out;
+
−
  -webkit-transition: all 0.2s ease-in-out;
+
−
  -moz-transition: all 0.2s ease-in-out;
+
−
}
+
−
.navbar-default .navbar-nav .dropdown li {
+
−
  line-height: 30px;
+
−
  float: none;
+
−
  list-style: none;
+
−
}
+
−
.navbar-default .navbar-nav .dropdown a {
+
−
  font-size: 17px;
+
−
  font-family: 'Athiti', sans-serif;
+
−
  font-weight: normal;
+
−
  color: #020709;
+
 
   text-decoration: none;
 
   text-decoration: none;
 
}
 
}
−
.navbar-default .navbar-nav .dropdown a:hover {
+
.dropdown-sub .dropdown-li {
−
  color: #456990;
+
   color: #00b3ea;
−
}
+
   opacity: 0.75;
−
.navbar-default .navbar-toggle {
+
−
   border-color: #028090;
+
−
}
+
−
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+
−
   background-color: transparent;
+
−
}
+
−
.navbar-default .navbar-toggle .icon-bar {
+
−
  color: #C57ED3;
+
−
  background-color: #028090;
+
−
}
+
−
.navbar-default .navbar-collapse.collapse.in ul {
+
−
  background-color: transparent;
+
 
}
 
}
−
.navbar-default .navbar-collapse.collapse.in ul .dropdown {
+
@media (max-width:992px) {
−
  background-color: rgba(228, 253, 225, 0.7);
+
   .dropdown-sub {
−
}
+
    display: block;
−
 
+
   }
−
/* Solid class attached on scroll past first section */
+
  .dropdown-sub:hover {
−
/* #E4FDE1 = rgb(228, 253, 225) */
+
    background-color: none;
−
.navbar.solid {
+
   }
−
   background-color: rgba(228, 253, 225, 0.95);
+
−
  transition: background-color 1s ease 0s;
+
−
}
+
−
.navbar.solid .navbar-brand {
+
−
  color: #028090;
+
−
   transition: color 1s ease 0s;
+
−
}
+
−
.navbar.solid .navbar-nav > li > a {
+
−
  color: #028090;
+
−
   transition: color 1s ease 0s;
+
 
}
 
}
  
Line 149: Line 95:
 
</head>
 
</head>
 
<body>
 
<body>
−
<nav class="navbar navbar-default navbar">
+
<nav class="navbar navbar-default navbar-fixed-top">
−
      <div class="container">
+
  <div class="container-fluid">
−
        <div class="navbar-header">
+
    <div class="navbar-header">
−
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
+
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
−
          aria-expanded="false" aria-controls="navbar">
+
        <span class="sr-only">Toggle navigation</span>
−
            <span class="sr-only">Toggle navigation</span>
+
        <span class="icon-bar"></span>
−
            <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>
−
            <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>
−
            <span class="icon-bar"></span>
+
      </button>
−
          </button>
+
      <a class="pull-left" [routerLink]="['/home']" >
−
          <a class="navbar-brand" href="https://2017.igem.org/Team:NCKU_Tainan">iGEM NCKU Tainan</a>
+
        <img src="./assets/img/logo.png" alt="NCKU_Tainan logo" class="logo">
−
        </div>
+
      </a>
−
        <div id="navbar" class="collapse navbar-collapse">
+
      <a [routerLink]="['/home']"><span class="pull-left brand">&nbsp;NCKU Tainan</span></a>
−
          <ul class="nav navbar-nav navbar-right">
+
    </div>
−
            <li class="menus-dropdown">
+
    <div id="navbar" class="collapse navbar-collapse">
−
              <a href="#">Team</a>
+
      <ul class="nav navbar-nav navbar-right">
−
              <ul class="dropdown">
+
        <li class="dropdown">
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Team">Team</a></li>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Project</span></a>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Collaborations">Collabrations</a></li>
+
          <ul class="dropdown-menu">
−
               </ul>
+
            <li><a [routerLink]="['/background']"><span class="dropdown-li">Description</span></a></li>
 +
            <li class="dropdown-main">
 +
              <a [routerLink]="['/project']"><span class="dropdown-li">Design</span> <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
 +
              <div class="dropdown-sub"><a href="project#regulation"><span class="dropdown-li">Regulation</span></a></div>
 +
               <div class="dropdown-sub"><a href="project#sensing"><span class="dropdown-li">Sensing</span></a></div>
 
             </li>
 
             </li>
−
             <li class="menus-dropdown">
+
             <li><a [routerLink]="['/result']"><span class="dropdown-li">Results</span></a></li>
−
              <a href="#">Project</a>
+
            <li><a [routerLink]="['/contribution']"><span class="dropdown-li">Contribution</span></a></li>
−
              <ul class="dropdown">
+
            <li><a [routerLink]="['/improve']"><span class="dropdown-li">Improve</span></a></li>
−
                <li><a href="#">Background</a></li>
+
          </ul>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Description">Description</a></li>
+
        </li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Design">Design</a></li>
+
        <li class="dropdown">
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Experiments">Experiments</a></li>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Device</span></a>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Notebook">Notebook</a></li>
+
          <ul class="dropdown-menu">
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/InterLab">InterLab</a></li>
+
             <li><a [routerLink]="['/device']"><span class="dropdown-li">Hardware</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Contribution">Contribution</a></li>
+
            <li><a [routerLink]="['/demonstrate']"><span class="dropdown-li">Demonstrate</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Model">Model</a></li>
+
            <li><a [routerLink]="['/software']"><span class="dropdown-li">Software</span></a></li>
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Results">Results</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Demonstrate">Demonstrate</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Improve">Improve</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Attributions">Attributions</a></li>
+
−
              </ul>
+
−
            </li>
+
−
            <li class="menus-dropdown">
+
−
              <a href="#">Parts</a>
+
−
                <ul class="dropdown">
+
−
                  <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Parts">Parts</a></li>
+
−
                  <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Basic_Part">Basic Part</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Composite_Part">Composite Part</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Part_Collection">Part Collection</a></li>
+
−
                </ul>
+
−
             </li>
+
−
 
+
−
          <li class="menus-dropdown">
+
−
                <a href="#">Human Practices</a>
+
−
                  <ul class="dropdown">
+
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/HP/Silver">Silver</a></li>
+
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/HP/Gold_Integrated">Gold_Integrated</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Engagement">Engagement</a></li>
+
−
                  </ul>
+
−
            </li>
+
−
          <li class="menus-dropdown">
+
−
                <a href="#">Awards</a>
+
−
                  <ul class="dropdown">
+
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Applied_Design">Applied Design</a></li>
+
−
                    <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Entrepreneurship">Entrepreneurship</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Measurement">Measurement</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Model">Model</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Plant">Plant</a></li>
+
−
                <li><a href="https://2017.igem.org/Team:NCKU_Tainan/Software">Software</a></li>
+
−
                  </ul>
+
−
                </li>
+
 
           </ul>
 
           </ul>
−
         </div><!--/.nav-collapse -->
+
         </li>
−
      </div>
+
        <li class="dropdown">
−
    </nav>
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Team</span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a [routerLink]="['/team']"><span class="dropdown-li">Team</span></a></li>
 +
            <li><a [routerLink]="['/attribution']"><span class="dropdown-li">Attributions</span></a></li>
 +
            <li><a><span class="dropdown-li">Sponsors</span></a></li>
 +
            <li><a [routerLink]="['/collaboration']"><span class="dropdown-li">Collaboration</span></a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Human Practice</span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a [routerLink]="['/hp1']"><span class="dropdown-li">Overview</span></a></li>
 +
            <li><a [routerLink]="['/hpsilver']"><span class="dropdown-li">Silver</span></a></li>
 +
            <li><a [routerLink]="['/hpgold']"><span class="dropdown-li">Gold</span></a></li>
 +
            <li><a [routerLink]="['/engagement']"><span class="dropdown-li">Engagement</span></a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
      </ul>
 +
    </div>
 +
    <!--/.nav-collapse -->
 +
  </div>
 +
</nav>
 +
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 05:04, 18 October 2017