Team:Cambridge-JIC/Notebook
From 2014.igem.org
(Difference between revisions)
Line 16: | Line 16: | ||
<!-- Optional theme --> | <!-- Optional theme --> | ||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | ||
+ | |||
+ | <style> | ||
+ | body, html { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | body, h1, h2, h3, h4, h5, h6 { | ||
+ | font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | .lead { | ||
+ | font-size: 18px; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | .intro-header { | ||
+ | padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ | ||
+ | padding-bottom: 50px; | ||
+ | color: #f8f8f8; | ||
+ | background: url(../img/intro-bg.jpg) no-repeat center center; | ||
+ | background-size: cover; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .intro-message { | ||
+ | position: relative; | ||
+ | padding-top: 20%; | ||
+ | padding-bottom: 20%; | ||
+ | } | ||
+ | |||
+ | .intro-message > h1 { | ||
+ | margin: 0; | ||
+ | font-size: 5em; | ||
+ | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); | ||
+ | } | ||
+ | |||
+ | .intro-divider { | ||
+ | width: 400px; | ||
+ | border-top: 1px solid #f8f8f8; | ||
+ | border-bottom: 1px solid rgba(0, 0, 0, 0.2); | ||
+ | } | ||
+ | |||
+ | .intro-message > h3 { | ||
+ | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | .intro-message { | ||
+ | padding-bottom: 15%; | ||
+ | } | ||
+ | |||
+ | .intro-message > h1 { | ||
+ | font-size: 3em; | ||
+ | } | ||
+ | |||
+ | ul.intro-social-buttons > li { | ||
+ | display: block; | ||
+ | margin-bottom: 20px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | ul.intro-social-buttons > li:last-child { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .intro-divider { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .network-name { | ||
+ | text-transform: uppercase; | ||
+ | font-size: 14px; | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 2px; | ||
+ | } | ||
+ | |||
+ | .content-section-a { | ||
+ | background-color: #f8f8f8; | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | |||
+ | .content-section-b { | ||
+ | border-top: 1px solid #e7e7e7; | ||
+ | border-bottom: 1px solid #e7e7e7; | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | |||
+ | .section-heading { | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | .section-heading-spacer { | ||
+ | border-top: 3px solid #e7e7e7; | ||
+ | width: 200px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | padding: 100px 0; | ||
+ | color: #f8f8f8; | ||
+ | background: url(../img/banner-bg.jpg) no-repeat center center; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .banner h2 { | ||
+ | margin: 0; | ||
+ | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); | ||
+ | font-size: 3em; | ||
+ | } | ||
+ | |||
+ | .banner ul { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .banner-social-buttons { | ||
+ | float: right; | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1199px) { | ||
+ | ul.banner-social-buttons { | ||
+ | float: left; | ||
+ | margin-top: 15px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | .banner h2 { | ||
+ | margin: 0; | ||
+ | text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); | ||
+ | font-size: 3em; | ||
+ | } | ||
+ | |||
+ | ul.banner-social-buttons > li { | ||
+ | display: block; | ||
+ | margin-bottom: 20px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | ul.banner-social-buttons > li:last-child { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | footer { | ||
+ | background-color: #f8f8f8; | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | |||
+ | p.copyright { | ||
+ | margin: 15px 0 0; | ||
+ | }</style> | ||
<!-- Latest compiled and minified JavaScript --> | <!-- Latest compiled and minified JavaScript --> |
Revision as of 20:21, 1 July 2014
<!DOCTYPE html>
Death to the Stock Photo:
Special Thanks
A special thanks to Death to the Stock Photo for providing the photographs that you see in this template. Visit their website to become a member.
3D Device Mockups
by PSDCovers
Turn your 2D designs into high quality, 3D product shots in seconds using free Photoshop actions by PSDCovers! Visit their website to download some of their awesome, free photoshop actions!
Google Web Fonts and
Font Awesome Icons
This template features the 'Lato' font, part of the Google Web Font library, as well as icons from Font Awesome.