1

Challenge 012–Fylo Dark Theme Landing Page🚀

 1 year ago
source link: https://uxplanet.org/challenge-012-fylo-dark-theme-landing-page-f93c8b66206d
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Challenge 012–Fylo Dark Theme Landing Page🚀

Welcome Back!!

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

With Thaaaat…..Let’s get into our Today’s Challenge.

As for today’s challenge, we will do a basic challenge from Front End Mentor. 👉Challenge 012– Fylo Dark Theme Landing Page

1*SMStodyUoXSoyjWzgjzYTw.png

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~

1*dHwj3A1aOXmqvDzjgI0GMg.jpeg

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

🔸 Challenge Name:-

Fylo Dak Theme Landing Page

🔸 Description:-

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

🔸 Tools:-

HTML, CSS & Figma

STEP 01 — Begin With the blueprint (HTML)🚀

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.

🔴 STEP 1.1 ➡ Basic structure of HTML

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

🔴 STEP 1.2 ➡ Create the main structure for the Article Preview Component

<div class="container">
   <div class="section-divider">
   </div>

<div class="early-access-today">
   </div>

<footer>
   </footer>  
</div>

🔴 STEP 1.3 ➡ Create the structure for each section

1*j1UJ1eVVznmiN124yCkz8A.png

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>

03) Layout the Footer Section (Child 03)

<!-- 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=""> [email protected] </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>

— — And with that, we have done with the blueprint. It’s time for us to check the output of our blueprint.👀👇 — —

1*BzSul7QfDnE8ieOx5ME6Xg.png

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

STEP 02 — Time to make it more appealing (CSS)🚀

Here we start the styling for the mobile view first, then we’ll adjust the styling for the larger screens using media queries.

1*l8rRFtXNBYFjOGkPmoZvvA.gif

🔴 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;
}

🔴Step 2.8 ➡ Let us get into styling Top Navbar (Child 1.1)

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

🔴Step 3.5➡ Let us get into styling the Footer Section (Child 03)

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

— — LET’S SEE THE OUTCOME IN MOBILE VIEW💣. TADAAA..🤩 — —

1*vCTwuXZ_MVKDIWmyy0d7aw.png

STEP 03 — Time to make responsive for all the screens (Media Query)🚀

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;
    }
}
1*imBkYqWGFOHDxP4kLYclOQ.gif
1*TtkVhPrU030qWJz1doXArg.png

Final Thought

As we have done with the challenge, I’ll end this article with the hope that you have gained and learned something. Thank You for checking this out.
Now your time has arrived to give a try to this challenge. Trust me you would love the process.

If you want to gain more knowledge, sharpen your skillset or need a small reminder, check out the following articles.👇🧠

Vessel of Knowledge in Grid:- https://medium.com/@nknuranathunga/vessel-of-knowledge-in-grid-1272764725a2

Understanding flexbox to make things easy:- https://levelup.gitconnected.com/understanding-flexbox-to-make-things-easy-adf90891ff25

Learn the fundamentals of CSS within a few minutes:- https://bootcamp.uxdesign.cc/beginners-guide-to-css-9bc8298985c0

Beginner’s guide to HTML:-https://uxplanet.org/beginners-guide-to-html-and-css-letss-start-off-with-html-3d7ffd035182

If you like this give one or more claps and feel free to leave your thoughts and feedback in the comment section.

Thank you for checking this out and feel free to checkout my other articles by clicking the following link 👇

Check It Out

🔸Follow me on Twitter👀: @NathashaR97🔸

I WILL WALK YOU THROUGH OF CHALLENGES WHICH HAS BEEN DONE USING A BIT MORE ADVANCED LEVEL THAN CSS FROM NEXT WEEK ONAWARDS👊


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK