diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md b/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md index 5030f56..a27e461 100644 --- a/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md +++ b/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md @@ -1,6 +1,6 @@ # Frontend Mentor - Base Apparel coming soon page solution -This is a solution to the [Base Apparel coming soon page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). Frontend Mentor challenges help you improve your coding skills by building realistic projects. +This is a solution to the [Base Apparel coming soon page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ## Table of contents @@ -36,7 +36,7 @@ Users should be able to: 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. +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. @@ -49,6 +49,8 @@ Then crop/optimize/edit your image however you like, add it to your project, and ## My process + + ### Built with - Semantic HTML5 markup @@ -64,27 +66,10 @@ Then crop/optimize/edit your image however you like, add it to your project, and ### 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 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. -To see how you can add code snippets, see below: +https://stackoverflow.com/a/48207973 -```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 @@ -112,3 +97,34 @@ Use this section to outline areas that you want to continue focusing on in futur 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.** + +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 + 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 75c3d99..6b3b53f 100644 --- a/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css +++ b/projects/FrontendMentor/newbie/base-apparel-coming-soon/css/style.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap"); + /* * Sizing * Desktop: 1440x800 @@ -19,10 +21,264 @@ --col-primary-soft-red: hsl(0, 93%, 68%); --col-neutral-dark-grayish-red: hsl(0, 6%, 24%); - --gradient-white: ; - --gardient-pink: ; + --gradient-white: linear-gradient( + 135deg, + hsl(0, 0%, 100%) 0%, + hsl(0, 100%, 98%) 100% + ); + --gardient-pink: linear-gradient( + 135deg, + hsl(0, 80%, 86%) 0%, + hsl(0, 74%, 74%) 100% + ); + + --gardient-pink-hover: linear-gradient( + 135deg, + hsl(0, 80%, 86%) 0%, + hsl(0, 76%, 80%) 100% + ); /* Typography */ + --fw-300: 300; + --fw-400: 400; + --fw-600: 600; + + --fs-header: 2.5rem; + --lh-header: 105%; + --ls-header: 0.6769rem; + + --fs-body: 0.875rem; + --lh-body: 157%; + --fw-body: var(--fw-400); + --col-body: var(--col-primary-desaturated-red); + + --fs-field: 0.875rem; + --lh-field: 200%; + --fw-field: var(--fw-400); + --col-field: var(--col-primary-desaturated-red); + + --fs-error: 0.8125rem; + --lh-error: 100%; + --fw-error: var(--fw-400); + --col-error: var(--col-primary-soft-red); /* Sizing */ } + +body { + font-family: "Josefin Sans", sans-serif; + height: 100vh; + display: flex; + justify-content: center; + + background: var(--gradient-white); +} + +main { + max-width: 31.25rem; +} + +.header { + margin: 30px 2rem 2rem 2rem; + grid-area: "logo"; +} + +.body { + grid-area: "body"; + + margin: 4rem 2rem 5.75rem 2rem; + text-align: center; +} +.body__header { + font-size: var(--fs-header); + font-weight: var(--fw-300); + line-height: var(--lh-header); + letter-spacing: var(--ls-header); + color: var(--col-primary-desaturated-red); + text-transform: uppercase; +} + +.body__header span { + color: var(--col-neutral-dark-grayish-red); + font-weight: var(--fw-600); +} + +.body__text { + margin-top: 1rem; + + font-size: var(--fs-body); + line-height: var(--lh-body); + color: var(--col-body); +} + +.hero-picture { + /* display: block; */ + grid-area: "hero-image"; + justify-self: end; + margin: 0 auto; +} + +.hero-picture img { + vertical-align: bottom; + display: block; + margin: 0 auto; +} + +.logo { + width: 6.25rem; + vertical-align: bottom; +} + +.email-form { + margin-top: 2rem; + position: relative; +} +.email-form__input { + border: 1px solid var(--col-field); + /* border: none; */ + width: 40ch; + + font-size: var(--fs-field); + line-height: var(--lh-field); + padding: 10px 0 10px 24px; + border-radius: 28px; + background: inherit; + color: var(--col-neutral-dark-grayish-red); + /* background-color: var(--col-primary-desaturated-red); */ + /* margin-left: 24px; */ +} + +::placeholder { + color: var(--col-field); + opacity: 0.5; +} + +.email-form__button-submit { + position: absolute; + padding: 13px 27.1px 13px 28px; + border-radius: 28px; + box-shadow: 0px 15px 20px rgba(198, 110, 110, 0.247569); + background: var(--gardient-pink); + right: 0px; + border: none; + + cursor: pointer; +} + +.email-form__button-submit:has(:hover, :focus) { + background: var(--gardient-pink-hover); +} + +.email-form__error-message { + color: var(--col-error); + font-size: var(--fs-error); + text-align: left; + margin-left: 24px; + + margin-top: 8px; +} + +.error-hidden { + opacity: 0; +} + +/* Screen Reader only */ +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} + +@media screen and (min-width: 1000px) { + :root { + --fs-header: 4rem; + --lh-header: 100%; + --ls-header: 1.0825rem; + + --fs-body: 1rem; + --lh-body: 175%; + + --fs-field: 1rem; + --lh-field: 175%; + + --lh-error: 215%; + } + + body { + background-color: var(--gradient-white); + background-image: url(../images/bg-pattern-desktop.svg); + background-repeat: no-repeat; + background-blend-mode: color; + background-size: auto; + /* background-position: left; */ + + margin: 0 auto; + } + + main { + max-width: 1440px; + height: 100%; + display: grid; + /* grid-template-areas: "logo hero-image body"; */ + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 20% 80%; + grid-template-areas: + "logo hero-image" + "body hero-image"; + + /* grid-auto-rows: auto; + gap: 55px; */ + } + + .header { + margin: unset; + align-self: center; + margin-left: 166px; + } + + .logo { + width: unset; + } + + .hero-picture { + margin: initial; + } + + .body { + margin: unset; + align-items: baseline; + margin-top: 72px; + margin-left: 165px; + text-align: start; + } + + .body__header span { + line-height: 111%; + } + + .body__text { + margin-top: 18px; + width: 45ch; + } + + .email-form { + margin-top: 2.5rem; + } + + .email-form__input { + width: 45ch; + padding: 15px 0 15px 24px; + } + + .email-form__button-submit { + padding: 18px 45.1px 18px 46px; + right: 110px; + } +} diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/desktop-design.jpg b/projects/FrontendMentor/newbie/base-apparel-coming-soon/desktop-design.jpg new file mode 100644 index 0000000..8b3e72f Binary files /dev/null and b/projects/FrontendMentor/newbie/base-apparel-coming-soon/desktop-design.jpg differ diff --git a/projects/FrontendMentor/newbie/base-apparel-coming-soon/index.html b/projects/FrontendMentor/newbie/base-apparel-coming-soon/index.html index b6d9dea..10d48b6 100644 --- a/projects/FrontendMentor/newbie/base-apparel-coming-soon/index.html +++ b/projects/FrontendMentor/newbie/base-apparel-coming-soon/index.html @@ -9,6 +9,7 @@ + Frontend Mentor | Base Apparel coming soon page @@ -27,12 +28,38 @@ - We're coming soon - Hello fellow shoppers! We're currently building our new fashion store. - Add your email below to stay up-to-date with announcements and our launch deals. +
+
+ + + +
- Email Address + + + Hero image of a young lady holding her arm up showing some jewelry on her wrist. The lady stands in front of a bush + + +
+

+ We're
coming soon +

+

+ Hello fellow shoppers! We're currently building our new fashion store. + Add your email below to stay up-to-date with announcements and our launch deals. +

+ +
+