temp submit to ask for help

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

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: ;
+    --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 */
 
+    --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;
+    }
+}

projects/FrontendMentor/newbie/base-apparel-coming-soon/index.html

@@ -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.
+  <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>
     <p class="attribution">

projects/FrontendMentor/newbie/base-apparel-coming-soon/js/script.js

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