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

(fran : template beground)
(fran : template edit)
Line 10: Line 10:
 
     <style>
 
     <style>
 
         .bg {
 
         .bg {
−
             position: fixed;
+
             position: absolute;
 
             top: 0;
 
             top: 0;
 
             left: 0;
 
             left: 0;
 
             background: url(https://static.igem.org/mediawiki/2018/f/f7/T--UI_Indonesia--bulb.png) repeat center center;
 
             background: url(https://static.igem.org/mediawiki/2018/f/f7/T--UI_Indonesia--bulb.png) repeat center center;
−
             z-index: 100;
+
             z-index: 1;
 
             display: block;
 
             display: block;
 
             height: 100vh;
 
             height: 100vh;
−
width: 100vw;
+
            width: 100vw;
 
         }
 
         }
 +
        .nav{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>
 
     </style>
 
</head>
 
</head>
Line 25: Line 338:
  
 
     </div>
 
     </div>
 +
    <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>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 11:40, 23 June 2018

NAMA WEB LU NANTI

UI Indonesia