|
|
| Line 1: |
Line 1: |
| - | <!DOCTYPE HTML>
| |
| - | <html lang="en-US">
| |
| - | <head>
| |
| - | <meta charset="UTF-8">
| |
| - | <title>Wiki ITB_Indonesia | Homepage</title>
| |
| - | <style>
| |
| - | * {
| |
| - | padding: 0;
| |
| - | margin: 0;
| |
| - | }
| |
| | | | |
| - | html {
| |
| - | height: 100%;
| |
| - | width: 100%;
| |
| - | }
| |
| - |
| |
| - | body {
| |
| - | height: 100%;
| |
| - | font-family: 'Open Sans', Sans-Serif;
| |
| - | font-size: 13px;
| |
| - | }
| |
| - |
| |
| - | nav {
| |
| - | position: relative;
| |
| - | height: 60px;
| |
| - | background: #363636; /* Old browsers */
| |
| - | background: -moz-linear-gradient(top, #363636 0%, #000000 100%); /* FF3.6+ */
| |
| - | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#363636), color-stop(100%,#000000)); /* Chrome,Safari4+ */
| |
| - | background: -webkit-linear-gradient(top, #363636 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
| |
| - | background: -o-linear-gradient(top, #363636 0%,#000000 100%); /* Opera 11.10+ */
| |
| - | background: -ms-linear-gradient(top, #363636 0%,#000000 100%); /* IE10+ */
| |
| - | background: linear-gradient(to bottom, #363636 0%,#000000 100%); /* W3C */
| |
| - | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
| |
| - | }
| |
| - |
| |
| - | nav > img {
| |
| - | width: 60px;
| |
| - | position: absolute;
| |
| - | top: 6px;
| |
| - | left: 13px;
| |
| - | }
| |
| - |
| |
| - | .main-nav {
| |
| - | position: absolute;
| |
| - | right: 20px;
| |
| - | top: 22px;
| |
| - | opacity: 0.85;
| |
| - | }
| |
| - |
| |
| - | .main-nav > li {
| |
| - | display: inline-block;
| |
| - | list-style-type:none;
| |
| - | color: whitesmoke;
| |
| - | padding: 0 3px;
| |
| - | font-size: 14px;
| |
| - | }
| |
| - |
| |
| - | .main-nav > li > a {
| |
| - | color: #fff;
| |
| - | }
| |
| - |
| |
| - | .main-nav > li > a:link {
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | #slide-story {
| |
| - | position: relative;
| |
| - | background: #B9E6FF url('../img/clouds.png') repeat-x top;
| |
| - | min-height: 360px;
| |
| - | }
| |
| - |
| |
| - | .container-text {
| |
| - | background-color: #98B1BF;
| |
| - | color: #fff;
| |
| - | text-align: center;
| |
| - | font-size: 18px;
| |
| - | }
| |
| - |
| |
| - | .text-holder > #judul {
| |
| - | width: 250px;
| |
| - | text-transform: uppercase;
| |
| - | padding: 20px 10px;
| |
| - | margin-bottom: 10px;
| |
| - | }
| |
| - |
| |
| - | .text-holder > #deskripsi {
| |
| - | width: 370px;
| |
| - | text-align: justify;
| |
| - | padding: 30px 40px;
| |
| - | }
| |
| - |
| |
| - | .center {
| |
| - | display: block;
| |
| - | margin: 0 auto;
| |
| - | }
| |
| - |
| |
| - | .text-holder {
| |
| - | position: absolute;
| |
| - | right: 70px;
| |
| - | top: 70px;
| |
| - | text-align: center;
| |
| - | width: 50%;
| |
| - | }
| |
| - |
| |
| - | .slide-pict {
| |
| - | position: relative;
| |
| - | top: 8px;
| |
| - | left: 85px;
| |
| - | }
| |
| - |
| |
| - | .footer-slide {
| |
| - | position: absolute;
| |
| - | left: 0;
| |
| - | bottom: 0;
| |
| - | right: 0;
| |
| - | background: url('../img/gradation.png') repeat-x;
| |
| - | min-height: 43px;
| |
| - | }
| |
| - |
| |
| - | .text-center {
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | .holder {
| |
| - | display: block;
| |
| - | width: 960px;
| |
| - | margin: 0 auto;
| |
| - | }
| |
| - |
| |
| - | .konten {
| |
| - | width: 30%;
| |
| - | display: inline-block;
| |
| - | padding: 0 1%;
| |
| - | }
| |
| - |
| |
| - | .konten > .judul {
| |
| - | font-size: 18px;
| |
| - | margin: 10px 0;
| |
| - | }
| |
| - |
| |
| - | .konten > .teaser {
| |
| - | text-align: justify;
| |
| - | margin-bottom: 20px;
| |
| - | }
| |
| - |
| |
| - | .btn {
| |
| - | -moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
| |
| - | -webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
| |
| - | box-shadow:inset 0px -3px 7px 0px #29bbff;
| |
| - |
| |
| - | background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
| |
| - | background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
| |
| - | background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
| |
| - | background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
| |
| - | background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
| |
| - | background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
| |
| - | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
| |
| - |
| |
| - | background-color:#2dabf9;
| |
| - |
| |
| - | display:inline-block;
| |
| - | color:#ffffff;
| |
| - | font-family:arial;
| |
| - | font-size:12px;
| |
| - | font-weight:normal;
| |
| - | padding:9px 23px;
| |
| - | text-decoration:none;
| |
| - |
| |
| - | text-shadow:0px 1px 0px #263666;
| |
| - |
| |
| - | }
| |
| - | .btn:hover {
| |
| - |
| |
| - | background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
| |
| - | background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
| |
| - | background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
| |
| - | background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
| |
| - | background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
| |
| - | background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
| |
| - | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
| |
| - |
| |
| - | background-color:#0688fa;
| |
| - | }
| |
| - | .btn:active {
| |
| - | position:relative;
| |
| - | top:1px;
| |
| - | }
| |
| - |
| |
| - | </style>
| |
| - | </head>
| |
| - | <body>
| |
| - | <div class="test"></div>
| |
| - | <nav>
| |
| - | <img src="assets/img/logo-igem.png" alt="Logo iGEM" class="logo"/>
| |
| - | <ul class="main-nav">
| |
| - | <li><a href="#">Home</a></li>
| |
| - | <li><a href="#">Team</a></li>
| |
| - | <li><a href="#">Project</a></li>
| |
| - | <li><a href="#">Notebook</a></li>
| |
| - | <li><a href="#">Safety</a></li>
| |
| - | <li><a href="#">Attributions</a></li>
| |
| - | </ul>
| |
| - | </nav>
| |
| - | <div id="slide-story">
| |
| - | <div class="holder">
| |
| - | <img class="slide-pict" src="assets/img/gambar.png" alt=""/>
| |
| - | <!--container-text kelas yang handle kotak di belakang tulisan itu-->
| |
| - | <div class="text-holder">
| |
| - | <p class="container-text center" id="judul">Aflatoxin Biosensor</p>
| |
| - | <p class="container-text center" id="deskripsi">
| |
| - | Lorem ipsum dolor sit amet, consectetur
| |
| - | adipiscing elit. Donec sollicitudin erat
| |
| - | sit amet.
| |
| - | </p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div class="footer-slide"></div><!--buat nampung pict gradasi-->
| |
| - | </div>
| |
| - | <footer>
| |
| - | <div class="holder text-center">
| |
| - | <div class="konten" id="konten-1">
| |
| - | <p class="judul">Project</p>
| |
| - | <p class="teaser">
| |
| - | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| |
| - | Nunc condimentum lacus et cursus semper. In sit amet
| |
| - | tincidunt erat. Donec pharetra sagittis magna. Vestibulum
| |
| - | consequat varius elit quis rutrum. Vivamus ac tortor arcu.
| |
| - | Interdum et malesuada..
| |
| - | </p>
| |
| - | <a href="#" class="readmore-link btn">View Details »</a>
| |
| - | </div>
| |
| - | <div class="konten" id="konten-2">
| |
| - | <p class="judul">Safety</p>
| |
| - | <p class="teaser">
| |
| - | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| |
| - | Nunc condimentum lacus et cursus semper. In sit amet
| |
| - | tincidunt erat. Donec pharetra sagittis magna. Vestibulum
| |
| - | consequat varius elit quis rutrum. Vivamus ac tortor arcu.
| |
| - | Interdum et malesuada..
| |
| - | </p>
| |
| - | <a href="#" class="readmore-link btn">View Details »</a>
| |
| - | </div>
| |
| - | <div class="konten" id="konten-3">
| |
| - | <p class="judul">Attributions</p>
| |
| - | <p class="teaser">
| |
| - | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
| |
| - | Nunc condimentum lacus et cursus semper. In sit amet
| |
| - | tincidunt erat. Donec pharetra sagittis magna. Vestibulum
| |
| - | consequat varius elit quis rutrum. Vivamus ac tortor arcu.
| |
| - | Interdum et malesuada..
| |
| - | </p>
| |
| - | <a href="#" class="readmore-link btn">View Details »</a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </footer>
| |
| - | </body>
| |
| - | </html>
| |
"
