Team:Northwestern/Templates/Escape

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <style type="text/css"> - →Escape Velocity 2.5 by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license): ...")
Line 287: Line 287:
{
{
padding: 0;
padding: 0;
-
height: 400px;
+
height:400px;
}
}
.homepage #header-wrapper
.homepage #header-wrapper
{
{
-
height: 573px;
+
height: 750px;
}
}
Line 307: Line 307:
{
{
position: relative;
position: relative;
-
height: 400px;
+
height: 600px;
}
}
.homepage #header
.homepage #header
{
{
-
height: 573px;
+
height: 600px;
}
}
Line 323: Line 323:
position: absolute;
position: absolute;
height: 5em;
height: 5em;
-
top: 50%;
+
top: 35%;
left: 0;
left: 0;
width: 100%;
width: 100%;
Line 337: Line 337:
#logo h1
#logo h1
{
{
-
font-size: 2em;
+
font-size: 3em;
-
letter-spacing: 0.25em;
+
            font-family: "Source Sans Pro", Arial, serif; font-weight: 700;
 +
 
 +
            text-transform: none;
}
}
Line 357: Line 359:
position: absolute;
position: absolute;
display: block;
display: block;
-
top: 2.5em;
+
top: 2em;
left: 0;
left: 0;
width: 100%;
width: 100%;
Line 373: Line 375:
display: inline-block;
display: inline-block;
border-radius: 0.35em;
border-radius: 0.35em;
-
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25);
+
box-shadow: inset 0px 0px 1px 1px #5B676B;
 +
            background-color: transparent;
padding: 0 1.5em 0 1.5em;
padding: 0 1.5em 0 1.5em;
 +
         
}
}
Line 388: Line 392:
{
{
display: block;
display: block;
-
color: #eee;
+
color: #5B676B;
-
color: rgba(255,255,255,0.75);
+
 
 +
 
text-transform: uppercase;
text-transform: uppercase;
text-decoration: none;
text-decoration: none;
Line 396: Line 401:
height: 5em;
height: 5em;
line-height: 5em;
line-height: 5em;
-
-moz-transition: all .25s ease-in-out;
+
-moz-transition: all .15s ease-in-out;
-
-webkit-transition: all .25s ease-in-out;
+
-webkit-transition: all .15s ease-in-out;
-
-o-transition: all .25s ease-in-out;
+
-o-transition: all .15s ease-in-out;
-
-ms-transition: all .25s ease-in-out;
+
-ms-transition: all .15s ease-in-out;
-
transition: all .25s ease-in-out;
+
transition: all .15s ease-in-out;
outline: 0;
outline: 0;
}
}
Line 408: Line 413:
#nav > ul > li.active > span
#nav > ul > li.active > span
{
{
-
color: #fff;
+
color: black;
 +
                border-bottom: solid 5px black;
 +
               
}
}
.dropotron
.dropotron
{
{
-
background: #222835 url('images/overlay.png');
+
color:#eee;
-
background-color: rgba(44,50,63,0.925);
+
background-color: rgba(255,255,255,0.15);
padding: 1.25em 1em 1.25em 1em;
padding: 1.25em 1em 1.25em 1em;
border-radius: 0.35em;
border-radius: 0.35em;
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25);
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,0.25);
min-width: 12em;
min-width: 12em;
-
text-align: left;
+
text-align: center;
}
}
Line 433: Line 440:
{
{
display: block;
display: block;
-
color: #eee;
+
color: #5B676B;
-
color: rgba(255,255,255,0.75);
+
 +
            background-color: rgba(255,255,255,0.15);
text-transform: uppercase;
text-transform: uppercase;
text-decoration: none;
text-decoration: none;
Line 457: Line 465:
.dropotron li:hover > span
.dropotron li:hover > span
{
{
-
color: #fff;
+
color: black;
 +
            background-color: rgba(255,255,255,0.15);
 +
            border-bottom: solid 1px black;
}
}
Line 532: Line 542:
{
{
padding-right: 2em;
padding-right: 2em;
 +
            padding-bottom: 2em;
}
}
Line 550: Line 561:
#main
#main
{
{
-
margin: 1em 0 1em 0;
+
margin: 0 0 0 0;
}
}
Line 627: Line 638:
font-size: 0.8em;
font-size: 0.8em;
}
}
 +
 +
 +
figure {
 +
  display: block;
 +
  position: relative;
 +
  overflow: hidden;
 +
}
 +
 +
 +
figcaption {
 +
  position: absolute;
 +
background-color:#f3f3f3;
 +
  color: black;
 +
  padding: 10px 20px;
 +
    width: 322px;
 +
height: 100px;
 +
  opacity: 0;
 +
  bottom: 0;
 +
    text-align: center;
 +
 +
  -webkit-transition: all 0.6s ease;
 +
  -moz-transition:    all 0.6s ease;
 +
  -o-transition:      all 0.6s ease;
 +
}
 +
 +
figure:hover figcaption {
 +
  opacity: 0.75;
 +
background-color:#f3f3f3;
 +
  left: 0;
 +
    transform: translateY(-23px);
 +
   
 +
}
 +
 +
 +
.profile {
 +
    width:33%;
 +
    height: 600px;
 +
 +
}
 +
 +
#biography {
 +
   
 +
    width: 100%;
 +
    width: 322px;
 +
 +
}
 +
/* http://www.menucool.com */
 +
 +
/*slider frame*/
 +
#sliderFrame {
 +
    width:1200px;
 +
    margin: 0 auto; /*center-aligned*/
 +
    background-color:none;
 +
    padding-top:23%;
 +
    border-radius: 6px 6px 0 0;
 +
}
 +
 +
#slider, #slider div.sliderInner {
 +
    width:1200px;height:400px;/* Must be the same size as the slider images */
 +
}
 +
 +
#slider {
 +
background:transparent url(loading.gif) no-repeat 50% 50%;
 +
position:relative;
 +
margin:0 auto; /*center-aligned*/
 +
    transform: translate3d(0,0,0);
 +
}
 +
 +
/* the link style (if slide image is wrapped in a link) */
 +
#slider a.imgLink, #slider .video {
 +
z-index:2;
 +
position:absolute;
 +
top:0px;left:0px;border:0;padding:0;margin:0;
 +
width:100%;height:100%;
 +
}
 +
#slider .video {
 +
background:transparent url(video.png) no-repeat 50% 50%;
 +
}
 +
 +
/* Caption styles */
 +
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
 +
position:absolute;
 +
width:1100px;
 +
height:auto;
 +
padding:20px;
 +
right:30px; /* or left: ??px; */
 +
bottom:30px;/* or top: ??px; */
 +
z-index:3;
 +
overflow:hidden;
 +
font-size:0;
 +
    text-align: center;
 +
}
 +
#slider div.mc-caption-bg {
 +
    /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
 +
background:none;/* or any other colors such as Black, or: background:none; */
 +
border-radius: 5px;
 +
}
 +
#slider div.mc-caption-bg2 {
 +
    background:none;
 +
}
 +
#slider div.mc-caption {
 +
font:bold 15px/20px Arial;
 +
color:#000000;
 +
z-index:4;
 +
padding:0px;
 +
text-align:center;
 +
    background:none;
 +
}
 +
#slider div.mc-caption a {
 +
color:#66FFFF;
 +
}
 +
 +
 +
/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
 +
#slider div.navBulletsWrapper  {
 +
display:none;
 +
}
 +
 +
/* --------- Others ------- */
 +
 +
#slider div.loading
 +
{
 +
    width:100%; height:100%;
 +
    background:transparent url(loading.gif) no-repeat 50% 50%;
 +
    filter: alpha(opacity=60);
 +
    opacity:0.6;
 +
    position:absolute;
 +
    left:0;
 +
    top:0;
 +
    z-index:9;
 +
}
 +
 +
#slider img, #slider>b, #slider a>b {
 +
position:absolute; border:none; display:none;
 +
}
 +
 +
#slider div.sliderInner {
 +
overflow:hidden;
 +
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
 +
position:absolute; top:0; left:0;
 +
}
 +
 +
#slider>a, #slider video, #slider audio {display:none;}
 +
 +
 +
 +
/* -- thumbnails -- */
 +
#thumbs
 +
{
 +
background:white url(imageslider/thumbs-bar.gif) repeat-x 0 0;
 +
border:1px solid white; text-align:center;
 +
font-size:0px;
 +
line-height:45px;
 +
}
 +
#thumbs .thumb
 +
{
 +
    width:60px;height:45px;
 +
    cursor:pointer;
 +
    text-align:center;
 +
    border-left:1px solid #FFF; border-right:1px solid #DDD;
 +
   
 +
    display:inline-block;
 +
    *display:inline;zoom:1; /*IE Hack*/
 +
}
 +
#thumbs .thumb-on {background-image: url(active-bg.png);}
 +
#thumbs .thumb img {vertical-align:middle;}
 +
 +
 +
</style>
</style>
</html>
</html>

Revision as of 20:06, 18 July 2014

Retrieved from "http://2014.igem.org/Team:Northwestern/Templates/Escape"