<body>

  <header class="header">
    <div class="header__inner">
    <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/logo.svg" alt="fylo logo" class="header__logo" />

    <nav>
      <ul class="header__nav">
        <li class="header__nav__item"><a href="#" class="header__nav__item__link">Features</a></li>
        <li class="header__nav__item"><a href="#" class="header__nav__item__link">Team</a></li>
        <li class="header__nav__item"><a href="#" class="header__nav__item__link">Sign In</a></li>
      </ul>
    </nav>
  </div>
  </header>

  <main>
    <div class="intro">
      <div class="intro__upper">
        <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/illustration-intro.png" alt="" class="intro__illustration" />
      </div>

      <div class="intro__lower">
        <h1 class="intro__heading">All your files in one secure location, accessible anywhere.</h1>
        <div class="intro__cta">

          <p class="intro__paragraph">Fylo stores all your most important files in one secure location. Access them wherever you need, share and collaborate with friends family, and co-workers.</p>
    
          <a href="#" class="button button--cta">Get Started</a>
    
        </div>
      </div>
 
    </div>

   
  <div class="features">

  <div class="features__box">

    <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-access-anywhere.svg" alt="" class="features__box__image">

    <h2 class="features__box__heading">Access your files, anywhere</h2>

    <p>The ability to use a smartphone, tablet, or computer to access your account means your files follow you everywhere.</p>

  </div>

  <div class="features__box">

    <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-security.svg" alt="" class="features__box__image">

    <h2 class="features__box__heading">Security you can trust</h2>
  
    <p>2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files.</p>

  </div>

  <div class="features__box">
    
    <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-collaboration.svg" alt="" class="features__box__image">

    <h2 class="features__box__heading">Real-time collaboration</h2>
  
    <p>Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.</p>

  </div>

  <div class="features__box">

    <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-any-file.svg" alt="" class="features__box__image">

    <h2 class="features__box__heading">Store any type of file</h2>

    <p>Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all file types to be securely stored and shared.</p>

  </div>

  </div>
  
  <div class="productive">

    <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/illustration-stay-productive.png" alt="" class="img-responsive productive__image" />

    <div class="productive__box">
      <h2 class="productive__heading">Stay productive, wherever you are</h2>

      <p class="productive__paragraph">Never let location be an issue when accessing your files. Fylo has you covered for all of your file storage needs.</p>

      <p class="productive__paragraph">Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required.</p>

      <p class="productive__paragraph"><a href="#" class="productive__link">See how Fylo works</a></p>
    </div>

  </div>

  
  <div class="quotes">
    <div class="quotes__inner">
    <div class="quote">
    <p class="quote__text">Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>

    <div class="quote__attribution">
      <img src="images/profile-1.jpg" alt="Photo of Satish Patel" class="quote__attribution__image"> 
    
      <p class="quote__attribution__author"><span class="quote__attribution__author__title">Satish Patel</span><br>
      Founder & CEO, Huddle</p>
    </div>
  </div>


  <div class="quote">
    <p class="quote__text">Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>

    <div class="quote__attribution">
      <img src="images/profile-2.jpg" alt="Bruce McKenzie" class="quote__attribution__image"> 
    
      <p class="quote__attribution__author"><span class="quote__attribution__author__title">Bruce McKenzie</span><br>
      Founder & CEO, Huddle</p>
    </div>
  </div>


  <div class="quote">
    <p class="quote__text">Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>

    <div class="quote__attribution">
      <img src="images/profile-3.jpg" alt="Bruce McKenzie" class="quote__attribution__image"> 
    
      <p class="quote__attribution__author"><span class="quote__attribution__author__title">Iva Boyd</span><br>
      Founder & CEO, Huddle</p>
    </div>
  </div>

</div>

  </div>



</main>
<footer class="footer">

  <div class="earlyaccess">
  <h2 class="earlyaccess__heading">Get early access today</h2>

  <p>It only takes a minute to sign up and our free starter tier is extremely generous. If you have any  questions, our support team would be happy to help you.</p>

  <form class="earlyaccess__form">
  
    <div class="earlyaccess__form__left">
      <label for="email" class="sr-only">Email:</label>
      <input type="email" id="email" class="earlyaccess__email" placeholder="email@example.com">
    </div>
    
    <button type="submit" id="signup" class="button earlyaccess__button">Get Started For Free</button>
  
  </form>

  <p class="hidden signup__form__warning" id="emailWarning">Please enter a valid email address</p>

    
