diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..84f5661
Binary files /dev/null and b/.DS_Store differ
diff --git a/assets/css/normalize.css b/assets/css/normalize.css
new file mode 100644
index 0000000..3d6624c
--- /dev/null
+++ b/assets/css/normalize.css
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..ad0be9a
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,333 @@
+/**
+ * Notes BEM
+ * http://getbem.com/naming/
+ */
+
+/* Variables
+   ========================================================================== */
+
+ :root {
+    --main-txt-color:  #0a0a0a; 
+    --light-color: #EEE8CD; 
+    --bright-color: #FFE600; 
+    --dark-color: #808069; 
+    
+    --main-padding: 1rem;     
+}
+
+/* BASE
+   ========================================================================== */
+
+   body {
+        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+        margin: 0;
+        padding: 0;
+        background: var(--light-color); 
+        line-height: 1.5;
+        color: var(--main-txt-color); 
+        -webkit-font-smoothing: antialiased;
+   }
+
+    .container {
+        padding-left: var(--main-padding);
+        padding-right: var(--main-padding); 
+        margin: 0 auto;
+    }
+    .divider {
+        display: block;
+        padding-top: calc( 3 * var(--main-padding) );
+        margin-bottom: calc( 3 * var(--main-padding) );
+        border-bottom: 3px dashed #808069
+    }   
+   .menu--settings {
+        list-style-type: none;
+        padding-left: 0;
+        padding-right: 0;
+        margin: 0;
+   } 
+   img {
+    max-width: 100%;
+    height: auto;
+    border-style: none;
+   }
+   figure {
+       padding: 0;
+       margin: 0;
+   }
+
+/* LINKS AND TYPOGRAPHY
+   ========================================================================== */
+
+   /* NOTE: Using Gill Sans stack - this is the font I use for my branding; perk is that the bold looks has a lot of personality and the regular is nicely readable */ 
+   /* TODO: apply smooth scroll js method to animate scroll down page */
+   a { 
+       text-decoration: none;
+      -webkit-transition: color 0.5s;
+       -moz-transition: color 0.5s;
+       transition: color 0.5s;
+     }
+
+     .siteHead__squeeze li > a,
+     .siteHead__nav li > a   {
+        text-transform: uppercase;
+        color: var(--main-txt-color);
+    }
+   
+    .siteHead__nav li > a:hover   {
+       color: var(--dark-color);
+   }  
+    .siteHead__squeeze li > a {
+        font-weight: bold;
+    }
+
+    .siteFooter__contact a {
+        color: var(--light-color); 
+        font-weight: 700;
+    }
+    a.animate--squeeze {
+        letter-spacing: 0.5em;
+        -webkit-transition: all .1s ease-in;
+        -moz-transition: all .1s ease-in;
+        -ms-transition: all .1s ease-in;
+        -o-transition: all .1s ease-in;
+        transition: all .1s ease-in;
+    }
+    a.animate--squeeze:hover {
+        letter-spacing: 0.1em;
+
+    }
+
+   /* SITEHEAD
+   ========================================================================== */
+
+   .siteHead {            
+        text-align: center;
+        background-color: var(--bright-color); 
+        background-image: url(../images/white-lemons-4.png);
+        background-repeat: no-repeat;
+        background-size: auto 80%;
+        background-position: center center;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+   }
+   .siteHead__header {
+       padding: calc( 2 * var(--main-padding) );
+   }
+   .siteHead__title {
+        margin: 0;
+   }
+    .siteHead__subtitle {
+        font-size: 1.25rem;
+    }    
+   .siteHead__squeeze__menu, 
+   .siteHead__menu {
+       margin: 0;
+        display: flex;
+        justify-content: center;
+        list-style-type: none;
+        padding: 0;
+    }
+    .siteHead__squeeze__menu li, 
+    .siteHead__menu li {
+        justify-content: center;
+        padding: 1rem 1rem;
+        order: 1;
+    }
+
+   
+/* MAIN
+   ========================================================================== */
+
+    .main {
+        padding-top: calc( 2 * var(--main-padding) );
+        padding-bottom: calc( 3 * var(--main-padding) );
+    }
+
+    .main h2 { 
+        text-align: center
+    }
+    .articlesSection__header {
+        padding: 0.75rem 0;
+        background-color: var(--dark-color); 
+        margin: 1rem 0 2rem;
+        background-image: url(../images/white-lemons-2-small.png);
+        background-repeat: repeat;
+        background-size: auto 120%;
+        background-position: center center;
+    }
+    .articlesSection__title {
+        color: var(--light-color);
+    }
+    ul.contentHead-navlist,
+    .articlesSection {
+        padding-top: calc( 2 * var(--main-padding) );
+        padding-bottom: var(--main-padding);
+    }
+    ul.contentHead-navlist li {
+        padding-bottom: var(--main-padding);
+    }
+    .myPortfolio {
+        display: block;
+        background-color: var(--bright-color); 
+        padding: 0.75rem 0;
+        margin: 1rem 0 0;
+        text-align: center;
+        -webkit-transition: all 0.5s;
+        -moz-transition: all 0.5s;
+        transition: all 0.5s;
+    }
+    .myPortfolio:hover {
+        background-color: var(--main-txt-color); 
+
+    }
+    .myPortfolio__title {
+        color: var(--dark-color); 
+    }
+    .myPortfolio:hover .myPortfolio__title {
+        color: var(--light-color); 
+    }
+
+
+    /* FOOTER
+   ========================================================================== */
+
+    .siteFooter {
+        background-color: var(--dark-color); 
+        background-image: url(../images/white-lemons-footer.png), url(../images/white-lemons-footer.png);
+        background-repeat: no-repeat, no-repeat;
+        background-size: 50% auto, 50% auto;
+        background-position: top -50px center, bottom 10px right -75px;
+        color: var(--light-color); 
+        padding-top: calc( 3 * var(--main-padding) );
+        padding-bottom: calc( 3 * var(--main-padding) );
+    }
+
+
+ /* MEDIA QUERIES
+   ========================================================================== */   
+
+
+    @media (min-width: 768px) {
+  
+        /* SITEHEAD  */
+        .siteHead {
+            min-height: 100vh;
+            background-image: url(../images/white-lemons-1.png), url(../images/white-lemons-3.png);
+            background-repeat: no-repeat, no-repeat;
+            background-size: auto 45%, auto 35%;
+            background-position: bottom -30px right -20px, top -30px left -20px;
+        }
+        .siteHead__nav {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            }
+        .siteHead__title {
+            font-size: 2rem;
+        }    
+        .siteHead__subtitle {
+            font-size: 1.5rem;
+            padding: 0 5rem;
+        }              
+ 
+        
+        /* MAIN  */
+        .contentHead {
+            display: flex;
+            flex-flow: row wrap;
+        }
+        .articlesSection__article {
+            display: flex;
+        }
+        .articlesSection__article section {
+            flex: 2;
+        }
+        .articlesSection__article section:first-of-type {
+            flex: 1;
+        }
+        .main__article,
+        .contentHead li  {
+            width: 50%;
+        }    
+        
+        /* FOOTER  */
+        .siteFooter  {
+            background-size: 30% auto;
+            background-position: top -230px center;
+        }
+        .container--siteFooter {
+            display: flex;
+        }
+        .siteFooter__about {
+            flex: 2;
+        }
+        .siteFooter__contact {
+            flex: 1;
+        }
+        .siteFooter__contact {
+            text-align: right;
+            position: relative;
+        }       
+        .siteFooter__contact p:last-of-type {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+    
+        /* GRID PADDINGS */
+        .contentHead__design p, .contentHead__design h2,
+        .contentHead__content p, .contentHead__content h2,
+        .siteFooter__about * {
+            margin-right: calc( 2 * var(--main-padding) );
+        }
+        .contentHead__develop p,  .contentHead__develop h2,
+        .contentHead__ux p, .contentHead__ux h2,
+        .siteFooter__contact > * {
+            margin-left: calc( 2 * var(--main-padding) )
+        }  
+
+        .articlesSection__article section {
+            margin-right: var(--main-padding);
+        }
+        .articlesSection__article section:last-of-type {
+            margin-right: 0
+        }
+
+    }
+
+    @media (min-width: 960px) {
+        .container {max-width: 930px}
+    }
+
+    @media (min-width: 1200px) {
+        .container {max-width: 1170px}
+        .siteHead__subtitle span {
+            display: block
+        }
+        .siteHead__title {
+            font-size: 2.5rem;
+        }    
+        .siteHead__subtitle, .articlesSection__title {
+            font-size: 1.75rem;
+        }  
+        .siteFooter  {
+            background-size: 30% auto;
+            background-position: top -275px center;
+        }       
+        
+    }
+
+    @media (min-width: 1440px) {
+        .container {
+            max-width: 1410px
+        }
+        .siteHead__title {
+            font-size: 2.75rem;
+        }    
+        .siteHead__subtitle, .articlesSection__title {
+            font-size: 2rem;
+        }          
+    }
\ No newline at end of file
diff --git a/assets/images/Lemony-Logo-Black.png b/assets/images/Lemony-Logo-Black.png
new file mode 100644
index 0000000..1273324
Binary files /dev/null and b/assets/images/Lemony-Logo-Black.png differ
diff --git a/assets/images/white-lemons-1.png b/assets/images/white-lemons-1.png
new file mode 100644
index 0000000..34f3d7c
Binary files /dev/null and b/assets/images/white-lemons-1.png differ
diff --git a/assets/images/white-lemons-2-padded.png b/assets/images/white-lemons-2-padded.png
new file mode 100644
index 0000000..0b9ac49
Binary files /dev/null and b/assets/images/white-lemons-2-padded.png differ
diff --git a/assets/images/white-lemons-2-small.png b/assets/images/white-lemons-2-small.png
new file mode 100644
index 0000000..9311dd6
Binary files /dev/null and b/assets/images/white-lemons-2-small.png differ
diff --git a/assets/images/white-lemons-2.png b/assets/images/white-lemons-2.png
new file mode 100644
index 0000000..d8507c5
Binary files /dev/null and b/assets/images/white-lemons-2.png differ
diff --git a/assets/images/white-lemons-3.png b/assets/images/white-lemons-3.png
new file mode 100644
index 0000000..a9aefc7
Binary files /dev/null and b/assets/images/white-lemons-3.png differ
diff --git a/assets/images/white-lemons-4.png b/assets/images/white-lemons-4.png
new file mode 100644
index 0000000..34e3b65
Binary files /dev/null and b/assets/images/white-lemons-4.png differ
diff --git a/assets/images/white-lemons-footer.png b/assets/images/white-lemons-footer.png
new file mode 100644
index 0000000..b803932
Binary files /dev/null and b/assets/images/white-lemons-footer.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8ccd774
--- /dev/null
+++ b/index.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Lemony Design</title>
+        <link rel="canonical" href="https://lemonydesign.co.uk/">
+        <link rel="stylesheet" href="assets/css/normalize.css">
+        <link rel="stylesheet" href="assets/css/styles.css">
+    </head>    
+    <body>
+        <section class="siteHead">
+            <nav class="siteHead__nav">
+                    <ul class="siteHead__menu menu--settings">
+                        <li><a href="#footer">About</a></li>
+                        <li><a href="#work">Work</a></li>
+                        <li><a href="#footer">Contact</a></li>
+                    </ul>
+            </nav>
+            <header class="siteHead__header">
+                <h1 class="siteHead__title"><img src="assets/images/Lemony-Logo-Black.png" alt="Lemony Design"></h1>
+                <h2 class="siteHead__subtitle"><span>Also known as Melanie Ashby: frontend designer-developer.</span> I&rsquo;m <strike>aiming to become</strike> <strong>agile</strong>, <strong>react</strong>ive, and a bit of a <strong>git</strong> </h2>
+                <nav class="siteHead__squeeze">
+                    <ul class="siteHead__squeeze__menu menu--settings">
+                        <li><a href="#begin" class="animate--squeeze">[Squeeze]</a></li>
+                    </ul>
+                </nav>
+            </header>    
+        </section>
+       
+        <main class="main" id="begin">
+            <div class="container">
+                <ul class="contentHead menu--settings">
+                    <li class="contentHead__design">
+                        <h2>Design</h2>
+                        <p><strong>A little intro about design work.</strong> Occupy photo booth echo park offal. Hammock edison bulb pok pok narwhal, brunch bitters church-key post-ironic adaptogen. Drinking vinegar lumbersexual cliche, portland organic ramps wolf. Irony before they sold out meditation crucifix poke umami gastropub lo-fi bicycle rights sartorial chicharrones man braid authentic. Health goth af art party, scenester tacos actually +1 viral. Offal live-edge pinterest swag beard aesthetic portland activated charcoal kitsch ethical selfies celiac hexagon chillwave. Typewriter tousled taxidermy crucifix drinking vinegar taiyaki selvage. Portland seitan listicle, aesthetic fingerstache pinterest franzen.</p>
+                    </li>
+                    <li class="contentHead__develop">
+                        <h2>Develop</h2>
+                        <p><strong>A little intro about dev work.</strong> Pickled quinoa polaroid, venmo shoreditch occupy affogato keytar. Squid cliche marfa schlitz. Everyday carry farm-to-table banjo, tattooed actually four loko normcore. Photo booth whatever succulents, austin vice vinyl master cleanse. Occupy photo booth echo park offal. Hammock edison bulb pok pok narwhal, brunch bitters church-key post-ironic adaptogen. Drinking vinegar lumbersexual cliche, portland organic ramps wolf. Irony before they sold out meditation crucifix poke umami gastropub lo-fi bicycle rights sartorial chicharrones man braid authentic.</p>
+                    </li>
+                    <li class="contentHead__content">
+                        <h2>Content</h2>
+                        <p><strong>A little intro about content work.</strong> Occupy photo booth echo park offal. Hammock edison bulb pok pok narwhal, brunch bitters church-key post-ironic adaptogen. Drinking vinegar lumbersexual cliche, portland organic ramps wolf. Irony before they sold out meditation crucifix poke umami gastropub lo-fi bicycle rights sartorial chicharrones man braid authentic. Health goth af art party, scenester tacos actually +1 viral. Offal live-edge pinterest swag beard aesthetic portland activated charcoal kitsch ethical selfies celiac hexagon chillwave. Typewriter tousled taxidermy crucifix drinking vinegar taiyaki selvage. Portland seitan listicle, aesthetic fingerstache pinterest franzen.</p>
+                    </li>
+                    <li class="contentHead__ux">
+                        <h2>UX</h2>
+                        <p><strong>A little intro about UX work.</strong> Pickled quinoa polaroid, venmo shoreditch occupy affogato keytar. Squid cliche marfa schlitz. Everyday carry farm-to-table banjo, tattooed actually four loko normcore. Photo booth whatever succulents, austin vice vinyl master cleanse. Occupy photo booth echo park offal. Hammock edison bulb pok pok narwhal, brunch bitters church-key post-ironic adaptogen. Drinking vinegar lumbersexual cliche, portland organic ramps wolf. Irony before they sold out meditation crucifix poke umami gastropub lo-fi bicycle rights sartorial chicharrones man braid authentic.</p>
+                    </li>
+                </ul>
+            </div>
+            <section class="articlesSection" id="work">
+                <header class="articlesSection__header">
+                    <h2 class="articlesSection__title">Work</h2>
+                </header>
+                <div class="container">
+                    <article class="articlesSection__article">
+                        <section class="articlesSection__figure placeholder">
+                            <h3>Project title</h3>
+                            <figure><img src="https://placeholdit.co//i/400x400?&bg=808069&fc=eee8cd&text=Project Image"></figure>
+                        </section>
+                        <section class="articlesSection__briefing">
+                            <h3>Briefing</h3>
+                            <p>Four dollar toast microdosing 8-bit, heirloom 3 wolf moon scenester lyft single-origin coffee fashion axe fingerstache forage lumbersexual synth jean shorts yr. Brunch schlitz drinking vinegar jianbing austin. Trust fund hashtag post-ironic, vape readymade dreamcatcher blog 90's retro waistcoat.</p>
+                        </section>
+                        <section class="articlesSection__approach">
+                            <h3>Approach</h3>
+                            <p>Echo pman deep v cred mixtape sriracha venark quinoa woke chia hammock whatever. Hexagon schlitz pickled salvia kickstarter bushwick. Church-key dreamcatcher vegan tote bag tilde lyft pickled cray keffiyeh four dollar toast organic tattooed snackwave semiotics flexitarian. Godard beard ugh food truck, tattooed woke shamo humblebrag drinking vinegar.</p>
+                        <ul><li>Itemised thing</li><li>Another point of interest</li><li>This is fun</li></ul>
+                        </section>
+                    </article>
+                </div>
+                <span class="divider"></span>
+                <div class="container">
+                    <article class="articlesSection__article">
+                        <section class="articlesSection__figure placeholder">
+                            <h3>Project title</h3>
+                            <figure><img src="https://placeholdit.co//i/400x400?&bg=808069&fc=eee8cd&text=Project Image"></figure>
+                        </section>
+                        <section class="articlesSection__briefing">
+                            <h3>Briefing</h3>
+                            <p>Bicycle rights shoreditch chillwave migas fanny pack four dollar toast. Art party asymmetrical vaporware salvia migas prism plaid actually wolf freegan tumeric portland. </p>
+                        </section>
+                        <section class="articlesSection__approach">
+                            <h3>Approach</h3>
+                            <p>BPug skateboard pickled, franzen prism hexagon kickstarter 90's retro brunch. Unicorn hoodie health goth gentrify four loko helvetica swag tote bag tbh street art tousled</p>
+                        </section>
+                    </article>
+                </div>
+                <span class="divider"></span>
+                <div class="container">
+                    <article class="articlesSection__article">
+                        <section class="articlesSection__figure placeholder">
+                            <h3>Project title</h3>
+                            <figure><img src="https://placeholdit.co//i/400x400?&bg=808069&fc=eee8cd&text=Project Image"></figure>
+                        </section>
+                        <section class="articlesSection__briefing">
+                            <h3>Briefing</h3>
+                            <p>Four dollar toast microdosing 8-bit, heirloom 3 wolf moon scenester lyft single-origin coffee fashion axe fingerstache forage lumbersexual synth jean shorts yr. Brunch schlitz drinking vinegar jianbing austin. Trust fund hashtag post-ironic, vape readymade dreamcatcher blog 90's retro waistcoat.</p>
+                        </section>
+                        <section class="articlesSection__approach">
+                            <h3>Approach</h3>
+                            <p>Echo pman deep v cred mixtape sriracha venark quinoa woke chia hammock whatever. Hexagon schlitz pickled salvia kickstarter bushwick. Church-key dreamcatcher vegan tote bag tilde lyft pickled cray keffiyeh four dollar toast organic tattooed snackwave semiotics flexitarian. Godard beard ugh food truck, tattooed woke shamo humblebrag drinking vinegar.</p>
+                        <ul><li>Itemised thing</li><li>Another point of interest</li><li>This is fun</li></ul>
+                        </section>
+                    </article>
+                </div>
+            </section>
+        </main>
+        <a href="http://portfolio.lemonydesign.co.uk" target="_blank" class="myPortfolio">
+            <h2 class="myPortfolio__title">And there&rsquo;s more&hellip;</h2>
+        </a>
+        <footer class="siteFooter" role="info" id="footer">
+                <div class="container container--siteFooter">
+                    <section class="siteFooter__about">
+                        <h3>About me</h3>
+                        <p>Personal statement. Jean shorts craft beer adaptogen, snackwave chia selfies 90's shoreditch chambray. Pour-over umami austin tumblr snackwave helvetica YOLO post-ironic pinterest. Seitan etsy activated charcoal pinterest, tattooed tbh normcore trust fund ennui asymmetrical distillery cold-pressed. Flannel paleo chillwave, +1 af copper mug chia. Distillery banjo drinking vinegar yr vexillologist. Venmo health goth pok pok seitan gochujang, slow-carb synth beard street art hell of. Chartreuse hot chicken woke, you probably haven't heard of them affogato wolf cray tacos pickled selvage YOLO roof party jean shorts.</p>
+                    </section>
+                    <section class="siteFooter__contact">
+                        <h3>Get in contact</h3>
+                        <p>Email: <a href="mailto: mel@lemonydesign.co.uk" target="_blank">mel@lemonydesign.co.uk</a><br>Instagram: <a href="https://www.instagram.com/lordmelburyphotos/" target="_blank" title="Look me up on Instgram">@lordmelburyphotos</a></p>
+                    <p>Site <a href="#">Powered by Lemons</a></p>
+                    </section>                    
+                </div>
+        </footer>
+    </body>
+    
\ No newline at end of file