diff --git a/projects/FrontendMentor/newbie/meet-landing-page/README.md b/projects/FrontendMentor/newbie/meet-landing-page/README.md index f6db74b..ba6f033 100755 --- a/projects/FrontendMentor/newbie/meet-landing-page/README.md +++ b/projects/FrontendMentor/newbie/meet-landing-page/README.md @@ -1,6 +1,6 @@ # Frontend Mentor - Meet landing page solution -This is a solution to the [Meet landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/meet-landing-page-rbTDS6OUR). Frontend Mentor challenges help you improve your coding skills by building realistic projects. +This is a solution to the [Meet landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/meet-landing-page-rbTDS6OUR). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Table of contents @@ -11,12 +11,8 @@ This is a solution to the [Meet landing page challenge on Frontend Mentor](https - [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 @@ -29,20 +25,16 @@ Users should be able to: ### Screenshot -![](./screenshot.jpg) +![Desktop](screenshots/desktop.png) +![Tablet](screenshots/tablet.png) +![Mobile](screenshots/mobile.png) -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.** +Screenshots of the page showing the desktop, tablet and mobile versions of the page. ### 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) +- Solution URL: [Github](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/meet-landing-page) +- Live Site URL: [tarasis.github.io](https://tarasis.github.io/FrontendMentor/newbie/meet-landing-page/) ## My process @@ -51,61 +43,27 @@ Then crop/optimize/edit your image however you like, add it to your project, and - 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. +The main thing I learnt is that neither Firefox or Safari support tabbing in an HTML page by default on a Mac. For Safari you have to open `Settings`, go to the `Advanced` tab and check `Press Tab to highlight each item on a web page` -To see how you can add code snippets, see below: +![Safari Settings, Advanced Tab](screenshots/safari-settings.png) -```html -
- + Downloadv1.3 - + What is it?
@@ -86,7 +86,7 @@ Stay connected with reliable HD meetings and unlimited one-on-one and group video sessions. - + Downloadv1.3 diff --git a/projects/FrontendMentor/newbie/meet-landing-page/screenshots/safari-settings.png b/projects/FrontendMentor/newbie/meet-landing-page/screenshots/safari-settings.png new file mode 100644 index 0000000..5f97fd4 Binary files /dev/null and b/projects/FrontendMentor/newbie/meet-landing-page/screenshots/safari-settings.png differ diff --git a/src/_data/webprojects.json b/src/_data/webprojects.json index 8269d62..189d900 100644 --- a/src/_data/webprojects.json +++ b/src/_data/webprojects.json @@ -29,6 +29,17 @@ "title": "Newbie", "cssClass": "frontEndMentorChallenges", "challenges": [ + { + "title": "meet Landing Page", + "url": "/FrontendMentor/newbie/meet-landing-page/", + "description": "", + "techUsed": [ + "html5", + "css3", + ], + "screenshotURL": "/FrontendMentor/newbie/meet-landing-page/screenshots/desktop.png", + "screenshotAltText": "meet Landing Page Challenge from FrontendMentor" + }, { "title": "BASE Apparel Coming Soon Page", "url": "/FrontendMentor/newbie/base-apparel-coming-soon/", @@ -38,7 +49,7 @@ "css3", "js" ], - "screenshotURL": "/FrontendMentor/newbie/base-apparel/screenshots/desktop.png", + "screenshotURL": "/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/desktop.png", "screenshotAltText": "Base Apparel Coming Soon page Challenge from FrontendMentor" }, {