diff --git a/.gitignore b/.gitignore
index 1a721f7..8c1885f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,4 +59,3 @@ Icon
Network Trash Folder
Temporary Items
.apdisk
-
diff --git a/FrontendMentor/newbie/article-preview-component/.gitignore b/FrontendMentor/newbie/article-preview-component/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/FrontendMentor/newbie/article-preview-component/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/README.md b/FrontendMentor/newbie/article-preview-component/README.md
new file mode 100644
index 0000000..41e47b3
--- /dev/null
+++ b/FrontendMentor/newbie/article-preview-component/README.md
@@ -0,0 +1,82 @@
+# Frontend Mentor - Article preview component
+
+
+
+## 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!
diff --git a/FrontendMentor/newbie/article-preview-component/css/reset.css b/FrontendMentor/newbie/article-preview-component/css/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/css/style.css b/FrontendMentor/newbie/article-preview-component/css/style.css
new file mode 100644
index 0000000..66e10f6
--- /dev/null
+++ b/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%); }
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/design/desktop-active-state.jpg b/FrontendMentor/newbie/article-preview-component/design/desktop-active-state.jpg
new file mode 100644
index 0000000..86e95c9
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/design/desktop-active-state.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/design/desktop-design.jpg b/FrontendMentor/newbie/article-preview-component/design/desktop-design.jpg
new file mode 100644
index 0000000..435c175
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/design/desktop-preview.jpg b/FrontendMentor/newbie/article-preview-component/design/desktop-preview.jpg
new file mode 100644
index 0000000..37c18c7
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/design/mobile-active-state.jpg b/FrontendMentor/newbie/article-preview-component/design/mobile-active-state.jpg
new file mode 100644
index 0000000..ef2479f
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/design/mobile-active-state.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/design/mobile-design.jpg b/FrontendMentor/newbie/article-preview-component/design/mobile-design.jpg
new file mode 100644
index 0000000..d6b1f47
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/images/avatar-michelle.jpg b/FrontendMentor/newbie/article-preview-component/images/avatar-michelle.jpg
new file mode 100644
index 0000000..daf9857
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/images/avatar-michelle.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/images/drawers.jpg b/FrontendMentor/newbie/article-preview-component/images/drawers.jpg
new file mode 100644
index 0000000..9104d7f
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/images/drawers.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/images/favicon-32x32.png b/FrontendMentor/newbie/article-preview-component/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/article-preview-component/images/icon-facebook.svg b/FrontendMentor/newbie/article-preview-component/images/icon-facebook.svg
new file mode 100644
index 0000000..0704bd5
--- /dev/null
+++ b/FrontendMentor/newbie/article-preview-component/images/icon-facebook.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/images/icon-pinterest.svg b/FrontendMentor/newbie/article-preview-component/images/icon-pinterest.svg
new file mode 100644
index 0000000..c58f2e2
--- /dev/null
+++ b/FrontendMentor/newbie/article-preview-component/images/icon-pinterest.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/images/icon-share.svg b/FrontendMentor/newbie/article-preview-component/images/icon-share.svg
new file mode 100644
index 0000000..9146496
--- /dev/null
+++ b/FrontendMentor/newbie/article-preview-component/images/icon-share.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/images/icon-twitter.svg b/FrontendMentor/newbie/article-preview-component/images/icon-twitter.svg
new file mode 100644
index 0000000..2daf30b
--- /dev/null
+++ b/FrontendMentor/newbie/article-preview-component/images/icon-twitter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/index.html b/FrontendMentor/newbie/article-preview-component/index.html
new file mode 100644
index 0000000..71fa531
--- /dev/null
+++ b/FrontendMentor/newbie/article-preview-component/index.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Article preview component
+
+
+
+
+
+
+
+
+
+
+
+
+ Shift the overall look and feel by adding these wonderful
+ touches to furniture in your home
+
+
+ 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.
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/js/challenge.js b/FrontendMentor/newbie/article-preview-component/js/challenge.js
new file mode 100644
index 0000000..573cb53
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/notes/desktop-diff-final.png b/FrontendMentor/newbie/article-preview-component/notes/desktop-diff-final.png
new file mode 100644
index 0000000..d4a5690
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/notes/desktop-diff-final.png differ
diff --git a/FrontendMentor/newbie/article-preview-component/notes/desktop-final.jpg b/FrontendMentor/newbie/article-preview-component/notes/desktop-final.jpg
new file mode 100644
index 0000000..4900f56
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/notes/desktop-final.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/notes/desktop-rough.png b/FrontendMentor/newbie/article-preview-component/notes/desktop-rough.png
new file mode 100644
index 0000000..7a5cc24
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/notes/desktop-rough.png differ
diff --git a/FrontendMentor/newbie/article-preview-component/notes/mobile-diff-final.png b/FrontendMentor/newbie/article-preview-component/notes/mobile-diff-final.png
new file mode 100644
index 0000000..ca594c5
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/notes/mobile-diff-final.png differ
diff --git a/FrontendMentor/newbie/article-preview-component/notes/mobile-final.jpg b/FrontendMentor/newbie/article-preview-component/notes/mobile-final.jpg
new file mode 100644
index 0000000..863433b
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/notes/mobile-final.jpg differ
diff --git a/FrontendMentor/newbie/article-preview-component/notes/mobile-rough.png b/FrontendMentor/newbie/article-preview-component/notes/mobile-rough.png
new file mode 100644
index 0000000..98b08ba
Binary files /dev/null and b/FrontendMentor/newbie/article-preview-component/notes/mobile-rough.png differ
diff --git a/FrontendMentor/newbie/article-preview-component/notes/process.md b/FrontendMentor/newbie/article-preview-component/notes/process.md
new file mode 100644
index 0000000..017de1b
--- /dev/null
+++ b/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.
+
+
+
+
+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
+
+
+
+
+Differences from design
+
+
+
+
+---
+
+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:
+
+
+```
+
+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?
\ No newline at end of file
diff --git a/FrontendMentor/newbie/article-preview-component/style-guide.md b/FrontendMentor/newbie/article-preview-component/style-guide.md
new file mode 100644
index 0000000..840c2d1
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/.gitignore b/FrontendMentor/newbie/four-card-feature-section/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/FrontendMentor/newbie/four-card-feature-section/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/README.md b/FrontendMentor/newbie/four-card-feature-section/README.md
new file mode 100644
index 0000000..d89002b
--- /dev/null
+++ b/FrontendMentor/newbie/four-card-feature-section/README.md
@@ -0,0 +1,79 @@
+# Frontend Mentor - Four card feature section
+
+
+
+## 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!
diff --git a/FrontendMentor/newbie/four-card-feature-section/css/style.css b/FrontendMentor/newbie/four-card-feature-section/css/style.css
new file mode 100644
index 0000000..8e4fbf6
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/FrontendMentor/newbie/four-card-feature-section/design/desktop-design.jpg b/FrontendMentor/newbie/four-card-feature-section/design/desktop-design.jpg
new file mode 100644
index 0000000..1993fed
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/design/desktop-preview.jpg b/FrontendMentor/newbie/four-card-feature-section/design/desktop-preview.jpg
new file mode 100644
index 0000000..94936b3
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/design/mobile-design.jpg b/FrontendMentor/newbie/four-card-feature-section/design/mobile-design.jpg
new file mode 100644
index 0000000..ce4ec5d
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/images/favicon-32x32.png b/FrontendMentor/newbie/four-card-feature-section/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/images/icon-calculator.svg b/FrontendMentor/newbie/four-card-feature-section/images/icon-calculator.svg
new file mode 100644
index 0000000..f768d66
--- /dev/null
+++ b/FrontendMentor/newbie/four-card-feature-section/images/icon-calculator.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/images/icon-karma.svg b/FrontendMentor/newbie/four-card-feature-section/images/icon-karma.svg
new file mode 100644
index 0000000..f961782
--- /dev/null
+++ b/FrontendMentor/newbie/four-card-feature-section/images/icon-karma.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/images/icon-supervisor.svg b/FrontendMentor/newbie/four-card-feature-section/images/icon-supervisor.svg
new file mode 100644
index 0000000..c4f5d8f
--- /dev/null
+++ b/FrontendMentor/newbie/four-card-feature-section/images/icon-supervisor.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/images/icon-team-builder.svg b/FrontendMentor/newbie/four-card-feature-section/images/icon-team-builder.svg
new file mode 100644
index 0000000..a9da606
--- /dev/null
+++ b/FrontendMentor/newbie/four-card-feature-section/images/icon-team-builder.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/index.html b/FrontendMentor/newbie/four-card-feature-section/index.html
new file mode 100644
index 0000000..3afa1fd
--- /dev/null
+++ b/FrontendMentor/newbie/four-card-feature-section/index.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Four card feature section
+
+
+
+
+
+
+
+
+
+
Reliable, efficient delivery
+
Powered by Technology
+
Our Artificial Intelligence powered tools use millions of project data points
+ to ensure that your project is successful
+
+
+
+
+
+
+ Supervisor
+
+
+ Monitors activity to identify project roadblocks
+
+
+
+
+
+
+
+
+ Team Builder
+
+
+ Scans our talent network to create the optimal team for your project
+
+
+
+
+
+ Karma
+
+
+ Regularly evaluates our talent to ensure quality
+
+
+
+
+
+
+
+ Calculator
+
+
+ Uses data from past projects to provide better delivery estimates
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final-diff.png b/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final-diff.png
new file mode 100644
index 0000000..33cd184
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final-diff.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final-slider.png b/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final-slider.png
new file mode 100644
index 0000000..bed3a48
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final-slider.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final.png b/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final.png
new file mode 100644
index 0000000..5a121e4
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/desktop-final.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/layout-no-styling(1440x922).png b/FrontendMentor/newbie/four-card-feature-section/notes/layout-no-styling(1440x922).png
new file mode 100644
index 0000000..194cba2
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/layout-no-styling(1440x922).png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/mobile-diff-sidebyside.png b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-diff-sidebyside.png
new file mode 100644
index 0000000..6a990bf
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-diff-sidebyside.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/mobile-difference-basic-styling.png b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-difference-basic-styling.png
new file mode 100644
index 0000000..64ef75b
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-difference-basic-styling.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final-diff.png b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final-diff.png
new file mode 100644
index 0000000..22d3616
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final-diff.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final-side-by-side.png b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final-side-by-side.png
new file mode 100644
index 0000000..44f2cbb
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final-side-by-side.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final.png b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final.png
new file mode 100644
index 0000000..17cb3f6
Binary files /dev/null and b/FrontendMentor/newbie/four-card-feature-section/notes/mobile-final.png differ
diff --git a/FrontendMentor/newbie/four-card-feature-section/notes/process.md b/FrontendMentor/newbie/four-card-feature-section/notes/process.md
new file mode 100644
index 0000000..ce00b26
--- /dev/null
+++ b/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
+
+.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.
+
+
+
+
+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.
+
+
+
+
+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.
+
+
+
+
+
+And these are the final images.
+
+
+
+
+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.
\ No newline at end of file
diff --git a/FrontendMentor/newbie/four-card-feature-section/style-guide.md b/FrontendMentor/newbie/four-card-feature-section/style-guide.md
new file mode 100644
index 0000000..5a362d4
--- /dev/null
+++ b/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
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/.gitignore b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/README.md b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/README.md
new file mode 100644
index 0000000..b3309eb
--- /dev/null
+++ b/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
+
+
+
+## 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!
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/reset.css b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/css/style.css
new file mode 100644
index 0000000..08205c8
--- /dev/null
+++ b/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;}
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg
new file mode 100644
index 0000000..36ccb1a
Binary files /dev/null and b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg
new file mode 100644
index 0000000..474d35b
Binary files /dev/null and b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg
new file mode 100644
index 0000000..9c5c70a
Binary files /dev/null and b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg
new file mode 100644
index 0000000..95857ad
--- /dev/null
+++ b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg
new file mode 100644
index 0000000..772b03b
--- /dev/null
+++ b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/illustration-mockups.svg b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/illustration-mockups.svg
new file mode 100644
index 0000000..73ab59c
--- /dev/null
+++ b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/illustration-mockups.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/logo.svg b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/logo.svg
new file mode 100644
index 0000000..90d5c32
--- /dev/null
+++ b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/images/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/index.html b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/index.html
new file mode 100644
index 0000000..5631438
--- /dev/null
+++ b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Huddle landing page with single introductory section
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Build The Community Your Fans Will Love
+
+
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.
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/style-guide.md b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/style-guide.md
new file mode 100644
index 0000000..350f892
--- /dev/null
+++ b/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 -
+Facebook -
+Instagram -
\ No newline at end of file
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/image-diff-1.png b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/image-diff-1.png
new file mode 100644
index 0000000..7ae10fa
Binary files /dev/null and b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/image-diff-1.png differ
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/img-diff-2-desktop-near-enough.png b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/img-diff-2-desktop-near-enough.png
new file mode 100644
index 0000000..20633a3
Binary files /dev/null and b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/img-diff-2-desktop-near-enough.png differ
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/mob-img-diff-1.png b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/mob-img-diff-1.png
new file mode 100644
index 0000000..6c57f5f
Binary files /dev/null and b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/mob-img-diff-1.png differ
diff --git a/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/myProcess.md b/FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/work-through/myProcess.md
new file mode 100644
index 0000000..a214158
--- /dev/null
+++ b/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)
+ 
+ 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
+ 
+ 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
+ 
+ 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.
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/.gitignore b/FrontendMentor/newbie/order-summary-component/.gitignore
new file mode 100644
index 0000000..d13464a
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/README-template.md b/FrontendMentor/newbie/order-summary-component/README-template.md
new file mode 100644
index 0000000..546ec9a
--- /dev/null
+++ b/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
+
+
+
+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
+
Some HTML code I'm proud of
+```
+```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.**
diff --git a/FrontendMentor/newbie/order-summary-component/README.md b/FrontendMentor/newbie/order-summary-component/README.md
new file mode 100644
index 0000000..c14fee2
--- /dev/null
+++ b/FrontendMentor/newbie/order-summary-component/README.md
@@ -0,0 +1,91 @@
+# Frontend Mentor - Order summary card
+
+
+
+## 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!** 🚀
diff --git a/FrontendMentor/newbie/order-summary-component/css/reset.css b/FrontendMentor/newbie/order-summary-component/css/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/css/style.css b/FrontendMentor/newbie/order-summary-component/css/style.css
new file mode 100644
index 0000000..37a3e01
--- /dev/null
+++ b/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");
+ }
+}
diff --git a/FrontendMentor/newbie/order-summary-component/design/active-states.jpg b/FrontendMentor/newbie/order-summary-component/design/active-states.jpg
new file mode 100644
index 0000000..0edc363
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/design/active-states.jpg differ
diff --git a/FrontendMentor/newbie/order-summary-component/design/desktop-design.jpg b/FrontendMentor/newbie/order-summary-component/design/desktop-design.jpg
new file mode 100644
index 0000000..df5326f
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/order-summary-component/design/desktop-preview.jpg b/FrontendMentor/newbie/order-summary-component/design/desktop-preview.jpg
new file mode 100644
index 0000000..4e2b6b2
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/order-summary-component/design/finished-diffs-desktop.png b/FrontendMentor/newbie/order-summary-component/design/finished-diffs-desktop.png
new file mode 100644
index 0000000..0cd3ab0
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/design/finished-diffs-desktop.png differ
diff --git a/FrontendMentor/newbie/order-summary-component/design/finished-diffs-mobile.png b/FrontendMentor/newbie/order-summary-component/design/finished-diffs-mobile.png
new file mode 100644
index 0000000..5e2a370
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/design/finished-diffs-mobile.png differ
diff --git a/FrontendMentor/newbie/order-summary-component/design/mobile-design-per-figma.png b/FrontendMentor/newbie/order-summary-component/design/mobile-design-per-figma.png
new file mode 100644
index 0000000..81d0b1d
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/design/mobile-design-per-figma.png differ
diff --git a/FrontendMentor/newbie/order-summary-component/design/mobile-design.jpg b/FrontendMentor/newbie/order-summary-component/design/mobile-design.jpg
new file mode 100644
index 0000000..3077627
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/order-summary-component/images/favicon-32x32.png b/FrontendMentor/newbie/order-summary-component/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/order-summary-component/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/order-summary-component/images/icon-music.svg b/FrontendMentor/newbie/order-summary-component/images/icon-music.svg
new file mode 100644
index 0000000..1421b03
--- /dev/null
+++ b/FrontendMentor/newbie/order-summary-component/images/icon-music.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/images/illustration-hero.svg b/FrontendMentor/newbie/order-summary-component/images/illustration-hero.svg
new file mode 100644
index 0000000..c7f3534
--- /dev/null
+++ b/FrontendMentor/newbie/order-summary-component/images/illustration-hero.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/images/pattern-background-desktop.svg b/FrontendMentor/newbie/order-summary-component/images/pattern-background-desktop.svg
new file mode 100644
index 0000000..c6e640c
--- /dev/null
+++ b/FrontendMentor/newbie/order-summary-component/images/pattern-background-desktop.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/images/pattern-background-mobile.svg b/FrontendMentor/newbie/order-summary-component/images/pattern-background-mobile.svg
new file mode 100644
index 0000000..905cb4b
--- /dev/null
+++ b/FrontendMentor/newbie/order-summary-component/images/pattern-background-mobile.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/index.html b/FrontendMentor/newbie/order-summary-component/index.html
new file mode 100644
index 0000000..845e9d2
--- /dev/null
+++ b/FrontendMentor/newbie/order-summary-component/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Order summary card
+
+
+
+
+
+
+
+
+
+
+
Order Summary
+
+ You can now listen to millions of songs, audiobooks, and podcasts on any
+ device anywhere you like!
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/order-summary-component/style-guide.md b/FrontendMentor/newbie/order-summary-component/style-guide.md
new file mode 100644
index 0000000..113b542
--- /dev/null
+++ b/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
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/.gitignore b/FrontendMentor/newbie/ping-coming-soon-page-master/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/.jshintrc b/FrontendMentor/newbie/ping-coming-soon-page-master/.jshintrc
new file mode 100644
index 0000000..6d41a78
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/.jshintrc
@@ -0,0 +1,5 @@
+{
+ "esversion": 6,
+ "browser": true,
+ "strict": "global"
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/README.md b/FrontendMentor/newbie/ping-coming-soon-page-master/README.md
new file mode 100644
index 0000000..a20346a
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/README.md
@@ -0,0 +1,84 @@
+# Frontend Mentor - Ping coming soon page
+
+
+
+## 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!
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/css/style.css b/FrontendMentor/newbie/ping-coming-soon-page-master/css/style.css
new file mode 100644
index 0000000..9049219
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-design.jpg b/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-design.jpg
new file mode 100644
index 0000000..d4d79d2
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-hover-error-states.jpg b/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-hover-error-states.jpg
new file mode 100644
index 0000000..44f18b4
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-hover-error-states.jpg differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-preview.jpg b/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-preview.jpg
new file mode 100644
index 0000000..a44be2a
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-design-375x812.jpg b/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-design-375x812.jpg
new file mode 100644
index 0000000..ade809b
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-design-375x812.jpg differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-design.jpg b/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-design.jpg
new file mode 100644
index 0000000..ade809b
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-error-state.jpg b/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-error-state.jpg
new file mode 100644
index 0000000..b075941
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/design/mobile-error-state.jpg differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/images/favicon-32x32.png b/FrontendMentor/newbie/ping-coming-soon-page-master/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/images/illustration-dashboard.png b/FrontendMentor/newbie/ping-coming-soon-page-master/images/illustration-dashboard.png
new file mode 100644
index 0000000..8bea4fb
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/images/illustration-dashboard.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/images/logo.svg b/FrontendMentor/newbie/ping-coming-soon-page-master/images/logo.svg
new file mode 100644
index 0000000..d3455a8
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/images/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/index.html b/FrontendMentor/newbie/ping-coming-soon-page-master/index.html
new file mode 100644
index 0000000..bfa6dfb
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/index.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Ping coming soon page
+
+
+
+
+
+
+
+
+
+
+
+
We are launching soon!
+
Subscribe and get notified
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/js/script.js b/FrontendMentor/newbie/ping-coming-soon-page-master/js/script.js
new file mode 100644
index 0000000..61bdd37
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/js/script.js
@@ -0,0 +1,105 @@
+"use strict";
+
+const console = window.console;
+const emailInput = document.getElementById("emailInput");
+const errorMessage = document.getElementById("errorMessage");
+const errorSection = document.getElementById("errorSection");
+const notifyButton = document.getElementById("notifyButton");
+
+const errorMessageForgotAddress = "Whoops! It looks like you forgot to add your email";
+const errorMessageInvalidAddress = "Please provide a valid email address";
+
+/*
+* this is my "simple" regex for email addresses. It does not cover all the possibilities that are allowed
+* for the local and domain parts. For a more "correct" / comprehensive regex, there is one at
+* https://stackoverflow.com/questions/3844431/are-email-addresses-allowed-to-contain-non-alphanumeric-characters
+*
+* For local part you can use ASCII:
+* Latin letters A - Z a - z
+* digits 0 - 9
+* special characters !#$%&'*+-/=?^_`{|}~
+* dot ., that it is not first or last, and not in sequence
+* space and "(),:;<>@[] characters are allowed with restrictions (they are only allowed inside a quoted string, a backslash or double-quote must be preceded by a backslash)
+* Plus since 2012 you can use international characters above U+007F, encoded as UTF-8.
+*
+* Domain part is more restricted:
+* Latin letters A - Z a - z
+* digits 0 - 9
+* hyphen -, that is not first or last, multiple hyphens in sequence are allowed.
+*
+* Recommended regex is: ^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})
+*/
+const validEmailFormat = /^[A-Za-z0-9][\w\+]*@[A-Za-z0-9]{3,}\.[A-Za-z]{2,}$/i;
+
+
+/*
+* Don't quite see the point in this, setting "type=email" does some validation
+* Setting the input to "required" prevents submitting an empty field
+*
+* Only benefit I see is the being able to set an error message
+* Maybe one form of solution is doing exactly that. Use onclick event on the button
+* if the field is empty, unhide the error field
+*/
+function validateEmailAddress() {
+ const submittedEmailAddress = document.forms.emailForm.emailInput.value;
+ // test email is valid via regex
+ const isValidEmailAddress = validEmailFormat.test(submittedEmailAddress);
+
+ if (submittedEmailAddress.length === 0) {
+ showError(errorMessageForgotAddress);
+ return false;
+ } else if (!isValidEmailAddress) {
+ showError(errorMessageInvalidAddress);
+ return false;
+ } else {
+ return true;
+ }
+}
+
+function showError(message) {
+ errorMessage.innerText = message;
+ errorMessage.classList.add("visible");
+ emailInput.classList.add("errorBorder");
+ notifyButton.classList.add("notifyError");
+ // errorSection.hidden = false;
+}
+
+/*
+* (Possibly) To be called as user types in the email field. If an error message has been shown,
+* then hide the message and return the fields to normal
+*/
+function clearError() {
+ errorMessage.classList.remove("visible");
+ emailInput.classList.remove("errorBorder");
+ notifyButton.classList.remove("notifyError");
+ // errorSection.hidden = true;
+}
+
+function testRegex() {
+ console.log("Should all be false");
+ console.log(validEmailFormat.test("submittedEmailAddress"));
+ console.log(validEmailFormat.test("s@.NET"));
+ console.log(validEmailFormat.test("@"));
+ console.log(validEmailFormat.test("@."));
+ console.log(validEmailFormat.test("@.net"));
+ console.log(validEmailFormat.test("@tarasis.net"));
+ console.log(validEmailFormat.test("adsadasds@"));
+ console.log(validEmailFormat.test("__submittedEmailAddress"));
+ console.log(validEmailFormat.test("spam@tarasis.99"));
+ console.log(validEmailFormat.test("rob@.net"));
+ console.log(validEmailFormat.test("spam@tarasis"));
+ console.log(validEmailFormat.test("spam@tarasis.a"));
+ console.log(validEmailFormat.test("s@ta.net"));
+ console.log(validEmailFormat.test("_@tarasis.net"));
+ console.log(validEmailFormat.test("_3@tarasis.net"));
+
+ console.log("\n Should all be true");
+ console.log(validEmailFormat.test("spam@tarasis.net"));
+ console.log(validEmailFormat.test("rob@tad.io"));
+ console.log(validEmailFormat.test("s@tarasis.net"));
+ console.log(validEmailFormat.test("s@tarasis.net"));
+ console.log(validEmailFormat.test("s_@tarasis.net"));
+ console.log(validEmailFormat.test("s+blah@tarasis.net")); // this can be true, some servers use this for filtering
+}
+
+// testRegex();
\ No newline at end of file
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/style-guide.md b/FrontendMentor/newbie/ping-coming-soon-page-master/style-guide.md
new file mode 100644
index 0000000..36bf5c5
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/style-guide.md
@@ -0,0 +1,43 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px x 812px (design file is 750x1624)
+- Desktop: 1440px x 1024px
+
+## Colors
+
+### Primary
+
+- Blue: hsl(223, 87%, 63%)
+
+### Secondary
+
+- Pale Blue: hsl(223, 100%, 88%)
+- Light Red: hsl(354, 100%, 66%)
+
+### Neutral
+
+- Gray: hsl(0, 0%, 59%)
+- Very Dark Blue: hsl(209, 33%, 12%)
+
+## Typography
+
+### Body Copy
+
+- Font size: 20px
+
+### Fonts
+
+- Family: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin)
+- Weights: 300, 600, 700
+
+## 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)
\ No newline at end of file
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/awful-transition.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/awful-transition.png
new file mode 100644
index 0000000..888799a
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/awful-transition.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/desktop-diff.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/desktop-diff.png
new file mode 100644
index 0000000..e35b121
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/desktop-diff.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-desktop-1440x1024.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-desktop-1440x1024.png
new file mode 100644
index 0000000..d734479
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-desktop-1440x1024.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-desktop-diff-1440x1024.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-desktop-diff-1440x1024.png
new file mode 100644
index 0000000..b94f086
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-desktop-diff-1440x1024.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-mobile-375x812.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-mobile-375x812.png
new file mode 100644
index 0000000..e4eed42
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-mobile-375x812.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-mobile-diff-375x812.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-mobile-diff-375x812.png
new file mode 100644
index 0000000..7045074
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/final-mobile-diff-375x812.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/mobile-diff.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/mobile-diff.png
new file mode 100644
index 0000000..352f57a
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/mobile-diff.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/mobile-error-diff.png b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/mobile-error-diff.png
new file mode 100644
index 0000000..f5e52c8
Binary files /dev/null and b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/mobile-error-diff.png differ
diff --git a/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/myProcess.md b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/myProcess.md
new file mode 100644
index 0000000..ed286db
--- /dev/null
+++ b/FrontendMentor/newbie/ping-coming-soon-page-master/work-through/myProcess.md
@@ -0,0 +1,117 @@
+6th Sept 2020
+
+Next project, decided to go for something slightly different with a little JavaScript required.
+Added basic files for css and javascript, including a .jshintrc file
+
+```
+{
+ "esversion": 6,
+ "browser": true,
+ "strict": "global"
+}
+```
+
+Set up basic styling into the CSS from the style doc. Add colors, font + sizes.
+
+Add font awesome to index.html + setup attribution
+
+Add basic tags to index.html for header/main/footer, then in main splitting into 3, text headings, form and dashboard illustration.
+
+__Q should the copyright be added to the footer or the bottom of the main????__
+
+Started mostly with mobile
+
+spent the morning struggling to get flex to work the way I wanted. Got there but also realised that I didn't need to use it the way I did. *facepalm*
+
+Continue to play with positioning rather than focusing on main styling
+
+Nudge screenshot nudge screenshot nudge screenshot *sigh*
+I'm not OCD I swear ...
+
+Realised better to social icons into footer and move the footer out of the flex container, and clamp it to the bottom.
+
+So mobile is virtually there. The Ping! logo is slightly off, as is the "We are launching soon!"
+So close *sigh*
+
+Day break
+
+Spent 20 minutes playing with mobile positioning. Crazy I know, but its like __near__ spot on.
+
+
+
+Worked on the desktop matching. Went much quicker, and getting faster at eyeballing sizes/size differences
+Was easier working on mobile first, and then adjusted for desktop on this one.
+
+
+
+Now to remove extra adjustments that aren't needed (because they are duplicates of further up the page.)
+
+Final steps:
+Add JS error checking on submit button (valid email address, and error on submit on an empty field (although my preference really is disable the button if nothing is in the field))
+ An error will trigger a text line to appear in red
+ And change the border color of the input email field to red.
+Hover States for Social Buttons (flip colors)
+
+Attempted to use hover state to change the background of the fa-stack but it wasn't triggering. Could only change the color of the item at the top of the stack (i.e the social icon)
+Learnt you can change css of other elemnts when hovering over a different one ... sorta. Has to be a child you are changing, https://stackoverflow.com/questions/19121223/css-change-an-element-content-on-hover-from-different-element
+
+Next Day:
+
+Realised I had to change a few things. Change the input field from `type="email"` to `type="text"` so that I can do the field validation.
+
+Added a div that starts as hidden and has no text
+
+Added some css styling for the text color, and added an error class for changing the input fields border
+
+In JavaScript created a couple of functions, the first that has to return true/false when the user presses "Notify Me" (basically onsubmit event), does some validation of address length, and address structure.
+
+The other method reveals the hidden div and sets the input fields border to red.
+
+There is a third method that I couldn't decide about using. It will clear the error message. The idea being that as soon as the user starts typing again in the field that the error is cleared. (or better yet, when the field gets focus again. I can check for that? )
+
+Created a simplistic regex for email address validation, with some test cases to check my logic. I'm still learning regex, and I don't want to spend the time learning all the combinations for email addresses.
+
+I did research and find a more "correct" regex that I could use, but I will stick with my for this sample.
+
+Played with alignment so mobile & mobile error are close.
+
+
+
+Swapped method of doing the circles around the social icons. I would have preferred the stacks but I couldn't figure out how to put a thin border around a fa-circle
+
+BUGS:
+* ~~when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page.~~
+* ~~because I used attacked circles I can't just change the background to blue for hover. Need to either sub in a filled circle on hover OR swap to manually creating the circle~~
+* ~~transitions sizes between 600 and about 800 look wrong / bad / odd~~ (improved but thats it)
+
+The transition thing is really bad
+
+
+
+How to better handle this?????? Should be dynamic font sizing & padding I guess?
+I have a working solution the error message on the 1440x1024 resolution but it doesn't look good/work on the in between resolutions. Positioning should be calculated, based on resolution
+
+To Research:
+* Dynamic font sizing to look nicer transitioning up.
+
+Found a formula to scale the fonts, tried to use it to work with the view port width scaling but it wouldn't work.
+
+Fixed positioning of the footer section and social buttons. Needed it back in the flexbox, and set the margin-top to auto to fill up the space
+
+Last thing is my hack for the error when email field and button are in a row. How to position the text relative to the input field? Can I hide it behind it and move it down? If its in the same row, then it takes up space which we don't want, hence the 0 width (zero height for when in column)
+
+Ergh. Want to be done with this. Frustrating myself.
+
+MY GAWD. Eureka, just realised that what I want to use is Flexbox ordering. By doing this, the error message is first, and all I need to do is shift it downwards, no horizontal translation needed. PERFECT.
+
+Final forms:
+
+Desktop:
+
+
+
+
+Mobile:
+
+
+
diff --git a/FrontendMentor/newbie/profile-card-component/.gitignore b/FrontendMentor/newbie/profile-card-component/.gitignore
new file mode 100644
index 0000000..195d48c
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/.gitignore
@@ -0,0 +1,17 @@
+# 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
\ No newline at end of file
diff --git a/FrontendMentor/newbie/profile-card-component/README-template.md b/FrontendMentor/newbie/profile-card-component/README-template.md
new file mode 100644
index 0000000..357222c
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/README-template.md
@@ -0,0 +1,108 @@
+# Frontend Mentor - Profile card component solution
+
+This is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ). 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
+
+- Build out the project to the designs provided
+
+### Screenshot
+
+
+
+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
+
Some HTML code I'm proud of
+```
+```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.**
diff --git a/FrontendMentor/newbie/profile-card-component/README.md b/FrontendMentor/newbie/profile-card-component/README.md
new file mode 100644
index 0000000..de06a10
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/README.md
@@ -0,0 +1,87 @@
+# Frontend Mentor - Profile card component
+
+
+
+## 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 profile 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.
+
+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!** 🚀
diff --git a/FrontendMentor/newbie/profile-card-component/css/reset.css b/FrontendMentor/newbie/profile-card-component/css/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-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;
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/profile-card-component/css/style.css b/FrontendMentor/newbie/profile-card-component/css/style.css
new file mode 100644
index 0000000..3e001b6
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/css/style.css
@@ -0,0 +1,166 @@
+@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');
+
+/* sizes: 1440x720 , 375 × 667 */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-cyan: hsl(185, 75%, 39%);
+ --dark-grayish-blue: hsl(227, 10%, 46%);
+ --very-dark-desaturated-blue: hsl(229, 23%, 23%);
+ --dark-gray: hsl(0, 0%, 59%);
+ --border-gray: hsla(228, 9%, 92%, 1);
+
+ /* default font stuff */
+ --page-base-font-size: 16px; /* for rem calculations*/
+ --default-font-size: 18px;
+ --location-font-size: 14px;
+ --label-font-size: 10px;
+}
+
+html {
+ font-size: var(--page-base-font-size);
+ height: 100%;
+}
+
+body {
+ background-color: var(--dark-cyan);
+ font-size: var(--default-font-size);
+ font-weight: 700;
+ font-family: 'Kumbh Sans', sans-serif;
+ color: var(--very-dark-desaturated-blue);
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ margin: 0 auto;
+ height: 100%;
+}
+
+.card {
+ background-color: white;
+
+ box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835);
+ border-radius: 15px;
+ text-align: center;
+
+ width: min(87vw, 350px);
+}
+
+.cardHeader {
+ background: url(../images/bg-pattern-card.svg);
+ width: 100%;
+ height: 140px;
+ border-radius: 15px 15px 0 0;
+}
+
+.photo {
+ position: relative;
+ margin: 0 auto;
+ background: url(../images/image-victor.jpg);
+ background-size: contain;
+ width: 96px;
+ height: 96px;
+
+ border-radius: 50%;
+ top: calc(100% - 96px/2);
+}
+
+.photo:after {
+ border-radius: 50%;
+ padding: 5px;
+ border: 5px solid white;
+ position: absolute;
+ content: '';
+ top: -5px;
+ left: -5px;
+ bottom: -5px;
+ right: -5px;
+ }
+
+.nameAndAge {
+ margin-top: 4.5rem;
+ display: inline-flex;
+ padding-bottom: 0.25rem;
+}
+
+.name, .stat {
+ font-weight: bold;
+}
+
+.border {
+ border: 1px solid var(--border-gray);
+ margin-top: 1.5rem;
+}
+
+.stats {
+ display: flex;
+ justify-content: space-evenly;
+ margin-top: 1.5rem;
+ padding-bottom: 1.5rem;
+}
+
+.age {
+ font-weight: 400;
+ color: var(--dark-grayish-blue);
+ margin-left: 0.53125rem;
+}
+
+.location {
+ font-weight: 400;
+ font-size: var(--location-font-size);
+
+ margin-top: 0.5rem;
+ padding-bottom: 0.25rem;
+}
+
+.label {
+ font-weight: 400;
+ font-size: var(--label-font-size);
+ color: var(--dark-grayish-blue);
+ letter-spacing: 1.5px;
+
+ margin-top: 0.5625rem;
+ padding-bottom: 0.1875rem;
+}
+
+.topCircle, .bottomCircle {
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
+ background-size: auto;
+ transform: translate(-50%, -50%);
+ z-index: -1;
+ opacity: 0.75;
+}
+
+.topCircle {
+ background: url(../images/bg-pattern-top.svg) no-repeat bottom right;
+
+ top: 0;
+ left: 0;
+}
+
+.bottomCircle {
+ background: url(../images/bg-pattern-bottom.svg) no-repeat top left;
+
+ top: 100%;
+ left: 100%;
+}
+
+footer {
+ position: absolute;
+ bottom: 1rem;
+}
+
+.attribution {
+ font-size: 11px;
+ text-align: center;
+ bottom: 1rem;
+}
+.attribution a { color: hsl(228, 45%, 44%); }
diff --git a/FrontendMentor/newbie/profile-card-component/design/desktop-design.jpg b/FrontendMentor/newbie/profile-card-component/design/desktop-design.jpg
new file mode 100644
index 0000000..57b442b
Binary files /dev/null and b/FrontendMentor/newbie/profile-card-component/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/profile-card-component/design/desktop-preview.jpg b/FrontendMentor/newbie/profile-card-component/design/desktop-preview.jpg
new file mode 100644
index 0000000..d83cb14
Binary files /dev/null and b/FrontendMentor/newbie/profile-card-component/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/profile-card-component/design/mobile-design.jpg b/FrontendMentor/newbie/profile-card-component/design/mobile-design.jpg
new file mode 100644
index 0000000..cf588cb
Binary files /dev/null and b/FrontendMentor/newbie/profile-card-component/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/profile-card-component/images/bg-pattern-bottom.svg b/FrontendMentor/newbie/profile-card-component/images/bg-pattern-bottom.svg
new file mode 100644
index 0000000..216cdde
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/images/bg-pattern-bottom.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/profile-card-component/images/bg-pattern-card.svg b/FrontendMentor/newbie/profile-card-component/images/bg-pattern-card.svg
new file mode 100644
index 0000000..5289dca
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/images/bg-pattern-card.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/profile-card-component/images/bg-pattern-top.svg b/FrontendMentor/newbie/profile-card-component/images/bg-pattern-top.svg
new file mode 100644
index 0000000..0c4a24b
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/images/bg-pattern-top.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/profile-card-component/images/favicon-32x32.png b/FrontendMentor/newbie/profile-card-component/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/profile-card-component/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/profile-card-component/images/image-victor.jpg b/FrontendMentor/newbie/profile-card-component/images/image-victor.jpg
new file mode 100644
index 0000000..e1b20b2
Binary files /dev/null and b/FrontendMentor/newbie/profile-card-component/images/image-victor.jpg differ
diff --git a/FrontendMentor/newbie/profile-card-component/index.html b/FrontendMentor/newbie/profile-card-component/index.html
new file mode 100644
index 0000000..0b53c90
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Profile card component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Victor Crest
+
+
+ 26
+
+
+
+ London
+
+
+
+
+
+
80K
+
Followers
+
+
+
803K
+
Likes
+
+
+
1.4K
+
Photos
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/profile-card-component/style-guide.md b/FrontendMentor/newbie/profile-card-component/style-guide.md
new file mode 100644
index 0000000..efe7aae
--- /dev/null
+++ b/FrontendMentor/newbie/profile-card-component/style-guide.md
@@ -0,0 +1,31 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+### Primary
+
+Dark cyan: hsl(185, 75%, 39%)
+Very dark desaturated blue: hsl(229, 23%, 23%)
+Dark grayish blue: hsl(227, 10%, 46%)
+
+### Neutral
+
+Dark gray: hsl(0, 0%, 59%)
+
+## Typography
+
+### Body Copy
+
+- Font size (name and stats): 18px
+
+### Font
+
+- Family: [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans)
+- Weights: 400, 700
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/.gitignore b/FrontendMentor/newbie/single-price-grid-component-master/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/FrontendMentor/newbie/single-price-grid-component-master/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/README.md b/FrontendMentor/newbie/single-price-grid-component-master/README.md
new file mode 100644
index 0000000..b074000
--- /dev/null
+++ b/FrontendMentor/newbie/single-price-grid-component-master/README.md
@@ -0,0 +1,76 @@
+# Frontend Mentor - Single Price Grid Component
+
+
+
+## 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 users should be able to:
+
+- View the optimal layout for the component depending on their device's screen size
+- See a hover state on desktop for the Sign Up call-to-action
+
+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!
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/css/style.css b/FrontendMentor/newbie/single-price-grid-component-master/css/style.css
new file mode 100644
index 0000000..bc81393
--- /dev/null
+++ b/FrontendMentor/newbie/single-price-grid-component-master/css/style.css
@@ -0,0 +1,272 @@
+@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
+
+/* -- Basic Styling -- */
+
+:root {
+ /* setting base to 20px to make my life nicer working with rem */
+ font-size: 20px;
+ /* primary site colours */
+ --site-cyan: hsl(179, 62%, 43%);
+ --site-bright-yellow: hsl(71, 73%, 54%);
+ /* secondary colours, not defined in style guide */
+ --site-greener-cyan: rgb(0, 195, 192);
+ /* neutral site colours */
+ --site-light-gray: hsl(204, 43%, 93%);
+ --site-grayish-blue: hsl(218, 22%, 67%);
+ --box-border-radius: 8px;
+ font-weight: 400;
+
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* -- General Styling -- */
+
+body {
+ /* per the style guide, the body copy is 16px */
+ font-size: 16px;
+ font-family: 'Karla', sans-serif;
+ width: 85vw;
+ height: 100vh;
+ margin: 0 auto;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-content: center;
+ /* align-items: center; */
+
+ background-color: var(--site-light-gray);
+}
+
+.container {
+ box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5);
+}
+
+.box {
+ padding-left: 2.3rem;
+ padding-right: 2.3rem;
+ padding-top: 1.4rem;
+ padding-bottom: 1.4rem;
+}
+
+.heading {
+ /* margin-top: 1.5rem; */
+ color: white;
+ font-size: 0.95rem;
+ /* font-weight: 700; */
+
+}
+
+/* Specific stylings */
+
+.topRow {
+ padding-top: 2.1rem;
+ padding-bottom: 2.4rem;
+ background-color: white;
+ border-top-left-radius: var(--box-border-radius);
+ border-top-right-radius: var(--box-border-radius);
+}
+
+.topRow .heading {
+ color: var(--site-cyan);
+ font-size: 1.20rem;
+}
+
+.quickSell {
+ margin-top: 0.7rem;
+ color: var(--site-bright-yellow);
+ font-size: 0.9rem;
+}
+.sellBlurb {
+ margin-top: 0.75rem;
+ color: gray;
+ font-size: 0.75rem;
+ line-height: 1.2rem;
+}
+.bottomRow {
+ display: flex;
+ flex-direction: column;
+
+}
+.pricingBox {
+ background-color: var(--site-cyan);
+}
+.priceRow {
+ display: flex;
+ align-items: center;
+ margin-top: 1rem;
+}
+.price {
+ color: white;
+ font-size: 1.5rem;
+
+}
+.pricePeriod {
+ color: var(--site-greener-cyan);
+ font-size: 1rem;
+ margin-left: 0.5rem;
+}
+.sell {
+ margin-top: 0.5rem;
+ color: white;
+}
+.signupButton {
+ text-align: center;
+ display: block;
+ margin-top: 1.5rem;
+ background-color: var(--site-bright-yellow);
+ color: white;
+ /* width: 85%; */
+ /* height: 20%; */
+ padding: 13px 3.25rem;
+ /* margin-left: auto; */
+ /* margin-right: auto; */
+ /* align-self: center; */
+ justify-content: center;
+ border-radius: 5px;
+ font-weight: 700;
+
+
+}
+.whyUsBox {
+ background-color: var(--site-greener-cyan);
+ border-bottom-left-radius: var(--box-border-radius);
+ border-bottom-right-radius: var(--box-border-radius);
+
+}
+.blurb {
+ margin-top: 0.75rem;
+}
+
+.blurb .unstyledList {
+ list-style: none;
+ font-size: 16px;
+ color: var(--site-light-gray);
+ line-height: 1rem;
+}
+
+footer {
+ text-align: center;
+ position: fixed;
+ bottom: 0;
+ /* margin-top: auto; */
+}
+
+/* Feel free to remove these styles or customise in your own stylesheet 👍 */
+ .attribution { font-size: 11px; text-align: center;
+ /* visibility: hidden; */
+ }
+ .attribution a { color: hsl(228, 45%, 44%); }
+
+/**
+* * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
+* TODO: Tweak transition point later
+*/
+@media screen and (max-width: 500px) {
+ .topRow {
+ }
+
+ .topRow .heading {
+ margin-top: 0.4rem;
+ font-size: 1.05rem;
+ }
+
+ .box {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
+ }
+
+ .topRow.box {
+ padding-top: 0.6rem;
+ padding-bottom: 1.95rem;
+ }
+
+ .quickSell {
+ margin-top: 1.20rem;
+ font-size: 0.8rem;
+ }
+
+ .sellBlurb {
+ margin-top: 0.9rem;
+ font-size: 0.65rem;
+ }
+
+ .pricingBox.box {
+ padding-bottom: 1.25rem;
+ }
+
+ .pricingBox .heading {
+ font-size: 0.9rem;
+ }
+
+ .priceRow {
+ display: flex;
+ align-items: center;
+ margin-top: 0.8rem;
+ }
+ .price {
+ }
+ .pricePeriod {
+ }
+ .sell {
+ margin-top: 0.35rem;
+ }
+ .signupButton {
+ margin-top: 1.5rem;
+ padding: 13px 3.25rem;
+
+ }
+ .whyUsBox {
+ }
+ .blurb {
+ margin-top: 0.75rem;
+ }
+
+ .blurb .unstyledList {
+ font-size: 14px;
+ }
+
+ footer {
+ }
+
+}
+
+@media screen and (min-width: 500px) and (max-width: 800px) {
+ body {
+ /* roughly half way, arbitrary for the moment */
+ width: 65vw;
+ }
+
+ .signupButton {
+ font-size: 0.90rem;
+ }
+}
+
+@media screen and (min-width: 800px) {
+ body {
+ width: 45vw;
+ }
+
+ .bottomRow {
+ flex-direction: row;
+ /* flex: 0 50%; */
+ }
+ .pricingBox {
+ width: 50%;
+ border-bottom-left-radius: var(--box-border-radius);
+
+ }
+ .signupButton {
+ }
+ .whyUsBox {
+ width: 50%;
+ border-bottom-left-radius: 0px;
+ }
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/design/desktop-design.jpg b/FrontendMentor/newbie/single-price-grid-component-master/design/desktop-design.jpg
new file mode 100644
index 0000000..154dc1e
Binary files /dev/null and b/FrontendMentor/newbie/single-price-grid-component-master/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/design/desktop-preview.jpg b/FrontendMentor/newbie/single-price-grid-component-master/design/desktop-preview.jpg
new file mode 100644
index 0000000..49313c7
Binary files /dev/null and b/FrontendMentor/newbie/single-price-grid-component-master/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/design/mobile-design.jpg b/FrontendMentor/newbie/single-price-grid-component-master/design/mobile-design.jpg
new file mode 100644
index 0000000..1ec1ca1
Binary files /dev/null and b/FrontendMentor/newbie/single-price-grid-component-master/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/images/favicon-32x32.png b/FrontendMentor/newbie/single-price-grid-component-master/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/single-price-grid-component-master/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/index.html b/FrontendMentor/newbie/single-price-grid-component-master/index.html
new file mode 100644
index 0000000..c573174
--- /dev/null
+++ b/FrontendMentor/newbie/single-price-grid-component-master/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Single Price Grid Component
+
+
+
+
+
+ Join our community
+
+
+
+ 30-day, hassle-free money back guarantee
+
+
+
+ Gain access to our full library of tutorials along with expert code reviews.
+ Perfect for any developers who are serious about honing their skills.
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/style-guide.md b/FrontendMentor/newbie/single-price-grid-component-master/style-guide.md
new file mode 100644
index 0000000..df78689
--- /dev/null
+++ b/FrontendMentor/newbie/single-price-grid-component-master/style-guide.md
@@ -0,0 +1,31 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+### Primary
+
+- Cyan: hsl(179, 62%, 43%)
+- Bright Yellow: hsl(71, 73%, 54%)
+
+### Neutral
+
+- Light Gray: hsl(204, 43%, 93%)
+- Grayish Blue: hsl(218, 22%, 67%)
+
+## Typography
+
+### Body Copy
+
+- Font size: 16px
+
+### Font
+
+- Family: [Karla](https://fonts.google.com/specimen/Karla)
+- Weights: 400, 700
\ No newline at end of file
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/work-through/desktop-differences.png b/FrontendMentor/newbie/single-price-grid-component-master/work-through/desktop-differences.png
new file mode 100644
index 0000000..0c0168a
Binary files /dev/null and b/FrontendMentor/newbie/single-price-grid-component-master/work-through/desktop-differences.png differ
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/work-through/mobile-differences.png b/FrontendMentor/newbie/single-price-grid-component-master/work-through/mobile-differences.png
new file mode 100644
index 0000000..c9d034e
Binary files /dev/null and b/FrontendMentor/newbie/single-price-grid-component-master/work-through/mobile-differences.png differ
diff --git a/FrontendMentor/newbie/single-price-grid-component-master/work-through/process.md b/FrontendMentor/newbie/single-price-grid-component-master/work-through/process.md
new file mode 100644
index 0000000..3e6af88
--- /dev/null
+++ b/FrontendMentor/newbie/single-price-grid-component-master/work-through/process.md
@@ -0,0 +1,46 @@
+Next challenge started 12th Sept 2020
+
+As usual copy files into place and commit.
+Checked size of the design images: 1440x800 and 375x870
+
+Set up the style.css to have the base things listed in the style guide (font, colors, font size), and add style.css to index.html
+
+Looking at the designs, I see it as Flex, with 2 rows in a column. On the desktop, the 2nd row, is a row of 2 items, on mobile the 2nd row becomes as column of 2 items.
+Otherwise there doesn't seem to be any obvious/glaring differences between the 2 designs. Sizing seems largely the same, as does positioning of everything inside their respective boxes.
+
+Set-up the HTML into `div`s to match what I think are the distinct sections. Absolutely need to change some of the names, but I can't think of better descriptors at the moment. (seriously ... "sellBlurb" 🙄)
+
+Aside: Would love something to take all the classes I define in the html file and put them into the css file ... *quick google later* Oooooh. Such a thing does exist https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port ... lets see how well that works.
+Seems to ... Nice!
+
+**Just noticed, the corners on the mobile design column are less rounded than on the desktop design. Need to properly compare, might just be a sizing thing.** Check!
+
+Continued basic styling. Used a color picker to find (roughly) what the other tourqise/aquamarine color was.
+
+Stopped for lunch & roleplaying.
+
+... cue next day ....
+
+read a little.
+Question struck me, is it better to use `margin-top` or `bottom` when it comes to layout between elements. Lead me to this article which says `margin-top` https://matthewjamestaylor.com/css-margin-top-vs-bottom useful article but basically **"Always use top margin. The reason is related to the 'C' in CSS"**. Also in article **"Set default styles for webpage modules then override rules depending on proceeding context."** which seems logical to me and is what I'm trying to do. Set basic css first, See cominalities between the mobile and desktop designs. Then do mobile. Then make last adjustments for desktop.
+
+2020-09-23
+Many Days off - no drive, energy, or anything.
+Went to start today but ended up phaffing with other things (like not finding the right VSCode theme to use, or the right Fish theme, or or or or or)
+
+As it stands my attempt is roughly there. Desktop just needs some nudging for alignments to be good. Need to figure out the shadow used. The mobile version is a bit further away. Mine is probably 200 pixels taller.
+
+Which is **hilarious** considering I started with mobile first and haven't done any tweaking for desktop yet!
+
+Finding my solution is quite fragile. Tweaking bits of padding causes shifts elsewhere that I don't want. So adjusting one thing requires tweaking another.
+**Not Ideal**
+
+Have checked it in. Heart isn't in working through this one. I __know__ I could tweak this and get it there. Its not far as the diffs show.
+
+## Mobile Difference
+
+
+
+## Desktop Difference
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/stats-preview-card-component/.gitignore b/FrontendMentor/newbie/stats-preview-card-component/.gitignore
new file mode 100644
index 0000000..d13464a
--- /dev/null
+++ b/FrontendMentor/newbie/stats-preview-card-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
\ No newline at end of file
diff --git a/FrontendMentor/newbie/stats-preview-card-component/README-template.md b/FrontendMentor/newbie/stats-preview-card-component/README-template.md
new file mode 100644
index 0000000..80611b2
--- /dev/null
+++ b/FrontendMentor/newbie/stats-preview-card-component/README-template.md
@@ -0,0 +1,112 @@
+# Frontend Mentor - Stats preview card component solution
+
+This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). 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:
+
+- View the optimal layout depending on their device's screen size
+
+### Screenshot
+
+
+
+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
+
+This was a little tricky just from the point of view that I hadn't done any HTML/CSS dev / study in 9 months. So it was a case of trying to remind myself of various options that I could do.
+
+### 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
+
Some HTML code I'm proud of
+```
+```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.**
diff --git a/FrontendMentor/newbie/stats-preview-card-component/README.md b/FrontendMentor/newbie/stats-preview-card-component/README.md
new file mode 100644
index 0000000..9874859
--- /dev/null
+++ b/FrontendMentor/newbie/stats-preview-card-component/README.md
@@ -0,0 +1,66 @@
+# Frontend Mentor - Stats preview card component solution
+
+This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). 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:
+
+- View the optimal layout depending on their device's screen size
+
+### Screenshot
+
+Two screenshots, the first is the Desktop solution, then the mobile solution. The mobile is the closest, I decided not to chase doing getting the Desktop one spot on.
+
+
+
+
+
+### Links
+
+- Solution URL: [Solution on GitHub](https://github.com/tarasis/tarasis.github.io/tree/main/FrontendMentor/newbie/stats-preview-card-component)
+- Live Site URL: [Live Site](https://tarasis.github.io/FrontendMentor/newbie/stats-preview-card-component/index.html)
+
+## My process
+
+This was a little tricky just from the point of view that I hadn't done any HTML/CSS dev / study in 9 months. So it was a case of trying to remind myself of various options that I could do.
+
+### Built with
+
+- Semantic HTML5 markup
+- CSS custom properties
+- Flexbox
+
+### What I learned
+
+The main thing was to just let my solution go. In previous ones I would iterate lots to make it as close as I felt I could make it.
+
+As I did most of this one a couple of weeks ago and forgot to take notes I can't really comment on anything else I learnt.
+
+## Author
+
+- Website - [Tarasis.net](https://tarasis.net)
+- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
+- Twitter - [@tarasis](https://www.twitter.com/tarasis)
+
+## Acknowledgments
+
+Matt at Frontend Mentor for coming up with the idea of challenges like this.
\ No newline at end of file
diff --git a/FrontendMentor/newbie/stats-preview-card-component/css/reset.css b/FrontendMentor/newbie/stats-preview-card-component/css/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/FrontendMentor/newbie/stats-preview-card-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;
+}
\ No newline at end of file
diff --git a/FrontendMentor/newbie/stats-preview-card-component/css/style.css b/FrontendMentor/newbie/stats-preview-card-component/css/style.css
new file mode 100644
index 0000000..27390f7
--- /dev/null
+++ b/FrontendMentor/newbie/stats-preview-card-component/css/style.css
@@ -0,0 +1,186 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+:root {
+ --site-color: hsl(233, 47%, 7%);
+ --card-background-color: hsl(244, 38%, 16%);
+ --accent-color: hsl(277, 64%, 61%);
+ --stats-color: hsl(0, 0%, 100%);
+ --main-paragraph-color: hsla(0, 0%, 100%, 0.75);
+ --stat-headings-color: hsla(0, 0%, 100%, 0.6);
+
+}
+
+html {
+ font-size: 16px;
+}
+
+body {
+ background-color: var(--site-color);
+ color: white;
+ /* margin: 0; */
+}
+
+.card-holder {
+ /* messes up mobile */
+ width: 77vw;
+ min-height: 100vh;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+}
+
+.card {
+ display: flex;
+ flex-direction: row;
+ border-radius: 8px;
+ background-color: var(--card-background-color);
+ justify-content: space-between;
+}
+
+.text-block {
+ order: 1;
+ padding: 4.4375rem 5.9375rem 3.6875rem 4.5rem;
+ max-width: 50%;
+}
+
+
+.title-section {
+ font-family: 'Inter', sans-serif;
+ font-weight: 700; /* 400 & 40 are very close*/
+ font-size: 2.25rem;
+ line-height: 2.75rem;
+}
+
+.title-section > span {
+ color: var(--accent-color);
+}
+
+.description-section {
+ font-family: 'Inter', sans-serif;
+ font-weight: 400; /* 400 & 40 are very close*/
+ font-size: 0.9375rem;
+ line-height: 1.5625rem;
+ color: var(--main-paragraph-color);
+ margin-top: 1.5625rem;
+
+ mix-blend-mode: normal;
+ opacity: 0.75;
+}
+
+.stats-section {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+
+ font-family: 'Inter', sans-serif;
+
+ text-transform: uppercase;
+}
+
+.stat-block {
+ margin-top: 1.5rem;
+}
+
+.title {
+ font-weight: 700; /* 400 & 40 are very close*/
+ font-size: 1.5rem;
+ line-height: 1.815625rem;
+}
+
+.subtitle {
+ font-family: 'Lexend+Deca', sans-serif;
+ font-weight: 400;
+ font-size: 0.75rem;
+ line-height: 1.5625rem;
+ color: var(--stat-headings-color);
+ margin-top: 0.125rem;
+ letter-spacing: 0.0625rem;
+
+ mix-blend-mode: normal;
+ opacity: 0.6;
+}
+
+.image-block {
+ border-radius: 0px 8px 8px 0px;
+ order: 2;
+ background-color: var(--accent-color);
+ background-image:url(../images/image-header-desktop.jpg);
+ background-size: cover;
+ background-blend-mode: multiply;
+ background-repeat: no-repeat;
+
+ width: 100%;
+
+}
+
+.attribution { font-size: 11px; text-align: center; }
+.attribution a { color: hsl(228, 45%, 44%); }
+
+@media screen and (max-width: 1100px) {
+
+ body {
+ padding: 5.5rem 1.5rem 5.5rem 1.5rem; /* not actual */
+ }
+
+ .card-holder {
+ /* messes up mobile */
+ width: unset;
+ min-height: unset;
+
+ display: unset;
+ justify-content: unset;
+ align-items: unset;
+ margin: unset;
+ }
+
+ .card {
+ flex-direction: column;
+ max-width: 400px;
+ }
+
+ .title-section {
+ font-size: 1.75rem;
+ line-height: 2rem;
+ text-align: center;
+ margin-top: 2.5rem;
+ }
+
+ .text-block {
+ order: 2;
+ padding: 0rem 2rem 0rem 2rem;
+ max-width: unset;
+ }
+
+ .description-section {
+ text-align: center;
+ margin-top: 1rem;
+ }
+
+ .image-block {
+ border-radius: 8px 8px 0px 0px;
+ order: 1;
+ background-image:url(../images/image-header-mobile.jpg);
+
+ height: 240px;
+ }
+
+ .stats-section {
+ flex-direction: column;
+ align-content: space-around;
+ align-items: center;
+ text-align: center;
+ }
+
+ .subtitle {
+ font-family: 'Inter', sans-serif;
+ }
+}
diff --git a/FrontendMentor/newbie/stats-preview-card-component/design/desktop-design.jpg b/FrontendMentor/newbie/stats-preview-card-component/design/desktop-design.jpg
new file mode 100644
index 0000000..ab614ee
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/design/desktop-design.jpg differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/design/desktop-preview.jpg b/FrontendMentor/newbie/stats-preview-card-component/design/desktop-preview.jpg
new file mode 100644
index 0000000..f0b19c5
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/design/desktop-preview.jpg differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/design/mobile-design.jpg b/FrontendMentor/newbie/stats-preview-card-component/design/mobile-design.jpg
new file mode 100644
index 0000000..f251f27
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/design/mobile-design.jpg differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/images/favicon-32x32.png b/FrontendMentor/newbie/stats-preview-card-component/images/favicon-32x32.png
new file mode 100644
index 0000000..1e2df7f
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/images/favicon-32x32.png differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/images/image-header-desktop.jpg b/FrontendMentor/newbie/stats-preview-card-component/images/image-header-desktop.jpg
new file mode 100644
index 0000000..1d49067
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/images/image-header-desktop.jpg differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/images/image-header-mobile.jpg b/FrontendMentor/newbie/stats-preview-card-component/images/image-header-mobile.jpg
new file mode 100644
index 0000000..73dfe51
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/images/image-header-mobile.jpg differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/index.html b/FrontendMentor/newbie/stats-preview-card-component/index.html
new file mode 100644
index 0000000..03a5130
--- /dev/null
+++ b/FrontendMentor/newbie/stats-preview-card-component/index.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
+
+
+ Frontend Mentor | Stats preview card component
+
+
+
+
+
+
+
+ Get insights that help your business grow.
+
+
+ Discover the benefits of data analytics and make better decisions regarding revenue, customer
+ experience, and overall efficiency.
+
+
+
+
+ 10k+
+
+
+ companies
+
+
+
+
+ 314
+
+
+ templates
+
+
+
+
+ 12m+
+
+
+ queries
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontendMentor/newbie/stats-preview-card-component/solution-desktop.jpg b/FrontendMentor/newbie/stats-preview-card-component/solution-desktop.jpg
new file mode 100644
index 0000000..799123d
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/solution-desktop.jpg differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/solution-mobile.jpg b/FrontendMentor/newbie/stats-preview-card-component/solution-mobile.jpg
new file mode 100644
index 0000000..d2e5689
Binary files /dev/null and b/FrontendMentor/newbie/stats-preview-card-component/solution-mobile.jpg differ
diff --git a/FrontendMentor/newbie/stats-preview-card-component/style-guide.md b/FrontendMentor/newbie/stats-preview-card-component/style-guide.md
new file mode 100644
index 0000000..af5d7af
--- /dev/null
+++ b/FrontendMentor/newbie/stats-preview-card-component/style-guide.md
@@ -0,0 +1,36 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+## Colors
+
+### Primary
+
+- Very dark blue (main background): hsl(233, 47%, 7%)
+- Dark desaturated blue (card background): hsl(244, 38%, 16%)
+- Soft violet (accent): hsl(277, 64%, 61%)
+
+### Neutral
+
+- White (main heading, stats): hsl(0, 0%, 100%)
+- Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
+- Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)
+
+## Typography
+
+### Body Copy
+
+- Font size: 15px
+
+### Font
+
+- Family: [Inter](https://fonts.google.com/specimen/Inter)
+- Weights: 400, 700
+
+- Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca)
+- Weights: 400
diff --git a/FrontendMentor/reset.css b/FrontendMentor/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/FrontendMentor/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;
+}
\ No newline at end of file
diff --git a/base.code-workspace b/base.code-workspace
new file mode 100644
index 0000000..876a149
--- /dev/null
+++ b/base.code-workspace
@@ -0,0 +1,8 @@
+{
+ "folders": [
+ {
+ "path": "."
+ }
+ ],
+ "settings": {}
+}
\ No newline at end of file
diff --git a/css/playground.css b/css/playground.css
new file mode 100644
index 0000000..86f738c
--- /dev/null
+++ b/css/playground.css
@@ -0,0 +1,6 @@
+.gradient-text {
+ background-image: linear-gradient(90deg, red, blue);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..c55d559
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,76 @@
+/* Andy Bell CSS Modern Reset https://piccalil.li/blog/a-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+ margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+ list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+ scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+ min-height: 100vh;
+ text-rendering: optimizeSpeed;
+ line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+ text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+ max-width: 100%;
+ display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+ html:focus-within {
+ scroll-behavior: auto;
+ }
+
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..aa3a562
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,229 @@
+@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
+
+/*
+* Hi, thank you for checking out my CSS. Layout is currently Rev 2.
+* Plan is to do more interesting ones as I feel more comfortable doing things.
+*
+* For instance was thinking of swapping to a 3 column affair, with the title running
+* vertically in the first column. Second column is the projects, third the blurb
+*
+* I'd like to add some animations and transitions, and a light and dark theme.
+*/
+
+:root {
+ font-size: 1.25rem;
+ --marginTop: 0.5rem;
+
+ --pinky-color: rgba(216, 81, 201, 0.632);
+ --lightcoral-color: lightcoral;
+ --projects-border-color: green;
+}
+
+* {
+ margin: 0;
+}
+
+body {
+ /* background-color: whitesmoke; */
+ background-color: #f2f2f2;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ac2e2e' fill-opacity='0.24'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+
+.header,
+.blurb,
+.projectsDiv {
+ background-color: rgba(0, 0, 0, 0.1);
+ border: 5px solid;
+ margin: 0 auto;
+ width: 90%;
+ max-width: 700px;
+ box-sizing: border-box;
+ border-radius: 10px;
+}
+
+.blurb,
+.projectsDiv {
+ padding: 10px 20px;
+ margin-top: 2rem;
+ font-family: "Source Sans Pro", sans-serif;
+}
+
+.header {
+ text-align: center;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ border-color: var(--lightcoral-color);
+}
+
+.header > h1 {
+ font-family: "Black Ops One", cursive;
+ /* scale the font from size used on mobile to "desktop" */
+ font-size: min(max(2.5rem, 8vw), 3rem);
+}
+
+.blurb {
+ border-color: var(--pinky-color);
+}
+
+.projectsDiv {
+ border-color: rgba(0, 0, 0, 0.7);
+}
+
+.frontEndMentorChallenges,
+.freecodeCampProjects,
+.completeWebDev2020Projects,
+.vanillaJSProjects {
+ margin-top: var(--marginTop);
+}
+
+.projectsSection__title {
+ font-weight: 600;
+ font-size: 1.8rem;
+}
+
+/* .frontEndMentorChallenges {} */
+
+.frontEndMentorChallenges .newbieChallenges {
+ margin-left: 1rem;
+}
+
+.newbieChallenges > h3,
+.responsiveProjects > h3 {
+ font-weight: 600;
+ font-size: 1.3rem;
+}
+
+/* .freecodeCampProjects {} */
+/* .completeWebDev2020Projects {} */
+/* .vanillaJSProjects {} */
+
+footer {
+ margin-top: 3rem;
+ text-align: center;
+ font-size: 0.9rem;
+ margin-left: auto;
+ margin-right: auto;
+ width: 85%;
+}
+
+footer * {
+ margin-top: 1rem;
+}
+
+footer > a {
+ display: block;
+}
+
+.alignedHeader {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+}
+
+.alignedHeader img {
+ /* /* width: 100%; */
+ height: 100%;
+
+ /* margin-left: auto; */
+}
+
+.stacked {
+ display: grid;
+}
+
+.stacked > * {
+ grid-column: 1/2;
+ grid-row: 1/2;
+}
+
+.card__content {
+ z-index: 10;
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(100px);
+ -webkit-backdrop-filter: blur(100px);
+ align-self: end;
+ margin: 0.5rem; /*.5rem 2rem;*/
+ padding: 0.5rem;
+
+ box-shadow: 0 0.25rem 1rem rgba(0 0 0 / 0.1);
+ border: gray 2px dashed;
+ border-radius: 5px;
+}
+
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+ gap: 0.25rem;
+ margin-top: 0.5rem;
+}
+
+.projectsDiv > * {
+ margin-bottom: 1rem;
+}
+
+.project-card {
+ border: 3px solid var(--projects-border-color);
+ border-radius: 10px;
+ aspect-ratio: 1 / 1.4;
+ overflow: hidden;
+}
+
+.card__img {
+ width: 100%;
+ aspect-ratio: 1 / 1.25;
+ object-fit: cover;
+}
+
+.card__techUsed {
+ list-style: none;
+ display: flex;
+ /* align-content: space-evenly; */
+ justify-content: space-evenly;
+ align-items: center;
+
+ /* font-size: 0.625rem; */
+}
+
+/* .card__techUsed > li {
+ margin: 0;
+} */
+
+.card__techUsed img {
+ margin-top: 0.25rem;
+ width: 100%;
+ height: 100%;
+}
+
+.card__title {
+ font-size: 0.75rem;
+ font-weight: 600;
+ line-height: 1.1;
+ color: darkred;
+ text-align: center;
+}
+
+.card__description {
+ font-size: 0.625rem;
+ line-height: 1.2;
+}
+
+@media (min-width: 38em) {
+ .card__img {
+ aspect-ratio: 1 / 1;
+ }
+
+ .project-card.featured {
+ grid-row: span 2;
+ grid-column: span 2;
+ }
+
+ .project-card.featured .card__img {
+ aspect-ratio: 1 / 1.33;
+ }
+
+ .project-card.featured .card__title {
+ font-size: 1.25rem;
+ }
+}
diff --git a/freeCodeCamp/responsive-web-design-projects/Project1-TributePage/index.html b/freeCodeCamp/responsive-web-design-projects/Project1-TributePage/index.html
new file mode 100644
index 0000000..b69a011
--- /dev/null
+++ b/freeCodeCamp/responsive-web-design-projects/Project1-TributePage/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+ John Williams Tribute Page
+
+
+
John Williams
+
+
+
John Williams at Avery Fisher Hall in 2007
+
+
+ John Towner Williams (born February 8, 1932) is an American composer, conductor, and pianist. Widely regarded as one of the greatest film composers of all time, he has composed some of the most popular, recognizable, and critically acclaimed film scores in cinematic history in a career spanning over six decades. Williams has won 25 Grammy Awards, seven British Academy Film Awards, five Academy Awards, and four Golden Globe Awards.
+
+ Williams has composed for many critically acclaimed and popular movies, including the Star Wars saga, Schindler's List, Close Encounters of the Third Kind, Superman, E.T. the Extra-Terrestrial, the Indiana Jones series, the first two Home Alone films, the first two Jaws films, the first two Jurassic Park films, Hook, and the first three Harry Potter films.[4] Williams has also composed numerous classical concertos and other works for orchestral ensembles and solo instruments. He served as the Boston Pops's principal conductor from 1980 to 1993 and is its laureate conductor.[5] He has been associated with director Steven Spielberg since 1974, composing music for all but five of his feature films. Other works by Williams include theme music for the 1984 Summer Olympic Games, NBC Sunday Night Football, "The Mission" theme used by NBC News and Seven News in Australia, the television series Lost in Space and Land of the Giants, and the incidental music for the first season of Gilligan's Island.
+
+
+
+ You can learn more about John Williams and the many movies he has scored on
+ Wikipedia
+ .
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!
+
+
+
+
+
+
+
+
D&D
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!
+
+
+
+
+
+
+
+
Critical Role
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!
+
+
+
+
+
+
+
+
Star Wars: X-Wing
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit illum ipsum blanditiis quam ut quibusdam provident voluptas! Repellendus, adipisci ullam, distinctio, eos perferendis quia voluptatibus architecto ab nulla accusantium corrupti!
+
+
+
+
+
+
Teasers for games
+
+
+
+
+
+
+
Features
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet voluptatibus nisi maiores quidem quas rem labore explicabo nam quasi, consectetur, soluta error perspiciatis repellendus autem dolores optio? Eaque, quasi magnam?
+
+ These are completed projects done to practice using HTML,
+ CSS & Javascript. They come from different services, and
+ most are freely available for anyone to practice with.
+
+
+
+ I have put them all into a single GIT repository rather than
+ litter my github page with many different projects. This may
+ change in future depending on how many of these that I do.
+
+
+
Robert McGovern
+
+
+
+
+
Frontend Mentor
+
+
+
Collection of challenges I completed for Frontend Mentor
+ Note: As of 11 Oct 2020, these require a partial rework
+ to look good on mobile. 1-3 where written much earlier
+ in my learning, so while they fufill all the
+ requirements, they don't look great on mobile.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 0000000..605f081
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,3 @@
+// use strict
+
+// An empty JS for the moment :) Shh
diff --git a/notes.md b/notes.md
new file mode 100644
index 0000000..9f3ad08
--- /dev/null
+++ b/notes.md
@@ -0,0 +1,73 @@
+# Notes
+
+## Overview
+
+---
+
+Aim of this document is to make notes of various things as I encounter them. Consider it learning from working through specific challenges or other exercises. Probably should be in a note app, or a wiki, or something, but for now they are here.
+
+Think of it as a combination of learning, and tips and tricks. They will start unorganised, and then should be put into some semblance of order; where that is possible.
+
+Note took far to long, but site now using main for branch.
+
+## The Notes Themselves (unorganised)
+
+---
+
+- Now little difference between `` and `
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+