Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

CSS

              
                :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;
    }
}
              
            
!

JS

              
                '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');
  }
}
              
            
!
999px

Console