finished all forms, plus added warning if email is invalid

This commit is contained in:
Robert McGovern 2022-09-08 14:37:43 +01:00
parent 05e78e1615
commit 02123ff338
2 changed files with 55 additions and 23 deletions

View File

@ -23,7 +23,7 @@ input {
--lh-25px: 1.5625rem; --lh-25px: 1.5625rem;
--lh-38px: 2.375rem; --lh-38px: 2.375rem;
--lh-56px: 3.5rem; --lh-56px: 3.5rem;
--lh-68px: 4.25rem; --lh-62px: 3.875rem;
/* Colors */ /* Colors */
--col-lime-green: hsla(157, 74%, 62%, 1); --col-lime-green: hsla(157, 74%, 62%, 1);
@ -55,6 +55,8 @@ input {
--logos-height-17px: 1.0625rem; --logos-height-17px: 1.0625rem;
--logos-height-29px: 1.8125rem; --logos-height-29px: 1.8125rem;
--border-radius-28px: 28px;
/* Variables for Elements */ /* Variables for Elements */
--fs-title: var(--fs-26px); --fs-title: var(--fs-26px);
--lh-title: var(--lh-38px); --lh-title: var(--lh-38px);
@ -62,6 +64,10 @@ input {
--lh-blurb: var(--lh-25px); --lh-blurb: var(--lh-25px);
--logos-height: var(--logos-height-17px); --logos-height: var(--logos-height-17px);
/* Email Waring */
--warning-visible: visible;
--fs-warning: 0;
} }
body { body {
@ -82,6 +88,7 @@ body {
color: var(--col-lighter-blue); color: var(--col-lighter-blue);
text-align: var(--text-alignment); text-align: var(--text-alignment);
background-image: var(--background-image); background-image: var(--background-image);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -117,7 +124,7 @@ main {
.logo { .logo {
order: 1; order: 1;
margin-bottom: 3.5625rem; /* margin-bottom: 3.5625rem; */
height: 3.5rem; height: 3.5rem;
} }
@ -130,7 +137,7 @@ main {
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 16px; margin-bottom: 1rem;
font-weight: normal; font-weight: normal;
} }
@ -145,13 +152,11 @@ main {
} }
.logos-section { .logos-section {
order: 4; order: 4;
/* width: 100%; */
margin-bottom: 3rem; margin-bottom: 3rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
/* flex-shrink: 2; */
justify-content: space-between; justify-content: space-between;
height: var(--logos-height); height: var(--logos-height);
} }
@ -166,6 +171,17 @@ main {
line-height: var(--lh-28px); line-height: var(--lh-28px);
} }
.email-form:is(:invalid):has(.email-form__field:is(:placeholder-shown)) {
--fs-warning: 0;
}
.email-form:where(:invalid) {
--fs-warning: 14;
}
.email-form:is(:valid) {
--fs-warning: 0;
}
.email-form__field { .email-form__field {
width: 100%; width: 100%;
border-radius: 28px; border-radius: 28px;
@ -177,7 +193,7 @@ main {
border-width: 0px; border-width: 0px;
} }
.email-form__field:is(:active, :focus) { .email-form__field:is(:active, :focus, :not(:placeholder-shown)) {
color: var(--col-white); color: var(--col-white);
} }
@ -195,6 +211,14 @@ main {
background-color: var(--col-lime-green-hover); background-color: var(--col-lime-green-hover);
} }
.email-warning {
font-size: var(--fs-warning);
color: red;
position: relative;
bottom: -5px;
height: 0;
}
.dots-image { .dots-image {
visibility: hidden; visibility: hidden;
} }
@ -270,6 +294,11 @@ main {
right: 10rem; right: 10rem;
} }
.email-warning {
bottom: 20px;
padding-left: 2rem;
}
.dots-image { .dots-image {
visibility: visible; visibility: visible;
position: absolute; position: absolute;
@ -280,11 +309,6 @@ main {
main::before { main::before {
background-color: unset; background-color: unset;
/* position: absolute; */
/* top: 0px; */
/* right: 50%; */
/* bottom: 0px; */
/* left: 0px; */
} }
main { main {
@ -296,15 +320,13 @@ main {
@media screen and (min-width: 1430px) { @media screen and (min-width: 1430px) {
:root { :root {
--background-image: url(../assets/desktop/image-host.jpg); --background-image: url(../assets/desktop/image-host.jpg);
--text-alignment: unset;
--background-image-opacity: 1;
--fs-title: var(--fs-52px); --fs-title: var(--fs-52px);
--lh-title: var(--lh-68px); --lh-title: var(--lh-62px);
--fs-blurb: var(--fs-18px); }
--lh-blurb: var(--lh-28px);
--logos-height: var(--logos-height-29px); body {
background-position: center right;
} }
header { header {
@ -312,11 +334,19 @@ main {
margin-left: 165px; margin-left: 165px;
} }
.logos-section { main {
order: 5; padding-top: 5.5rem;
margin-left: 10.3125rem;
width: 724px;
} }
.email-form { .title {
order: 4; margin-bottom: 1.5rem;
}
.dots-image {
bottom: 78px;
right: 0px;
left: unset;
} }
} }

View File

@ -35,9 +35,11 @@
<img src="./assets/pocket-casts.svg" alt="Pocket Casts Logo" aria-hidden="true"> <img src="./assets/pocket-casts.svg" alt="Pocket Casts Logo" aria-hidden="true">
</div> </div>
<form action="" class="email-form"> <form action="" class="email-form">
<label hidden="true" aria-hidden="false" for="email">Enter your email: </label> <label class=".sr-only" hidden="true" aria-hidden="false" for="email">Enter your email: </label>
<input class="email-form__field" placeholder="Email Address" type="email" name="email" id="email" required> <input class="email-form__field" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Email Address"
type="email" name="email" id="email" required>
<input class="email-form__button-submit" type="submit" value="Request Access"> <input class="email-form__button-submit" type="submit" value="Request Access">
<p class="email-warning">Oops! Please check your email</p>
</form> </form>
</main> </main>
<footer> <footer>