<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/du5rte/pen/OPpmqj?q=single%20page&limit=all&order=popularity&depth=everything&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700,400,300,100|Montserrat:400,700);
body {
color: #4E5A74;
font-family: "Montserrat", sans-serif;
font-weight: 400;
text-align: center;
line-height: 1.5;
margin: 0 auto;
}
@media (max-width: 768px) {
body {
font-size: 0.9rem;
}
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
}
h1 {
font-size: 7em;
text-transform: uppercase;
line-height: 1.3;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
h1 {
font-size: 3.8em;
text-shadow: none;
}
}
h2 {
font-size: 3.3125em;
line-height: 1.1;
font-weight: 700;
}
h3 {
font-size: 1.75em;
line-height: 1.2;
}
p, ul {
font-family: "Roboto Slab", serif;
font-weight: 300;
}
a {
color: #e5ba68;
text-decoration: none;
font-weight: 400;
}
a:link {
color: #e5ba68;
}
a:visited {
color: #af7d1e;
}
a:hover {
color: #ecce94;
}
a:focus {
color: #f4e2bf;
}
.button {
color: #4E5A74;
display: inline-block;
padding: 10px 20px;
border: 2px solid;
border-radius: 5px;
margin: 30px auto;
}
.button:link {
color: #4E5A74;
}
.button:visited {
color: #1b1f28;
}
.button:hover {
color: #637292;
}
.button:focus {
color: #7f8ca9;
}
.container {
max-width: 940px;
margin: 10px auto 80px;
padding: 0 3%;
}
.main-header {
color: #fff;
padding: 20% 3%;
background-image: -webkit-linear-gradient(rgba(19, 9, 51, 0.7), transparent 90%), -webkit-linear-gradient(-270deg, #fff, transparent 90%), url("http://i2.chroniclelive.co.uk/incoming/article5694826.ece/alternates/s1227b/Gateshead-Quayside-by-Ian-Hunter.jpg");
background-image: linear-gradient(rgba(19, 9, 51, 0.7), transparent 90%), linear-gradient(0deg, #fff, transparent 90%), url("http://i2.chroniclelive.co.uk/incoming/article5694826.ece/alternates/s1227b/Gateshead-Quayside-by-Ian-Hunter.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (min-width: 1024px) {
.main-header {
max-height: 850px;
padding-top: 204.8px;
padding-bottom: 204.8px;
}
}
@media (max-width: 768px) {
.main-header {
padding: 40% 3%;
}
}
.main-header .top {
position: absolute;
display: block;
width: 100%;
top: 80px;
}
.main-header .top i {
display: block;
font-size: 3em;
}
.main-header .north {
display: block;
font-size: 0.33em;
}
.primary {
margin-bottom: 80px;
}
.primary .intro {
font-size: 1.5em;
font-weight: 100;
padding-bottom: 30px;
}
@media (max-width: 768px) {
.primary .intro {
font-size: 1.2em;
}
}
.howay {
padding: 20%;
margin: 80px auto 20px;
border-radius: 8px;
background-image: -webkit-linear-gradient(-45deg, rgba(19, 9, 51, 0.9), rgba(19, 9, 51, 0.9)), url("http://i1.thejournal.co.uk/incoming/article4341038.ece/alternates/s615/aerial-view-of-newcastle-and-gateshead-981645981.jpg");
background-image: linear-gradient(-45deg, rgba(19, 9, 51, 0.9), rgba(19, 9, 51, 0.9)), url("http://i1.thejournal.co.uk/incoming/article4341038.ece/alternates/s615/aerial-view-of-newcastle-and-gateshead-981645981.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, 0.8);
}
.howay h2 {
color: #fff;
}
.secondary ul, .secondary p {
text-align: left;
}
.secondary img {
width: 100%;
border-radius: 8px;
}
.secondary .turism {
width: 46.5%;
float: left;
}
@media (max-width: 768px) {
.secondary .turism {
float: none;
width: 100%;
}
}
.secondary .culture {
width: 46.5%;
float: right;
}
@media (max-width: 768px) {
.secondary .culture {
float: none;
width: 100%;
}
}
.secondary ul span {
color: #9ea8bd;
font-weight: 200;
padding-left: 1em;
}
.footer {
padding: 20px 0 50px;
border-bottom: 15px solid #130933;
}
.border {
display: block;
width: 20%;
margin: 0 auto 25px;
border-bottom: 2px solid;
}
.less-marging {
margin-top: -60px;
}
.group:after {
content: "";
display: table;
clear: both;
}
</style></head><body>
<!--
Treehouse Project - CSS Basics
A very Basic Page Layout project for my city of residence, gateshead using html5 and CSS3/SASS.
-->
<body>
<header id="top" class="main-header">
<div class="top">
<i class="fa fa-map-marker"></i>
<p class="title">A look through Gateshead - United Kingdom</p>
</div>
<h1>Gateshead<div class="north">North East</div></h1>
</header>
<!-- .primary -->
<div class="border less-marging"></div>
<!-- .primary -->
<div class="primary container">
<p class="intro">
Gateshead is a large town opposite to the City of Newcastle upon Tyne in UK. The two cities are joined by seven bridges across the Tyne, together they form the urban core of the North East of England.
</p>
<a class="button" href="#howay">Find out more</a>
<div class="bg">
<div class="howay" id="howay">
<h2>Howay man!</h2>
<p>
Historically part of County Durham prior to the creation of Tyne and Wear in 1974. The town is well known for its <a href="turism">iconic architecture</a> and <a href="#culture">friendly locals</a>.
</p>
</div>
</div>
<a class="button" href="#turism">Discover Gateshead</a>
</div>
<!-- End .primary -->
<!-- .secondary -->
<div class="secondary container group">
<div class="turism" id="turism">
<img src="https://completelyretail.co.uk/media/property/47104/CR_SC_47104_G123_Trinity_Square_Gateshead_picture_1_p7_750x500.jpg" alt="The Sage Gateshead">
<h3>The 'Toon'</h3>
<p>
Gateshead is full of wonderful places to visit and well known for its iconic architecture. Here are our top three resorts:
</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/The_Sage_Gateshead">The Sage</a></li>
<li><a href="https://en.wikipedia.org/wiki/Angel_of_the_North">Angel of the North</a></li>
<li><a href="https://en.wikipedia.org/wiki/Baltic_Centre_for_Contemporary_Art">Baltic Centre for Contemporary Art</a></li>
</ul>
</div>
<div class="culture" id="culture">
<img src="https://i2.chroniclelive.co.uk/incoming/article4046091.ece/alternates/s615/CMP_030613colmans-4.jpg" alt="">
<h3>Wey aye, man!</h3>
<p>Residents of Gateshead, like the rest of Tyneside, are referred to as Geordies. Here are a few iconic sayings:
</p>
<ul>
<li>gan yem <span>(I'm going home)</span></li>
<li>Wey aye, man! <span>(Yes!)</span></li>
<li>Howay man! <span>(Hurry up!)</span></li>
<li><a href="#https://www.chroniclelive.co.uk/news/north-east-news/geordie-sayings-top-56-things-6466922">Discover More</a></li>
</ul>
</div>
</div>
<!-- End .secondary -->
<div class="border"></div>
<!-- .main-footer -->
<footer class="main-footer">
<p>All rights reserved to the city of <a href="https://en.wikipedia.org/wiki/Gateshead">Gateshead</a>.</p>
<a href="#top">Back to top »</a>
</footer>
<!-- End .main-footer -->
</body>
</body></html>
