Layout landing page
This commit is contained in:
Tom Russell
parent
0754150958
commit
20c5a1d2f2
BIN
html/files/colouring-london-online-exhibition.pdf
Normal file
BIN
html/files/colouring-london-online-exhibition.pdf
Normal file
Binary file not shown.
BIN
html/fonts/gidole-regular-webfont.woff
Normal file
BIN
html/fonts/gidole-regular-webfont.woff
Normal file
Binary file not shown.
BIN
html/fonts/gidole-regular-webfont.woff2
Normal file
BIN
html/fonts/gidole-regular-webfont.woff2
Normal file
Binary file not shown.
BIN
html/fonts/glacialindifference-regular-webfont.ttf
Normal file
BIN
html/fonts/glacialindifference-regular-webfont.ttf
Normal file
Binary file not shown.
BIN
html/fonts/glacialindifference-regular-webfont.woff
Normal file
BIN
html/fonts/glacialindifference-regular-webfont.woff
Normal file
Binary file not shown.
BIN
html/fonts/glacialindifference-regular-webfont.woff2
Normal file
BIN
html/fonts/glacialindifference-regular-webfont.woff2
Normal file
Binary file not shown.
BIN
html/images/logo-casa.png
Normal file
BIN
html/images/logo-casa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
html/images/logo-gla.png
Normal file
BIN
html/images/logo-gla.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
html/images/logo-he.png
Normal file
BIN
html/images/logo-he.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
html/images/logo-os.png
Normal file
BIN
html/images/logo-os.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
html/images/logo-ucl.png
Normal file
BIN
html/images/logo-ucl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
html/images/slide-1-welcome.png
Normal file
BIN
html/images/slide-1-welcome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
html/images/slide-2-categories.png
Normal file
BIN
html/images/slide-2-categories.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
html/images/slide-3-edit.png
Normal file
BIN
html/images/slide-3-edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
BIN
html/images/slide-4-view.png
Normal file
BIN
html/images/slide-4-view.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
html/images/slide-5-download.png
Normal file
BIN
html/images/slide-5-download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
html/images/slide-6-showcase.png
Normal file
BIN
html/images/slide-6-showcase.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
html/images/slide-7-partners.png
Normal file
BIN
html/images/slide-7-partners.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
239
html/index.html
Normal file
239
html/index.html
Normal file
@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Colouring London</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="logo" id="top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logotype">
|
||||
<span>Colouring</span>
|
||||
<span>London</span>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<article>
|
||||
|
||||
<h1>Can you help us capture information on every building in London?</h1>
|
||||
|
||||
<p>
|
||||
|
||||
How many buildings are there in London? What are their characteristics? Where
|
||||
are they located and how do they contribute to the city? How adaptable are
|
||||
they? How long will they last, and what are the environmental and
|
||||
socio-economic implications of demolition?
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
Colouring London is being designed to address these questions by crowdsourcing
|
||||
and visualising information on London’s buildings. We’re releasing the
|
||||
prototype for testing in the late summer. See the slideshow below for what it
|
||||
will look like.
|
||||
|
||||
</p>
|
||||
|
||||
<a class="btn btn-center" href="#sign-up">Sign up for updates</a>
|
||||
|
||||
<div class="carousel">
|
||||
<button class="carousel-control offscreen-text back">Back</button>
|
||||
<ul class="carousel-content">
|
||||
<li class="active"><img src="images/slide-1-welcome.png" alt="Welcome"></li>
|
||||
<li><img src="images/slide-2-categories.png" alt="Categories"></li>
|
||||
<li><img src="images/slide-3-edit.png" alt="Add/edit data"></li>
|
||||
<li><img src="images/slide-4-view.png" alt="View maps"></li>
|
||||
<li><img src="images/slide-5-download.png" alt="Download data"></li>
|
||||
<li><img src="images/slide-6-showcase.png" alt="Showcase"></li>
|
||||
<li><img src="images/slide-7-partners.png" alt="Partners"></li>
|
||||
</ul>
|
||||
<button class="carousel-control offscreen-text next">Next</button>
|
||||
</div>
|
||||
|
||||
|
||||
<a class="btn btn-center" href="files/colouring-london-online-exhibition.pdf">View online exhibition</a>
|
||||
|
||||
<p>
|
||||
|
||||
Colouring London is being designed and built by the Centre for Advanced Spatial
|
||||
Analysis (CASA), University College London and funded by Historic England.
|
||||
Ordnance Survey is providing building footprints required to collect the data,
|
||||
facilitated by the GLA, and giving access to its API and technical support. It
|
||||
will launch in 2019.
|
||||
|
||||
</p>
|
||||
|
||||
<ul class="logo-list">
|
||||
<li><a href="https://www.ucl.ac.uk/bartlett/casa/"><img src="images/logo-casa.png" alt="Centre for Advanced Spatial Analysis (CASA)"></a></li>
|
||||
<li><a href="https://www.ucl.ac.uk/"><img src="images/logo-ucl.png" alt="University College London"></a></li>
|
||||
<li><a href="https://www.historicengland.org.uk/"><img src="images/logo-he.png" alt="Historic England"></a></li>
|
||||
<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>
|
||||
|
||||
<h2>Data Categories</h2>
|
||||
|
||||
<p>
|
||||
|
||||
12 categories have been chosen in consultation with specialists working in a
|
||||
range of areas, from energy analysis and sustainable urban planning and design
|
||||
to building conservation, community planning, architecture and historical
|
||||
research.
|
||||
|
||||
</p>
|
||||
|
||||
<ol class="data-category-list">
|
||||
<li class="bold-yellow">
|
||||
<h3 class="category">Location</h3>
|
||||
<p class="description">Where is it?</p>
|
||||
</li><!--
|
||||
--><li class="bright-yellow">
|
||||
<h3 class="category">Use</h3>
|
||||
<p class="description">How is it used?</p>
|
||||
</li><!--
|
||||
--><li class="bold-orange">
|
||||
<h3 class="category">Type</h3>
|
||||
<p class="description">How was it first used?</p>
|
||||
</li><!--
|
||||
--><li class="red">
|
||||
<h3 class="category">Age</h3>
|
||||
<p class="description">When was it built?</p>
|
||||
</li><!--
|
||||
--><li class="pastel-pink">
|
||||
<h3 class="category">Size</h3>
|
||||
<p class="description">How big is it?</p>
|
||||
</li><!--
|
||||
--><li class="pastel-purple">
|
||||
<h3 class="category">Construction</h3>
|
||||
<p class="description">How is it built?</p>
|
||||
</li><!--
|
||||
--><li class="blue-grey">
|
||||
<h3 class="category">Design/Build</h3>
|
||||
<p class="description">Who built it?</p>
|
||||
</li><!--
|
||||
--><li class="bright-green">
|
||||
<h3 class="category">Street Front</h3>
|
||||
<p class="description">How does it relate to the street?</p>
|
||||
</li><!--
|
||||
--><li class="pastel-green">
|
||||
<h3 class="category">Greenery</h3>
|
||||
<p class="description">Is it near a tree or park?</p>
|
||||
</li><!--
|
||||
--><li class="bright-blue">
|
||||
<h3 class="category">Protection</h3>
|
||||
<p class="description">Is it designated?</p>
|
||||
</li><!--
|
||||
--><li class="pale-grey">
|
||||
<h3 class="category">Demolitions</h3>
|
||||
<p class="description">How many rebuilds on the site?</p>
|
||||
</li><!--
|
||||
--><li class="pale-brown">
|
||||
<h3 class="category">Like Me?</h3>
|
||||
<p class="description">Do you like it?</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2>Once built, our platform will allow you to:</h2>
|
||||
|
||||
<h3>View maps</h3>
|
||||
|
||||
<p>
|
||||
|
||||
To view the data, navigate to the ‘View Maps’ page and find the category that
|
||||
interests you.
|
||||
|
||||
</p>
|
||||
|
||||
<img src="images/slide-4-view.png" alt="Preview of view maps page">
|
||||
|
||||
<h3>Add and edit data</h3>
|
||||
|
||||
<p>
|
||||
|
||||
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">
|
||||
|
||||
<h3>See how people are using our data</h3>
|
||||
|
||||
<p>
|
||||
|
||||
Find links to visualisations and analysis, art projects and applications
|
||||
relating to the evolution of London, housing, energy, planning, heritage and
|
||||
history—or something we haven’t imagined yet.
|
||||
|
||||
</p>
|
||||
|
||||
<img src="images/slide-6-showcase.png" alt="Preview of data showcase page">
|
||||
|
||||
<h3>Download, remix and reuse</h3>
|
||||
|
||||
<p>
|
||||
|
||||
Access bulk downloads of data created through the project to use and reuse
|
||||
under a liberal open data license. Let us know and we’ll feature showcase
|
||||
projects on the Colouring London site.
|
||||
|
||||
</p>
|
||||
|
||||
<img src="images/slide-5-download.png" alt="Preview of download page">
|
||||
|
||||
|
||||
<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>
|
||||
<p>
|
||||
|
||||
Receive occasional newsletters about the project as it develops. You can
|
||||
read previous newsletters in our <a
|
||||
href="https://tinyletter.com/colouringlondon/archive"
|
||||
target="_blank">newsletter archive</a>.
|
||||
|
||||
</p>
|
||||
<label for="tlemail">Enter your email address:</label>
|
||||
<input class="form-control" type="email" name="email" id="tlemail" placeholder="name@example.com" />
|
||||
<input type="hidden" value="1" name="embed"/>
|
||||
<small class="form-text text-muted">
|
||||
<a href="https://tinyletter.com" target="_blank">powered by TinyLetter</a>.
|
||||
We'll never share your email address.
|
||||
</small>
|
||||
<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>
|
||||
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<a class="logo" href="index.html#top">Colouring London</a>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
280
html/main.css
Normal file
280
html/main.css
Normal file
@ -0,0 +1,280 @@
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'glacial_cl';
|
||||
src: url('fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
|
||||
url('fonts/glacialindifference-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
font-family: 'glacial_cl', sans-serif;
|
||||
font-size: 105%;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.text-muted {
|
||||
color: #878d96 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Colours
|
||||
*/
|
||||
.white {
|
||||
background-color: #fff;
|
||||
}
|
||||
.pink {
|
||||
background-color: #fd97cd;
|
||||
}
|
||||
.pink {
|
||||
background-color: #eb0089;
|
||||
}
|
||||
.red {
|
||||
background-color: #fe1216;
|
||||
}
|
||||
.orange {
|
||||
background-color: #ff954f;
|
||||
}
|
||||
.orange {
|
||||
background-color: #ee5f00;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #ffff9b;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #daa702;
|
||||
}
|
||||
.green {
|
||||
background-color: #5ceb92;
|
||||
}
|
||||
.green {
|
||||
background-color: #01aa42;
|
||||
}
|
||||
.blue {
|
||||
background-color: #399ecc;
|
||||
}
|
||||
.blue-two {
|
||||
background-color: #0042d1;
|
||||
}
|
||||
.grey {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logo
|
||||
*/
|
||||
.logo {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.logo .logotype {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.logo .logotype span {
|
||||
display: block;
|
||||
font-size: 1.45rem;
|
||||
letter-spacing: 0.25rem;
|
||||
}
|
||||
.logo .logotype span:first-child {
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.logo .grid {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
font-size: 0;
|
||||
}
|
||||
.logo .row {
|
||||
display: block;
|
||||
margin: 0 0 3.5px 0;
|
||||
}
|
||||
.logo .cell {
|
||||
display: inline-block;
|
||||
background-color: #222;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(1) {
|
||||
animation: pulse 37s infinite;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(2) {
|
||||
animation: pulse 22s infinite;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(3) {
|
||||
animation: pulse 39s infinite;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(4) {
|
||||
animation: pulse 25s infinite;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(1) {
|
||||
animation: pulse 24s infinite;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(2) {
|
||||
animation: pulse 38s infinite;
|
||||
animation-delay: 9s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(3) {
|
||||
animation: pulse 21s infinite;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(4) {
|
||||
animation: pulse 36s infinite;
|
||||
animation-delay: 4.5s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(1) {
|
||||
animation: pulse 22s infinite;
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(2) {
|
||||
animation: pulse 39s infinite;
|
||||
animation-delay: 5.5s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(3) {
|
||||
animation: pulse 25s infinite;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(4) {
|
||||
animation: pulse 24s infinite;
|
||||
animation-delay: 17s;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
background-color: #0042d1;
|
||||
}
|
||||
15% {
|
||||
background-color: #0042d1;
|
||||
}
|
||||
17% {
|
||||
background-color: #eb0089;
|
||||
}
|
||||
30% {
|
||||
background-color: #eb0089;
|
||||
}
|
||||
32% {
|
||||
background-color: #daa702;
|
||||
}
|
||||
45% {
|
||||
background-color: #daa702;
|
||||
}
|
||||
47% {
|
||||
background-color: #01aa42;
|
||||
}
|
||||
60% {
|
||||
background-color: #01aa42;
|
||||
}
|
||||
62% {
|
||||
background-color: #ee5f00;
|
||||
}
|
||||
75% {
|
||||
background-color: #ee5f00;
|
||||
}
|
||||
77% {
|
||||
background-color: #222;
|
||||
}
|
||||
90% {
|
||||
background-color: #222;
|
||||
}
|
||||
92% {
|
||||
background-color: #0042d1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Content
|
||||
*/
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.offscreen-text {
|
||||
overflow: hidden;
|
||||
text-indent: -999px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Carousel
|
||||
*/
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
.carousel-control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1em;
|
||||
}
|
||||
.carousel-control.next {
|
||||
right: 0;
|
||||
}
|
||||
.carousel-control.back {
|
||||
left: 0;
|
||||
}
|
||||
.carousel-content {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.carousel-content li {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
.carousel-content li.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logos
|
||||
*/
|
||||
.logo-list {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.logo-list li {
|
||||
display: inline-block;
|
||||
width: 10em;
|
||||
padding: 0 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo-list li:first-child {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data categories
|
||||
*/
|
||||
.data-category-list li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 9em;
|
||||
height: 9em;
|
||||
margin: 0.5em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
.data-category-list .category {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.data-category-list .description {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user