Difference between revisions of "Team:UI Indonesia/Modeling"

(fran : template test)
(Blanked the page)
 
(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 &amp; 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>
 

Latest revision as of 16:08, 25 June 2018