temp submit to ask for help
This commit is contained in:
parent
cf5c127a36
commit
eaf3b5ffd3
|
|
@ -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 <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
|
||||
|
||||
|
|
@ -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
|
||||
<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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -9,6 +9,7 @@
|
|||
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
|
||||
<title>Frontend Mentor | Base Apparel coming soon page</title>
|
||||
|
||||
|
|
@ -27,12 +28,38 @@
|
|||
|
||||
<body>
|
||||
|
||||
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.
|
||||
<main>
|
||||
<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>
|
||||
<p class="attribution">
|
||||
|
|
|
|||
|
|
@ -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 |
Loading…
Reference in New Issue