Team DNAbeans: Difference between revisions
Alex Hoppe (talk | contribs) No edit summary |
Alex Hoppe (talk | contribs) No edit summary |
||
Line 15: | Line 15: | ||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | ||
<![endif]--> | <![endif]--> | ||
/* GLOBAL STYLES | |||
-------------------------------------------------- */ | |||
/* Padding below the footer and lighter body text */ | |||
body { | |||
padding-bottom: 40px; | |||
color: #5a5a5a; | |||
} | |||
/* CUSTOMIZE THE NAVBAR | |||
-------------------------------------------------- */ | |||
/* Special class on .container surrounding .navbar, used for positioning it into place. */ | |||
.navbar-wrapper { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
left: 0; | |||
z-index: 20; | |||
} | |||
/* Flip around the padding for proper display in narrow viewports */ | |||
.navbar-wrapper > .container { | |||
padding-right: 0; | |||
padding-left: 0; | |||
} | |||
.navbar-wrapper .navbar { | |||
padding-right: 15px; | |||
padding-left: 15px; | |||
} | |||
.navbar-wrapper .navbar .container { | |||
width: auto; | |||
} | |||
/* CUSTOMIZE THE CAROUSEL | |||
-------------------------------------------------- */ | |||
/* Carousel base class */ | |||
.carousel { | |||
height: 500px; | |||
margin-bottom: 60px; | |||
} | |||
/* Since positioning the image, we need to help out the caption */ | |||
.carousel-caption { | |||
z-index: 10; | |||
} | |||
/* Declare heights because of positioning of img element */ | |||
.carousel .item { | |||
height: 500px; | |||
background-color: #777; | |||
} | |||
.carousel-inner > .item > img { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
min-width: 100%; | |||
height: 500px; | |||
} | |||
/* MARKETING CONTENT | |||
-------------------------------------------------- */ | |||
/* Center align the text within the three columns below the carousel */ | |||
.marketing .col-lg-4 { | |||
margin-bottom: 20px; | |||
text-align: center; | |||
} | |||
.marketing h2 { | |||
font-weight: normal; | |||
} | |||
.marketing .col-lg-4 p { | |||
margin-right: 10px; | |||
margin-left: 10px; | |||
} | |||
/* Featurettes | |||
------------------------- */ | |||
.featurette-divider { | |||
margin: 80px 0; /* Space out the Bootstrap <hr> more */ | |||
} | |||
/* Thin out the marketing headings */ | |||
.featurette-heading { | |||
font-weight: 300; | |||
line-height: 1; | |||
letter-spacing: -1px; | |||
} | |||
/* RESPONSIVE CSS | |||
-------------------------------------------------- */ | |||
@media (min-width: 768px) { | |||
/* Navbar positioning foo */ | |||
.navbar-wrapper { | |||
margin-top: 20px; | |||
} | |||
.navbar-wrapper .container { | |||
padding-right: 15px; | |||
padding-left: 15px; | |||
} | |||
.navbar-wrapper .navbar { | |||
padding-right: 0; | |||
padding-left: 0; | |||
} | |||
/* The navbar becomes detached from the top, so we round the corners */ | |||
.navbar-wrapper .navbar { | |||
border-radius: 4px; | |||
} | |||
/* Bump up size of carousel content */ | |||
.carousel-caption p { | |||
margin-bottom: 20px; | |||
font-size: 21px; | |||
line-height: 1.4; | |||
} | |||
.featurette-heading { | |||
font-size: 50px; | |||
} | |||
} | |||
@media (min-width: 992px) { | |||
.featurette-heading { | |||
margin-top: 120px; | |||
} | |||
} | |||
</head> | </head> | ||
<body> | <body> | ||
<p | <p>Stuff about biomod</p> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 17:06, 22 October 2014
<html>
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title>
<!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
/* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */
body {
padding-bottom: 40px; color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR -------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper {
position: absolute; top: 0; right: 0; left: 0; z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */ .navbar-wrapper > .container {
padding-right: 0; padding-left: 0;
} .navbar-wrapper .navbar {
padding-right: 15px; padding-left: 15px;
} .navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */ .carousel {
height: 500px; margin-bottom: 60px;
} /* Since positioning the image, we need to help out the caption */ .carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */ .carousel .item {
height: 500px; background-color: #777;
} .carousel-inner > .item > img {
position: absolute; top: 0; left: 0; min-width: 100%; height: 500px;
}
/* MARKETING CONTENT -------------------------------------------------- */
/* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 {
margin-bottom: 20px; text-align: center;
} .marketing h2 {
font-weight: normal;
} .marketing .col-lg-4 p {
margin-right: 10px; margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */ .featurette-heading {
font-weight: 300; line-height: 1; letter-spacing: -1px;
}
/* RESPONSIVE CSS -------------------------------------------------- */
@media (min-width: 768px) {
/* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; }
/* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; }
/* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; }
.featurette-heading { font-size: 50px; }
}
@media (min-width: 992px) {
.featurette-heading { margin-top: 120px; }
}
</head> <body> <p>Stuff about biomod</p> </body> </html>