|
|
| (15 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;
| |
| − | width : 100vw;
| |
| − | }
| |
| − | @import url(http://fonts.googleapis.com/css?family=Raleway);
| |
| − | #cssmenu,
| |
| − | #cssmenu ul,
| |
| − | #cssmenu ul li,
| |
| − | #cssmenu ul li a {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | list-style: none;
| |
| − | line-height: 1;
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − | #cssmenu:after,
| |
| − | #cssmenu > ul:after {
| |
| − | content: ".";
| |
| − | display: block;
| |
| − | clear: both;
| |
| − | visibility: hidden;
| |
| − | line-height: 0;
| |
| − | height: 0;
| |
| − | }
| |
| − | #cssmenu {
| |
| − | width: auto;
| |
| − | border-bottom: 3px solid #47c9af;
| |
| − | font-family: Raleway, sans-serif;
| |
| − | line-height: 1;
| |
| − | }
| |
| − | #cssmenu ul {
| |
| − | background: #ffffff;
| |
| − | }
| |
| − | #cssmenu > ul > li {
| |
| − | float: left;
| |
| − | }
| |
| − | #cssmenu.align-center > ul {
| |
| − | font-size: 0;
| |
| − | text-align: center;
| |
| − | }
| |
| − | #cssmenu.align-center > ul > li {
| |
| − | display: inline-block;
| |
| − | float: none;
| |
| − | }
| |
| − | #cssmenu.align-right > ul > li {
| |
| − | float: right;
| |
| − | }
| |
| − | #cssmenu.align-right > ul > li > a {
| |
| − | margin-right: 0;
| |
| − | margin-left: -4px;
| |
| − | }
| |
| − | #cssmenu > ul > li > a {
| |
| − | z-index: 2;
| |
| − | padding: 40px 25px 12px 25px;
| |
| − | font-size: 15px;
| |
| − | font-weight: 400;
| |
| − | text-decoration: none;
| |
| − | color: #444444;
| |
| − | -webkit-transition: all .2s ease;
| |
| − | -moz-transition: all .2s ease;
| |
| − | -ms-transition: all .2s ease;
| |
| − | -o-transition: all .2s ease;
| |
| − | transition: all .2s ease;
| |
| − | margin-right: -4px;
| |
| − | }
| |
| − | #cssmenu > ul > li.active > a,
| |
| − | #cssmenu > ul > li:hover > a,
| |
| − | #cssmenu > ul > li > a:hover {
| |
| − | color: #ffffff;
| |
| − | }
| |
| − | #cssmenu > ul > li > a:after {
| |
| − | position: absolute;
| |
| − | left: 0;
| |
| − | bottom: 0;
| |
| − | right: 0;
| |
| − | z-index: -1;
| |
| − | width: 100%;
| |
| − | height: 120%;
| |
| − | border-top-left-radius: 8px;
| |
| − | border-top-right-radius: 8px;
| |
| − | content: "";
| |
| − | -webkit-transition: all .2s ease;
| |
| − | -o-transition: all .2s ease;
| |
| − | transition: all .2s ease;
| |
| − | -webkit-transform: perspective(5px) rotateX(2deg);
| |
| − | -webkit-transform-origin: bottom;
| |
| − | -moz-transform: perspective(5px) rotateX(2deg);
| |
| − | -moz-transform-origin: bottom;
| |
| − | transform: perspective(5px) rotateX(2deg);
| |
| − | transform-origin: bottom;
| |
| − | }
| |
| − | #cssmenu > ul > li.active > a:after,
| |
| − | #cssmenu > ul > li:hover > a:after,
| |
| − | #cssmenu > ul > li > a:hover:after {
| |
| − | background: #47c9af;
| |
| − | }
| |
| − |
| |
| − | .dropdown {
| |
| − | float: left;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − |
| |
| − | .dropdown .dropbtn {
| |
| − | font-size: 16px;
| |
| − | border: none;
| |
| − | outline: none;
| |
| − | color: black;
| |
| − | padding: 14px 16px;
| |
| − | background-color: inherit;
| |
| − | font-family: inherit;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | background-color: #f9f9f9;
| |
| − | min-width: 160px;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content a {
| |
| − | float: none;
| |
| − | color: black;
| |
| − | padding: 12px 16px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | .dropdown-content a:hover {
| |
| − | background-color: #ddd;
| |
| − | }
| |
| − |
| |
| − | .dropdown:hover .dropdown-content {
| |
| − | display: block;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class = "bg">
| |
| − | <div id='cssmenu'>
| |
| − | <ul>
| |
| − | <li>
| |
| − | <a href='#'>Home</a>
| |
| − | </li>
| |
| − | <li class="dropdown">
| |
| − | <a class="dropbtn">Dropdown
| |
| − | <i class="fa fa-caret-down"></i>
| |
| − | </a>
| |
| − | <div class="dropdown-content">
| |
| − | <a href="#">Link 1</a>
| |
| − | <a href="#">Link 2</a>
| |
| − | <a href="#">Link 3</a>
| |
| − | </div>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href='#'>Company</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href='#'>Contact</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </body>
| |
| − | </html>
| |
