"
Template:CSS/EPFL head
From 2014.igem.org
(Difference between revisions)
Arthurgiroux (Talk | contribs) |
Arthurgiroux (Talk | contribs) |
||
| Line 16: | Line 16: | ||
<!-- Add custom CSS here --> | <!-- Add custom CSS here --> | ||
| - | < | + | <style type="text/css"> |
| + | 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> | ||
</head> | </head> | ||
<body> | <body> | ||
Revision as of 14:19, 31 May 2014