</div>

  <div class="footer__image">
    <img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/logo.svg" alt="Fylo logo" class="footer__logo">
  </div>

  <div class="footer__sections">
    <div class="footer__sections1">
      <p class="footer__sections__text"><img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-location.svg" alt=""> <span class="footer__sections__text__inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
    </div>

    <div class="footer__sections2">
      <p class="footer__sections__text footer__sections__text--contact"><img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-phone.svg" alt=""> <span class="footer__sections__text__inner">+1-543-123-4567</span></p>
      <p class="footer__sections__text footer__sections__text--contact"><img src="https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-email.svg" alt=""> <span class="footer__sections__text__inner">example@fylo.com</span></p>
    </div>

    <div class="footer__sections3">

    <ul class="footer__list">
      <li><a href="#" class="footer__list__link">About Us</a></li>
      <li><a href="#" class="footer__list__link">Jobs</a></li>
      <li><a href="#" class="footer__list__link">Press</a></li>
      <li><a href="#" class="footer__list__link">Blog</a></li>
    </ul>

  </div>

  <div class="footer__sections4">

    <ul class="footer__list">
      <li><a href="#" class="footer__list__link">Contact Us</a></li>
      <li><a href="#" class="footer__list__link">Terms</a></li>
      <li><a href="#" class="footer__list__link">Privacy</a></li>
    </ul>

  </div>
  
  
  

  <div class="footer__sections5">

    <ul class="footer__social">
      <li class="footer__social__item footer__social__item--facebook"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" class="svg-inline--fa fa-facebook-f fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg></li>
      <li class="footer__social__item footer__social__item--twitter"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg></li>
      <li class="footer__social__item"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></li>
    </ul>
  </div>
  </div>

  <p class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://www.bobmatyas.com">Bob Matyas</a>.
  </p>

</footer>
</body>
:root {
    /* colors */
    --cyan:  hsl(176, 68%, 64%);
    --main-bg: hsl(218, 28%, 13%);
    --dark-blue: hsl(217, 28%, 15%);
    --white: hsl(0, 0%, 100%);

    /* fonts */
    --font-body: 'Open Sans', sans-serif;
    --font-headings: 'Raleway', sans-serif;
    --font-weight-headings: 700;
    --main-text-size: 1.6rem;
    --main-text-line-height: 1.8;

    /* rhythm */
    --mobile-rhythm: 45px;
    --desktop-container: 1200px;
    --desktop-center: 0 auto;
}

* { box-sizing: border-box; }

html {
    background-color: var(--main-bg);
    font-size: 10px;
}

body {
    color: var(--white);
    font-family: var(--font-body);
    font-size: var(--main-text-size);
    line-height: var(--main-text-line-height);
}

/* utilities */

