diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md b/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md index 5962feb..24911be 100644 --- a/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md +++ b/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md @@ -32,25 +32,17 @@ Users should be able to: ### Screenshot -![](./screenshot.jpg) -Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. - -Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. - -Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. - -**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** +![Mobile](screenshots/mobile.png) +![Desktop](screenshots/desktop.png) ### 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: [on GitHub](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/base-apparel-coming-soon) +- Live Site URL: [on GitHub Pages](http://tarasis.github.io/FrontendMentor/newbie/base-apparel-coming-soon) ## My process - - ### Built with - Semantic HTML5 markup @@ -58,31 +50,23 @@ Then crop/optimize/edit your image however you like, add it to your project, and - 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 -The element is a container only. The element is the main part describing its contents. only describes different sources. So the alt remains the same for all of them. +The element is a container only. The element is the main part describing its contents. only describes different sources. So the alt remains the same for all of them regardless of the source. https://stackoverflow.com/a/48207973 +I learned that I'm not good at handling input fields with a button and an error image. + ### 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.** +I want to go through other peoples solutions for how the handled the input and the adjacent button and error image. I'm sure there is a better solution than mine, particularly because mine limits the size of the input field more than it should. ### 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.** +- [Stackoverflow Visually Hidden answer](https://stackoverflow.com/a/71349645) - I found this useful for doing adding the label but making it visually hidden. ## Author @@ -92,35 +76,4 @@ Use this section to outline areas that you want to continue focusing on in futur ## Acknowledgments -My thanks to Julio Cinquina on the FEM Slack for correcting my misunderstanding of the `:has` pseudo-class. - -Initial HTML -```html -
-
- - Logo of Base Apparel. Hollow round circle with the text Base Apparel beside it - -
- - - - Hero image of a young lady holding her arm up showing some jewelry on her wrist. The lady stands in front of a bush - - -

-

- -
- - - - -
-
- -``` - -visually hidden https://stackoverflow.com/a/71349645 - +My thanks to Julio Cinquina on the FEM Slack for correcting my misunderstanding of the `:has` pseudo-class. \ No newline at end of file diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css b/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css index 10e516f..cac4809 100644 --- a/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css +++ b/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css @@ -151,6 +151,7 @@ main { font-weight: var(--fw-field); padding: 0.625rem 0 0.625rem var(--adjustment-left-field-and-error); border: none; + border-radius: var(--border-radius); background: inherit; width: 100%; color: var(--col-neutral-dark-grayish-red); @@ -196,7 +197,6 @@ main { opacity: 0; height: 100%; align-self: center; - /* width: */ } .error-hidden { diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/desktop.png b/projects/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/desktop.png new file mode 100644 index 0000000..91fcd86 Binary files /dev/null and b/projects/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/desktop.png differ diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/mobile.png b/projects/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/mobile.png new file mode 100644 index 0000000..a8a3304 Binary files /dev/null and b/projects/FrontendMentor/newbie/base-apparel-coming-soon/screenshots/mobile.png differ diff --git a/src/_data/webprojects.json b/src/_data/webprojects.json index 31d95cb..8269d62 100644 --- a/src/_data/webprojects.json +++ b/src/_data/webprojects.json @@ -29,6 +29,18 @@ "title": "Newbie", "cssClass": "frontEndMentorChallenges", "challenges": [ + { + "title": "BASE Apparel Coming Soon Page", + "url": "/FrontendMentor/newbie/base-apparel-coming-soon/", + "description": "", + "techUsed": [ + "html5", + "css3", + "js" + ], + "screenshotURL": "/FrontendMentor/newbie/base-apparel/screenshots/desktop.png", + "screenshotAltText": "Base Apparel Coming Soon page Challenge from FrontendMentor" + }, { "title": "NFT preview card component", "url": "/FrontendMentor/newbie/nft-preview-card-component/",