|
|
Line 4: |
Line 4: |
| | | |
| <head> | | <head> |
− | <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/HP_Integrated_Human_Practices_style?action=raw&ctype=text/css"> | + | <link rel="stylesheet" href="https://2018.igem.org/Template:NCKU_Tainan/css/protocol_style?action=raw&ctype=text/css"> |
| </head> | | </head> |
| | | |
| <body data-spy="scroll" data-target=".navbar-example"> | | <body data-spy="scroll" data-target=".navbar-example"> |
− |
| |
− | <header>
| |
− | <div class="carousel-inner" role="listbox">
| |
− | <div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
| |
− | </div>
| |
− | </div>
| |
− | </header>
| |
| | | |
| <div class="container content"> | | <div class="container content"> |
Line 481: |
Line 474: |
| </div> | | </div> |
| </div> | | </div> |
− |
| |
− | <style>
| |
− | .contentimg {
| |
− | width: 100%;
| |
− | }
| |
− |
| |
− |
| |
− | .head2 {
| |
− | color: white;
| |
− | width: 26%;
| |
− | font-size: 50px;
| |
− | /* font-weight: 700; */
| |
− | border-bottom: 10px solid #7ae26f !important;
| |
− | position: relative;
| |
− | }
| |
− |
| |
− | /* paragraph content*/
| |
− | h10 {
| |
− | color: white;
| |
− | font-size: 1.4rem;
| |
− | line-height: 150%;
| |
− | }
| |
− |
| |
− | body {
| |
− | background-color: #272625;
| |
− | }
| |
− |
| |
− |
| |
− | p {
| |
− | color: white;
| |
− | font-size: 20px;
| |
− | }
| |
− |
| |
− | h3 {
| |
− | color: white;
| |
− | font-size: 35px;
| |
− | }
| |
− |
| |
− | .navbar {
| |
− | padding-top: 10px;
| |
− | margin-bottom: 0;
| |
− | }
| |
− |
| |
− | .navbar-brand {
| |
− | font-size: 30px;
| |
− | }
| |
− |
| |
− | .nav-link {
| |
− | font-size: 20px;
| |
− | }
| |
− |
| |
− | a.dropdown-item {
| |
− | color: #4F7F52;
| |
− | }
| |
− |
| |
− | a.dropdown-item:active {
| |
− | background-color: #4F7F52;
| |
− | }
| |
− |
| |
− | .caret {
| |
− | display: inline-block;
| |
− | width: 0;
| |
− | height: 0;
| |
− | margin-left: 2px;
| |
− | vertical-align: middle;
| |
− | border-top: 4px solid;
| |
− | border-right: 4px solid transparent;
| |
− | border-left: 4px solid transparent;
| |
− | }
| |
− |
| |
− | /*滑到navbar就展開*/
| |
− | .dropdown-menu li:hover .sub-menu {
| |
− | visibility: visible;
| |
− | }
| |
− |
| |
− | .dropdown:hover .dropdown-menu {
| |
− | display: block;
| |
− | }
| |
− |
| |
− | .head {
| |
− | color: white;
| |
− | width: 50%;
| |
− | font-size: 50px;
| |
− | font-weight: 700;
| |
− | border-bottom: 10px solid #7ae26f;
| |
− | position: relative;
| |
− | margin-top: 100px;
| |
− | }
| |
− |
| |
− | .container.content {
| |
− | margin-top: 80px;
| |
− | }
| |
− |
| |
− | @media (min-width: 992px) {
| |
− | .navbar {
| |
− | padding-left: 80px;
| |
− | padding-right: 80px;
| |
− | }
| |
− | }
| |
− |
| |
− | @media (max-width: 768px) {
| |
− | .navbar-right form {
| |
− | display: none;
| |
− | }
| |
− | }
| |
− |
| |
− | @media (max-width: 568px) {
| |
− | footer {
| |
− | text-align: center;
| |
− | }
| |
− |
| |
− | .list-group {
| |
− | display: none;
| |
− | }
| |
− | }
| |
− |
| |
− | /*folded-corner*/
| |
− | .post {
| |
− | position: relative;
| |
− | }
| |
− |
| |
− | .folded-corner {
| |
− | position: absolute;
| |
− | bottom: 0px;
| |
− | right: 0px;
| |
− | border-width: 0;
| |
− | border-style: solid;
| |
− | background: hsla(260, 100%, 100%, 0.2);
| |
− | box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3), -1px -4px 0px rgba(0, 0, 0, 0.1);
| |
− | border-radius: 15px 0 0 0;
| |
− | border-color: transparent #B9DEBB transparent transparent;
| |
− | transition: border-width 0.2s ease-out;
| |
− | }
| |
− |
| |
− | .post:hover .folded-corner {
| |
− | border-width: 40px 40px 0 0;
| |
− | }
| |
− |
| |
− | .photo .folded-corner {
| |
− | background: hsla(260, 5%, 75%, 0.5);
| |
− | }
| |
− |
| |
− | [class*="col-"] {
| |
− | float: left;
| |
− | padding: 13px;
| |
− | }
| |
− |
| |
− | a.list-group-item:visited {
| |
− | color: white;
| |
− | }
| |
− |
| |
− | a:hover {
| |
− | background-color: transparent;
| |
− | }
| |
− |
| |
− | .list-group {
| |
− | margin-top: 100px;
| |
− | }
| |
− |
| |
− | .col-2.side {
| |
− | padding: 0;
| |
− | }
| |
− |
| |
− | .list-group-item {
| |
− | padding: .55rem .35rem;
| |
− | background-color: #272625;
| |
− | color: white;
| |
− | border: none;
| |
− | font-size: 19px;
| |
− | }
| |
− |
| |
− | a.list-group-item.list-group-item-action {
| |
− | background-color: transparent;
| |
− | }
| |
− |
| |
− | a.list-group-item.list-group-item-action:hover {
| |
− | color: #98CC9B;
| |
− | }
| |
− |
| |
− | a.list-group-item.list-group-item-action.active {
| |
− | background-color: transparent;
| |
− | color: #7ae26f;
| |
− | }
| |
− |
| |
− | .scrollspy-example h4 {
| |
− | font-size: 2rem;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | img.contentimg {
| |
− | width: 100%;
| |
− | margin: 20px 0;
| |
− | }
| |
− |
| |
− | a.link {
| |
− | font-size: 30px;
| |
− | color: #4F7F52;
| |
− | }
| |
− |
| |
− | #list-item-1 {
| |
− | padding-top: 0px;
| |
− | }
| |
− |
| |
− | #list-item-2 {
| |
− | padding-top: 0px;
| |
− | }
| |
− |
| |
− | #list-item-3 {
| |
− | padding-top: 0px;
| |
− | }
| |
− |
| |
− | #list-item-4 {
| |
− | padding-top: 0px;
| |
− | }
| |
− |
| |
− | #list-item-5 {
| |
− | padding-top: 0px;
| |
− | }
| |
− |
| |
− | a.reference {
| |
− | color: #4F7F52;
| |
− | }
| |
− |
| |
− | .btn {
| |
− | background-color: #98CC9B;
| |
− | color: #272625;
| |
− | border: none;
| |
− | font-size: 1.5rem;
| |
− | }
| |
− |
| |
− | .btn:hover {
| |
− | color: white;
| |
− | background-color: transparent;
| |
− | border-color: transparent;
| |
− | border-bottom: 3px;
| |
− | border-bottom-color: #98CC9B;
| |
− | border-bottom-style: solid;
| |
− | border-radius: 0rem;
| |
− | }
| |
− |
| |
− | .btn.focus,
| |
− | .btn:focus {
| |
− | box-shadow: none;
| |
− | }
| |
− |
| |
− | td {
| |
− | text-align: center;
| |
− | color: black !important;
| |
− | border: 2px solid black !important;
| |
− | background-color: white !important;
| |
− | }
| |
− |
| |
− | table {
| |
− | border: 3px solid white;
| |
− | text-align: center;
| |
− | width: 100%;
| |
− | }
| |
− |
| |
− | th {
| |
− | background-color: #262624 !important;
| |
− | color: white !important;
| |
− | border: 2px solid white !important;
| |
− | font-size: 20px;
| |
− | padding: 10px 10px !important;
| |
− | }
| |
− |
| |
− | .bbg td {
| |
− | background-color: #262624 !important;
| |
− | color: white !important;
| |
− | border: 2px solid rgba(255, 255, 255, 0.5) !important;
| |
− | padding: 5px 0 !important;
| |
− | }
| |
− |
| |
− | table.bbg {
| |
− | border: 3px solid rgba(255, 255, 255, 0.5);
| |
− | }
| |
− |
| |
− | .card {
| |
− | background-color: transparent;
| |
− | border: 0;
| |
− | }
| |
− |
| |
− | .card-body {
| |
− | padding: 1rem 0;
| |
− | border: none !important;
| |
− | }
| |
− | </style>
| |
| | | |
| <script> | | <script> |