Template:Team:Northwestern/Template/bootstrap/orange

From 2014.igem.org

(Difference between revisions)
 
(13 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: 500px;
+
   height: 600px;
 +
-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: rgb(253,252,255); /* Old browsers */
background: rgb(253,252,255); /* Old browsers */
-
background: -moz-linear-gradient(top,  rgba(253,252,255,1) 0%, rgba(49,17,66,1) 100%); /* FF3.6+ */
+
background: -moz-linear-gradient(top,  rgba(253,252,255,1) 0%, rgba(123, 36, 216, 0.7) 100%); /* FF3.6+ */
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,252,255,1)), color-stop(100%,rgba(49,17,66,1))); /* Chrome,Safari4+ */
+
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: -webkit-linear-gradient(top,  rgba(253,252,255,1) 0%,rgba(49,17,66,1) 100%); /* Chrome10+,Safari5.1+ */
+
background: -webkit-linear-gradient(top,  rgba(253,252,255,1) 0%,rgba(123, 36, 216, 0.7) 100%); /* Chrome10+,Safari5.1+ */
-
background: -o-linear-gradient(top,  rgba(253,252,255,1) 0%,rgba(49,17,66,1) 100%); /* Opera 11.10+ */
+
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: -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(49,17,66,1) 100%); /* W3C */
+
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 */
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

Retrieved from "http://2014.igem.org/Template:Team:Northwestern/Template/bootstrap/orange"