solved merged

.gitignore

@@ -59,4 +59,3 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
-

FrontendMentor/newbie/article-preview-component/.gitignore

@@ -0,0 +1 @@
+.DS_Store

FrontendMentor/newbie/article-preview-component/README.md

@@ -0,0 +1,82 @@
+# Frontend Mentor - Article preview component
+
+![Design preview for the Article preview component coding challenge](./design/desktop-preview.jpg)
+
+## Welcome! 👋
+
+Thanks for checking out this front-end coding challenge.
+
+[Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
+
+**To do this challenge, you need a basic understanding of HTML, CSS and a tiny bit of JavaScript.**
+
+## The challenge
+
+Your challenge is to build out this article preview component and get it looking as close to the design as possible.
+
+You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+
+The only JavaScript you'll need for this challenge is to initiate the share options when someone clicks the share icon.
+
+Your users should be able to: 
+
+- View the optimal layout for the component depending on their device's screen size
+- See the social media share links when they click the share icon
+
+Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
+
+## Where to find everything
+
+Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 
+
+The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
+
+If you would like the Sketch file in order to inspect the design in more detail it is available to buy from the challenge page on the platform.
+
+You will find all the required assets in the `/images` folder. The assets are already optimized.
+
+There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
+
+## Building your project
+
+Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
+
+1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
+2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
+3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
+4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
+5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
+6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
+7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](https://bit.ly/fm-sizzy). It's a great browser that makes it easy to view your site across multiple devices.
+
+## Deploying your project
+
+As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
+
+1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
+2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
+3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
+
+## Sharing your solution
+
+There are multiple places you can share your solution:
+
+1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
+2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
+3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
+
+## Giving feedback
+
+Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
+
+This challenge is completely free. Please share it with anyone who will find it useful for practice.
+
+**Have fun building!** 🚀
+
+## Community Sponsors
+
+A massive thank you to our community sponsors!
+
+- [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites!
+- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links for you to dive into.
+- [Dracula PRO](https://bit.ly/fem-dracula) is a beautiful dark theme to help keep you focused and productive while you code. The theme isn't just for your editor either. You can also apply it to your most-used apps like your terminal and even Slack!

FrontendMentor/newbie/article-preview-component/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

FrontendMentor/newbie/article-preview-component/css/style.css

@@ -0,0 +1,242 @@
+/* 
+ * Challenge resolutions:
+ * 375x667 & 1440x800
+ * 327x512 - 730x280
+ */
+
+ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');
+
+:root {
+    /* font stuff */
+    font-size: 20px;
+    /* colors */
+    --veryDarkGrayishBlue: hsl(217, 19%, 35%);
+    --desaturatedDarkBlue: hsl(214, 17%, 51%);
+    --grayishBlue: hsl(212, 23%, 69%);
+    --lightGrayishBlue: hsl(210, 46%, 95%);
+    /* corner radius */
+    --cornerRadius: 10px;
+}
+
+/* Base styling */ 
+
+body {
+    font-family: 'Manrope', sans-serif;
+    background-color: var(--lightGrayishBlue);
+    display: flex;
+    flex-direction: column;
+    font-size: 13px;
+    justify-content: center;
+    height: 100vh;
+}
+
+.articlePreview {
+    display: flex;
+    flex-direction: column;
+
+    border-radius: var(--cornerRadius);
+    overflow: hidden;
+    background-color: white;
+    width: 87%;
+    margin: 0 auto;
+
+    box-shadow: 0px 40px 40px -10px rgba(201, 213, 225, 0.503415);
+}
+
+.previewImage {
+    flex: 1 40%;
+    overflow: hidden;
+}
+
+.previewImage > img {
+    width: 100%;
+    margin:-5% 0 -14.5% 0%;
+}
+
+.previewBody {
+    flex: 1 60%;
+    margin-top: 0.85rem;
+}
+
+.articleSummary {
+    padding: 1rem 1.75rem 1rem 1.5rem;
+}
+
+.articleTitle {
+    color: var(--veryDarkGrayishBlue);
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    letter-spacing: 0.2px;
+}
+
+.articleSell {
+    margin-top: 0.5rem;
+    color: var(--desaturatedDarkBlue);
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 0.12px;
+    line-height: 20px;
+}
+
+.articleFooter {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: 1rem 1.5rem 1rem 1.5rem;
+
+    transition: 250ms ease-in-out;
+
+    position: relative;
+}
+
+.authorImage {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+}
+
+.nameAndDate {
+    margin-left: 0.8rem;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.authorName {
+    color: var(--veryDarkGrayishBlue);
+    font-weight: 700;
+}
+
+.articleDate {
+    margin-top: 0.3rem;
+    color: var(--desaturatedDarkBlue);
+    font-weight: 500;
+}
+
+.articleShareButton {
+    background-color: var(--lightGrayishBlue);
+    color: #6E8098;
+
+    width: 30px;
+    height: 30px;
+
+    border: none;
+    border-radius: 50%;
+
+    cursor: pointer;
+
+    margin-left: auto;
+    margin-top: auto;
+    margin-bottom: auto;
+
+    transition: 250ms ease-in-out;
+}
+
+.buttonDark {
+    background-color: var(--desaturatedDarkBlue);
+    color: var(--lightGrayishBlue);
+}
+
+.articleShareButtonTooltip {
+    display: none;
+    position: absolute;
+    justify-content: space-between;
+    align-items: center;
+
+    border-radius: 0.5rem;
+
+    background: var(--veryDarkGrayishBlue);
+    box-shadow: 0px 10px 10px rgba(201, 213, 225, 0.503415);
+
+    width: 170px;
+    padding: 0.75rem 1rem;
+    top: -60px;
+    right: -47px;
+
+}
+
+.articleShareButtonTooltip::before {
+    content: "";
+    width: 0px;
+    height: 0px;
+    border: 0.8rem solid transparent;
+    position: absolute;
+
+    left: 45%;
+    bottom: -25px;
+    border-top: 10px solid var(--veryDarkGrayishBlue);
+}
+
+.articleShareSection {
+    display: none;
+    align-items: center;
+    justify-content: space-around;
+
+    width: 80%;
+    height: 2rem;
+}
+
+.backgroundDark {
+    background: var(--veryDarkGrayishBlue);
+}
+
+.articleShareButtonTooltip > p, .articleShareSection > p {
+    letter-spacing: 5px;
+    color: var(--grayishBlue);
+    font-weight: 500;
+    font-size: 13px;
+}
+
+
+@media screen and (min-width: 650px) {
+    body {
+        align-content: center;
+        align-items: center; 
+    }
+
+    .articlePreview {
+        flex-direction: row;
+        width: 50%;
+        min-width: 600px;
+        overflow: visible;
+    }    
+
+    .previewImage {
+        width: 100%;
+        border-radius: var(--cornerRadius) 0 0px var(--cornerRadius);
+    }
+
+    .previewImage > img {
+        margin:0;
+        height: 105%;
+        object-fit: cover;
+        object-position: left;
+    }
+
+    .previewBody {
+        margin-top: 0.65rem;
+        margin-left: 0.25rem;
+    }
+
+    .articleSummary {
+        padding: 1rem 1.75rem 1rem 1.5rem;
+    }
+
+    .articleTitle {
+        font-size: 20px;
+        letter-spacing: 0.25px;
+        line-height: 28px;
+
+    }
+    .articleSell {
+        margin-top: 0.5rem;
+    }
+    
+    .articleFooter {
+        padding: 0rem 1.75rem 1.5rem 1.5rem;
+    }
+
+}
+
+.attribution { position: absolute; bottom: 0; font-size: 11px; text-align: center; }
+.attribution a { color: hsl(228, 45%, 44%); }

FrontendMentor/newbie/article-preview-component/images/icon-facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#FFF" d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z"/></svg>

FrontendMentor/newbie/article-preview-component/images/icon-pinterest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#FFF" d="M10 0C4.478 0 0 4.477 0 10c0 4.237 2.636 7.855 6.356 9.312-.088-.791-.167-2.005.035-2.868.182-.78 1.172-4.97 1.172-4.97s-.299-.6-.299-1.486c0-1.39.806-2.428 1.81-2.428.852 0 1.264.64 1.264 1.408 0 .858-.545 2.14-.828 3.33-.236.995.5 1.807 1.48 1.807 1.778 0 3.144-1.874 3.144-4.58 0-2.393-1.72-4.068-4.177-4.068-2.845 0-4.515 2.135-4.515 4.34 0 .859.331 1.781.745 2.281a.3.3 0 01.069.288l-.278 1.133c-.044.183-.145.223-.335.134-1.249-.581-2.03-2.407-2.03-3.874 0-3.154 2.292-6.052 6.608-6.052 3.469 0 6.165 2.473 6.165 5.776 0 3.447-2.173 6.22-5.19 6.22-1.013 0-1.965-.525-2.291-1.148l-.623 2.378c-.226.869-.835 1.958-1.244 2.621.937.29 1.931.446 2.962.446 5.522 0 10-4.477 10-10S15.522 0 10 0z"/></svg>

FrontendMentor/newbie/article-preview-component/images/icon-share.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"><path fill="#6E8098" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>

FrontendMentor/newbie/article-preview-component/images/icon-twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17"><path fill="#FFF" d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.804-2.27 8.22 8.22 0 01-2.605.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.922-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z"/></svg>

FrontendMentor/newbie/article-preview-component/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/style.css">
+  <script src="./js/challenge.js"></script>
+  
+  <title>Frontend Mentor | Article preview component</title>
+
+</head>
+<body>
+
+  <div class="container">
+    <div class="articlePreview">
+      <div class="previewImage">
+        <img src="./images/drawers.jpg" alt="Green drawers with a vase and pictures" class="">
+      </div>
+      <div class="previewBody">
+          <div class="articleSummary">
+            <h1 class="articleTitle">
+              Shift the overall look and feel by adding these wonderful 
+              touches to furniture in your home
+            </h1>
+            <p class="articleSell">
+              Ever been in a room and felt like something was missing? Perhaps 
+              it felt slightly bare and uninviting. I’ve got some simple tips 
+              to help you make any room feel complete.        
+            </p>
+          </div>
+          <div class="articleFooter">
+            <img src="./images/avatar-michelle.jpg" alt="Author Picture" class="authorImage">
+            <div class="nameAndDate">
+              <p class="authorName">Michelle Appleton</p>
+              <p class="articleDate">28 Jun 2020</p>
+            </div>
+            <!-- look up what to do with this. I know I've seen it. What it there for screenreader, but off the side of the screen -->
+            <!-- <section>Share</section>  -->
+            <div class="articleShareSection">
+              <p>SHARE</p>
+              <img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
+              <img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
+              <img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
+            </div>
+            <button class="articleShareButton" onclick="toggleTooltip()" title="Share" >
+              <!-- <img src="./images/icon-share.svg" alt="Share Icon" class=""> -->
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13"><path fill="currentColor" d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z"/></svg>
+            </button>
+            <div class="articleShareButtonTooltip">
+                <p>SHARE</p>
+                <img src="./images/icon-facebook.svg" alt="Facebook Icon" class="articleShareIcon">
+                <img src="./images/icon-twitter.svg" alt="Twitter Icon" class="articleShareIcon">
+                <img src="./images/icon-pinterest.svg" alt="Pinterest Icon" class="articleShareIcon">
+              </div>
+          </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="attribution">
+    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+    Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
+  </div>
+</body>
+</html>

FrontendMentor/newbie/article-preview-component/js/challenge.js

@@ -0,0 +1,38 @@
+let isTooltipVisible = false;
+
+function toggleTooltip() {
+    const articleFooter = document.querySelector(".articleFooter");
+    const articleImage = document.querySelector(".authorImage");
+    const articleAuthorAndDate = document.querySelector(".nameAndDate");
+    const articleShareButton = document.querySelector(".articleShareButton");
+    const articleShareTooltip = document.querySelector(".articleShareButtonTooltip");
+    const articleShareSection = document.querySelector(".articleShareSection");
+
+    if (window.innerWidth <= 650) {
+        if (isTooltipVisible) {
+            articleFooter.classList.remove("backgroundDark");
+            articleShareButton.classList.remove("buttonDark");
+            articleShareSection.style.display = "none";
+            articleImage.style.display = "block";
+            articleAuthorAndDate.style.display = "block";
+            isTooltipVisible = false;      
+        } else {
+            articleFooter.classList.add("backgroundDark");
+            articleShareButton.classList.add("buttonDark");
+            articleShareSection.style.display = "flex";
+            articleImage.style.display = "none";
+            articleAuthorAndDate.style.display = "none";
+            isTooltipVisible = true;      
+        }
+    } else {
+        if (isTooltipVisible) {
+            articleShareButton.classList.remove("buttonDark");
+            articleShareTooltip.style.display = "none";
+            isTooltipVisible = false;    
+        } else {
+            articleShareButton.classList.add("buttonDark");
+            articleShareTooltip.style.display = "flex";
+            isTooltipVisible = true;
+        }
+    }
+}

FrontendMentor/newbie/article-preview-component/notes/process.md

@@ -0,0 +1,88 @@
+Started 30th Sept 2020 at 21:04
+
+Set up basics. will need to look up how to do the for the share, however no internet right now (been down all day)
+* how to show the share icon
+* how to do a callout (desktop)
+* how to do overlay (mobile)
+* look up again how to do crop of image (image like 2/5, text 3/5 of space)
+
+How have I forgotten how to push only some of the flex to the far right.
+Seriously. margin-left: auto; 🤦‍♂️
+
+So 2 hours later. Structure in place, I have a rough version for both desktop and mobile that are close to the right size (mobile will be closer when I crop the article image down.)
+
+I can't chase sizing yet because I have no internet and can't get the font to use.
+
+These are the differences at this point. Mobile with slider, and desktop with fade because it was easier to show that way.
+
+![mobile rough version](mobile-rough.png)
+![desktop rough version](desktop-rough.png)
+
+Okay, as I've set things up I can't use something like the following to shrink the image. using absolute takes it out of the flow of the component
+
+```css
+position: absolute;
+clip: rect(0px,60px,200px,0px);
+```
+
+Signed up to the Pro account and made the mistake of taking a look at the sketch file. I knew I couldn't resist getting some of the bits from it. *sigh*
+
+Still trying to eyeball what I can but I find myself wanting to look (for line and letter spacing).
+
+Did use it for the shadow, because I wasn't going to guess that color. Sheesh 🤯
+
+Picking this up on the 3rd. The mobile version is nearly properly positioned. Its off by a bit (whole component is a little shorter), but everything else is close. (Except still not sorted the thing around the share icon) 
+
+---
+
+Can't figure out how to properly portion to get the desktop image a bit bigger. Playing with flex portions changes too much. Grid better? I want to say the pic is 40% of the size, and body is 60% of the size.
+
+---
+
+Picked up hours later.
+
+Used this https://cssdeck.com/labs/bv45bh6p for the callout/tooltip
+
+Don't understand why the img/svg inside the button shifts up when tooltip appears.
+
+~~Broke the desktop version while adding the share stuff. Not entirely sure how.~~
+
+---
+
+Notes before submission.
+
+Had to disable overflow in articlePreview on desktop to show full callout/tooltip. That meant I had to put code previewImage for border-radius.
+
+Don't get why the svg img is pushed upwards when pressing the share button.
+
+Had to change buttonDark to a lighter shade because I couldn't colour the svg. I've since searched on google and found this q/a with a bunch of options 
+
+https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css
+
+I have inlined the svg and used fill="currentColor" rather than edit the supplied svg.
+
+So this is where I leave it
+
+![Mobile Final](./mobile-final.jpg)
+![Desktop Final](./desktop-final.jpg)
+
+Differences from design
+
+![Mobile Final Difference](./mobile-diff-final.png)
+![Desktop Final Difference](./desktop-diff-final.png)
+
+---
+
+On subnmission there was an HTML issue:
+
+```
+Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
+
+Context:
+
+<div class=`articleShareButtonTooltip`>
+```
+
+Fixed it. Moved the div outside of the button. Then set `position:relative;` on `articleFooter`, and `position: absolute;` on `.articleShareButtonTooltip`
+
+Last thing, how to I "fake click the tooltip off the screen' when passing the media query breakpoint?

FrontendMentor/newbie/article-preview-component/style-guide.md

@@ -0,0 +1,34 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+- Very Dark Grayish Blue: hsl(217, 19%, 35%)
+- Desaturated Dark Blue: hsl(214, 17%, 51%)
+- Grayish Blue: hsl(212, 23%, 69%)
+- Light Grayish Blue: hsl(210, 46%, 95%)
+
+## Typography
+
+### Body Copy
+
+- Font size: 13px
+
+### Headings
+
+- Family: [Manrope](https://fonts.google.com/specimen/Manrope)
+- Weights: 500, 700
+
+## Icons
+
+We provide SVGs for the social icons. But please feel free to use a font icon library if you like. Some suggestions can be found below:
+
+- [Font Awesome](https://fontawesome.com)
+- [IcoMoon](https://icomoon.io)
+- [Ionicons](https://ionicons.com)

FrontendMentor/newbie/four-card-feature-section/.gitignore

@@ -0,0 +1 @@
+.DS_Store

FrontendMentor/newbie/four-card-feature-section/README.md

@@ -0,0 +1,79 @@
+# Frontend Mentor - Four card feature section
+
+![Design preview for the Four card feature section coding challenge](./design/desktop-preview.jpg)
+
+## Welcome! 👋
+
+Thanks for checking out this front-end coding challenge.
+
+[Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
+
+**To do this challenge, you need a basic understanding of HTML and CSS.**
+
+## The challenge
+
+Your challenge is to build out this feature section and get it looking as close to the design as possible.
+
+You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+
+Your users should:
+
+- View the optimal layout for the site depending on their device's screen size
+
+Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
+
+## Where to find everything
+
+Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 
+
+The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
+
+If you would like the Sketch file in order to inspect the design in more detail it is available to [purchase here](https://bmc.xyz/l/uXWTfHQ53).
+
+You will find all the required assets in the `/images` folder. The assets are already optimized.
+
+There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
+
+## Building your project
+
+Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
+
+1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
+2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
+3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
+4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
+5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
+6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
+7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](https://bit.ly/fm-sizzy). It's a great browser that makes it easy to view your site across multiple devices.
+
+## Deploying your project
+
+As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
+
+1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
+2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
+3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
+
+## Sharing your solution
+
+There are multiple places you can share your solution:
+
+1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
+2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
+3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
+
+## Giving feedback
+
+Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
+
+This challenge is completely free. Please share it with anyone who will find it useful for practice.
+
+**Have fun building!** 🚀
+
+## Community Sponsors
+
+A massive thank you to our community sponsors!
+
+- [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites!
+- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
+- [Dracula PRO](https://bit.ly/fem-dracula) is a beautiful dark theme to help keep you focused and productive while you code. The theme isn't just for your editor either. You can also apply it to your most-used apps like your terminal and even Slack!

FrontendMentor/newbie/four-card-feature-section/css/style.css

@@ -0,0 +1,186 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
+
+/* 
+ * Challenge colors, font
+ * 
+ * The font-size for 20px is to make rem clearer for increments
+ *
+ * Mobile: 375px (375x1360)
+ * Desktop: 1440px (1440x922)
+*/
+
+:root {
+    font-family: 'Poppins', sans-serif;
+    font-size: 20px;
+
+    /* Primary Colors */
+    --red: hsl(0, 78%, 62%);
+    --cyan: hsl(180, 62%, 55%);
+    --orange: hsl(34, 97%, 64%);
+    --blue: hsl(212, 86%, 64%);
+
+    /* Neutral */
+    --veryDarkBlue: hsl(234, 12%, 34%);
+    --grayishBlue: hsl(229, 6%, 66%);
+    --veryLightGray: hsl(0, 0%, 98%);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    /* box-sizing: border-box; */
+}
+
+/* Basic Styling */
+
+body {
+    font-size: 15px;
+    background-color: var(--veryLightGray);
+    height: 100vh;
+}
+
+.flexContainer {
+    display: flex;
+    flex-direction: column;
+    width: 83.5%;
+    /* height: 100vh; */
+    margin: 0 auto;
+    max-width: 400px;
+}
+
+.topSection {
+    /* think this change was brought about by browser differences. Was previously 3.8 */
+    margin-top: 3.65rem;
+    text-align: center;
+}
+
+.topSection > .title {
+    font-size: calc(24px + (35 - 24) * ((100vw - 375px) / (1440 - 375)));
+}
+
+.topSection .title1 {
+    margin-top: 0.5rem;
+    font-weight: 200;
+    color: var(--grayishBlue);
+}
+
+/* should be a class but wanted to play with :nth-child() */
+.topSection .title2 {
+    font-weight: 600;
+    color: var(--veryDarkBlue);
+}
+
+.topSection .blurb {
+    margin-top: 0.7rem;
+    text-align: center;
+    color: var(--grayishBlue);
+    font-size: 16px;
+}
+
+
+.middleSection {
+    margin-top: 2.5rem;
+}
+
+.card {
+    margin-top: 1.3rem;
+    background-color: white;
+    border-top: 4px solid;
+    border-radius: 6px;
+    box-shadow: 0px 10px 15px rgba(56, 75, 108, 0.2);
+    padding: 23px 30px 26px 30px;
+}
+.card-title {
+    font-size: 20px;
+    color: var(--veryDarkBlue);
+    font-weight: 600;
+}
+.card-blurb {
+    margin-top: 0.3rem;
+    color: var(--grayishBlue);
+    font-size: 13px;
+}
+.card-image {
+    display: block;
+    margin-top: 1.8rem;
+    margin-left: auto;
+    width: 22%;
+
+}
+
+.column1 {
+}
+.supervisor {
+    border-top-color: var(--cyan);
+}
+.column2 {
+}
+.teamBuilder {
+    border-top-color: var(--red);
+}
+.karma {
+    border-top-color: var(--orange);
+}
+.column3 {
+}
+.calculator {
+    border-top-color: var(--blue);
+}
+/* .attribution {
+} */
+
+/* arbitrary figure atm */
+/* @media screen and (min-width: 600px) {
+    .flexContainer {
+        width: 78%;
+    }
+} */
+
+@media screen and (min-width: 1000px) {
+
+    .flexContainer {
+        max-width: 1440px;
+    }
+
+    .topSection {
+        margin-top: 3.45rem;
+    }
+
+    .topSection .blurb {
+        width: 45%;
+        margin-left: auto;
+        margin-right: auto;
+        font-size: 15px;
+    }
+    
+    .flexContainer {
+        width: 78%;
+    }
+    .middleSection {
+        margin-top: 3.3rem;
+        display: flex;
+    }
+
+    .card {
+        margin-top: 0;
+        padding: 27px 30px 36px 25px;
+    }
+
+    .card-blurb {
+        margin-top: 0.5rem;
+    }
+    .card-image {
+        margin-top: 2rem;
+    }
+    
+    .column {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        max-width: calc((100% /3) - 1.5rem);
+    }
+
+    .karma {
+        margin-top: 1.3rem;
+    }
+}

FrontendMentor/newbie/four-card-feature-section/images/icon-calculator.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#474F54" d="M64 0v41.25l-3.75 3.875H3.75L0 41.25V0z"/><path fill="#32393F" d="M64 0v41.25l-3.75 3.875H32V0z"/><path fill="#DADAE5" d="M22.625 50.875h18.75v11.25h-18.75z"/><path fill="#C9C9D3" d="M32 50.875h9.375v11.25H32z"/><path fill="#EFEFF4" d="M0 41.25h64v11.5H0z"/><path fill="#DADAE5" d="M32 41.25h32v11.5H32z"/><path fill="#EFEFF4" d="M15.125 60.25h33.75V64h-33.75z"/><path fill="#DADAE5" d="M32 60.25h16.875V64H32z"/><path fill="#549EF2" d="M20.75 7.5c-7.236 0-13.125 5.889-13.125 13.125S13.514 33.75 20.75 33.75s13.125-5.889 13.125-13.125S27.986 7.5 20.75 7.5zm0 18.75a5.631 5.631 0 01-5.625-5.625A5.631 5.631 0 0120.75 15a5.631 5.631 0 015.625 5.625 5.631 5.631 0 01-5.625 5.625z"/><g fill="#377FD2"><path d="M45.125 7.5H56.5v3.75H45.125zM37.625 7.5h3.75v3.75h-3.75zM45.125 22.5H56.5v3.75H45.125zM37.625 22.5h3.75v3.75h-3.75zM37.625 15H56.5v3.75H37.625zM37.625 30H56.5v3.75H37.625z"/></g></g></svg>

FrontendMentor/newbie/four-card-feature-section/images/icon-karma.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#676E74" d="M26.375 52.625h11.25V64h-11.25z"/><path fill="#333637" d="M32 52.625h5.625V64H32z"/><path fill="#4C545A" d="M22.625 47h18.75v9.375h-18.75z"/><path fill="#52585C" d="M32 47h9.375v9.375H32z"/><path fill="#FFDA2D" d="M45.012 36.725c-2.325 1.913-3.637 4.612-3.637 7.425V47h-18.75v-2.85c0-2.85-1.238-5.512-3.3-7.125-5.062-3.938-7.95-9.862-7.95-16.275a20.585 20.585 0 017.613-16.013C22.7 1.737 27.238 0 32 0c1.462 0 2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663 1.275 7.5-1.425 14.85-7.313 19.612z"/><path fill="#FDBF00" d="M45.012 36.725c-2.325 1.913-3.637 4.612-3.637 7.425V47H32V0c1.462 0 2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663 1.275 7.5-1.425 14.85-7.313 19.612z"/><path fill="#676E74" d="M18.875 45.125h26.25v3.75h-26.25z"/><path fill="#FF9100" d="M39.956 10.143l2.651 2.651-3.979 3.978-2.651-2.651z"/><path fill="#FDBF00" d="M25.372 24.727l2.651 2.651-3.979 3.979-2.651-2.651zM30.125 28.25h3.75v5.625h-3.75z"/><path fill="#FF9100" d="M38.628 24.727l3.979 3.979-2.651 2.651-3.979-3.979zM39.5 18.875h5.625v3.75H39.5z"/><path fill="#FDBF00" d="M24.044 10.143l3.979 3.979-2.651 2.65-3.979-3.978zM18.875 18.875H24.5v3.75h-5.625zM30.125 7.625h3.75v5.625h-3.75z"/><g fill="#FFDA2D"><path d="M0 18.875h7.625v3.75H0zM6.585 14.81l-5.75-3.75 2.08-3.12 5.75 3.75zM2.915 33.56l-2.08-3.12 5.75-3.75 2.08 3.12z"/></g><path fill="#FDBF00" d="M56.375 18.875H64v3.75h-7.625zM61.085 33.56l-5.75-3.75 2.08-3.12 5.75 3.75zM57.415 14.81l-2.08-3.12 5.75-3.75 2.08 3.12z"/><path fill="#FF9100" d="M32 7.625h1.875v5.625H32zM32 28.25h1.875v5.625H32z"/><path fill="#333637" d="M32 45.125h13.125v3.75H32z"/><path fill="#FDBF00" d="M32 11.375c-5.175 0-9.375 4.2-9.375 9.375s4.2 9.375 9.375 9.375 9.375-4.2 9.375-9.375-4.2-9.375-9.375-9.375z"/><path fill="#FF9100" d="M32 30.125v-18.75c5.175 0 9.375 4.2 9.375 9.375s-4.2 9.375-9.375 9.375z"/><path fill="#FFDA2D" d="M30.125 18.875h3.75v3.75h-3.75z"/><path fill="#FDBF00" d="M32 18.875h1.875v3.75H32z"/></g></svg>

FrontendMentor/newbie/four-card-feature-section/images/icon-supervisor.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#676E74" d="M56.842 7.158c-9.526-9.563-24.902-9.525-34.428 0-8.025 8.026-9.45 20.44-3.525 30.003l-2.513 2.55-1.356 6.144 4.214 4.214 5.093-2.408 2.512-2.55a24.254 24.254 0 0030.003-3.525c9.563-9.526 9.525-24.902 0-34.428z"/><path fill="#474F54" d="M24.327 47.661l2.512-2.55a24.254 24.254 0 0030.003-3.525c9.563-9.526 9.525-24.902 0-34.428l-40.26 40.26 2.652 2.651 5.093-2.408z"/><path fill="#64E1DC" d="M54.213 9.787a20.56 20.56 0 00-14.585-6.041C28.236 3.746 19 12.98 19 24.372a20.564 20.564 0 006.041 14.586 20.564 20.564 0 0014.586 6.04c11.392 0 20.626-9.234 20.626-20.626a20.56 20.56 0 00-6.041-14.585z"/><path fill="#00C8C8" d="M60.254 24.372a20.56 20.56 0 00-6.041-14.585l-29.17 29.17A20.564 20.564 0 0039.627 45c11.392 0 20.626-9.235 20.626-20.627z"/><path fill="#EFEFF4" d="M56.239 23.41c-.184-.307-2.98-4.914-7.281-8.368-2.63-2.113-5.822-3.796-9.33-3.796-9.242 0-16.314 11.669-16.61 12.165l-.576.961.575.961c.184.309 2.98 4.916 7.28 8.37 2.631 2.112 5.823 3.795 9.33 3.795 9.243 0 16.315-11.668 16.612-12.165l.574-.96-.574-.962z"/><path fill="#DADAE5" d="M56.239 25.333l.574-.96-.574-.962c-.184-.308-2.98-4.915-7.281-8.369l-18.66 18.66c2.63 2.113 5.822 3.796 9.33 3.796 9.242 0 16.314-11.668 16.61-12.165z"/><path fill="#64E1DC" d="M43.604 20.396a5.607 5.607 0 00-3.976-1.65 5.632 5.632 0 00-5.626 5.626c0 1.551.631 2.958 1.65 3.976a5.609 5.609 0 003.976 1.65 5.632 5.632 0 005.625-5.626c0-1.55-.63-2.957-1.649-3.976z"/><path fill="#00C8C8" d="M45.253 24.372c0-1.55-.63-2.957-1.649-3.976l-7.952 7.952a5.608 5.608 0 003.976 1.65 5.632 5.632 0 005.625-5.626z"/><path fill="#676E74" d="M40.954 23.046a1.876 1.876 0 10-1.326 3.2 1.876 1.876 0 001.326-3.2z"/><path fill="#474F54" d="M41.503 24.372c0-.517-.21-.986-.55-1.326l-2.65 2.652a1.876 1.876 0 003.2-1.326z"/><path fill="#575C60" d="M20.333 43.667l-3.957-3.957L0 56.049l3.975 3.976L7.951 64l16.376-16.339z"/><path fill="#333637" d="M24.327 47.661l-3.994-3.994L3.975 60.025 7.951 64z"/></g></svg>

FrontendMentor/newbie/four-card-feature-section/images/icon-team-builder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#EFEFF4" d="M64 14.454v41.788H0V14.454l3.75-3.787h56.5z"/><path fill="#DADAE5" d="M64 14.454v41.788H32V10.667h28.25z"/><path fill="#474F54" d="M0 0h64v15.515H0z"/><path fill="#32393F" d="M32 0h32v15.515H32z"/><g fill="#FF637B"><path d="M7.758 5.818h3.685v3.879H7.758zM15.128 5.818h3.685v3.879h-3.685zM22.497 5.818h3.685v3.879h-3.685z"/></g><path fill="#FF637B" d="M45.576 42.245V64H34.355v-3.71h-3.74V64H19.394V42.245l11.37-9.275h3.105z"/><path fill="#DADAE5" d="M11.636 22.303h41.697v3.879H11.636z"/><path fill="#C9C9D3" d="M32 22.303h20.364v3.879H32z"/><path fill="#E63950" d="M45.576 42.245V64H33.939v-3.71H32V32.97h1.435z"/><path fill="#EFEFF4" d="M30.061 45.576h3.878v3.879h-3.878z"/><path fill="#DADAE5" d="M32 45.576h1.939v3.879H32z"/><path fill="#676E74" d="M50.424 45.779l-2.452 2.706-15.487-13.526-15.488 13.526-2.452-2.706 17.94-15.718z"/><path fill="#474F54" d="M32 30.061l18.424 15.718-2.518 2.706L32 34.959z"/></g></svg>

FrontendMentor/newbie/four-card-feature-section/index.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="css/style.css">
+  
+  <title>Frontend Mentor | Four card feature section</title>
+
+  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
+  <style>
+    .attribution { font-size: 11px; text-align: center; }
+    .attribution a { color: hsl(228, 45%, 44%); }
+  </style>
+</head>
+<body>
+  <header></header>
+  <main>
+    <div class="flexContainer">
+      <div class="topSection">
+          <p class="title title1">Reliable, efficient delivery</p>
+          <p class="title title2">Powered by Technology</h2>
+          <p class="blurb">Our Artificial Intelligence powered tools use millions of project data points 
+            to ensure that your project is successful</p>
+      </div>
+  
+      <div class="middleSection">
+        <div class="column">
+          <div class="supervisor card">
+            <h2 class="card-title">
+              Supervisor
+            </h2>
+            <p class="card-blurb">
+              Monitors activity to identify project roadblocks
+            </p>
+            <img class="card-image" src="images/icon-supervisor.svg" alt="Supervisor icon">
+          </div>
+        </div>
+        
+        <div class="column">
+          <div class="teamBuilder card">
+            <h2 class="card-title">
+              Team Builder
+            </h2>
+            <p class="card-blurb">
+              Scans our talent network to create the optimal team for your project
+            </p>
+            <img class="card-image" src="images/icon-team-builder.svg" alt="Team building icon">
+          </div>
+          <div class="karma card">
+            <h2 class="card-title">
+              Karma
+            </h2>
+            <p class="card-blurb">
+              Regularly evaluates our talent to ensure quality
+            </p>
+            <img class="card-image" src="images/icon-karma.svg" alt="Karma icon">
+          </div>
+        </div>
+        <div class="column">
+          <div class="calculator card">
+            <h2 class="card-title">
+              Calculator
+            </h2>
+            <p class="card-blurb">
+              Uses data from past projects to provide better delivery estimates
+            </p>  
+            <img class="card-image" src="images/icon-calculator.svg" alt="Calculator icon">       
+          </div>
+        </div>
+      </div>
+    </div>  
+  </main>
+  <footer>
+    <!-- <p class="attribution">
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+      Coded by <a href="emailto:work@tarasis.net">Robert McGovern</a>.
+    </p> -->
+  </footer>
+</body>
+</html>

FrontendMentor/newbie/four-card-feature-section/notes/process.md

@@ -0,0 +1,78 @@
+Starting 2020-09-23 (22:49)
+
+Well a little under 2 hours later, I've made zero progress on this project BUT I have set up a basic style for the top level project index page. Wasn't what I intended to do, but I'm actually glad I did. Intention is for it to develop and become more interesting/complex as I learn more.
+
+Last to days lost doing nothing. Spent part of today trying to find the perfect VSCode Code theme. None really quite right, don't want to create my own. Whatever it is must have different colouring for IDs and classes in css and the units should be a different color than the number.
+
+Interesting but not quite there 
+
+Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue)  
+ReUI Mirage (React) (want darker background)  
+Panda Syntax  
+Palenight Theme - issues  
+Night Owl  
+Monokai Dark Soda  
+Gruvbox Dark (Hard)  
+Firefly Pro -   
+Dark Chrome DevTools - really nice, but JS REGEX is too hard to read   
+
+2020-09-26 
+
+Added basics to the style.css from the style guide.  
+Again I'm setting the root font to 20px to make working with REM easier.  
+
+I think the best approach for this is a flex container with 
+
+top row: The title, sub title and blurb.  
+middle row: Is also a flex container, with 3 columns (in destkop) for the cards.  
+            First column is Supervisor  
+            Second column is Team Builder and Karma  
+            Third column is calculator.  
+bottom row: attribution? (might just delete it)  
+
+Added tags & classes to index.html. 
+Don't think I really need the classes for inside card (card-title, card-blurb, card-image). In theory that could just be handled with `card h1 {}` or `card p {}` or `card img {}`  
+
+Layout looks like this right now
+
+![current layout](layout-no-styling(1440x922).png)
+
+Added some styling, working of the mobile design and building it up. 
+Lots of touch ups required yet, improve shadow, spacing, shrinking icons, but its taking shape.
+
+![mobile difference](mobile-difference-basic-styling.png)
+![mobile difference side by side](mobile-diff-sidebyside.png)
+
+My card titles and card blurbs are too big. Probabl h3 rather than h1, font size is a guess. Icons are also a little big, although its not far off 75% rather than 100%?
+(Prob should pay for the Pro frontend Mentor sub to stop having to guess, but its part of the challenge for me too.)
+
+2020-09-27 15:05 
+
+Picking up from yesterday.
+38 minutes later. Mobile is virtually exact apart from shadow on the cards.
+Basically bits of tweaking to fit. Not a horrendous amount. Havent looked at how it looks on desktop yet :)
+
+So how to judge what the shadow should be? what is the trick to that? Basically experimentation it seems.
+
+![mobile final side by side](mobile-final-diff.png)
+![mobile final diff'd](mobile-final-side-by-side.png)
+
+14 minute break ...
+
+Have to work out how close the desktop is, once I put in columns. Right now, its not close :)
+
+Forgot to note when I restarted work. Around 40 minutes ago. Didn't require too much tweaking to get in nearly in place.
+Not going to spend too long trying to finese it.
+
+
+![desktop final side by side](desktop-final-slider.png)
+![desktop final diff'd](desktop-final-diff.png)
+
+And these are the final images.
+
+![Mobile Final](mobile-final.png)
+![Desktop Final](desktop-final.png)
+
+As per usual the in between state is not ideal, at the transition point the boxes are too big. It was wrong to use a % on the icon images. They become too big before the transition to the desktop form.
+
+May have run into a browser difference. Previously I had thinks lined up in the mobile section, but when I was in a different browser, I had to nudge the top section up 3 pixels.

FrontendMentor/newbie/four-card-feature-section/style-guide.md

@@ -0,0 +1,34 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px (375x1360)
+- Desktop: 1440px (1440x922)
+
+## Colors
+
+### Primary
+
+- Red: hsl(0, 78%, 62%)
+- Cyan: hsl(180, 62%, 55%)
+- Orange: hsl(34, 97%, 64%)
+- Blue: hsl(212, 86%, 64%)
+
+### Neutral
+
+- Very Dark Blue: hsl(234, 12%, 34%)
+- Grayish Blue: hsl(229, 6%, 66%)
+- Very Light Gray: hsl(0, 0%, 98%)
+
+## Typography
+
+### Body Copy
+
+- Font size: 15px
+
+### Fonts
+
+- Family: [Poppins](https://fonts.google.com/specimen/Poppins)
+- Weights: 200, 400, 600

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/.gitignore

@@ -0,0 +1 @@
+.DS_Store

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/README.md

@@ -0,0 +1,67 @@
+# Frontend Mentor - Huddle landing page with single introductory section
+
+![Design preview for the Huddle landing page with single introductory section](./design/desktop-preview.jpg)
+
+## Welcome! 👋
+
+Thanks for checking out this front-end coding challenge.
+
+[Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
+
+**To do this challenge, you need a basic understanding of HTML and CSS.**
+
+## Where to find everything
+
+Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 
+
+The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
+
+If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page.
+
+You will find all the required assets in the `/images` folder. The assets are already optimized.
+
+There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
+
+## Building your project
+
+Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
+
+1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
+2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
+3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
+4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
+5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
+6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
+7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](https://bit.ly/fm-sizzy). It's a great browser that makes it easy to view your site across multiple devices.
+
+## Deploying your project
+
+As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
+
+1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
+2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
+3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
+
+## Sharing your solution
+
+There are multiple places you can share your solution:
+
+1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
+2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
+3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
+
+## Giving feedback
+
+Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
+
+This challenge is completely free. Please share it with anyone who will find it useful for practice.
+
+**Have fun building!** 🚀
+
+## Community Sponsors
+
+A massive thank you to our community sponsors!
+
+- [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites!
+- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
+- [Dracula PRO](https://bit.ly/fem-dracula) is a beautiful dark theme to help keep you focused and productive while you code. The theme isn't just for your editor either. You can also apply it to your most-used apps like your terminal and even Slack!

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css

@@ -0,0 +1,232 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;700&display=swap');
+
+:root {
+    font-size: 16px;
+    --site-color: hsl(257, 40%, 49%);
+}
+
+body {
+    background-color: var(--site-color);
+    background-image: url("../images/bg-desktop.svg");
+    background-repeat: no-repeat;
+    /*background-size: contain; */
+    
+    color: white;
+    margin: 0;
+    /* display: flex; */
+
+    font-family: 'Open Sans', sans-serif;
+}
+
+h1 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400; /* 400 & 40 are very close*/
+    font-size: 40px;
+}
+
+.logo {
+    width: 215px;
+    margin: 3.75% 4.86% 0rem; /* 3.75% 4.375rem 0rem*/
+}
+
+.middleSection {
+    display: flex;
+    /* margin: auto; */
+    margin: 5.0625rem 0rem 0rem 4.55rem;
+    width: 98%;
+    max-width: 1440px;
+}
+
+.illustrations {
+    width: 55%;
+    padding: 0;
+}
+
+.illustration {
+    width: 100%;
+}
+
+.siteBlurb {
+    margin: 3rem 4rem 2rem 3.325rem;
+    width: 45%;
+
+    /* line-height: 2rem;
+    font-weight: 400; */
+}
+
+.siteBlurb h1 {
+    line-height: 1.5;
+    margin-right: 2em;
+    margin-bottom: 0;
+    letter-spacing: 1px;
+}
+
+.siteBlurb p {
+    margin-top: 1rem;
+    margin-right: 4rem;
+    margin-bottom: 1.5625rem;
+    line-height: 1.7rem;
+    font-size: 18px;
+    font-weight: 400;
+}
+
+.registerButton {
+    background-color: white;
+    color: var(--site-color);
+    font-size: 19px;
+    border: none;
+    padding: 18px 64px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    margin: 0;
+    cursor: pointer;
+    border-radius: 32px;
+    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/
+}
+
+.socialButtonsSection {
+    display: block;
+    text-align: right;
+    margin-right: 5.1875rem;
+}
+
+.socialButtonsSection i {
+    padding: 0.5rem;
+    margin-left: 0.5rem;
+    margin-top: 0.9375rem;
+    margin-right: 0;
+}
+
+.circleIcon {
+    margin: 0;
+    color: white;
+    background: transparent;
+    border: 1.75px solid #fff;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 20px;
+    vertical-align: middle;
+    font-size: 19px;
+}
+
+.circleIcon:hover {
+    background: rgb(174, 6, 208);
+}
+
+.attribution { margin-top: 1rem; font-size: 11px; text-align: center; }
+.attribution a { color: hsl(63, 100%, 65%); }
+
+/* Formating for Mobile devices. Sample to match is 375z800 */
+@media screen and (max-width: 1100px) {
+
+    body {
+        background-image: url("../images/bg-mobile.svg");
+        background-repeat: no-repeat;
+        /* background-size: contain; */
+        
+        color: white;
+        margin: 0;
+        padding: 0;
+    }
+
+    .logo {
+        width: 128px;
+        margin: 8.5325% 35px 0rem; /* 3.75% 4.375rem 0rem*/
+    }
+
+    .illustrations {
+        /* margin: 3.5rem 2.3125rem 1rem; */
+        margin: auto;
+        margin-top: 3.5rem;
+        width: 90%;
+    }
+
+    .illustration {
+        max-width: 100%;
+        max-height: 100vh;
+        height: auto;
+    }
+
+    .middleSection {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        width: 100%
+
+    }
+    
+    .siteBlurb {
+        margin:0;
+        margin-top: 0.5rem;
+        text-align: center;
+        width: 100%;
+    
+        /* line-height: 2rem;
+        font-weight: 400; */
+    }
+    
+    .siteBlurb h1 {
+        margin: 1.625rem 2rem 0rem 2rem;
+        font-weight: 400;
+        font-size: 1.5rem;
+        line-height: 1.5;
+    }
+    
+    .siteBlurb p {
+        margin:0.9rem 2.25rem;
+        font-size: 1rem;
+        line-height: 1.5rem;
+    }
+    
+    .registerButton {
+        margin-top: 0.875rem;
+        background-color: white;
+        color: var(--site-color);
+        font-size: 13px;
+        letter-spacing: 1px;
+        border: none;
+        padding: 12px 72px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        /* margin: 4px 2px; */
+        cursor: pointer;
+        border-radius: 32px;
+        box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.4); /* 10px 5px 10px*/
+    }
+    
+    .socialButtonsSection {
+        /* display: block; */
+        text-align: center;
+        margin:0;
+        margin-top: 3rem;
+    }
+    
+    .socialButtonsSection i {
+        /* padding: 0.5rem; */
+        margin-left: 0.375rem;
+        margin-top: 0.9375rem;
+        margin-right: 0; 
+    }
+    
+    .circleIcon {
+        margin: 0;
+        padding: 0;
+        color: white;
+        background: transparent;
+        border: 1.5px solid #fff;
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 13px;
+        /* vertical-align: middle; */
+        align-content: center;
+        font-size: 14px;
+    }
+
+    .attribution { margin: 10px 0;}
+}

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg

@@ -0,0 +1 @@
+<svg width="1318" height="800" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="-45.25%" y1="-88.077%" x2="97.789%" y2="100%" id="a"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#F952C5" offset="4.09%"/><stop stop-color="#9952FF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="-64.06%" y1="-121.906%" x2="97.789%" y2="100%" id="b"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#F952C5" offset="4.09%"/><stop stop-color="#9952FF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="100%" y1="111.373%" x2="-24.893%" y2="-55.159%" id="c"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#9952FF" offset="100%"/></linearGradient><linearGradient x1="21.681%" y1="5.006%" x2="145.861%" y2="145.591%" id="d"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#9952FF" offset="100%"/></linearGradient><linearGradient x1="6.375%" y1="-15.195%" x2="91.754%" y2="105.701%" id="e"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#9952FF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" transform="matrix(-1 0 0 1 834.817 0)" d="M0 0h409.224l425.593 376v156.83z"/><path fill="url(#b)" transform="rotate(180 528.65 584)" d="M0 367l641.153.138L1057.3 673.299V801z"/><circle stroke="url(#c)" stroke-width="17" cx="704" cy="563" r="49"/><rect fill="url(#d)" opacity=".558" transform="rotate(45 1107.87 708.87)" x="1088.87" y="689.87" width="38" height="38" rx="3"/><rect fill="url(#d)" opacity=".503" transform="rotate(45 1279.598 103.598)" x="1251.598" y="75.598" width="56" height="56" rx="3"/><rect fill="url(#d)" opacity=".558" transform="rotate(45 934.627 63.627)" x="918.627" y="47.627" width="32" height="32" rx="3"/><rect fill="url(#d)" opacity=".558" transform="rotate(45 703.627 186.627)" x="687.627" y="170.627" width="32" height="32" rx="3"/><rect fill="url(#d)" opacity=".387" transform="rotate(45 1237.02 606.02)" x="1228.521" y="597.521" width="17" height="17" rx="1"/><path d="M91.477 739.477v-16.5a5 5 0 0 1 10 0v16.5h16.5a5 5 0 0 1 0 10h-16.5v16.5a5 5 0 1 1-10 0v-16.5h-16.5a5 5 0 1 1 0-10h16.5z" fill="url(#e)" opacity=".211" transform="rotate(45 96.477 744.477)"/></g></svg>

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg

@@ -0,0 +1 @@
+<svg width="375" height="373" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="221.401%" y1="-103.001%" x2="-5.513%" y2="110.015%" id="a"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#F952C5" offset="7.3%"/><stop stop-color="#9952FF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="212.128%" y1="-106.466%" x2="-5.513%" y2="110.015%" id="b"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#F952C5" offset="0%"/><stop stop-color="#9952FF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="21.681%" y1="5.006%" x2="145.861%" y2="145.591%" id="c"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#9952FF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" d="M0 265.7L319.689 0H375v73.607L0 313.664z"/><path fill="url(#b)" transform="matrix(-1 0 0 1 375 0)" d="M0 318.687L375 102v119.176L0 360.228z"/><rect fill="url(#c)" opacity=".558" transform="rotate(45 332.799 180.799)" x="318.799" y="166.799" width="28" height="28" rx="3"/><rect fill="url(#c)" opacity=".387" transform="rotate(45 122.364 366.364)" x="117.864" y="361.864" width="9" height="9" rx="1"/><rect fill="url(#c)" opacity=".387" transform="rotate(45 164.728 344.728)" x="155.728" y="335.728" width="18" height="18" rx="1"/><rect fill="url(#c)" opacity=".387" transform="rotate(45 139.728 86.9)" x="132.728" y="79.899" width="14" height="14" rx="1"/><rect fill="url(#c)" opacity=".387" transform="rotate(45 325.02 344.02)" x="316.521" y="335.521" width="17" height="17" rx="1"/><rect fill="url(#c)" opacity=".503" transform="rotate(45 63.598 282.497)" x="42.598" y="261.497" width="42" height="42" rx="3"/></g></svg>

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
+
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/style.css">
+  <title>Frontend Mentor | Huddle landing page with single introductory section</title>
+</head>
+<body>
+
+  <header>
+    <div class="logoSection">
+      <img src="images/logo.svg" alt="Huddle Company Logo" class="logo">
+    </div>  
+  </header>
+
+  <div class="middleSection">
+    <div class="illustrations">
+      <img src="images/illustration-mockups.svg" alt="" class="illustration">
+    </div>
+    <div class="siteBlurb">
+      <h1>Build The Community Your Fans Will Love</h1>
+
+      <p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. 
+      Create connections with your users as you engage in genuine discussion.</p>
+    
+      <div class="registerButtonSection">
+        <a href="https://tarasis.net" class="registerButton">Register</a>
+      </div>
+    </div>
+  </div>
+
+  <div class="socialButtonsSection">
+    <a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f fa-lg circleIcon"></i></a>
+    <a href="https://twitter.com/tarasis"><i class="fab fa-twitter fa-lg circleIcon"></i></a>
+    <a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram fa-lg circleIcon"></i></a>
+  </div>
+  <footer>
+    <p class="attribution">
+      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+      Coded by <a href="mailto:rob@tarasis.net">Robert McGovern</a>.
+    </p>
+  </footer>
+</body>
+</html>

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/style-guide.md

@@ -0,0 +1,39 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+### Primary
+
+- Violet: hsl(257, 40%, 49%)
+
+## Typography
+
+### Headings
+
+- Family: [Poppins](https://fonts.google.com/specimen/Poppins)
+- Weights: 400, 700
+
+### Body
+
+- Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans)
+- Weights: 400
+
+## Icons
+
+For the social icons, you can use a font icon library. Some suggestions can be found below:
+
+- [Font Awesome](https://fontawesome.com/)
+- [IcoMoon](https://icomoon.io/)
+- [Ionicons](https://ionicons.com/)
+
+For Font Awesome use the following classes
+Twitter - <i class="fab fa-twitter"></i>
+Facebook - <i class="fab fa-facebook-f"></i>
+Instagram - <i class="fab fa-instagram"></i>

FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/myProcess.md

@@ -0,0 +1,85 @@
+notes on how i approached this
+
+downloaded
+read readme
+read style guide
+created css file
+added it to the html file
+added font awesome to the html file
+added fonts to the css file
+added initial styling (fonts, background color, background image)
+in html file I 
+    added header
+    added divs for sections (logo, middle, social media buttons)
+    put divs around existing content (text for right side)
+    added logo
+    added mockup image
+    added icons for social media
+    saved it out
+moved on to css
+    adjust positioning based on how it looks on design
+    got things roughly in position.
+    pause for bed, however curious how I am in relation to design file
+    realise I really can't match 1440x800 because the laptop I'm using is only 1366x768 (originally thought it was 2560x1440, page said only 1440 ... easy mistake. Had to look at design image for res)
+go to sleep
+next morning I realise
+    chrome in developer mode allows you to create devices of specific resolutions
+    set up 2, one 1440x800 and the other 375x800
+    I can then save out the image and use diffchecker.com and use the design image vs the current image of the page to compare and see how close I am. You can use a diff mode that only shows the differences (mostly in green) which makes it easier to adjust.
+    Now, now I need to finish styling for desktop ...
+    remainder of day lost to calls and roleplaying
+next day 
+    download diffchecker trial rather than keep using website
+    adjust size of logo svg
+    play with positioning using margin and rem. Logo and mockup images are so close at this point (see image diff 1)
+    ![alt](image-diff-1.png)
+    realise I probably should be using % rather than rem for margin positioning
+    also should probably be using 0 positioning in body and doing it in each element
+    tweaked logo and mid section margins mixture rem & % for the moment
+    set body to have 0 margin
+    seemingly no changes are made with % unless they are to a pixel, so 4.86 is the same as 4.8611111, need to go to next px % which is 4.7916666667
+    then lots and lots of iterating. Making changes and comparing in diffchecker against the design doc.
+    Spent 2 hours+ on this. Too long.
+    Still haven't quite nailed the blurb section.
+        Basically the logo is slight off
+        the differences between the mockup and symbols are image quality between jpg and png
+        its like a pixel off with the social media buttons
+    img-diff-2-desktop-near-enough.png
+    ![alt](img-diff-2-desktop-near-enough.png)
+    Still now on to the mobile variant. Can I nail it better?
+    spent an age on this, lots of tweaking. Not quite there but nearly, so nearly
+    ![mobileimage](mob-img-diff-1.png)
+    submit to frontend mentor as a solution
+
+Couple of days later
+    So I had a 3 responses on Frontend Mentor page
+    1 Comment on Slack
+    2 responses on Twitter. 
+    less than I hoped but some useful information to take on board
+
+* First: Don't worry about it being so exact(!!), being a little off/up/down/font off doesn't really matter ... ALTHOUGH it CAN pay off to be exact. Theoretically you are hired to implement the required design, so best to be as exact as possible.
+* ~~Second: Link color in the attribution is impossible to read. My fault for not making any changes to it.~~
+* ~~Third: mobile design - make icon size 13x13, that will fix centering~~
+* Fourth: mobile design - the hit box for the link is off from the image/circle
+* fifth: look at stacked icons on font awesome https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
+* ~~sixth: hover state for social icons not a good color. Aim for a lighter violet. Aim to stay in color scheme (important for accessibility)~~
+* seventh: good not used too much css, nor complex structure
+* ~~eighth: "personal pet peeve" html button is only valid in an html form, otherwise use a anchor styled as a button because a button has no href.~~ -- Not sure which way to go with this because its not clear what would happen on the button press. Does it go to a new page, or reveal a email submission box
+* ninth: "personally I would have wrapped the social icons and the footer links in a combined foot section just because that makes them easier to move later if doing a whole site". Mixed on this, attribution link at bottom was not part of the original design, but was part of the base files, and is something that was deletable. 
+* tenth: (overall people though I did a good/awesome job)
+* eleventh: was told to check out PerfectPixel extension for Chrome/Firefox. Similar job to diffchecker, can use to add a design image as a layer and you can see how off you are from the design ... being by opacity or there is a difference view
+* twelfth: documenting the process was apparently helpful ("its something not everyone does, but should")
+* thirteenth: Design probably means in wide formats that the page should cover all the screen. Both in height and width. That is more powerful than image should be at X/Y, should be this tall. Text should also be at X/Y and be a certain size, with certain spacing between letters/lines.
+* fourteenth: Limit the width of the components, and contain them to the center of your screen.
+* fifteenth: At present if you go really wide on the page, the text will appear in only one line. It totally loses its expected design. Use a main container to hold everything inside it. Limit its size and automatically center it.
+* sixteenth: I've used flexbox but some of the child elements are not restricted in the size they can take. This si useful to maintain proportions at different sizes. (Good example is the mockup image, which takes up more space than it should in the sizes between roughly 500-800px)
+* seventeenth: Basically ... try not to restrict your designs to two resolutions. Make it work for in-between widths.
+
+Bit of a delay but started to work through the changes above.
+Was going to use the global selector to set Margin to 0, but it didn't work as I expected and from what I read its generally recommended not to use it.
+
+Made tweaks to mobile css, that made it work better between intended design sizes (375x800 and 1440x800). However that temporarily messed up 1440x800 design.
+
+Made tweaks to the desktop CSS and while its not quite as close as before I think it will do. Switched so that the transition occurs for phones and tablets to 1100 pixels BUT that has the drawback that the logo is too small and the background image is in the wrong place. (and argulably the mockup is a little big).
+
+I should work on it a bit further, but honestly thats enough for now. Next challenge.

FrontendMentor/newbie/order-summary-component/.gitignore

@@ -0,0 +1,16 @@
+# Avoid accidental upload of the Sketch and Figma design files
+#####################################################
+## Please do not remove lines 5 and 6 - thanks! 🙂 ##
+#####################################################
+*.sketch
+*.fig
+
+# Avoid accidental XD upload if you convert the design file
+###############################################
+## Please do not remove line 12 - thanks! 🙂 ##
+###############################################
+*.xd
+
+# Avoid your project being littered with annoying .DS_Store files!
+.DS_Store
+.prettierignore

FrontendMentor/newbie/order-summary-component/README-template.md

@@ -0,0 +1,110 @@
+# Frontend Mentor - Order summary card solution
+
+This is a solution to the [Order summary card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 
+
+## Table of contents
+
+- [Overview](#overview)
+  - [The challenge](#the-challenge)
+  - [Screenshot](#screenshot)
+  - [Links](#links)
+- [My process](#my-process)
+  - [Built with](#built-with)
+  - [What I learned](#what-i-learned)
+  - [Continued development](#continued-development)
+  - [Useful resources](#useful-resources)
+- [Author](#author)
+- [Acknowledgments](#acknowledgments)
+
+**Note: Delete this note and update the table of contents based on what sections you keep.**
+
+## Overview
+
+### The challenge
+
+Users should be able to:
+
+- See hover states for interactive elements
+
+### Screenshot
+
+![](./screenshot.jpg)
+
+Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
+
+Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. 
+
+Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
+
+**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.**
+
+### Links
+
+- Solution URL: [Add solution URL here](https://your-solution-url.com)
+- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
+
+## My process
+
+### Built with
+
+- Semantic HTML5 markup
+- CSS custom properties
+- Flexbox
+- CSS Grid
+- Mobile-first workflow
+- [React](https://reactjs.org/) - JS library
+- [Next.js](https://nextjs.org/) - React framework
+- [Styled Components](https://styled-components.com/) - For styles
+
+**Note: These are just examples. Delete this note and replace the list above with your own choices**
+
+### What I learned
+
+Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
+
+To see how you can add code snippets, see below:
+
+```html
+<h1>Some HTML code I'm proud of</h1>
+```
+```css
+.proud-of-this-css {
+  color: papayawhip;
+}
+```
+```js
+const proudOfThisFunc = () => {
+  console.log('🎉')
+}
+```
+
+If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more.
+
+**Note: Delete this note and the content within this section and replace with your own learnings.**
+
+### Continued development
+
+Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
+
+**Note: Delete this note and the content within this section and replace with your own plans for continued development.**
+
+### Useful resources
+
+- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
+- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
+
+**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.**
+
+## Author
+
+- Website - [Add your name here](https://www.your-site.com)
+- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername)
+- Twitter - [@yourusername](https://www.twitter.com/yourusername)
+
+**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
+
+## Acknowledgments
+
+This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
+
+**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**

FrontendMentor/newbie/order-summary-component/README.md

@@ -0,0 +1,91 @@
+# Frontend Mentor - Order summary card
+
+![Design preview for the Order summary card coding challenge](./design/desktop-preview.jpg)
+
+## Welcome! 👋
+
+Thanks for checking out this front-end coding challenge.
+
+[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects.
+
+**To do this challenge, you need a basic understanding of HTML and CSS.**
+
+## The challenge
+
+Your challenge is to build out this order summary card component and get it looking as close to the design as possible.
+
+You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+
+Your users should be able to:
+
+- See hover states for interactive elements
+
+Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
+
+## Where to find everything
+
+Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design. 
+
+The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. 
+
+If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can [subscribe as a PRO member](https://www.frontendmentor.io/pro).
+
+You will find all the required assets in the `/images` folder. The assets are already optimized.
+
+There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts.
+
+## Building your project
+
+Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
+
+1. Initialize your project as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/).
+2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below.
+3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles.
+4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
+5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
+6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
+
+## Deploying your project
+
+As mentioned above, there are many ways to host your project for free. Our recommend hosts are:
+
+- [GitHub Pages](https://pages.github.com/)
+- [Vercel](https://vercel.com/)
+- [Netlify](https://www.netlify.com/)
+
+You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe).
+
+## Create a custom `README.md`
+
+We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code.
+
+The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like.
+
+Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file.
+
+## Submitting your solution
+
+Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this.
+
+Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community.
+
+## Sharing your solution
+
+There are multiple places you can share your solution:
+
+1. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 
+2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
+3. Share your solution on other social channels like LinkedIn.
+4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/).
+
+We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. 
+
+The more specific you are with your questions the more likely it is that another member of the community will give you feedback.
+
+## Got feedback for us?
+
+We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io.
+
+This challenge is completely free. Please share it with anyone who will find it useful for practice.
+
+**Have fun building!** 🚀

FrontendMentor/newbie/order-summary-component/css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

FrontendMentor/newbie/order-summary-component/css/style.css

@@ -0,0 +1,180 @@
+@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");
+
+/* 
+    Mobile Screen Width: 375 x 709
+    Figma Box : 327 x 567
+    Ratio 0.872 x 0.7997179126 
+    
+    Desktop Width: 1440 x 900
+    Figma Box: 450 x 697
+    Ratio 0.3125 x 0.7744444444
+*/
+:root {
+    /* Colors */
+    --clr-pale-blue: hsl(225, 100%, 94%);
+    --clr-bright-blue: hsl(245, 75%, 52%);
+
+    --clr-very-pale-blue: hsl(225, 100%, 98%);
+    --clr-desaturated-blue: hsl(224, 23%, 55%);
+    --clr-dark-blue: hsl(223, 47%, 23%);
+    --clr-light-purple: hsla(245, 83%, 68%, 1);
+
+    /* Fonts */
+    --fs-p: 1rem;
+    --fw-500: 500;
+    --fw-700: 700;
+    --fw-900: 900;
+
+    /* Border Radii */
+    --br-11: 11px;
+    --br-20: 20px;
+
+    /* Scaling fonts between the left and right sizes */
+    --font-width-15px-16px: clamp(0.94rem, 0.92rem + 0.09vw, 1rem);
+    --font-width-14px-16px: clamp(0.88rem, 0.83rem + 0.19vw, 1rem);
+
+    /* 
+    Used for the Price Plan box and the Proceed to Payment button
+    sensibly these should be two seperate variables in case the
+    components where used in different places */
+    --box-width: 85%;
+
+    --page-background-img: url("../images/pattern-background-mobile.svg");
+}
+
+*,
+::before,
+::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    /* because I want it to affect the link color */
+    color: var(--clr-desaturated-blue);
+}
+
+/* General Formatting */
+
+html,
+body {
+    min-height: 100vh;
+    width: 100%;
+}
+
+body {
+    font-family: "Red Hat Display", sans-serif;
+    background-color: var(--clr-pale-blue);
+}
+
+main {
+    background-image: var(--page-background-img);
+    background-repeat: no-repeat;
+    min-height: inherit;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Order Summary Card formatting */
+
+.card {
+    width: clamp(327px, 32%, 450px);
+    border-radius: var(--br-20);
+    background-color: white;
+    text-align: center;
+
+    box-shadow: 0px 40px 40px -20px rgba(13, 48, 189, 0.151826);
+}
+.card__hero-image {
+    width: 100%;
+    border-radius: var(--br-20) var(--br-20) 0 0;
+    margin-bottom: clamp(2rem, 8vw, 2.815rem);
+}
+
+.card__title {
+    font-weight: var(--fw-900);
+    font-size: clamp(1.375rem, 2.5vw, 1.815rem);
+    line-height: 1.3195;
+    margin-bottom: 1rem;
+    color: var(--clr-dark-blue);
+}
+
+.card__info {
+    font-weight: var(--fw-500);
+    margin: 0 clamp(2rem, 4vw, 3rem);
+    font-size: var(--font-width-15px-16px);
+    margin-bottom: 1.5rem;
+    line-height: 162%;
+}
+
+.card__price-plan {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    width: var(--box-width);
+    margin: 0 auto clamp(1.5rem, 2vw, 2rem) auto;
+    padding: clamp(1rem, 2vw, 1.5315rem) 0;
+
+    border-radius: var(--br-11);
+    background-color: var(--clr-very-pale-blue);
+}
+
+.card__plan-type-area {
+    line-height: 1.3125;
+}
+
+.card__plan-type {
+    color: var(--clr-dark-blue);
+    font-size: var(--font-width-14px-16px);
+    font-weight: var(--fw-900);
+    margin-bottom: clamp(0.1875rem, 0.8vw, 0.375rem);
+}
+.card__plan-price {
+    font-size: var(--font-width-14px-16px);
+    font-weight: 500;
+}
+.card__change-button {
+    font-size: clamp(0.813rem, 0.79rem + 0.09vw, 0.88rem);
+    font-weight: var(--fw-700);
+    color: var(--clr-bright-blue);
+}
+
+.card__button-area a {
+    display: block;
+    text-decoration: none;
+    font-weight: var(--fw-900);
+    font-size: 0.9375rem;
+    line-height: 20px;
+}
+.card__payment-button {
+    color: white;
+    background-color: var(--clr-bright-blue);
+    width: var(--box-width);
+    margin: 0 auto clamp(1.5rem, 4vw, 2rem) auto;
+    box-shadow: 0px 20px 20px rgba(56, 42, 225, 0.190291);
+    border-radius: var(--br-11);
+    padding: 15px 0;
+}
+.card__cancel-button {
+    margin-bottom: clamp(2rem, 8vw, 3rem);
+}
+
+.card__change-button:is(:hover, :focus) {
+    color: var(--clr-light-purple);
+}
+
+.card__payment-button:is(:hover, :focus) {
+    background-color: var(--clr-light-purple);
+}
+
+.card__cancel-button:is(:hover, :focus) {
+    color: var(--clr-dark-blue);
+}
+
+@media screen and (min-width: 376px) {
+    :root {
+        --box-width: 80%;
+        --page-background-img: url("../images/pattern-background-desktop.svg");
+    }
+}

FrontendMentor/newbie/order-summary-component/images/icon-music.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><g fill="none" fill-rule="evenodd"><circle cx="24" cy="24" r="24" fill="#DFE6FB"/><path fill="#717FA6" fill-rule="nonzero" d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"/></g></svg>

FrontendMentor/newbie/order-summary-component/images/pattern-background-desktop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="437"><path fill="#D6E1FF" fill-rule="evenodd" d="M0 349.974c218.558 116.035 460.05 116.035 724.475 0s502.933-116.035 715.525 0V0H0v349.974z"/></svg>

FrontendMentor/newbie/order-summary-component/images/pattern-background-mobile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="375" height="194"><path fill="#D6E1FF" fill-rule="evenodd" d="M-131.808 155.366c97.026 51.512 204.233 51.512 321.62 0 117.388-51.512 223.27-51.512 317.648 0V0h-639.268v155.366z"/></svg>

FrontendMentor/newbie/order-summary-component/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- displays site properly based on user's device -->
+
+  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="./css/reset.css">
+  <link rel="stylesheet" href="./css/style.css">
+
+  <title>Frontend Mentor | Order summary card</title>
+
+  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
+  <style>
+    .attribution {
+      font-size: 11px;
+      text-align: center;
+    }
+
+    .attribution a {
+      color: hsl(228, 45%, 44%);
+    }
+  </style>
+</head>
+
+<body>
+
+  <main>
+    <div class="card">
+      <img class="card__hero-image" src="./images/illustration-hero.svg"
+        alt="Hero Image Person holding an audio device and wearing headphones">
+      <h1 class="card__title">Order Summary</h1>
+      <p class="card__info">
+        You can now listen to millions of songs, audiobooks, and podcasts on any
+        device anywhere you like!
+      </p>
+      <div class="card__price-plan">
+        <!-- maybe price-plan, then price-plan__icon, __plan-type, __plan-price, __change-button? -->
+        <img class="card__icon" src="./images/icon-music.svg" alt="Music icon" aria-hidden="true">
+        <div class="card__plan-type-area">
+          <p class="card__plan-type">Annual Plan</p>
+          <p class="card__plan-price">$59.99/year</p>
+        </div>
+        <a href="#" class="card__change-button">Change</a>
+      </div>
+      <!-- maybe button-area, button-area__payment-button, button-area__cancel-button? -->
+      <div class="card__button-area">
+        <a href="#" class="card__payment-button">Proceed to Payment</a>
+        <a href="#" class="card__cancel-button">Cancel Order</a>
+      </div>
+    </div>
+  </main>
+
+  <!-- <div class="attribution">
+    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
+    Coded by <a href="#">Your Name Here</a>.
+  </div> -->
+</body>
+
+</html>

FrontendMentor/newbie/order-summary-component/style-guide.md

@@ -0,0 +1,32 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+### Primary
+
+- Pale blue: hsl(225, 100%, 94%)
+- Bright blue: hsl(245, 75%, 52%)
+
+### Neutral
+
+- Very pale blue: hsl(225, 100%, 98%)
+- Desaturated blue: hsl(224, 23%, 55%)
+- Dark blue: hsl(223, 47%, 23%)
+
+## Typography
+
+### Body Copy
+
+- Font size (paragraph): 16px
+
+### Font
+
+- Family: [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display)
+- Weights: 500, 700, 900

FrontendMentor/newbie/ping-coming-soon-page-master/.gitignore

@@ -0,0 +1 @@
+.DS_Store

FrontendMentor/newbie/ping-coming-soon-page-master/.jshintrc

@@ -0,0 +1,5 @@
+{
+    "esversion": 6,
+    "browser": true,
+    "strict": "global"
+}

FrontendMentor/newbie/ping-coming-soon-page-master/README.md

@@ -0,0 +1,84 @@
+# Frontend Mentor - Ping coming soon page
+
+![Design preview for the Ping coming soon page coding challenge](./design/desktop-preview.jpg)
+
+## Welcome! 👋
+
+Thanks for checking out this front-end coding challenge.
+
+[Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
+
+**To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.**
+
+## The challenge
+
+Your challenge is to build out this Coming Soon page and get it looking as close to the design as possible.
+
+You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
+
+Your users should be able to: 
+
+- View the optimal layout for the site depending on their device's screen size ✅
+- See hover states for all interactive elements on the page ✅
+- Submit their email address using an `input` field ✅
+- Receive an error message when the `form` is submitted if: ✅
+	- The `input` field is empty. The message for this error should say *"Whoops! It looks like you forgot to add your email"* ✅
+	- The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *"Please provide a valid email address"* ✅
+
+Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
+
+## Where to find everything
+
+Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 
+
+The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
+
+If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page.
+
+You will find all the required assets in the `/images` folder. The assets are already optimized.
+
+There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
+
+## Building your project
+
+Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
+
+1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
+2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
+3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
+4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
+5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
+6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
+7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](https://bit.ly/fm-sizzy). It's a great browser that makes it easy to view your site across multiple devices.
+
+## Deploying your project
+
+As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
+
+1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
+2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
+3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
+
+## Sharing your solution
+
+There are multiple places you can share your solution:
+
+1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
+2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
+3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
+
+## Giving feedback
+
+Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
+
+This challenge is completely free. Please share it with anyone who will find it useful for practice.
+
+**Have fun building!** 🚀
+
+## Community Sponsors
+
+A massive thank you to our community sponsors!
+
+- [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites!
+- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
+- [Dracula PRO](https://bit.ly/fem-dracula) is a beautiful dark theme to help keep you focused and productive while you code. The theme isn't just for your editor either. You can also apply it to your most-used apps like your terminal and even Slack!

FrontendMentor/newbie/ping-coming-soon-page-master/css/style.css

@@ -0,0 +1,321 @@
+@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;600;700&display=swap');
+
+:root {
+    /* primary */
+    font-size: 20px;
+    --site-blue: hsl(223, 87%, 63%); 
+    /* secondary */
+    --site-paleBlue: hsl(223, 100%, 88%);
+    --site-lightRed: hsl(354, 100%, 66%);
+    /* neutral */
+    --site-gray: hsl(0, 0%, 59%);
+    --site-veryDarkBlue: hsl(209, 33%, 12%);
+}
+
+* {
+    margin: 0 auto;
+    padding: 0;
+}
+
+body {
+    font-family: 'Libre Franklin', sans-serif;
+    min-width: 375px;
+}
+
+.flexContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+
+    height:100vh;
+}
+
+.logoSection {
+    margin-top: 4.2rem;
+
+    display: flex;
+    justify-content: center;
+}
+
+.logoSection img {
+    width: 66%;
+}
+
+.titleSection {
+    margin-top: 1.95rem;
+}
+
+.titleSection p {
+    text-align: center;
+}
+
+.titleSection .line1 {
+    font-size: 1.1rem;
+    font-weight: 300;
+    color: var(--site-gray);
+}
+
+.line1 b {
+    color: black;
+    font-weight: 600;
+}
+
+.titleSection .line2 {
+    margin-top: 0.9rem;
+    font-size: 12px;
+    color: var(--site-gray);
+}
+
+.formSection {
+    margin: 1.6rem 0 0 0;
+    text-align: center;
+}
+
+.formSection form {
+    display: flex;
+    flex-direction: column;
+    width: 83%;
+}
+
+.formSection input[type=text] {
+    font-family: 'Libre Franklin', sans-serif;
+    width: calc(100% - 47px); /* shrink width by padding left+right + border */
+
+    color: black;
+    font-size: 12px;
+    font-weight: 300;
+    border: 1px solid var(--site-paleBlue);
+    padding-top: 0.55rem;
+    padding-bottom: 0.55rem;
+    padding-left: 25px;
+    padding-right: 20px;
+    text-align: justify;
+    text-decoration: none;
+    border-radius: 32px;
+}
+
+input[type="text"].errorBorder {
+    border-color: var(--site-lightRed);
+}
+
+.formSection input::placeholder{
+    padding-left: 8px;
+    color: var(--site-paleBlue);;
+}
+
+.formSection button {
+    font-family: 'Libre Franklin', sans-serif;
+    width: 100%;
+    background-color: var(--site-blue);
+    color: white;
+    font-size: 12px;
+    font-weight: 300;
+    border: none;
+    padding: 0.625rem 0;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 32px;
+    box-shadow: 0px 3px 10px 1px var(--site-paleBlue);
+}
+
+.notifyButton.notifyError {
+    transform: translate(0, 1.6rem);
+}
+
+.errorSection {
+    height: 0;
+    padding: 0;
+    transform: translate(0, 0.35rem);
+}
+
+.errorMessage {
+    font-style: italic;
+    font-size: 10px;
+    opacity: 0;
+    color: var(--site-lightRed);
+}
+
+.errorMessage.visible {
+    opacity: 1;
+}
+
+.imageSection {
+    margin-top: 3.4rem;
+    text-align: center;
+    width: 95%;
+}
+
+.imageSection img {
+    width: 100%;
+}
+
+footer {
+    margin-top: auto;
+    text-align: center;
+    /* width: 100vw; */
+}
+.socialButtonsSection {
+    margin-bottom: 1.25rem;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    width: 45%;
+}
+
+.socialButtonsSection a {
+    color: var(--site-blue);
+    width: 100%;
+    height: 100%;
+}
+
+.socialButtonsSection .icon-background {
+    color: var(--site-blue);
+    padding:8px;
+    border-radius: 50%;
+
+    width: 15px;
+    height: 15px;
+    text-align: center;
+    line-height: 15px;
+    vertical-align: middle;
+
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.icon-background:hover {
+    color: white;
+    background-color: var(--site-blue); 
+}
+
+.copyright {
+    color: var(--site-gray);
+    font-size: 10px;
+    text-align: center;
+    margin-bottom: 1.15rem;
+}
+
+/* Feel free to remove these styles or customise in your own stylesheet 👍 */
+.attribution { font-size: 11px; text-align: center; }
+.attribution a i { color: hsl(228, 45%, 44%); }
+
+@media screen and (max-width: 600px) {
+    .flexContainer {
+        width: 90vw;
+    }
+
+    .formSection button {
+        margin-top: 0.55rem;
+    }
+}
+
+@media screen and (min-width: 600px) and (max-width: 1050px) {
+    .flexContainer {
+        width: 75vw;
+    }
+
+    .formSection button {
+        margin-top: 0.55rem;
+    }
+}
+
+
+@media screen and (min-width: 1050px) {
+    .flexContainer {
+        width: 50vw;
+    }
+
+    .logoSection {
+        margin-top: 4.3rem;
+    }
+
+    .logoSection img {
+        width: 100%;
+    }
+
+    .titleSection {
+        margin-top: 2.5rem;
+    }
+
+    .titleSection .line1 {
+        font-weight: 300;
+        letter-spacing: 1.3px;
+        font-size: 45px;
+    }
+
+    .line1 b {
+        font-weight: 700;
+    }
+
+    .titleSection .line2 {
+        margin-top: 0.95rem;
+        font-size: 20px;
+        font-weight: 600;
+    }
+    
+
+    .formSection {
+        margin: 2rem 0 0 0;
+    }
+
+    .formSection form {
+        flex-direction: row;
+        width: 88%;
+    }
+
+    .formSection input[type=text] {
+        flex-basis: 66%;
+
+        font-size: 17px;
+        font-weight: 300;
+        padding-top: 0.85rem;
+        padding-bottom: 0.85rem;
+        order: 2;
+    }
+
+    .formSection button {
+        margin-left: 1rem;
+        flex-basis: 34%;
+
+        font-size: 17px;
+        font-weight: 300;
+
+        padding: 0.85rem 0;
+        box-shadow: 0px 3px 10px 1px var(--site-paleBlue);
+        order: 3;
+    }
+
+    .notifyButton.notifyError {
+        transform: none;
+    }
+    
+    .errorSection {
+        order: 1;
+        height: 0;
+        width: 0;
+        padding: 0;
+        margin: 0;
+        transform: translate(0, 3.2rem);
+    }
+
+    .errorMessage {
+        font-size: 13px;
+        width: 16rem;
+        height: 2rem;
+        overflow: auto;
+        text-align: left;
+        padding-left: 1.25rem;
+    }
+    
+
+    .imageSection {
+        margin-top: 4.3rem;
+        width: 89%;
+    }
+
+    .copyright {
+        font-size: 12px;
+        margin-bottom: 1.75rem;
+    }
+}

FrontendMentor/newbie/ping-coming-soon-page-master/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="86" height="26"><g fill="none"><path fill="#15202A" d="M5.008 25c.555 0 .832-.245.832-.736v-8c0-.235.117-.352.352-.352h4.8c2.603 0 4.699-.635 6.288-1.904 1.59-1.27 2.384-3.056 2.384-5.36 0-1.621-.41-2.987-1.232-4.096-.821-1.11-1.93-1.936-3.328-2.48-1.397-.544-2.981-.816-4.752-.816h-9.6c-.341 0-.512.203-.512.608V24.36c0 .213.048.373.144.48.096.107.272.16.528.16h4.096zm5.216-13.088H6.288c-.17 0-.288-.048-.352-.144-.064-.096-.096-.25-.096-.464V5.832c0-.213.048-.363.144-.448.096-.085.25-.128.464-.128H10c1.195 0 2.144.277 2.848.832.704.555 1.056 1.376 1.056 2.464 0 1.045-.33 1.867-.992 2.464-.661.597-1.557.896-2.688.896zM27.856 25c.32 0 .544-.059.672-.176.128-.117.192-.315.192-.592v-22.4c0-.384-.17-.576-.512-.576h-4.576c-.341 0-.512.203-.512.608v22.464c0 .235.053.405.16.512.107.107.288.16.544.16h4.032zm9.312 0c.235 0 .4-.037.496-.112.096-.075.144-.197.144-.368V10.344c0-.107.037-.17.112-.192.075-.021.155.021.24.128l10.208 14.336c.128.17.245.277.352.32.107.043.256.064.448.064H52.4a.66.66 0 00.432-.144.455.455 0 00.176-.368V1.736c0-.32-.139-.48-.416-.48H49.04c-.384 0-.576.192-.576.576v13.216c0 .235-.053.352-.16.352-.085 0-.192-.085-.32-.256L38.576 1.736c-.15-.213-.277-.347-.384-.4-.107-.053-.288-.08-.544-.08h-3.872c-.384 0-.576.203-.576.608v22.592c0 .363.213.544.64.544h3.328zm30.176.32c1.664 0 3.013-.288 4.048-.864a9.158 9.158 0 002.672-2.24c.15-.17.256-.181.32-.032l.928 2.304c.192.341.47.512.832.512h1.024c.15 0 .267-.043.352-.128a.476.476 0 00.128-.352V13.736a.703.703 0 00-.24-.56c-.16-.139-.39-.208-.688-.208l-8.544-.032c-.341 0-.512.15-.512.448v2.4c0 .192.043.33.128.416.085.085.213.128.384.128h3.872c.235 0 .352.096.352.288 0 .085-.01.15-.032.192l-.064.928c-.235 1.045-.736 1.915-1.504 2.608-.768.693-1.792 1.04-3.072 1.04-1.685 0-2.976-.65-3.872-1.952-.896-1.301-1.344-3.435-1.344-6.4 0-2.837.427-4.907 1.28-6.208.853-1.301 2.101-1.952 3.744-1.952 1.259 0 2.283.363 3.072 1.088.79.725 1.29 1.643 1.504 2.752.043.192.096.325.16.4.064.075.181.112.352.112l4.224-.64c.277-.021.416-.15.416-.384 0-.192-.021-.352-.064-.48-.213-1.173-.752-2.277-1.616-3.312-.864-1.035-1.984-1.872-3.36-2.512-1.376-.64-2.896-.96-4.56-.96-2.176 0-4.096.501-5.76 1.504-1.664 1.003-2.955 2.432-3.872 4.288-.917 1.856-1.376 4.021-1.376 6.496 0 2.41.437 4.528 1.312 6.352.875 1.824 2.117 3.237 3.728 4.24 1.61 1.003 3.493 1.504 5.648 1.504z"/><path fill="#4C7BF3" d="M85.072 25c.32 0 .55-.059.688-.176.139-.117.208-.315.208-.592v-4c0-.363-.16-.544-.48-.544h-4.384a.498.498 0 00-.368.144c-.096.096-.144.24-.144.432v4.064c0 .448.235.672.704.672h3.776z"/></g></svg>