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

@ -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

View File

@ -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

View File

@ -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
<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>
<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.
Email Address
</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">

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