Tourism Site

Welcome to part-3 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

Let’s start where we left in the project. We will create a footer first. Inside the css folder add foooter.module.css file. You can get the content for the same from my github link.

Footer CSSFooter CSS

Next, we will update our Footer.js component to use this CSS. Here we are just mapping through our links and social-icons from the constant files, and displaying them. We also have a copyright section.

Footer ComponentFooter Component

It will show our Footer in the desktop view as below.

Footer desktopFooter desktop

The Footer is also very responsive in the mobile view.

Footer mobileFooter mobile

Next, we will create the SimpleHero component, which will show an image covering the whole page on the Home page. Create a new file SimpleHero.js inside components directory.

SimpleHeroSimpleHero

One of the main thing to check in the SimpleHero component, is the defaultHero class. It comes from the layout.css file. Here, we are using min-height to display it in whole page minus the header. We are also using a linear-gradient here. Then we are using display: flex, which will be useful soon to display the center text.

defaultHerodefaultHero

We will then update our index.js page to show this component.

index.jsindex.js

It will show our huge image on the home page.

Hero ImageHero Image

Next, we will create a banner which will contain a large heading, then paragraph and a large button to take us to places page.

So, go ahead and create banner.module.css inside css folder and the below content in it.

Banner Style.Banner Style.

Next, we will create Banner.js inside components folder and it will contain below content. We can pass the props title, info and also children to it.

Banner componentBanner component

Next, we will add the Banner component in our index.js and pass it the required props —title and info. Also, we are passing a Link as a children.

index.jsindex.js

It will show our Banner text inside our Hero image.

Banner TextBanner Text

Next, we will update our Error component. So, go ahead and create error.module.css inside css folder and the below content in it.

Error CSSError CSS

Next, update the 404.js page with the below content. As, you might have noticed that we are reusing Banner component.

404.js404.js

Now, when we goto any non-existent page the below will be displayed.

Dead EndDead End

This completes part-3 of the series. You can find the code for the same in this link.

See you soon in part-4.

This post is also available on DEV.