temp submit to ask for help

This commit is contained in:
Robert McGovern 2022-10-19 19:22:49 +01:00
parent cf5c127a36
commit eaf3b5ffd3
7 changed files with 330 additions and 27 deletions

View File

@ -1,6 +1,6 @@
# Frontend Mentor - Base Apparel coming soon page solution # 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 ## 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. 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. 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 ## My process
### Built with ### Built with
- Semantic HTML5 markup - 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 ### 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 <picture> element is a container only. The <img> element is the main part describing its contents. <source> 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
<h1>Some HTML code I'm proud of</h1>
```
```css
.proud-of-this-css {
color: papayawhip;
}
```
```js
const proudOfThisFunc = () => {
console.log('🎉')
}
```
If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more.
**Note: Delete this note and the content within this section and replace with your own learnings.**
### Continued development ### 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. 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.** **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
<main>
<header>
<picture>
<img src="images/logo.svg" alt="Logo of Base Apparel. Hollow round circle with the text Base Apparel beside it">
</picture>
</header>
<picture>
<source srcset="images/hero-desktop.jpg" media="(min-width: 1000px">
<img src="images/hero-mobile.jpg"
alt="Hero image of a young lady holding her arm up showing some jewelry on her wrist. The lady stands in front of a bush">
</picture>
<h1></h1>
<p></p>
<form action="submit">
<label class="visually-hidden" for="email">Email input field</label>
<input placeholder="Email Address" type="email" name="email" id="email">
<button type="submit"><img src="" alt=""></button>
</form>
</main>
```
visually hidden https://stackoverflow.com/a/71349645

View File

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap");
/* /*
* Sizing * Sizing
* Desktop: 1440x800 * Desktop: 1440x800
@ -19,10 +21,264 @@
--col-primary-soft-red: hsl(0, 93%, 68%); --col-primary-soft-red: hsl(0, 93%, 68%);
--col-neutral-dark-grayish-red: hsl(0, 6%, 24%); --col-neutral-dark-grayish-red: hsl(0, 6%, 24%);
--gradient-white: ; --gradient-white: linear-gradient(
--gardient-pink: ; 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 */ /* 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 */ /* 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;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

View File

@ -9,6 +9,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<title>Frontend Mentor | Base Apparel coming soon page</title> <title>Frontend Mentor | Base Apparel coming soon page</title>
@ -27,12 +28,38 @@
<body> <body>
We're coming soon
Hello fellow shoppers! We're currently building our new fashion store. <main>
Add your email below to stay up-to-date with announcements and our launch deals. <header class="header">
<picture>
<img class="logo" src="images/logo.svg"
alt="Logo of Base Apparel. Hollow round circle with the text Base Apparel beside it">
</picture>
</header>
Email Address <picture class="hero-picture">
<source srcset="images/hero-desktop.jpg" media="(min-width: 1000px)">
<img src="images/hero-mobile.jpg"
alt="Hero image of a young lady holding her arm up showing some jewelry on her wrist. The lady stands in front of a bush">
</picture>
<section class="body">
<h1 class="body__header">
We're<br><span>coming soon</span>
</h1>
<p class="body__text">
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.
</p>
<form class="email-form" action="submit">
<label class="visually-hidden" for="email">Email</label>
<input class="email-form__input" placeholder="Email Address" type="email" name="email" id="email">
<button class="email-form__button-submit" type="submit"><img src="images/icon-arrow.svg"
alt="Submit Button"></button>
<p class="email-form__error-message error-hidden" id="errorMessage">Please provide a valid email</p>
</form>
</section>
</main>
<!-- <footer> <!-- <footer>
<p class="attribution"> <p class="attribution">

View File

@ -0,0 +1,4 @@
"uses strict";
const emailInput = document.getElementById("email");
const errorMessage = document.getElementById("errorMessage");

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB