Alt Text Welcome to part-4 of the series. In this part we will start with the footer component first. But i want to show social icons in footer. So, create a file social-icons.js inside constants folder.

social-icons.jssocial-icons.js

Inside the css folder add foooter.module.css file. Put the below content in it.

    .footer {
        margin-top: auto;
        background: var(--primaryColor);
        padding: 2rem;
        text-align: center;
        color: var(--mainBlack);
    }
    .links a {
        display: inline-block;
        text-decoration: none;
        text-transform: uppercase;
        color: var(--mainBlack);
        margin: 0.5rem 1rem;
        letter-spacing: var(--mainSpacing);
        transition: var(--mainTransition);
        font-weight: bold;
    }
    .links a:hover {
        color: var(--mainWhite);
    }
    .icons a {
        display: inline-block;
        margin: 1rem;
        font-size: 1.3rem;
        color: var(--mainBlack);
        transition: var(--mainTransition);
    }
    .icons a:hover {
        color: var(--mainWhite);
    }
    .copyright {
        text-transform: capitalize;
        letter-spacing: var(--mainSpacing);
        line-height: 2;
    }

Next, we will update our Footer.js file to show links, social links and a copyright message.

Footer.jsFooter.js

Now, our footer looks way better on the large screen.

Large screenLarge screen

And it also looks good on small screens.

Smaller screensSmaller screens

Next, let’s have the layout done for home page. It will contain left section, blog section and right section. Open the index.js and make the following changes.

Will change these later to different components. Right now only checking the layout.

index.jsindex.js

Next, create a file home.module.css inside the css folder and add the following css in it.

home.module.csshome.module.css

We are using CSS grid to divide the screen into three columns. On the large screen it will look like below.

large screenlarge screen

On the smaller screens, we are hiding both left and right sidebars.

smaller screensmaller screen

The border colors and lot other things will be changed later when we built the components.

This completes part-4 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.