|
|
| Line 3: |
Line 3: |
| | <html> | | <html> |
| | | | |
| − | <style>
| + | <style> |
| | | | |
| | | | |
| Line 13: |
Line 13: |
| | height: 100%; | | height: 100%; |
| | border: 0px; | | border: 0px; |
| − | background-color: #000;
| |
| | margin: 0px; | | margin: 0px; |
| | padding: 0px; | | padding: 0px; |
| Line 26: |
Line 25: |
| | margin:0; | | margin:0; |
| | padding:0; | | padding:0; |
| − | | + | background-image:url("https://static.igem.org/mediawiki/2015/6/67/IITDwikipages_background.jpg"); |
| | + | background-size:100% 100%; |
| | } | | } |
| | | | |
| − | | + | .icons{ |
| − | | + | position:absolute; |
| − | <!-----------------------------------------------CSS MENU SIDE NAV---------------------------->
| + | width:6%; |
| − | #cssmenu,
| + | margin-top:2%; |
| − | #cssmenu ul,
| + | -webkit-transition: all 1s ease; |
| − | #cssmenu ul li,
| + | -moz-transition: all 1s ease; |
| − | #cssmenu ul li a {
| + | -o-transition: all 1s ease; |
| − | margin: 0; | + | transition all 1s ease: |
| − | 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 {
| + | .iconActive{ |
| − | width: 20%; | + | width:10%; |
| − | font-family: Helvetica, Arial, sans-serif;
| + | |
| − | color: #ffffff;
| + | |
| − | margin-top:25px;
| + | |
| − | position: fixed;
| + | |
| − | float: left;
| + | |
| − | padding: 20;
| + | |
| | } | | } |
| − | #cssmenu ul ul { | + | #IITDigem_logo{ |
| − | display: none;
| + | position:absolute; |
| − | }
| + | margin-top:1%; |
| − | .align-right {
| + | margin-left:0%; |
| − | float: right;
| + | width:17%; |
| − | }
| + | |
| − | #cssmenu > ul > li > a {
| + | |
| − | padding: 15px 20px;
| + | |
| − | border-left: 1px solid #1682ba;
| + | |
| − | border-right: 1px solid #1682ba;
| + | |
| − | border-top: 1px solid #1682ba;
| + | |
| − | cursor: pointer;
| + | |
| − | z-index: 2;
| + | |
| − | font-size: 14px;
| + | |
| − | font-weight: bold;
| + | |
| − | text-decoration: none;
| + | |
| − | color: #ffffff;
| + | |
| − | text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
| + | |
| − | background: #36aae7;
| + | |
| − | background: -webkit-linear-gradient(#36aae7, #1fa0e4);
| + | |
| − | background: -moz-linear-gradient(#36aae7, #1fa0e4);
| + | |
| − | background: -o-linear-gradient(#36aae7, #1fa0e4);
| + | |
| − | background: -ms-linear-gradient(#36aae7, #1fa0e4);
| + | |
| − | background: linear-gradient(#36aae7, #1fa0e4);
| + | |
| − | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
| + | |
| − | }
| + | |
| − | #cssmenu > ul > li > a:hover,
| + | |
| − | #cssmenu > ul > li.active > a,
| + | |
| − | #cssmenu > ul > li.open > a {
| + | |
| − | color: #eeeeee;
| + | |
| − | background: #1fa0e4;
| + | |
| − | background: -webkit-linear-gradient(#1fa0e4, #1992d1);
| + | |
| − | background: -moz-linear-gradient(#1fa0e4, #1992d1);
| + | |
| − | background: -o-linear-gradient(#1fa0e4, #1992d1);
| + | |
| − | background: -ms-linear-gradient(#1fa0e4, #1992d1);
| + | |
| − | background: linear-gradient(#1fa0e4, #1992d1);
| + | |
| − | }
| + | |
| − | #cssmenu > ul > li.open > a {
| + | |
| − | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
| + | |
| − | border-bottom: 1px solid #1682ba;
| + | |
| − | }
| + | |
| − | #cssmenu > ul > li:last-child > a,
| + | |
| − | #cssmenu > ul > li.last > a {
| + | |
| − | border-bottom: 1px solid #1682ba;
| + | |
| − | }
| + | |
| − | .holder {
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | position: absolute; | + | |
| − | top: 0; | + | |
| − | right: 0;
| + | |
| − | }
| + | |
| − | .holder::after,
| + | |
| − | .holder::before {
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | content: "";
| + | |
| − | width: 6px;
| + | |
| − | height: 6px;
| + | |
| − | right: 20px;
| + | |
| − | z-index: 10;
| + | |
| − | -webkit-transform: rotate(-135deg);
| + | |
| − | -moz-transform: rotate(-135deg);
| + | |
| − | -ms-transform: rotate(-135deg);
| + | |
| − | -o-transform: rotate(-135deg);
| + | |
| − | transform: rotate(-135deg);
| + | |
| − | }
| + | |
| − | .holder::after {
| + | |
| − | top: 17px;
| + | |
| − | border-top: 2px solid #ffffff;
| + | |
| − | border-left: 2px solid #ffffff;
| + | |
| − | }
| + | |
| − | #cssmenu > ul > li > a:hover > span::after,
| + | |
| − | #cssmenu > ul > li.active > a > span::after,
| + | |
| − | #cssmenu > ul > li.open > a > span::after {
| + | |
| − | border-color: #eeeeee;
| + | |
| − | }
| + | |
| − | .holder::before {
| + | |
| − | top: 18px;
| + | |
| − | border-top: 2px solid;
| + | |
| − | border-left: 2px solid;
| + | |
| − | border-top-color: inherit;
| + | |
| − | border-left-color: inherit;
| + | |
| − | }
| + | |
| − | #cssmenu ul ul li a {
| + | |
| − | cursor: pointer;
| + | |
| − | border-bottom: 1px solid #32373e;
| + | |
| − | border-left: 1px solid #32373e;
| + | |
| − | border-right: 1px solid #32373e;
| + | |
| − | padding: 10px 20px;
| + | |
| − | z-index: 1;
| + | |
| − | text-decoration: none; | + | |
| − | font-size: 13px;
| + | |
| − | color: #eeeeee;
| + | |
| − | background: #49505a;
| + | |
| − | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
| + | |
| − | }
| + | |
| − | #cssmenu ul ul li:hover > a,
| + | |
| − | #cssmenu ul ul li.open > a,
| + | |
| − | #cssmenu ul ul li.active > a {
| + | |
| − | background: #424852;
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | #cssmenu ul ul li:first-child > a {
| + | |
| − | box-shadow: none;
| + | |
| − | }
| + | |
| − | #cssmenu ul ul ul li:first-child > a {
| + | |
| − | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
| + | |
| − | }
| + | |
| − | #cssmenu ul ul ul li a {
| + | |
| − | padding-left: 30px;
| + | |
| − | }
| + | |
| − | #cssmenu > ul > li > ul > li:last-child > a,
| + | |
| − | #cssmenu > ul > li > ul > li.last > a {
| + | |
| − | border-bottom: 0;
| + | |
| − | }
| + | |
| − | #cssmenu > ul > li > ul > li.open:last-child > a,
| + | |
| − | #cssmenu > ul > li > ul > li.last.open > a {
| + | |
| − | border-bottom: 1px solid #32373e;
| + | |
| − | }
| + | |
| − | #cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
| + | |
| − | border-bottom: 0;
| + | |
| − | }
| + | |
| − | #cssmenu ul ul li.has-sub > a::after {
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | content: "";
| + | |
| − | width: 5px; | + | |
| − | height: 5px;
| + | |
| − | right: 20px;
| + | |
| − | z-index: 10;
| + | |
| − | top: 11.5px;
| + | |
| − | border-top: 2px solid #eeeeee;
| + | |
| − | border-left: 2px solid #eeeeee;
| + | |
| − | -webkit-transform: rotate(-135deg);
| + | |
| − | -moz-transform: rotate(-135deg);
| + | |
| − | -ms-transform: rotate(-135deg);
| + | |
| − | -o-transform: rotate(-135deg);
| + | |
| − | transform: rotate(-135deg);
| + | |
| − | }
| + | |
| − | #cssmenu ul ul li.active > a::after,
| + | |
| − | #cssmenu ul ul li.open > a::after,
| + | |
| − | #cssmenu ul ul li > a:hover::after {
| + | |
| − | border-color: #ffffff;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | <!------------------------------------------------CSS SIDE NAV----------------------------->
| + | |
| − | | + | |
| − | <!------------------------------------------------CSS SIDE NAV----------------------------->
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | #wiki{
| + | |
| | | | |
| − | width:100%;
| |
| − | margin:0;
| |
| − | padding: 0;
| |
| − | position:absolute;
| |
| − | z-index:-1;
| |
| | } | | } |
| − |
| |
| | #tour{ | | #tour{ |
| − |
| + | margin-top:2%; |
| − | margin-right:5%; | + | margin-left:89%; |
| − | padding:0px;
| + | |
| − | height:100%;
| + | |
| − | width:20%;
| + | |
| − | float:left;
| + | |
| − | }
| + | |
| − | #try3,#try4,#try5,#try6{
| + | |
| − |
| + | |
| − | border-radius:50px;
| + | |
| − | float:left;
| + | |
| − | z-index:1;
| + | |
| − | height:75px;
| + | |
| − | width:75px;
| + | |
| − | margin-left:20px; | + | |
| − | margin-right:20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #igemlogo{
| + | |
| − |
| + | |
| − | margin-right:0;
| + | |
| − | padding:0px;
| + | |
| − | height:100%;
| + | |
| − | width:20%;
| + | |
| − | float:left;
| + | |
| − | }
| + | |
| − | #try7,#try8,#try9,#try10{
| + | |
| − |
| + | |
| − | border-radius:50px;
| + | |
| − | float:left;
| + | |
| − | z-index:1;
| + | |
| − | height:75px;
| + | |
| − | width:75px;
| + | |
| − | margin-left:20px;
| + | |
| − | margin-right:20px;
| + | |
| | } | | } |
| | #leftNav{ | | #leftNav{ |
| − | display:inline-block; | + | border:solid 2px green; |
| − |
| + | width:17%; |
| − | width:22%; | + | |
| | height:700px; | | height:700px; |
| − | | + | float:left; |
| | + | margin-top:10% |
| | } | | } |
| − | #IITDcontent{ | + | #wikicontent{ |
| − | | + | border:solid 2px red; |
| − | background-color:#fff; | + | background:#fff; |
| | height:700px; | | height:700px; |
| − | display:inline-block; | + | width:80%; |
| − | width:75%; | + | position:absolute; |
| − | | + | margin-left:18%; |
| | + | margin-top:10%; |
| | } | | } |
| | | | |
| | + | </style> <!-- End of CSS --> |
| | + | <body> |
| | + | <img id="IITDigem_logo" src="https://static.igem.org/mediawiki/2015/f/ff/IITDigem_logo.png"> |
| | + | <nav> |
| | + | <img class="icons" id="icon1" style="margin-left:18%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png"> |
| | + | <img class="icons" id="icon2" style="margin-left:27%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png"> |
| | | | |
| | + | <img class="icons" id="icon3" style="margin-left:36%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png"> |
| | + | <img class="icons" id="icon4" style="margin-left:45%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png"> |
| | | | |
| | + | <img class="icons" id="icon5" style="margin-left:54%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png"> |
| | + | <img class="icons" id="icon6" style="margin-left:63%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png"> |
| | | | |
| − | </style> <!-- End of CSS -->
| + | <img class=" icons" id=" icon7" style=" margin-left: 72%;" src="https://static.igem.org/mediawiki/2015/ 1/ 12/ IITDproject_icon.png"> |
| − | <body >
| + | <img class="icons" id="icon8" style="margin-left:81%;" src="https://static.igem.org/mediawiki/2015/1/12/IITDproject_icon.png"> |
| − | | + | </nav> |
| − | <header></header>
| + | |
| − | <div id="wiki">
| + | |
| − | <img style=" position:absolute; z-index:-3;padding-right:10px;" src="https://static.igem.org/mediawiki/2015/d/d3/IITDBackdrop.jpg"> | + | |
| − | | + | |
| − | <div id="top" style="width:100%; height:100px;">
| + | |
| − |
| + | |
| − | <img id="tour" src="https://static.igem.org/mediawiki/2015/f/fd/IITDIgemcentre.png">
| + | |
| − |
| + | |
| − | <div id="leftfouricons"> | + | |
| − | <img id="try3" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png" width="10%" height="10%">
| + | |
| − | <img id="try4" " src="https://static.igem.org/mediawiki/2015/0/09/Collaboration.png">
| + | |
| − | <img id="try5" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
| + | |
| − | <img id="try6" " src="https://static.igem.org/mediawiki/2015/6/67/Projectdelhi.png">
| + | |
| − | </div>
| + | |
| − | <img id="igemlogo" src="https://static.igem.org/mediawiki/2015/f/fd/IITDIgemcentre.png">
| + | |
| − | <div id="rightfouricons">
| + | |
| − | <img id="try7" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
| + | |
| − | <img id="try8" " src="https://static.igem.org/mediawiki/2015/6/67/Projectdelhi.png">
| + | |
| − | <img id="try9" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
| + | |
| − | <img id="try10" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
| + | |
| | | | |
| − | </div> | + | <div id="tour"> |
| | + | <img src="https://static.igem.org/mediawiki/2015/1/11/IITDigem_tour.png"> |
| | </div> | | </div> |
| | + | |
| | | | |
| − | <div id="container" style="height:700px;"> | + | |
| | + | <div id="wiki"> |
| | <div id="leftNav"> | | <div id="leftNav"> |
| − | <h1 style="color:white;">left nav</h1> | + | <h1 style="color:white;">This is left Nav</h1> |
| − |
| + | |
| − | | + | |
| − | <div id='cssmenu'>
| + | |
| − | <ul>
| + | |
| − | <li><a href='#'><span>Home</span></a></li>
| + | |
| − | <li class='active has-sub'><a href='#'><span>Products</span></a>
| + | |
| − | <ul>
| + | |
| − | <li class='has-sub'><a href='#'><span>Product 1</span></a>
| + | |
| − | <ul>
| + | |
| − | <li><a href='#'><span>Sub Product</span></a></li>
| + | |
| − | <li class='last'><a href='#'><span>Sub Product</span></a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li class='has-sub'><a href='#'><span>Product 2</span></a>
| + | |
| − | <ul>
| + | |
| − | <li><a href='#'><span>Sub Product</span></a></li>
| + | |
| − | <li class='last'><a href='#'><span>Sub Product</span></a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li><a href='#'><span>About</span></a></li>
| + | |
| − | <li class='last'><a href='#'><span>Contact</span></a></li>
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| | </div> | | </div> |
| − | <div id="IITDcontent">
| |
| − | <h1>THIS IS THE CONTENT</h1>
| |
| | | | |
| | + | <div id="wikicontent"> |
| | + | <h1>This is content</h1> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | | + | |
| − | | + | <script> |
| − |
| + | $(document).ready(function(){ |
| − | <!-- Navigation bar of the left side --> | + | $(".icons").hover( |
| − | | + | function(){ |
| − | <!-- <img id="try1" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
| + | $(this).addClass("iconActive"); |
| − | <img id="try2" " src="https://static.igem.org/mediawiki/2015/3/32/Team.png">
| + | }, |
| − | -->
| + | function(){ |
| − | | + | $(this).removeClass("iconActive"); |
| − |
| + | } |
| − | | + | ); |
| − | | + | }); |
| − |
| + | </script> |
| − | </div> | + | |
| | </body> | | </body> |
| | </html> | | </html> |