.img-responsive {
    height: auto;
    max-width: 100%;
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.hidden {
    display: none;
}

.container { 
    margin: 0 auto;
    max-width: 1220px; 
}

/* end utilities */

.header {
    background-color: var(--dark-blue);
}

.header__inner {
    align-items: center;
    display: flex;
    justify-content: space-around;
    max-width: 100%;
    padding: var(--mobile-rhythm) 0;
}

.header__logo { 
    max-width: 140px; 
}

.header__nav {
    align-items: center;
    display: flex;
    list-style-type: none;
    justify-content: space-around;
    margin: 0;
    padding: 0;
}

.header__nav__item {
    font-size: var(--main-text-size);
    padding: 0 10px;
}

a.header__nav__item__link:link,
a.header__nav__item__link:visited {
    color: #fff;
    text-decoration: none;
}

a.header__nav__item__link:hover,
a.header__nav__item__link:active {
    color: #fff;
    text-decoration: underline;
}

.intro {
    background-color: var(--dark-blue);
    background-image: url('https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/bg-curvy-mobile.svg');
    background-position: center 160px;
    background-repeat: no-repeat;
    background-size: 150%;
    text-align: center;
    padding: 0;
}

.intro__upper {
    padding: 5%;
}

.intro__illustration {
    max-width: 730px;
    width: 100%;
}

.intro__heading {
    font-family: var(--font-headings);
    font-size: 2.2rem;
    font-weight: var(--font-weight-headings);
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
}

.intro__lower {
    background-color: var(--main-bg);
}

.intro__cta {
    padding: 0 var(--mobile-rhythm);
    background-color: var(--main-bg);
}

.button {
    background: hsl(198, 60%, 50%);
    background: linear-gradient(90deg, hsla(176, 68%, 64%, 1), hsla(198, 60%, 50%, 1) 100%); 
    border-radius: 50px;
    display: block;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
}

.button:hover,
.button:active {
    background: var(--cyan);
}

.button--cta {
    margin: 0 auto;
    max-width: 80%;
}

.intro__paragraph {
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 50px 0;
}



.features {
    padding: 0 var(--mobile-rhythm);
}

.features__box {
    text-align: center;
}

.features__box__image {
    margin: 70px auto 15px auto;
}

.features__box__heading,
.productive__heading,
.earlyaccess__heading {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    font-weight: var(--font-weight-headings);
    margin-top: 0;
}

.productive {
    text-align: center; 
    padding: 0 45px;
}

.productive__image {
    margin: 80px auto;
}

.productive__paragraph {
    text-align: left;
}

a.productive__link:link,
a.productive__link:visited {
    background-image: url('https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-arrow.svg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 25px;
    border-bottom: 1px solid var(--cyan);
    color: var(--cyan);
    padding: 0 35px 10px 0;
    text-decoration: none;
}

a.productive__link:hover,
a.productive__link:active {
    background-image: url('https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/icon-arrow.svg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 25px;
    border-bottom: 1px solid var(--white);
    color: var(--white);
    padding: 0 35px 10px 0;
    text-decoration: none;
}

.quotes {
    margin: 5%;
    padding: 150px var(--mobile-rhythm) 250px;
}

.quotes__inner { 
    background-image: url('https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/bg-quotes.png');
    background-position: 10px top;
    background-repeat: no-repeat;
    padding-top: 35px;
}

.quote { 
    background-color: hsl(219, 30%, 18%);
    border-radius: 5px;
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    padding: 40px 20px 20px 20px;
    margin-bottom: 40px;
}

.quote__text {    
    font-size: var(--main-text-size);
    line-height: var(--main-text-line-height);
}

.quote__attribution {
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

.quote__attribution__image {
    border-radius: 50%;
    width: 50px;
}

.quote__attribution__author {
    font-size: 1.4rem;
    margin-left: 10px;
    letter-spacing: 1px;
    line-height: 1.8;
}

.quote__attribution__author__title {
    font-size: 1.8rem;
    font-weight: 700;
}

.earlyaccess {
    background-color: var(--dark-blue);
    border-radius: 10px;
    margin: -400px 15px 0 15px;
    padding: 35px 55px;
    text-align: center;
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}


.earlyaccess__form {
    margin-top: 50px;
}

.earlyaccess__email {
    border-radius: 50px;
    border: none;
    font-size: 1.6rem;
    padding: 15px 20px;
    width: 100%;
}

.earlyaccess__button {
    border: none;
    margin: 25px 0;
    padding-bottom: 15px;
    padding-top: 15px;
    width: 100%;
}

.earlyaccess__button:hover {
    cursor: pointer;
}

.earlyaccess__email::placeholder {
    color: #ccc;
}

.signup__form__warning { 
    color: hsl(0, 100%, 63%);
    padding-left: 20px;
    text-align: left;
}

.footer {
    background-color: hsl(216, 53%, 9%);
    padding: 200px var(--mobile-rhythm) 0 var(--mobile-rhythm);
    text-align: left;
}

.footer__logo {
    margin: 145px 0 0 30px;
}

.footer__sections__text {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
}

.footer__sections__text--contact {
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

.footer__sections__text__inner {
    margin-top: -5px;
    margin-left: 50px;
}

.footer__list {
    list-style-type: none;
    margin-left: 0;
    margin-top: var(--mobile-rhythm);
    padding-left: 0;
}

a.footer__list__link:link,
a.footer__list__link:visited {
    color: var(--white);
    text-decoration: none;
}
a.footer__list__link:hover,
a.footer__list__link:active {
    font-weight: bold;
    color: var(--white);
    text-decoration: none;
}

.footer__social {
    align-items: center;
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: var(--mobile-rhythm);
    margin-left: 0;
    padding-left: 0;
}

.footer__social__item {
    border: 1px solid #fff;
    border-radius: 50%;
    margin: 10px;
    padding: 7px 0 0 9px;
    height: 40px;
    width: 40px;
    position: relative;
}


.footer__social__item:hover {
    border: 1px solid var(--cyan);
    color: var(--cyan);
    cursor: pointer;
}

.footer__social__item > svg { max-width: 20px; }

.footer__social__item--facebook {
    padding-left: 10px;
}

.footer__social__item--twitter {
    padding-top: 10px;
}

.footer__social__item--facebook > svg { max-width: 15px; }

.attribution { font-size: 11px; text-align: center; color: #fff; margin:0; padding: 25px 0;}
.attribution a { color: hsl(228, 45%, 44%); color: #fff; }


@media (min-width: 800px) {

    .header {
        padding: 0 2%;
    }

    .header__inner {
        justify-content: space-between;
        max-width: var(--desktop-container);
        margin: var(--desktop-center);
    }

    .intro {
        background-image: url('https://bobmatyas.github.io/fm-fylo-dark-landing-page/images/bg-curvy-desktop.svg');
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: 100% 400px;
        padding: 0;
    }

    .intro__lower {
        background-color: transparent;
        padding-bottom: 160px;
    }

    .intro__upper {
        padding: 0;
    }

    .intro__heading { 
        font-size: 4.2rem;
        line-height: 1.5;
        margin: 45px auto 0 auto;
        max-width: 730px;
        text-align: center;
    }

    .intro__cta {
        background-color: transparent;
        margin: var(--desktop-center);
        max-width: 730px;
    }

    .intro__paragraph {
        max-width: 520px;
        margin: var(--desktop-center);
    }

    .button--cta {
        max-width: 280px;
    }

    .earlyaccess__heading {
        font-size: 2.5rem;
    }

    .earlyaccess__form {
        margin-top: 0;
    }

    .productive__image {
        margin: 80px 0;
    }

    .productive {
        padding: 0;
    }

    .quotes {
        padding: 50px 0 250px 0;
    }

    .features,
    .quotes,
    .productive {
        max-width: var(--desktop-container);
        margin: var(--desktop-center);
        padding-left: 2%;
        padding-right: 2%;
    }

    .signup__form__warning {
        margin: 0;
    }

    .features { 
        display: grid;
        gap: 10px 150px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .quotes__inner {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 35px;
    }

    .productive {
        align-items: center;
        display: grid;
        gap: 50px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        justify-content: center;
    }

    .productive__heading {
        font-size: 3.3rem;
        line-height: 1.2;
        text-align: left;
        max-width: 65%;
    }

    .earlyaccess {
        max-width: 730px;
        margin-left: auto;
        margin-right: auto;
    }

    .earlyaccess__button {
        margin: 0;
        width: 225px;
    }

    .earlyaccess__form {
        align-items: center;
        display: flex;
        justify-content: space-around;
        margin: 25px auto 0 auto;
    }
    
    .earlyaccess__email {
        width: 380px;
    }
 
    .earlyaccess__button {
        max-width: 200px;
    }

    .footer__sections {
        align-items: start;
        display: grid;
        gap: 60px;
        grid-template-columns: 25% 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        justify-content: start;
        margin: var(--desktop-center);
        max-width: var(--desktop-container)
    }

    .footer__list,
    .footer__social,
    .footer__sections__text {
        margin-top: 0;
    }

    .footer__social { 
        display: block;
    }

    .footer__image {
        margin: var(--desktop-center);
        max-width: var(--desktop-container);
    }

    .footer__logo { 
        margin: 80px 0 35px 0;
    }

    .footer__sections__text__inner {
        margin-left: 25px;
    }
}

@media screen and (min-width: 1000px) {
    .footer__social {
        display: flex;
    }
}

@media screen and (min-width: 1700px) {
    .intro {
        background-size: contain;
    }
}
'use strict';

const emailCheck = () => {
  const emailAddress = document.getElementById('email').value;
  const emailInput = document.getElementById('email');
  const mailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
 
  if (emailAddress.match(mailFormat)) {
    emailInput.classList.remove('landing__text__email--red');
    document.getElementById('emailWarning').classList.add('hidden');
  } else if (!emailAddress.match(mailFormat)) {
    emailInput.classList.add('landing__text__email--red');
    document.getElementById('emailWarning').classList.remove('hidden');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.