Template:Team:Northwestern/Template/bootstrap/orange
From 2014.igem.org
(Difference between revisions)
(14 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <!--animate.css--> | ||
+ | <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css"> | ||
<style> | <style> | ||
- | @import url("//fonts.googleapis.com/css?family=Roboto:300,400,500");/*! | + | @import url("//fonts.googleapis.com/css?family=Roboto:300,400,500"); |
+ | @import url(http://fonts.googleapis.com/css?family=Lobster); | ||
+ | @import url(http://fonts.googleapis.com/css?family=Patua+One); | ||
+ | /*! | ||
* bootswatch v3.2.0 | * bootswatch v3.2.0 | ||
* Homepage: http://bootswatch.com | * Homepage: http://bootswatch.com | ||
Line 10: | Line 15: | ||
* Based on Bootstrap | * Based on Bootstrap | ||
*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */ | *//*! normalize.css v3.0.1 | MIT License | git.io/normalize */ | ||
+ | .container-footer { | ||
+ | -webkit-box-shadow: 0px 5px 25px -12px rgba(31,30,31,1); | ||
+ | -moz-box-shadow: 0px 5px 25px -12px rgba(31,30,31,1); | ||
+ | box-shadow: 0px 5px 25px -12px rgba(31,30,31,1); | ||
+ | background-color: #fff; | ||
+ | } | ||
#footer { | #footer { | ||
- | height: | + | height: 600px; |
- | background: rgb( | + | -webkit-box-shadow: 0px 5px 25px -12px rgba(31,30,31,1); |
- | background: -moz-linear-gradient(top, rgba( | + | -moz-box-shadow: 0px 5px 25px -12px rgba(31,30,31,1); |
- | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba( | + | box-shadow: 0px 5px 25px -12px rgba(31,30,31,1); |
- | background: -webkit-linear-gradient(top, rgba( | + | background: rgb(253,252,255); /* Old browsers */ |
- | background: -o-linear-gradient(top, rgba( | + | background: -moz-linear-gradient(top, rgba(253,252,255,1) 0%, rgba(123, 36, 216, 0.7) 100%); /* FF3.6+ */ |
- | background: -ms-linear-gradient(top, rgba( | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,252,255,1)), color-stop(100%,rgba(123, 36, 216, 0.7))); /* Chrome,Safari4+ */ |
- | background: linear-gradient(to bottom, rgba( | + | background: -webkit-linear-gradient(top, rgba(253,252,255,1) 0%,rgba(123, 36, 216, 0.7) 100%); /* Chrome10+,Safari5.1+ */ |
- | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='# | + | background: -o-linear-gradient(top, rgba(253,252,255,1) 0%,rgba(123, 36, 216, 0.7) 100%); /* Opera 11.10+ */ |
- | + | background: -ms-linear-gradient(top, rgba(253,252,255,1) 0%,rgba(49,17,66,1) 100%); /* IE10+ */ | |
+ | background: linear-gradient(to bottom, rgba(253,252,255,1) 0%,rgba(123, 36, 216, 0.7) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfcff', endColorstr='#311142',GradientType=0 ); /* IE6-9 */ | ||
} | } | ||
Line 39: | Line 52: | ||
border-radius: 50%; | border-radius: 50%; | ||
} | } | ||
+ | h1, h2, h3, h4, h5 { | ||
+ | font-family: 'Patua One', cursive; | ||
+ | } | ||
+ | |||
+ | /* THE SPEECH BUBBLE | ||
+ | ------------------------------------------------------------------------------------------------------------------------------- */ | ||
+ | |||
+ | .triangle-isosceles { | ||
+ | position:relative; | ||
+ | padding:15px; | ||
+ | color:#000; | ||
+ | background:#f3961c; /* default background for browsers without gradient support */ | ||
+ | /* css3 */ | ||
+ | background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); | ||
+ | background:-moz-linear-gradient(#f9d835, #f3961c); | ||
+ | background:-o-linear-gradient(#f9d835, #f3961c); | ||
+ | background:linear-gradient(#f9d835, #f3961c); | ||
+ | -webkit-border-radius:10px; | ||
+ | -moz-border-radius:10px; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | |||
+ | /* Variant : for top positioned triangle | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.top { | ||
+ | background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835)); | ||
+ | background:-moz-linear-gradient(#f3961c, #f9d835); | ||
+ | background:-o-linear-gradient(#f3961c, #f9d835); | ||
+ | background:linear-gradient(#f3961c, #f9d835); | ||
+ | } | ||
+ | |||
+ | /* Variant : for left/right positioned triangle | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.left { | ||
+ | margin-left:50px; | ||
+ | background:#f3961c; | ||
+ | } | ||
+ | |||
+ | /* Variant : for right positioned triangle | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.right { | ||
+ | margin-right:50px; | ||
+ | background:#f3961c; | ||
+ | } | ||
+ | |||
+ | /* THE TRIANGLE | ||
+ | ------------------------------------------------------------------------------------------------------------------------------- */ | ||
+ | |||
+ | /* creates triangle */ | ||
+ | .triangle-isosceles:after { | ||
+ | content:""; | ||
+ | position:absolute; | ||
+ | bottom:-15px; /* value = - border-top-width - border-bottom-width */ | ||
+ | left:50px; /* controls horizontal position */ | ||
+ | border-width:15px 15px 0; /* vary these values to change the angle of the vertex */ | ||
+ | border-style:solid; | ||
+ | border-color:#f3961c transparent; | ||
+ | /* reduce the damage in FF3.0 */ | ||
+ | display:block; | ||
+ | width:0; | ||
+ | } | ||
+ | |||
+ | /* Variant : top | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.top:after { | ||
+ | top:-15px; /* value = - border-top-width - border-bottom-width */ | ||
+ | right:50px; /* controls horizontal position */ | ||
+ | bottom:auto; | ||
+ | left:auto; | ||
+ | border-width:0 15px 15px; /* vary these values to change the angle of the vertex */ | ||
+ | border-color:#f3961c transparent; | ||
+ | } | ||
+ | |||
+ | /* Variant : left | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.left:after { | ||
+ | top:16px; /* controls vertical position */ | ||
+ | left:-50px; /* value = - border-left-width - border-right-width */ | ||
+ | bottom:auto; | ||
+ | border-width:10px 50px 10px 0; | ||
+ | border-color:transparent #f3961c; | ||
+ | } | ||
+ | |||
+ | /* Variant : right | ||
+ | ------------------------------------------ */ | ||
+ | |||
+ | .triangle-isosceles.right:after { | ||
+ | top:16px; /* controls vertical position */ | ||
+ | right:-50px; /* value = - border-left-width - border-right-width */ | ||
+ | bottom:auto; | ||
+ | left:auto; | ||
+ | border-width:10px 0 10px 50px; | ||
+ | border-color:transparent #f3961c; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 21:41, 18 September 2014