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