|
|
(28 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | <html lang="en">
| |
− | <head>
| |
− | <meta charset="UTF-8">
| |
− | <meta name="description" content="Arcade - Architecture Template">
| |
− | <meta name="keywords" content="arcade, architecture, onepage, creative, html">
| |
− | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| | | |
− | <title>NAMA WEB LU NANTI</title>
| |
− |
| |
− | <style>
| |
− | .bg {
| |
− | position: fixed;
| |
− | top: 0;
| |
− | left: 0;
| |
− | background: url(https://static.igem.org/mediawiki/2018/f/f7/T--UI_Indonesia--bulb.png) repeat center center;
| |
− | z-index: 1;
| |
− | display: block;
| |
− | height: 100vh;
| |
− | width: 100vw;
| |
− | }
| |
− | .nav{
| |
− | position: fixed;
| |
− | top: 0;
| |
− | left: 0;
| |
− | height:10vh;
| |
− | width : 100vw;
| |
− | display:block;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}
| |
− |
| |
− |
| |
− | .nav-link{display:block;padding:.5rem 1rem}
| |
− |
| |
− |
| |
− | .nav-link:focus,.nav-link:hover{text-decoration:none}
| |
− |
| |
− |
| |
− | .nav-link.disabled{color:#6c757d}
| |
− |
| |
− |
| |
− | .nav-tabs{border-bottom:1px solid #dee2e6}
| |
− |
| |
− |
| |
− | .nav-tabs .nav-item{margin-bottom:-1px}
| |
− |
| |
− |
| |
− | .nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}
| |
− |
| |
− |
| |
− | .nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6}
| |
− |
| |
− |
| |
− | .nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}
| |
− |
| |
− |
| |
− | .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}
| |
− |
| |
− |
| |
− | .nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
| |
− |
| |
− |
| |
− | .nav-pills .nav-link{border-radius:.25rem}
| |
− |
| |
− |
| |
− | .nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#007bff}
| |
− |
| |
− |
| |
− | .nav-fill .nav-item{-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}
| |
− |
| |
− |
| |
− | .nav-justified .nav-item{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;text-align:center}
| |
− |
| |
− |
| |
− | .tab-content>.tab-pane{display:none}
| |
− |
| |
− |
| |
− | .tab-content>.active{display:block}
| |
− |
| |
− |
| |
− | .navbar{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}
| |
− |
| |
− |
| |
− | .navbar>.container,.navbar>.container-fluid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}
| |
− |
| |
− |
| |
− | .navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}
| |
− |
| |
− |
| |
− | .navbar-brand:focus,.navbar-brand:hover{text-decoration:none}
| |
− |
| |
− |
| |
− | .navbar-nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
| |
− |
| |
− |
| |
− | .navbar-nav .nav-link{padding-right:0;padding-left:0}
| |
− |
| |
− |
| |
− | .navbar-nav .dropdown-menu{position:static;float:none}
| |
− |
| |
− |
| |
− | .navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}
| |
− |
| |
− |
| |
− | .navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}
| |
− |
| |
− |
| |
− | .navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}
| |
− |
| |
− |
| |
− | .navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}
| |
− |
| |
− |
| |
− | .navbar-toggler:not(:disabled):not(.disabled){cursor:pointer}
| |
− |
| |
− |
| |
− | .navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}
| |
− |
| |
− |
| |
− | @media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media (min-width:576px){.navbar-expand-sm{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}
| |
− |
| |
− |
| |
− | .navbar-expand-sm .navbar-nav{-ms-flex-direction:row;flex-direction:row}
| |
− |
| |
− |
| |
− | .navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}
| |
− |
| |
− |
| |
− | .navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}
| |
− |
| |
− |
| |
− | .navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}
| |
− |
| |
− |
| |
− | .navbar-expand-sm .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}
| |
− |
| |
− |
| |
− | .navbar-expand-sm .navbar-toggler{display:none}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media (max-width:767.98px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media (min-width:768px){.navbar-expand-md{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}
| |
− |
| |
− |
| |
− | .navbar-expand-md .navbar-nav{-ms-flex-direction:row;flex-direction:row}
| |
− |
| |
− |
| |
− | .navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}
| |
− |
| |
− |
| |
− | .navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}
| |
− |
| |
− |
| |
− | .navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}
| |
− |
| |
− |
| |
− | .navbar-expand-md .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}
| |
− |
| |
− |
| |
− | .navbar-expand-md .navbar-toggler{display:none}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media (max-width:991.98px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media (min-width:992px){.navbar-expand-lg{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}
| |
− |
| |
− |
| |
− | .navbar-expand-lg .navbar-nav{-ms-flex-direction:row;flex-direction:row}
| |
− |
| |
− |
| |
− | .navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}
| |
− |
| |
− |
| |
− | .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}
| |
− |
| |
− |
| |
− | .navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}
| |
− |
| |
− |
| |
− | .navbar-expand-lg .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}
| |
− |
| |
− |
| |
− | .navbar-expand-lg .navbar-toggler{display:none}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media (max-width:1199.98px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | @media (min-width:1200px){.navbar-expand-xl{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}
| |
− |
| |
− |
| |
− | .navbar-expand-xl .navbar-nav{-ms-flex-direction:row;flex-direction:row}
| |
− |
| |
− |
| |
− | .navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}
| |
− |
| |
− |
| |
− | .navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}
| |
− |
| |
− |
| |
− | .navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}
| |
− |
| |
− |
| |
− | .navbar-expand-xl .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}
| |
− |
| |
− |
| |
− | .navbar-expand-xl .navbar-toggler{display:none}
| |
− |
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | .navbar-expand{-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-pack:start;justify-content:flex-start}
| |
− |
| |
− |
| |
− | .navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}
| |
− |
| |
− |
| |
− | .navbar-expand .navbar-nav{-ms-flex-direction:row;flex-direction:row}
| |
− |
| |
− |
| |
− | .navbar-expand .navbar-nav .dropdown-menu{position:absolute}
| |
− |
| |
− |
| |
− | .navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}
| |
− |
| |
− |
| |
− | .navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}
| |
− |
| |
− |
| |
− | .navbar-expand .navbar-collapse{display:-ms-flexbox!important;display:flex!important;-ms-flex-preferred-size:auto;flex-basis:auto}
| |
− |
| |
− |
| |
− | .navbar-expand .navbar-toggler{display:none}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-brand{color:rgba(0,0,0,.9)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-text{color:rgba(0,0,0,.5)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-text a{color:rgba(0,0,0,.9)}
| |
− |
| |
− |
| |
− | .navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-brand{color:#fff}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-text{color:rgba(255,255,255,.5)}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-text a{color:#fff}
| |
− |
| |
− |
| |
− | .navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}
| |
− |
| |
− |
| |
− | .navbar{display:none}
| |
− |
| |
− |
| |
− | .container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
| |
− | @media (min-width:576px){.container{max-width:540px}
| |
− | }
| |
− | @media (min-width:768px){.container{max-width:720px}
| |
− | }
| |
− | @media (min-width:992px){.container{max-width:960px}
| |
− | }
| |
− | @media (min-width:1200px){.container{max-width:1140px}
| |
− | }
| |
− | .container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
| |
− | </style>
| |
− | </head>
| |
− | <body>
| |
− | <div class = "bg">
| |
− | <div class = "nav">
| |
− | <div class="navbar navbar-dark bg-dark">
| |
− | <a class="navbar-brand" href="#">
| |
− | <img src="https://static.igem.org/mediawiki/2018/8/8b/HQ_page_logo.jpg" width="30" height="30" class="d-inline-block align-top" alt="">
| |
− | UI Indonesia
| |
− | </a>
| |
− | <div class="collapse navbar-collapse" id="navbarNavDropdown">
| |
− | <ul class="navbar-nav">
| |
− | <li class="nav-item active">
| |
− | <a class="nav-link" href="#">Home</a>
| |
− | </li>
| |
− | <li class="nav-item dropdown">
| |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| |
− | TEAM
| |
− | </a>
| |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| |
− | <a class="dropdown-item" href="#">Team Members</a>
| |
− | <a class="dropdown-item" href="#">Collaborations</a>
| |
− | </div>
| |
− | </li>
| |
− | <li class="nav-item dropdown">
| |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| |
− | PROJECT
| |
− | </a>
| |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| |
− | <a class="dropdown-item" href="#">Description</a>
| |
− | <a class="dropdown-item" href="#">Design</a>
| |
− | <a class="dropdown-item" href="#">Experiments</a>
| |
− | <a class="dropdown-item" href="#">Notebook</a>
| |
− | <a class="dropdown-item" href="#">InterLab</a>
| |
− | <a class="dropdown-item" href="#">Model</a>
| |
− | <a class="dropdown-item" href="#">Results</a>
| |
− | <a class="dropdown-item" href="#">Demonstrate</a>
| |
− | <a class="dropdown-item" href="#">Improve</a>
| |
− | <a class="dropdown-item" href="#">Attributions</a>
| |
− | </div>
| |
− | </li>
| |
− | <li class="nav-item dropdown">
| |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| |
− | PARTS
| |
− | </a>
| |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| |
− | <a class="dropdown-item" href="#">Parts Overview</a>
| |
− | <a class="dropdown-item" href="#">Basic Parts</a>
| |
− | <a class="dropdown-item" href="#">Composite Parts</a>
| |
− | <a class="dropdown-item" href="#">Part Collection</a>
| |
− | </div>
| |
− | </li>
| |
− | <li class="nav-item">
| |
− | <a class="nav-link" href="#">SAFETY</a>
| |
− | </li>
| |
− | <li class="nav-item dropdown">
| |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| |
− | HUMAN PRACTICES
| |
− | </a>
| |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| |
− | <a class="dropdown-item" href="#">Human Practices</a>
| |
− | <a class="dropdown-item" href="#">Education & Engagement</a>
| |
− | </div>
| |
− | </li>
| |
− | <li class="nav-item dropdown">
| |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| |
− | AWARDS
| |
− | </a>
| |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| |
− | <a class="dropdown-item" href="#">Applied Design</a>
| |
− | <a class="dropdown-item" href="#">Entrepreneurship</a>
| |
− | <a class="dropdown-item" href="#">Hardware</a>
| |
− | <a class="dropdown-item" href="#">Measurement</a>
| |
− | <a class="dropdown-item" href="#">Model</a>
| |
− | <a class="dropdown-item" href="#">Plant</a>
| |
− | <a class="dropdown-item" href="#">Software</a>
| |
− | </div>
| |
− | </li>
| |
− | <li class="nav-item">
| |
− | <a class="nav-link" href="#">JUDGING FORM</a>
| |
− | </li>
| |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | </body>
| |
− | </html>
| |