Section backgrounds and spacing
This commit is contained in:
Tom Russell
parent
2cee19b6cd
commit
ddeb4355e0
@ -37,8 +37,8 @@
|
||||
</a>
|
||||
|
||||
<article>
|
||||
|
||||
<h1>Can you help us capture information on every building in London?</h1>
|
||||
<div class="main-col">
|
||||
<h1 class="h2">Can you help us capture information on every building in London?</h1>
|
||||
|
||||
<p>
|
||||
|
||||
@ -75,7 +75,11 @@ will look like.
|
||||
|
||||
|
||||
<a class="btn btn-center" href="files/colouring-london-online-exhibition.pdf">View online exhibition</a>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="main-col">
|
||||
<p>
|
||||
|
||||
Colouring London is being designed and built by the Centre for Advanced Spatial
|
||||
@ -93,8 +97,12 @@ will launch in 2019.
|
||||
<li><a href="https://www.ordnancesurvey.co.uk/"><img src="images/logo-os.png" alt="Ordnance Survey"></a></li>
|
||||
<li><a href="https://www.london.gov.uk/"><img src="images/logo-gla.png" alt="Supported by the Mayor of London"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Data Categories</h2>
|
||||
<hr/>
|
||||
|
||||
<div class="main-col">
|
||||
<h2 class="h1">Data Categories</h2>
|
||||
|
||||
<p>
|
||||
|
||||
@ -155,11 +163,17 @@ research.
|
||||
<p class="description">Do you like it?</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2>Once built, our platform will allow you to:</h2>
|
||||
<hr/>
|
||||
|
||||
<div class="main-col">
|
||||
<h2 class="h1">Once built, our platform will allow you to:</h2>
|
||||
</div>
|
||||
|
||||
<section class="pale-pink">
|
||||
<h3>View maps</h3>
|
||||
<div class="main-col">
|
||||
<h3 class="h2">View maps</h3>
|
||||
|
||||
<p>
|
||||
|
||||
@ -168,11 +182,13 @@ interests you.
|
||||
|
||||
</p>
|
||||
|
||||
<img src="images/slide-4-view.png" alt="Preview of view maps page">
|
||||
<img class="border-image" src="images/slide-4-view.png" alt="Preview of view maps page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pale-yellow">
|
||||
<h3>Add and edit data</h3>
|
||||
<div class="main-col">
|
||||
<h3 class="h2">Add and edit data</h3>
|
||||
|
||||
<p>
|
||||
|
||||
@ -180,11 +196,13 @@ Find a building and add or edit data for any of the 12 core categories.
|
||||
|
||||
</p>
|
||||
|
||||
<img src="images/slide-3-edit.png" alt="Preview of add/edit data page">
|
||||
<img class="border-image" src="images/slide-3-edit.png" alt="Preview of add/edit data page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pale-orange">
|
||||
<h3>See how people are using our data</h3>
|
||||
<div class="main-col">
|
||||
<h3 class="h2">See how people are using our data</h3>
|
||||
|
||||
<p>
|
||||
|
||||
@ -194,11 +212,13 @@ history—or something we haven’t imagined yet.
|
||||
|
||||
</p>
|
||||
|
||||
<img src="images/slide-6-showcase.png" alt="Preview of data showcase page">
|
||||
<img class="border-image" src="images/slide-6-showcase.png" alt="Preview of data showcase page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pale-green">
|
||||
<h3>Download, remix and reuse</h3>
|
||||
<div class="main-col">
|
||||
<h3 class="h2">Download, remix and reuse</h3>
|
||||
|
||||
<p>
|
||||
|
||||
@ -208,12 +228,15 @@ projects on the Colouring London site.
|
||||
|
||||
</p>
|
||||
|
||||
<img src="images/slide-5-download.png" alt="Preview of download page">
|
||||
<img class="border-image" src="images/slide-5-download.png" alt="Preview of download page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="main-col">
|
||||
|
||||
<form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post" target="popupwindow"
|
||||
onsubmit="window.open('https://tinyletter.com/colouringlondon', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
|
||||
<h3>Keep in touch</h3>
|
||||
<h3 class="h1">Keep in touch</h3>
|
||||
<p>
|
||||
|
||||
Receive occasional newsletters about the project as it develops. You can
|
||||
@ -232,14 +255,14 @@ projects on the Colouring London site.
|
||||
<input class="btn btn-full" type="submit" value="Sign up for updates" />
|
||||
</form>
|
||||
|
||||
<a class="btn btn-half" href="files/colouring-london-online-exhibition.pdf" target="_blank">View online exhibition</a>
|
||||
|
||||
<a class="btn btn-half" href="faq.html">FAQ</a>
|
||||
<a class="btn btn-half" href="files/colouring-london-online-exhibition.pdf" target="_blank">View online exhibition</a><!--
|
||||
--><a class="btn btn-half" href="faq.html">FAQ</a>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<a class="logo" href="index.html#top">
|
||||
<a class="logo h2" href="index.html#top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
|
||||
120
html/main.css
120
html/main.css
@ -1,9 +1,37 @@
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
section {
|
||||
overflow: hidden;
|
||||
margin: 2.25em 0 4em;
|
||||
padding: 2em 0 4em;
|
||||
}
|
||||
.main-col {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
footer {
|
||||
margin: 4em 0 2em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography
|
||||
@ -22,12 +50,35 @@ body {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
}
|
||||
input {
|
||||
font-family: 'glacial_cl', sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.25em 0 0.5em;
|
||||
}
|
||||
p, li, dd {
|
||||
line-height: 1.3;
|
||||
}
|
||||
dd {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.text-muted {
|
||||
color: #878d96 !important;
|
||||
}
|
||||
.border-image {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form
|
||||
@ -38,6 +89,38 @@ input[type="email"] {
|
||||
width: 100%;
|
||||
border: 1px solid #222;
|
||||
padding: 0.5em 0.25em;
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
form .btn {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.btn {
|
||||
background: #cecfd3;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em 1em;
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover,
|
||||
.btn:focus,
|
||||
.btn:active {
|
||||
background-color: #bcbec0;
|
||||
}
|
||||
.btn.btn-half {
|
||||
width: 49%;
|
||||
margin-left: 0;
|
||||
margin-right: 2%;
|
||||
min-width: 11.45em;
|
||||
}
|
||||
.btn.btn-half:nth-child(2n+1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -281,20 +364,38 @@ img {
|
||||
position: relative;
|
||||
}
|
||||
.carousel-control {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1em;
|
||||
}
|
||||
.carousel.active .carousel-control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1.75em;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel.active .carousel-control:hover,
|
||||
.carousel.active .carousel-control:active,
|
||||
.carousel.active .carousel-control:focus {
|
||||
border: 0;
|
||||
outline: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.carousel button::-moz-focus-inner {
|
||||
border:0;
|
||||
}
|
||||
.carousel-control.next {
|
||||
right: 0;
|
||||
right: -1em;
|
||||
background-image: url('images/arrow-next.png');
|
||||
}
|
||||
.carousel-control.back {
|
||||
left: 0;
|
||||
left: -1em;
|
||||
background-image: url('images/arrow-back.png');
|
||||
}
|
||||
.carousel-content {
|
||||
padding: 0;
|
||||
@ -320,8 +421,8 @@ img {
|
||||
}
|
||||
.logo-list li {
|
||||
display: inline-block;
|
||||
width: 10em;
|
||||
padding: 0 1em;
|
||||
width: 8em;
|
||||
padding: 0 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo-list li:first-child {
|
||||
@ -335,13 +436,14 @@ img {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
margin: 0 -0.75em;
|
||||
}
|
||||
.data-category-list li {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 9em;
|
||||
height: 9em;
|
||||
margin: 0.5em;
|
||||
margin: 0.375em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
.data-category-list .category {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user