Suppose you are a first-time visitor Welcome! 🤩 First and foremost, let’s begin this with a small introduction to today’s article.👇
As some might know, I pivoted to UI development a few months back and started to do challenges using HTML and CSS. These Frontend Mentor Challenges have been done using Pure CSS. 👇
As for today’s challenge, we will do a basic challenge from Front End Mentor. 👉 Challenge 012– Fylo Dark Theme Landing Page
As always, let’s begin the challenge with a motivational quote.👇 (This is one of the quotes that helps me to keep moving, I am sharing this with you with the hope that it’ll help you all as well to keep on moving forward)
Anything Is Possible If You Have Got Enoug Nerve. ~JK Rowling~
Before beginning, let me highlight a small note (as always):–
For some of you, this might be a challenge that you can do with your eyes closed. For some of you, this might be a challenge you learn a new thing, and for some of you, this might be the beginner step for CSS. So this article is for anyone from pro to beginner who loves to learn and sharpen their skills.🤓 With that…..
Fylo Dak Theme Landing Page
Your challenge is building this landing page from the designs provided in the starter code. Your users should be able to:
- View the optimal layout for the page depending on their device’s screen size
HTML, CSS & Figma
First and Foremost, we will do a sketch/blueprint of the card component using HTML. Afterwards, according to the Design, we’ll make the look and feel of the Article Preview Component.
<!DOCTYPE html>
<html lang="en"> <!-- Head Section-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title> Fylo Dark Theme Landing Page</title>
</head>
<!-- Body Section-->
<body>
</body></html>
<div class="container">
<div class="section-divider">
</div><div class="early-access-today">
</div>
<footer>
</footer>
</div>
01) Layout the Main Section (Child 01)
<!-- landing page content -->
<div class="section-divider"><!-- top navbar -->
<div class="navbar">
</div>
<!-- hero image -->
<div class="hero-image-one">
</div>
<!-- all File Section -->
<div class="all-file-section">
</div>
<!-- option section -->
<div class="option-section">
</div>
<!-- stay productive -->
<div class="stay-productive">
</div>
<!-- testimonials -->
<div class="testimonials">
</div>
</div>
1.1) Top Navbar (Child 1.1)
<!-- top navbar -->
<div class="navbar">
<img src="./images/logo.svg" alt="">
<div class="links">
<a href="#"> Feature </a>
<a href="#"> Team </a>
<a href="#"> Sign In </a>
</div>
</div>
1.2) Hero Image One (Child 1.2)
<!-- hero image -->
<div class="hero-image-one">
<img src="./images/hero-1-desktop.svg" alt="">
</div>
1.3) All File Section (Child 1.3)
<!-- all File Section -->
<div class="all-file-section">
<div class="section-curvy-bg">
<img src="./images/bg-curvy-desktop.svg" alt="">
</div>
<div class="all-file-section-content">
<h1>
All you files in one secure location,accessible
anywhere,
</h1>
<p>
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>
<div class="button-started">
<a href="#"> Get Started </a>
</div>
</div>
</div>
1.4) Option Section (Child 1.4)
<!-- option section -->
<div class="option-section">
<div class="option-section-column-one">
<!-- section one -->
<div class="section-one">
<img src="./images/icon-access-anywhere.svg" alt="">
<h2> Access your files, anywhere </h2>
<p>
The ability to use a smartphone, tablet, or computer to accessyour account means your
files follow you everywhere.
</p>
</div>
<!-- section two -->
<div class="section-two">
<img src="./images/icon-security.svg" alt="">
<h2> 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><div class="option-section-column-two">
<!-- section three -->
<div class="section-three">
<img src="./images/icon-collaboration 1.svg" alt="">
<h2> Real-time collaboration </h2>
<p>
Securely share files and folders with friends, family and colleagues for
live collaboration. No email attachments required.
</p>
</div>
<!-- section four -->
<div class="section-three">
<img src="./images/icon-store-copy.svg" alt="">
<h2> 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>
1.5) Stay Productive Section (Child 1.5)
<!-- stay productive -->
<div class="stay-productive">
<div class="stay-productive-image-section">
<img src="./images/hero-2-desktop.svg" alt="">
</div>
<div class="stay-productive-text-section">
<h1>
Stay productive,wherever you are
</h1>
<p class="paragraph-one">
Never let location be an issue when accessing your files.
Fylo has you covered for all of your file storage needs.
</p>
<p class="paragraph-two">
Securely share files and folders with friends, family and
colleagues for live collaboration.No email attachments required.
</p><div class="see-how-link">
<a href=""> See how Fylo works </a>
<img src="./images/icon-arrow.svg" alt="">
</div>
</div>
</div>
1.6) Testimonials Section (Child 1.6)
<!-- testimonials -->
<div class="testimonials">
<!-- quotation-icon -->
<div class="quotation-icon">
<img src="./images/bg-quotes.svg" alt="">
</div>
<!-- testimonial one -->
<div class="testimonial-one">
<p class="testimonial-content">
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="user-details">
<div class="user-image">
<img src="./images/sathish-patel.svg" alt="">
</div><div class="details">
<p class="user-name">
Satish Patel
</p>
<p class="user-designation">
Founder & CEO, Huddle
</p>
</div>
</div>
</div>
<!-- testimonial two -->
<div class="testimonial-two">
<p class="testimonial-content">
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="user-details">
<div class="user-image">
<img src="./images/Bruce Mckenzie.svg" alt="">
</div>
<div class="details">
<p class="user-name">
Bruce McKenzie
</p>
<p class="user-designation">
Founder & CEO, Huddle
</p>
</div>
</div>
</div>
<!-- testimonial two -->
<div class="testimonial-three">
<p class="testimonial-content">
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="user-details">
<div class="user-image">
<img src="./images/Iva Boyd.svg" alt="">
</div>
<div class="details">
<p class="user-name">
Iva Boyd
</p>
<p class="user-designation">
Founder & CEO, Huddle
</p>
</div>
</div>
</div>
</div>
</div>
02) Layout the Sign-Up For Free Section (Child 02)
<!-- Early access today box -->
<div class="early-access-today">
<div class="early-access-today-content">
<h1>
Get early access today
</h1>
<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>
<div class="free-button">
<div class="field"></div>
<div class="get-started">
<a href=""> Get Started For Free </a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="logo">
<img src="./images/logo.svg" alt="">
</div>
<div class="footer-content">
<div class="address">
<img src="./images/icon-location.svg" alt="">
<a href="">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua
</a>
</div>
<div class="contact-details">
<div class="phone">
<img src="./images/icon-phone.svg" alt="">
<a href=""> +1-543-123-4567</a>
</div>
<div class="email">
<img src="./images/icon-email.svg" alt="">
<a href=""> example@fylo.com </a>
</div>
</div>
<div class="about-us">
<div class="info-section-one">
<a href=""> About Us </a>
<a href=""> Jobs </a>
<a href=""> Press </a>
<a href=""> Blog </a>
</div>
<div class="info-section-two">
<a href=""> Contact Us </a>
<a href=""> Terms </a>
<a href=""> Privacy </a>
</div>
</div>
<div class="social-icons">
<a href="">
<div class="facebook">
<img src="./images/facebook.svg" alt="">
</div>
</a>
<a href="">
<div class="twitter">
<img src="./images/twitter.svg" alt="">
</div>
</a>
<a href="">
<div class="insta">
<img src="./images/insta.svg" alt="">
</div>
</a>
</div>
</div>
</footer>
— — HMMM, I am not a fan of this. It looks ugly.🤮 But rather than wasting our time on complaining, shall we get into work and make it more appealing — —
Here we start the styling for the mobile view first, then we’ll adjust the styling for the larger screens using media queries.
🔴 Step 2.1 ➡ First and foremost, let us start by Linking The External Style Sheet to the HTML file
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<!-- stylesheet -->
<link rel="stylesheet" href="./styles.css">
<title>Fylo Dark Theme Landing Page</title>
</head>
🔴Step 2.2 ➡ Link fonts to the HTML file
So as you can see in the Design, we used a font called ‘Roboto’. Therefore, we can first go to google Fonts, search for ‘Roboto’ font, click on the relevant font weights we need, and then get the link href link.
<!-- font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
🔴Step 2.3 ➡ Use root: to declare the colours we are using
:root {
--greyblack: #181F2B;
--luminousGreen: #62E0D9;
--luminousblue: #49BED3;
--luminouslightblue: #46B8D2;
--darkblue: #21293C;
--white: #FFFFFF;
--darkblue: #0C1524;
--balckishblue:#1C2230}
For a thorough explanation of ‘: root’ check out Challenge No 002, where I descriptively walked you through why and what we use ‘: root’.
🔴Step 2.4 ➡ Include the Styling for the Universal Selector
Now let me begin with a small note🔊:- Since I have descriptively walked you through the universal selector in previous challenges (001, 002, 003, 004, 005,006) as well as in the CSS article, I won’t be explaining the universal selector, and why we use it again.
*, a {
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 400;
color:var(--white);
margin: 0px 0px 0px 0px;
text-decoration: none;
}
🔴Step 2.5 ➡ Include the background colour for the full page
Even though we are maximizing the width of the page to 1440px, rather than keeping the rest of the background colour white, we will make it dark blue to align with the design.
body {
background-color: var(--darkblue);
}
🔴Step 2.6 ➡ Let us get into styling the Parent Container
.container {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
background: linear-gradient(180deg, #1C2230 0%, #252C37 5.21%, #181E2A 13.54%, #181E2A 19.27%, #181E2A 28.65%, #181E2A 31.25%, #181E2A 97.4%);;
}
🔴Step 2.7 ➡ Let us get into styling the Image Container (Child 01)
.section-divider {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
/* Nav Bar */
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}.navbar img,
.logo img {
width: 88px;
height: 26px;
}
.navbar a {
font-size: 15px;
padding-left: 20px;
}
🔴Step 2.9 ➡ Let us get into styling Hero Image (Child 1.2)
/* Hero Image */
.hero-image-one {
display: flex;
justify-content: center;
padding-top: 40px;
}
.hero-image-one img {
width:276px;
height: 205px
}
🔴Step 3.0➡ Let us get into styling All File Section (Child 1.3)
/* All File Section */
.all-file-section {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
/* background-image: url("./images/bg-curvy-mobile.svg");
background-position: top center;
background-repeat: no-repeat;
background-size: contain; */
}.section-curvy-bg {
position: absolute;
top: 320px
}
.section-curvy-bg img {
width: 100%;
}
.all-file-section-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9;
}
.all-file-section .all-file-section-content h1 {
color: var(--white);
font-size: 26px;
font-weight: '500';
padding-top: 45px;
line-height: 33px;
}
.all-file-section .all-file-section-content p {
color: var(--white);
font-size: 15px;
font-weight: '500';
padding-top: 15px;
width:300px;
}
.all-file-section .all-file-section-content .button-started {
width: 220px;
height: 40px;
background: linear-gradient(180deg, #4DC5D3 0%, #45B6D2 100%);
border-radius: 20px;
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
}
🔴Step 3.1➡ Let us get into the styling Option Section (Child 1.4)
/* option section */
.option-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 85px;
padding-bottom: 85px;
}.option-section .section-one,
.option-section .section-two,
.option-section .section-three,
.option-section .section-four {
padding-top: 35px;
padding-bottom: 35px;
max-width: 280px;
}
.option-section .section-one,
.option-section .section-two,
.option-section .section-three,
.option-section .section-four, h2 {
padding-top: 20px;
font-size: 15px;
font-weight: 500;
}
.option-section .section-one,
.option-section .section-two,
.option-section .section-three,
.option-section .section-four, p {
padding-top: 10px;
font-size: 13px;
font-weight: 400;
line-height: 18px;
}
🔴Step 3.2➡ Let us get into the styling Stay Productive Section (Child 1.5)
/* stay productive */
.stay-productive {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}.stay-productive .stay-productive-image-section img {
width: 100%;
height: 215px;
}
.stay-productive .stay-productive-text-section {
padding-top: 20px;
}
.stay-productive .stay-productive-text-section h1 {
font-size: 20px;
font-weight: 500;
padding-top: 20px;
}
.stay-productive .stay-productive-text-section .paragraph-one,
.stay-productive .stay-productive-text-section .paragraph-two {
min-width: 280px;
max-width: 460px;
padding-top: 15px;
padding-bottom: 10px;
}
.see-how-link {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 2px solid var(--luminousGreen);
width: 161px;
}
.see-how-link a {
color: var(--luminousGreen);
padding-right: 15px;
}
.stay-productive .stay-productive-text-section .see-how-link .border {
border-bottom-width: 2px;
border-bottom-color: var(--luminousGreen);
}
🔴Step 3.3➡ Let us get into the styling Testimonials Section (Child 1.6)
/* testimonials */
.testimonials {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 150px;
justify-content: center;
}.quotation-icon {
position: relative;
left: -150px;
bottom: -20px;
}
.quotation-icon img {
width: 100%;
height: 16px;
}
.testimonial-one,
.testimonial-two,
.testimonial-three {
width: 250px;
background-color:var(--darkblue);
margin-top: 10px;
margin-bottom: 10px;
padding-left: 20px;
padding-right: 30px;
padding-top: 40px;
padding-bottom: 20px;
z-index: 9;
}
.testimonial-content {
font-size: 10px;
min-width: 210px;
}
.user-details {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 15px;
}
.user-details .user-image {
border: 3px solid var(--white);
border-radius: 50%;
width: 30px;
height: 30px;
}
.user-details .user-image img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.user-details .details {
margin-left: 10px;
}
.user-details .details .user-name {
font-size: 8px;
padding: 0px;
line-height: 10px;
}
.user-details .details .user-designation {
font-size: 5px;
padding: 0px;
line-height: 6px;
}
🔴Step 3.4➡ Let us get into styling the Sign-Up For Free Section (Child 02)
/* Early Acces Today Box */
.early-access-today {
background-color: var(--balckishblue);
margin-left: 30px;
margin-right: 30px;
position: relative;
top: 150px;}
.early-access-today-content {
padding-top: 40px;
padding-bottom: 30px;
padding-left: 25px;
padding-right: 25px;
text-align: center;
}
.early-access-today-content h1 {
font-size: 20px;
font-weight: 500;
}
.early-access-today-content p {
min-width: 260px;
max-width: 400px;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
}
.free-button {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.free-button .field {
height: 44px;
width: 100%;
border-radius: 30px;
background-color: var(--white);
margin-top: 10px;
margin-bottom: 10px;
}
.free-button .get-started {
height: 44px;
width: 100%;
border-radius: 30px;
background: linear-gradient(180deg, #4DC5D3 0%, #45B6D2 100%);
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}
/* FOOTER */
footer {
background-color:var(--darkblue) ;
padding-top: 220px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 40px;
}.footer-content {
display: flex;
flex-direction: column;
}
.address,
.contact-details .phone,
.contact-details .email {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.address {
margin-top: 40px;
margin-bottom: 10px;
}
.address img {
width: 13px;
height: 18px;
}
.address a,
.phone a,
.email a {
margin-left: 10px;
}
.address a {
width: 300px
}
.phone,
.email {
margin-top: 20px;
margin-bottom: 10px;
}
.phone img {
width: 18px;
height: 18px;
}
.about-us {
display: flex;
flex-direction: column;
margin-top: 40px;
}
.info-section-one,
.info-section-two {
display: flex;
flex-direction: column;
margin-top: 20px;
margin-bottom: 20px;
}
.info-section-one a,
.info-section-two a {
padding-top: 5px;
padding-bottom: 5px;
}
.social-icons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.facebook,
.twitter,
.insta {
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid var(--white);
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
margin-left: 10px;
}
Since we have done a mobile-first approach, we have done our basic styling for the mobile view. Now it’s time to use the media query and make it responsive for larger-size screens.
Once you include the styles for the media query, those styles will override the basic style accordingly for larger screens.
🟡Step 3.1 ➡ Let us Complete by adjusting the styles for screens which are greater than 992px
@media screen and (min-width:992px){
.navbar img {
width: 176px;
height: 52px;
}.hero-image-one {
padding-top: 90px;
}
.hero-image-one img {
width:734px;
height: 544px
}
.all-file-section h1 {
font-size: 40px;
width: 600px;
line-height: 50px;
}
.all-file-section p {
font-size: 21px;
width: 584px;
}
.all-file-section .button-started {
width: 284px;
height: 60px;
border-radius: 30px;
}
.option-section {
flex-direction: row;
}
.option-section-column-one,
.option-section-column-two {
padding-left: 100px;
padding-right: 100px;
z-index: 9;
}
.section-curvy-bg {
top: 700px
}
.stay-productive {
flex-direction: row;
justify-content: center;
}
.stay-productive .stay-productive-image-section img {
height: 460px;
}
.stay-productive .stay-productive-text-section {
padding-top: 0px;
padding-left: 60px;
}
.testimonials {
flex-direction: row;
}
.testimonial-one,
.testimonial-two,
.testimonial-three {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 20px;
}
.quotation-icon img {
height: 45px;
}
.quotation-icon {
position: relative;
left: 50px;
bottom: 100px;
}
.footer-content {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
margin-top: 60px;
}
.address {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 5px;
}
.contact-details {
padding-top: 5px;
}
.phone,
.email {
margin-top: 0px;
}
.email {
margin-top: 20px;
}
.about-us {
flex-direction: row;
margin-top: 0px;
}
.info-section-one,
.info-section-two {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 20px;
}
.early-access-today-content {
margin-left: 30px;
margin-right: 30px;
}
.early-access-today {
width: 800px;
margin-left: auto;
margin-right: auto;
top: 80px
}
.free-button {
flex-direction: row;
}
.free-button .field {
min-width: 150px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 10px;
}
.free-button .get-started {
height: 44px;
width: 270px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
}
Read the full article here
.png)
