Line 1: | Line 1: | ||
− | <html> | + | ftab<html> |
− | + | ||
<script> | <script> | ||
// When the user scrolls down 20px from the top of the document, show the button | // When the user scrolls down 20px from the top of the document, show the button | ||
Line 23: | Line 23: | ||
@import url(font-awesome.min.css); | @import url(font-awesome.min.css); | ||
@import url("http://fonts.googleapis.com/css?family=Lato:300,400"); | @import url("http://fonts.googleapis.com/css?family=Lato:300,400"); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .backbody2{ | ||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2017/8/8a/Export_%2846%29.png'); | ||
+ | background-repeat: repeat; | ||
+ | background-attachment: fixed; | ||
+ | background-position: center; | ||
+ | } | ||
#myBtn { | #myBtn { | ||
display: none; | display: none; | ||
Line 59: | Line 49: | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
#myBtn:hover { | #myBtn:hover { | ||
background-color: #555; | background-color: #555; | ||
Line 80: | Line 74: | ||
top:0px; | top:0px; | ||
left:0px; | left:0px; | ||
− | height: | + | height:50px; |
width:100%;; | width:100%;; | ||
margin:0; | margin:0; | ||
− | padding: | + | padding:0; |
z-index:999; | z-index:999; | ||
background-color: #333; | background-color: #333; | ||
Line 124: | Line 118: | ||
transition: 0.4s; | transition: 0.4s; | ||
border: 2px solid black; | border: 2px solid black; | ||
− | font-family: | + | font-family: "Times New Roman", Times, serif; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | |||
+ | |||
button.accordion.active, button.accordion:hover { | button.accordion.active, button.accordion:hover { | ||
background-color: #fff; | background-color: #fff; | ||
Line 166: | Line 148: | ||
body, input, select, textarea { | body, input, select, textarea { | ||
color: #444; | color: #444; | ||
− | font-family: | + | font-family: "Lato", Helvetica, sans-serif; |
font-size: 15pt; | font-size: 15pt; | ||
font-weight: 300; | font-weight: 300; | ||
Line 337: | Line 319: | ||
header.major p { | header.major p { | ||
− | border-top: | + | border-top: medium double rgba(144, 144, 144, 0.25); |
display: inline-block; | display: inline-block; | ||
padding: 2em 2em 0 2em; | padding: 2em 2em 0 2em; | ||
Line 405: | Line 387: | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
− | font-family: | + | font-family: FontAwesome; |
font-style: normal; | font-style: normal; | ||
font-weight: normal; | font-weight: normal; | ||
Line 471: | Line 453: | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
− | font-family: | + | font-family: FontAwesome; |
font-style: normal; | font-style: normal; | ||
font-weight: normal; | font-weight: normal; | ||
Line 572: | Line 554: | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
− | font-family: | + | font-family: FontAwesome; |
font-style: normal; | font-style: normal; | ||
font-weight: normal; | font-weight: normal; | ||
Line 799: | Line 781: | ||
table { | table { | ||
− | margin: 0 0 | + | margin: 0 0 2em 0; |
− | width: | + | width: 100%; |
} | } | ||
table tbody tr { | table tbody tr { | ||
− | border: solid | + | border: solid 1px #000; |
border-left: 0; | border-left: 0; | ||
border-right: 0; | border-right: 0; | ||
Line 814: | Line 796: | ||
.tr2{ | .tr2{ | ||
− | background-color: | + | background-color: rgb(105,105,105); |
} | } | ||
Line 834: | Line 816: | ||
table tfoot { | table tfoot { | ||
− | border-top: solid | + | border-top: solid 2px rgba(0,0,0, 0.25); |
} | } | ||
Line 842: | Line 824: | ||
table.alt tbody tr td { | table.alt tbody tr td { | ||
− | border: solid | + | border: solid 1px rgba(144, 144, 144, 0.25); |
border-left-width: 0; | border-left-width: 0; | ||
border-top-width: 0; | border-top-width: 0; | ||
Line 1,198: | Line 1,180: | ||
background: #202222; | background: #202222; | ||
color: #ddd; | color: #ddd; | ||
− | padding: 1em 0em; | + | padding: 1em 0em 1em; |
} | } | ||
Line 1,248: | Line 1,230: | ||
} | } | ||
</style> | </style> | ||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
/* ADJUSTS DEFAULT iGEM CONTENT */ | /* ADJUSTS DEFAULT iGEM CONTENT */ | ||
Line 1,284: | Line 1,262: | ||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
} | } | ||
− | + | .navbar { | |
+ | position:fixed;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */ | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | height:50px; | ||
+ | width:100%; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | z-index:999; | ||
+ | background-color: #333; | ||
+ | overflow:visible; | ||
+ | } | ||
Line 1,331: | Line 1,320: | ||
outline: none; | outline: none; | ||
color: white; | color: white; | ||
− | padding: | + | padding: 18px 16px; |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
background-color: inherit; | background-color: inherit; | ||
z-index: 101; | z-index: 101; | ||
Line 1,350: | Line 1,329: | ||
z-index: 101; | z-index: 101; | ||
} | } | ||
− | |||
.dropdown-content { | .dropdown-content { | ||
Line 1,422: | Line 1,400: | ||
margin-right: 60px; | margin-right: 60px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.backbody { | .backbody { | ||
background-image: url("1.png"); | background-image: url("1.png"); | ||
Line 1,459: | Line 1,429: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<!-- --> | <!-- --> | ||
* { | * { | ||
Line 1,482: | Line 1,436: | ||
− | + | /* The actual timeline (the vertical ruler) */ | |
.timeline1 { | .timeline1 { | ||
position: relative; | position: relative; | ||
Line 1,489: | Line 1,443: | ||
} | } | ||
− | + | /* The actual timeline (the vertical ruler) */ | |
.timeline1::after { | .timeline1::after { | ||
content: ''; | content: ''; | ||
Line 1,501: | Line 1,455: | ||
} | } | ||
− | + | /* Container around content */ | |
.container1 { | .container1 { | ||
padding: 10px 40px; | padding: 10px 40px; | ||
Line 1,509: | Line 1,463: | ||
} | } | ||
− | + | /* The circles on the timeline */ | |
.container1::after { | .container1::after { | ||
content: ''; | content: ''; | ||
Line 1,523: | Line 1,477: | ||
} | } | ||
− | + | /* Place the container to the left */ | |
.left1 { | .left1 { | ||
left: 0; | left: 0; | ||
} | } | ||
+ | /* Place the container to the right */ | ||
.right1 { | .right1 { | ||
left: 50%; | left: 50%; | ||
} | } | ||
+ | /* Add arrows to the left container (pointing right) */ | ||
.left1::before { | .left1::before { | ||
content: " "; | content: " "; | ||
Line 1,545: | Line 1,501: | ||
} | } | ||
+ | /* Add arrows to the right container (pointing left) */ | ||
.right1::before { | .right1::before { | ||
content: " "; | content: " "; | ||
Line 1,558: | Line 1,515: | ||
} | } | ||
− | + | /* Fix the circle for containers on the right side */ | |
.right1::after { | .right1::after { | ||
left: -16px; | left: -16px; | ||
} | } | ||
− | + | /* The actual content */ | |
.content1 { | .content1 { | ||
padding: 20px 30px; | padding: 20px 30px; | ||
Line 1,571: | Line 1,528: | ||
} | } | ||
+ | /* Media queries - Responsive timeline on screens less than 600px wide */ | ||
@media all and (max-width: 600px) { | @media all and (max-width: 600px) { | ||
− | + | /* Place the timelime to the left */ | |
.timeline::after { | .timeline::after { | ||
left: 31px; | left: 31px; | ||
} | } | ||
− | + | /* Full-width containers */ | |
.container1 { | .container1 { | ||
width: 100%; | width: 100%; | ||
Line 1,584: | Line 1,542: | ||
} | } | ||
+ | /* Make sure that all arrows are pointing leftwards */ | ||
.container1::before { | .container1::before { | ||
left: 60px; | left: 60px; | ||
Line 1,591: | Line 1,550: | ||
} | } | ||
− | + | /* Make sure all circles are at the same spot */ | |
.left1::after, .right1::after { | .left1::after, .right1::after { | ||
left: 15px; | left: 15px; | ||
} | } | ||
+ | /* Make all right containers behave like the left ones */ | ||
.right1 { | .right1 { | ||
left: 0%; | left: 0%; | ||
} | } | ||
− | </style> | + | |
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | <html lang="en"> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <title>iGEM IIT Delhi</title> | ||
+ | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
+ | <meta name="description" content="" /> | ||
+ | <meta name="keywords" content="" /> | ||
+ | |||
<script> | <script> | ||
/* | /* | ||
Line 1,704: | Line 1,690: | ||
<div class = "navbar "> | <div class = "navbar "> | ||
− | + | <a href="index.html">iGEM IIT Delhi</a> | |
− | + | ||
<div class = "right_menu"> | <div class = "right_menu"> | ||
<div class="dropdown"> | <div class="dropdown"> | ||
Line 1,712: | Line 1,697: | ||
</button> | </button> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href=" | + | <a href="#">Description</a> |
− | <a href=" | + | <a href="#">Results</a> |
− | + | <a href="#">Proof of Concept</a> | |
− | <a href="/ | + | <a href="#">Basic Parts</a> |
+ | <a href="#">Composite Parts</a> | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | <div class="dropdown"> | |
− | <button class="dropbtn"> | + | <button class="dropbtn">Modelling |
<i class="fa fa-caret-down"></i> | <i class="fa fa-caret-down"></i> | ||
</button> | </button> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href=" | + | <a href="#">Overview</a> |
− | <a href=" | + | <a href="#">Logic Assessment</a> |
− | <a href=" | + | <a href="#">Signalling Tools</a> |
− | + | ||
</div> | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<div class="dropdown"> | <div class="dropdown"> | ||
<button class="dropbtn">Human Practices | <button class="dropbtn">Human Practices | ||
Line 1,743: | Line 1,719: | ||
</button> | </button> | ||
<div class="dropdown-content-big"> | <div class="dropdown-content-big"> | ||
− | <a href=" | + | <a href="#">Human Practices</a> |
− | <a href=" | + | <a href="#">Integrated Practices</a> |
− | <a href=" | + | <a href="#">Public Engagement</a> |
− | <a href=" | + | <a href="#">Collaborations</a> |
</div> | </div> | ||
</div> | </div> | ||
Line 1,754: | Line 1,730: | ||
</button> | </button> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href=" | + | <a href="#">Lab Records</a> |
− | <a href=" | + | <a href="#">Protocols</a> |
− | <a href=" | + | <a href="#">Recipes</a> |
− | <a href=" | + | <a href="#">Medal Criteria</a> |
− | + | <a href="#">Recipes</a> | |
</div> | </div> | ||
</div> | </div> | ||
Line 1,766: | Line 1,742: | ||
</button> | </button> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
− | <a href=" | + | <a href="team.html">The Team</a> |
− | + | <a href="#">Attributions</a> | |
− | <a href=" | + | |
</div> | </div> | ||
</div> | </div> | ||
Line 1,787: | Line 1,762: | ||
− | + | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <section id="two" class=" align-center"> | ||
<!-- <div class="container backbody"> --> | <!-- <div class="container backbody"> --> | ||
<div class="backbody2"> | <div class="backbody2"> | ||
Line 1,853: | Line 1,833: | ||
− | + | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
<!-- Footer --> | <!-- Footer --> | ||
<footer id="footer"> | <footer id="footer"> |
Revision as of 20:41, 29 October 2017
ftab
march
Lorem ipsum..
april
Lorem ipsum..
may
Lorem ipsum..
june
Lorem ipsum..
july
Lorem ipsum..
august
Lorem ipsum..
september
Lorem ipsum..
october
Lorem ipsum..