DEV Community 👩‍💻👨‍💻

Cover image for MI website clone walkthrough
hrb11182
hrb11182

Posted on • Updated on

MI website clone walkthrough

Make a new folder where you want to store the project and open it in VS-Code.

Image

This code will create react project for you in the same folder.

Remove all the files except App.js, Index.js, App.css from src.

Move to src/App.css and remove every line of code from there.

Move to src/index.js and make it look like this.

Image

Move to src/App.js and make it look like this.

Image

Create a new folder in src named as data and copy the json file from the source code present at my github account.

Make a folder components in src and with in that one file PreNavbar.js a component and import and use it in App.js.

Image

Image

Now make another folder named styles where we will store the stylings of all the components and start with making the CSS file of the PreNavbar.

Import this CSS in the PreNavbar component.

Image

Image

In PreNavbar add this lines of code inside the div.

Image

All the given links are the real links from the MI India Website.

Image

This will look like this in the browser.

Now let's work on the CSS.

Image

This will look like this in the browser.

Image

In App.css add this styles.

Image

This will result in this.

Image

Image

Image

Image

Image

Image
Image

Image
Image

Now lets add cart icon in our PreNavbar in order to do that visit google icons and search for the cart in the search bar.

Image

Select whatever you want and download as svg.
Once the file is downloaded copy t hat svg code make a variable in PreNavbar.js and add that code in that variable line 5 in the fig below.

Image

Once done use that as shown below.

Image

Now if you visit the browser you will get the cart icon but something like black in color which doesn't look good.

Image

Move to PreNavbar.css and try to change the color of the cart icon line 19 in the figure below.

Image

Now in the browser cart icon will appear.

Image

Now let's add some hover effect to the cart icon line 23.

Image

Style is looking a bit messy so let's add some more styling to it in .preNav > div display it as flex and align it at center line 8.

Image

It will result in something like this.

Image

Working with the NAV-BAR -

Make a navbar component and import it in App.js.

Image

Image

Add the following styling to nav.css.

Image

Lets add something in the Navbar.js.

Image

Now in the browser it will look something like this.

Image

Image

Image

Image

Image

Now we need react-router-dom lets install it using following commands.

Image

Once done with the installation move to App.js and import BrowserRouter from react-router-dom line 4 and wrap all the imported components in to it.

Image

Move to Navbar.js and import Link from react-router-dom line 4 and also import logo line 3 in line 12 to 14 we will use the link tag and with in that we use img tag as shown below.

Image

Here we are just linking the image with the path "/" so that if any one clicks on that image (logo in our case) we can redirect the user to home page or any page with address "/".

Image

We are getting our logo here since our logo is white we are unable to see.

Image

Image

Now we added all the links to the navbar and a search box.

Now we need a search icon beside the search box so copied the svg code from google icons and stored in a variable line 6.

Image

Now use this icon just after the search box.

Image

If you visit the browser it will look some thing like this.

Image

Now visit the nav.css and add this css to it line 12 to 20.

Image

Now website will look some thing like this.

Image

Now add css to the logo.

Image

There is one correction in the file Navbar.js we need to close the div opened in line 12 for the logo as shown in the figure below so in order to do so we added a closing div tag at line 18 and remove an extra closing div tag from the bottom of the page Line 37 in the second fig

Image

Image

Now if we visit our website it will look like this.

Image

Now its time to design search box.

Image

Image

Style the navlink's hover effect.

Image

Image

If you visit MI's website you will see that whenever you hover on the logo it changes from MI to Home now let's work on it.

Image

Image

Image

Now let's design the slider.

In order to do that we will use bootstrap so let's install that.

Image

In order to create the slider move to the components folder and make a new component Slider.js.

In order to read the documentation or to find the way that how the slider will be prepared using bootstrap move to the link shown below in the image.

Image

Copy the code from the site and change accordingly as shown in the fig. below.

Image

In order to make this run we need to import the carousel from bootstrap.

Image

Used image's link in the carousel can be obtained from the file we stored data.

Now move to the App.js and import that slider.

Image

Now if you move to the browser.

Image

Imag

But this is not the right way of using the image.
Here we will send data from App.js here we import the data.json file and send the banner data as shown below.

Image

In the above fig in line 6 we imported banner(an object of images and captions of both the sliders used in the website one named as start(an array of image links) another as "End"(array of images with there captions) from the data.json and in line 15 just sent the start part of the banner to the Slider as props since we are designing the carousel at the start of the site.

Now move to the Slider.js.

In the first slider we just need the image not the captions.

Image

In the above figure we imported carousel from the bootstrap in Line 2 and in Line 3 we imported bootstrap's css.

In line 6 we passed start you can pass any letter or word this is just to capture the prop send from the App.js.

In line 8 we passed fade it is the effect needs to be applied while switching between the slides of the carousel.

In line 11 we used map function on the start (Which is accepting the prop(banner.start from data.json) from App.js), so map is iterating all the items in the array banner and every time it encounters an item it store that in the variable item passed in the map function line 11.

Line 13, 14, 15 different tags, classnames and attributes from bootstrap.

Line 15 we passed that item( contains the link from data .json ) in the src.

Now if you move to the browser you carousel will be there.

Image

Here in the slider we didn't used css because we used bootstrap.

Now after the sliders we have offer components showing the offers in the form of cards as shown below.

Image

In order to make this component we again need images from data.json so instead of importing banner from data.json in App.js why don't we import whole data and use it as shown below.

Image

Line 6 imported the whole data instead of just the banner.
Line 7 imported the offers component.
Line 15 instead of banner.start now in order to get the start we need to go one step deeper because we imported data not the banner so data.banner.start
Line 16 we passed offer as props in which we put the array of data offer from data.json

Image

Offer in data.json.

Now lets move to Offers component.

Image

Here in Line 2 we imported offer.js(we will discuss on it later).

Line 6 we passed the data coming from offer(from app.js to offers.

Line 9 we applied map function to the offer to iterate all the items in the offer present in data.json and information of each offer will be stored in the item and index is to count the number of items.

Line 10 we made a component offer.js so we passed all the information coming from data.json about offer, Here in index we just need to pass the index and in src item's image and in link item's url this three are required to do the work but key is an essential if you don't use key map will throw errors in console so we used key and passed the first attribute of the offer data comming from data.json.

Now move to the offer.js.

Image

Line 3 Here we took all the data comming from offers.js.
Line 4 returned an anchor tag with an image tag encapsulated in that.

Here image will show up on the website and will behave like an anchor tag with some link and index is used in template literals as alternate text.

Image

Now just below our carousel we got our offers which doesn't look the way we want so now we need to add some css to it.

Make a css file and move to offers.js and import the Css file.

Image

Image

Now if you move to the browser you will get this.

Image

Now we start working on the Heading component because in the rest of the page multiple headings are used of same style as shown below.

Image
Image

Now lets create a Heading.js.

Image

Once done let's import them in App.js.

Image

Now within the App.js pass a value in the Heading component as shown below.

Image

Here we passed STAR PRODUCTS as the value for heading now the question arises that how we will change the value so answer is that we don't need to do so because we need to use heading multiple times so every time we use heading in the App.js we will pass a new value.

Now move to Heading.js.

Image

Line 2 imported the css file.

Line 4 passed the text coming from the App.js as prop.

Then took two divs and a para tag.

Now let's move to the CSS.

Image
Image

Now if you move to the browser it will look like this.

Image

We are done with the Heading.

Now let's work on the Star Product component.

Image

Image

Once component is made let's import it in App.js and pass the relevant data.

Image

Now before moving ahead lets have a look on the data file to come to know that how the data is arranged in the data.json.

Image

If you look to the design you need to create then you come to know that 1st product (power bank) comes in a big box and next two (earphones and bags) in the two halves of a rectangular box(you can say half of the big box in which power banks are present) and at the bottom rectangular box(you can say half of the big box in which power banks are present) smart bands are present.

Image

Now let's design this.

Image

Line 3 passed the data coming from App.js.

Since every product requires different space so we need separate divs for them.

Line 6 a div consist of an anchor tag having the url of the 0th product(or the 1st product power banks) from the data passed in App.js and an image tag within the anchor tag having the image of the 0th product and at last an alternate text.

Now if you move to browser it will look like this.

Image

Image

We wrapped next three in another div.

Now if you move to browser it will look like this.

Image

Now the role of css comes in.

Image

Now use this css.

Image

Line-2 imported the CSS file lets move to browser.

Image

Now lets work on Hot Accessories.

Image

First of all lets add another heading in the App.js.

Image

Let's look in to the browser in order to understand that what happened.

Image

We got a new heading Hot Accessories at the very bottom.

Now lets work on the menu of Hot Accessories and whenever you click on the menu items a list of items will show up which is different for every menu items as shown below.

Image

Hot Accessories menu

First of all create the component.

Image

Now import it to App.js.

Image

Line 10 imported the HotAccessoriesMenu.
Line 22 Used it.

Image

Made the links here in every link I used to which specifies the path as shown below we are at the music so at the end we are getting /music in the url.

Image

Now we need to style them.

Image description

Use this css to style the menu.

Image

Imported the style in HotAccessoriesMenu.js.

Move to the browser it will look like this.

Image

Now start working on the HotAccessories(music).

Create a new file.

Image

Move to App.js.

Image
Image

Line 4 imported Route (we will use it later).

Line 11 imported the component Hot Accessories.

Line 26 using route we specified that if the path is exactly /music then only pass the parameters below to the component HotAccessories.

Before moving ahead let's have a look in to the data.json.

Image
Image

Image description

Here we can clearly see that we have an object hotaccessories in data.json and in that object there is an array containing data for each items in the Hot Accessories menu and at the end of the object hotaccessories we have an object hotAccessoriesCover consist of all the cover photos(in the above figure photo of compact bluetooth speaker is the coverphoto of this item of the hotaccessoriesmenu.

Line 27 we passed the data from data.json.

Move to HotAccessories.js.

Image
Image

Line 2 imported HotItemCard(we will talk about it later).

Line 5 passed the value music and music cover comming from App.js.

Line 9 to 11 took a div and just showed the cover image.

Line 15 to 20 another div to show rest of the items.

Line 16 iterated all the data in the music comming from
App.js and stored them in item(one data at a time) index to count the total number of data.

Line 17 Used a component HotItemCard in that we passed all the attributes of the item( Such as its image, name, price and its occurence in data.json using index inorder to clearly understand that let's have a look towards data.json).

Image

In the above image we can see that every item in the music has name, price and its image.

Now let's work on HotItemCard.js.

Image

Line 3 we received all the props coming from HotAccessories.js.

Line 6 used the image and index coming from HotAccessories.js.

Line 7 & 8 used price and names.

Lets visit the browser to have a look what we did so far.

Image
Image

Now we come to know that every image/card is there but not in the fashion we want.

So in order to do so we need to style HotItemCard.js as well as HotAccessories.js so lets dive in to it.

Styling HotItemCard.js

Image

Once done import this CSS file to the HotItemCard.js.

Image description

Line 2 imported the style.

Image description

Image description

This is how the cards look in the browser.

Styling HotAccessories.js

Image description

Once done import this CSS file to the HotAccessories.js.

Image description

Line 3 imported the style.

Image description

This is how it looks in the browser.

Similarly we will design each items from Hot Accessories.

Hot Accessories (Smart devices).

Move to App.js.

Image description

Just below music add the route of Smart devices.

Image description

In browser if you click smart devices.

Move to HotAccessories.js

Image description

Receive the props Line 6.

Image description

In the cover image section/div if the music cover is present then show music cover and if smart devices cover is present the smart devices Line 11.

Image description

just below music add smart devices here && is used to ensure that if music is present then only show it.

browser view

Now if you move to browser you will get this.

Changes we need to make for the rest of the items.

In App.js added routes.

Image description

In HotAccessories.js.

Image description

Line 6 received all the props.

Image description

Done with the cover images.

Image description

Sent the data to the HotItemCard.js.

Image description

Image description

Image description

This is the browser view.

Look on the routes at the top of the every images to confirm don't be confused with the cursor.

Image description

Now let's design this.

In order to design it we need to do nothing just take the image link and send it to the HotItemCard.js it will do the work for you.

Image description

Line 40 we passed that image.

Image description

If you move to the browser you will get it.

Product Review Section

Image description

Move to App.js and first of all make that heading.

Image description

If we look at the browser it will look like this.

Image description

Now make a new component ProductReviews.js.

Image description

Move to App.js import it and use it.

Image description

Line 11 imported it.

Image description

Line 52 used that component and passed the data.

Now move to ProductReviews.js.

Image description

Line 2 imported the ProductReviewCard.js(we will talk about it later.

Line 5 received the props coming from the App.js.

Line 9 Iterated through the data and stored one at a time in item and index to count the total number of items in the productReviews(line 5 prop).

Line 11 passed the data to ProductReviewCard.js.

Now lets work on ProductReviewCard.js.

Image description

Line 3 received all the props coming from ProductReviews.js.
Line 5 to 10 used that data to structure the card.

Now if you move to the browser you will get this.

Image description

Now its time to design them.

ProductReviewCard.js

Image description

Add this CSS file.

Image description

Imported the CSS file line 3.

Image description

If you move to the browser it will look like this.

Now let's add some CSS to ProductReviews.js.

Image description

Add this CSS file to the ProductReviews.js.

Image description

Line 3 Imported the CSS file.

Image description

Now if you move to the browser it will look like this.

Now let's work on the Videos Section.

Image description

Let's first design the headings move to App.js.

Image description

Line 54 added heading.

Make a new component Videos.js.

Image description

Image description

Imported the Videos.js.

Image description

Line 54 using the video component and passed the data.

Now move to the Videos.js.

Image description

Line 2 imported VideoCard.js(we will work on it later).

Line 5 received the props.

Line 7 to 13 passed all the data to VideoCard.js to design the card.

Styling Videos.js.

Image description

Use this CSS file.

Image description

Line 3 imported the CSS file.

Work with VideoCard.js.

Image description

Line 5 in a variable stored the SVG code of the play button icon taken from Google icons.

Line 6 received all the props.

Line 8 set the background image using inline css because the image is coming as prop so it can't be carried or passed to any css file.

Line 10 used that play button declared earlier.
Line 11 used the name.

Image description

If you move to browser it will look like this now we need to add a css file to it.

Styling VideoCard.js.

Image description

Add this CSS file to VideoCard.js.

Image description

Line 2 imported the css file.

Image description

Now if you move to the browser it will look like this.

Now let's work on the In the press Section.

Image description

In order to do that first of all create the heading in App.js.

Image description

Line 58 created the Heading.

Image description

In the browser it looks like this.

Now create a new component Banner.js.

Image description

Now let's move to App.js and import it.

Image description

Line 14 imported the component.

Image description

Line 60 used the component and passed the data,

Image description

If you remember in our data(shown in above fig) we have banner object which has two arrays of items 1st is start and 2nd is end so using start we created the Slider.js component above now we need to use the End array of items to design this Banner.js.

Now move to Banner.js and design it.

Image description

Line 2 & 3 imported the bootstrap and its css file.

Line 9 specified the transition style.

Line 11 iterated the data and used it one by one.

Line 13 interval specifies that in 1000 millisec. the slides will change automatically.

Line 20 to 25 used caption to provide the details which was missing in Slider.js

If you don't understand move to the start of the post and have a look to the slider we made before.

Image description

Now if you move to the browser it will look like this.

Let's start working on the Footer.

Image description

First of all create anew component named Footer.js.

Image description

Import it to App.js.

Image description

Line 15 imported it.

Image description

Line 63 used that component and passed the data.

import React from 'react'
import "../styles/PreFooter.css"
import "../styles/Footer.css"


const repeatIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></svg>

const shieldIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm7 10c0 4.52-2.98 8.69-7 9.93-4.02-1.24-7-5.41-7-9.93V6.3l7-3.11 7 3.11V11zm-11.59.59L6 13l4 4 8-8-1.41-1.42L10 14.17z" /></svg>

const mapIcon = <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM10 5.47l4 1.4v11.66l-4-1.4V5.47zm-5 .99l3-1.01v11.7l-3 1.16V6.46zm14 11.08l-3 1.01V6.86l3-1.16v11.84z"/></svg>




const youtubeIcon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-35.20005 -41.33325 305.0671 247.9995"><path d="M229.763 25.817c-2.699-10.162-10.65-18.165-20.747-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.554 7.652 7.602 15.655 4.904 25.817 0 44.237 0 82.667 0 82.667s0 38.43 4.904 56.85c2.698 10.162 10.65 18.164 20.747 20.881 18.3 4.935 91.682 4.935 91.682 4.935s73.383 0 91.683-4.935c10.097-2.717 18.048-10.72 20.747-20.88 4.904-18.422 4.904-56.851 4.904-56.851s0-38.43-4.904-56.85" /><path d="M93.333 117.558l61.334-34.89-61.334-34.893z" fill="#fff"/></svg>



const twitterIcon = <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-44.7006 -60.54775 387.4052 363.2865"><path d="M93.719 242.19c112.46 0 173.96-93.168 173.96-173.96 0-2.646-.054-5.28-.173-7.903a124.338 124.338 0 0030.498-31.66c-10.955 4.87-22.744 8.148-35.11 9.626 12.622-7.57 22.313-19.543 26.885-33.817a122.62 122.62 0 01-38.824 14.841C239.798 7.433 223.915 0 206.326 0c-33.764 0-61.144 27.381-61.144 61.132 0 4.798.537 9.465 1.586 13.941-50.815-2.557-95.874-26.886-126.03-63.88a60.977 60.977 0 00-8.279 30.73c0 21.212 10.794 39.938 27.208 50.893a60.685 60.685 0 01-27.69-7.647c-.009.257-.009.507-.009.781 0 29.61 21.075 54.332 49.051 59.934a61.218 61.218 0 01-16.122 2.152 60.84 60.84 0 01-11.491-1.103c7.784 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.798-.28-14.584-.846 27.059 17.344 59.189 27.464 93.722 27.464"/></svg>

const facebookIcon = <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M15.12,5.32H17V2.14A26.11,26.11,0,0,0,14.26,2C11.54,2,9.68,3.66,9.68,6.7V9.32H6.61v3.56H9.68V22h3.68V12.88h3.06l.46-3.56H13.36V7.05C13.36,6,13.64,5.32,15.12,5.32Z"/></svg>

const instagramIcon =<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24"><path d="M12,9.52A2.48,2.48,0,1,0,14.48,12,2.48,2.48,0,0,0,12,9.52Zm9.93-2.45a6.53,6.53,0,0,0-.42-2.26,4,4,0,0,0-2.32-2.32,6.53,6.53,0,0,0-2.26-.42C15.64,2,15.26,2,12,2s-3.64,0-4.93.07a6.53,6.53,0,0,0-2.26.42A4,4,0,0,0,2.49,4.81a6.53,6.53,0,0,0-.42,2.26C2,8.36,2,8.74,2,12s0,3.64.07,4.93a6.86,6.86,0,0,0,.42,2.27,3.94,3.94,0,0,0,.91,1.4,3.89,3.89,0,0,0,1.41.91,6.53,6.53,0,0,0,2.26.42C8.36,22,8.74,22,12,22s3.64,0,4.93-.07a6.53,6.53,0,0,0,2.26-.42,3.89,3.89,0,0,0,1.41-.91,3.94,3.94,0,0,0,.91-1.4,6.6,6.6,0,0,0,.42-2.27C22,15.64,22,15.26,22,12S22,8.36,21.93,7.07Zm-2.54,8A5.73,5.73,0,0,1,19,16.87,3.86,3.86,0,0,1,16.87,19a5.73,5.73,0,0,1-1.81.35c-.79,0-1,0-3.06,0s-2.27,0-3.06,0A5.73,5.73,0,0,1,7.13,19a3.51,3.51,0,0,1-1.31-.86A3.51,3.51,0,0,1,5,16.87a5.49,5.49,0,0,1-.34-1.81c0-.79,0-1,0-3.06s0-2.27,0-3.06A5.49,5.49,0,0,1,5,7.13a3.51,3.51,0,0,1,.86-1.31A3.59,3.59,0,0,1,7.13,5a5.73,5.73,0,0,1,1.81-.35h0c.79,0,1,0,3.06,0s2.27,0,3.06,0A5.73,5.73,0,0,1,16.87,5a3.51,3.51,0,0,1,1.31.86A3.51,3.51,0,0,1,19,7.13a5.73,5.73,0,0,1,.35,1.81c0,.79,0,1,0,3.06S19.42,14.27,19.39,15.06Zm-1.6-7.44a2.38,2.38,0,0,0-1.41-1.41A4,4,0,0,0,15,6c-.78,0-1,0-3,0s-2.22,0-3,0a4,4,0,0,0-1.38.26A2.38,2.38,0,0,0,6.21,7.62,4.27,4.27,0,0,0,6,9c0,.78,0,1,0,3s0,2.22,0,3a4.27,4.27,0,0,0,.26,1.38,2.38,2.38,0,0,0,1.41,1.41A4.27,4.27,0,0,0,9,18.05H9c.78,0,1,0,3,0s2.22,0,3,0a4,4,0,0,0,1.38-.26,2.38,2.38,0,0,0,1.41-1.41A4,4,0,0,0,18.05,15c0-.78,0-1,0-3s0-2.22,0-3A3.78,3.78,0,0,0,17.79,7.62ZM12,15.82A3.81,3.81,0,0,1,8.19,12h0A3.82,3.82,0,1,1,12,15.82Zm4-6.89a.9.9,0,0,1,0-1.79h0a.9.9,0,0,1,0,1.79Z"/></svg>






const Footer = ({footer}) => {
    return (
       <>
        <div className="PreFooter">
            <div>
                {repeatIcon}
                 <p> <b>Hassle-free replacement</b> <br/>10-day easy replacement policy on mi.com</p>
               </div>
            <div>{shieldIcon} <p> <b>100% secure payments</b> <br/> We support Cards, Wallets, EMI and COD</p></div>
            <div>{mapIcon} <p> <b>Vast service network</b> <br/> 1000 Mi service-centers across 600 cities</p></div>
        </div>

        <div className="PreFooter2">
             <div> <p>LET'S STAY IN TOUCH</p><span>Get updates on sales specials and more</span></div>

             <div>
                 <div>
                     <input type="email" name="email" placeholder="Enter Email Address" />
                     <button>›</button>
                 </div>
                 <span>Thanks. You're on our email list for special offers.</span>
             </div>

             <div>
                    <p>FOLLOW MI</p>
                    <span>We want to hear from you!</span>
             </div>

             <div>
                {facebookIcon} {youtubeIcon} {instagramIcon} {twitterIcon} 
             </div>
        </div>

        <div className="footer">
                  <div> 
                     <p> SUPPORT</p>
                      {footer.support.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                 <p> SHOP AND LEARN</p>
                  {footer.shopAndLearn.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name} </a>

                      ))}

                  </div>
                  <div>
                   <p> RETAIL STORE</p>
                    {footer.retailStore.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                           <p>  ABOUT</p>
                             {footer.aboutUS.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                 <p> CONTACT US</p>
                  {footer.contactUs.map((item,index)=>(
                         <a key={item.url} href={item.url}>{item.name}</a>

                      ))}
                  </div>

                  <div>
                      <div>Chat with our Virtual AI Bot(24/7 Live Agent Support)</div><button>CHAT NOW</button>
                  </div>



        </div>
        <div className="footerBorder">
       <div> Copyright © 2010 - 2021 Xiaomi. All Rights Reserved</div>
        </div>

       </>
    )
}

export default Footer

Enter fullscreen mode Exit fullscreen mode

Since the code of the footer was too long so attached its code here for reference and I will use the code snippits from it to explain.

Image description

Line 2 and 3 since the file is big so used two different css files to style the footer.

Line 6 to 23 stored the SVG icons in the variables.

Image description

Line 30 received the data coming from App.js.

PreFooter

Line 32 since our footer has 3 parts so we will use three main divs "PreFooter", "PreFooter2" and "Footer" so inorder to wrap them we used this syntactic sugar format.

Line 33 to 40 we made a PreFooter.

Image description

In the above fig we can see that our PreFooter has three sections "Hassle free replacement", "100% Secure Payment" and "Vast service network".

PreFooter2

Image description

Image description

Line 42 to 61 made prefooter2 using input field and all the icons we imported.

Image description

Now if you move to the browser it will look like this let's style them.

Since we already imported the CSS files for both PreFooter and Footer so just add codes to the PreFooter file.
PreFooter2

Add the following CSS to the PreFooter.CSS.

.PreFooter{
    margin: 5vmax 0 0 0;
    background-color: white;
    padding: 1vmax;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.PreFooter > div{
    align-items: center;
    justify-content: center;
    display: flex;
    color:rgba(66, 66, 66, 0.829);
cursor: pointer;
}
.PreFooter > div:hover svg{
fill: rgb(34, 34, 34);
}
.PreFooter > div:hover p{
    color: rgb(19, 18, 18);
}


.PreFooter svg{
   transform: scale(2) translateY(-0.2vmax);
   fill: rgba(37, 37, 37, 0.322);
  margin: 2vmax;

}


/* --------------------PRE FOOTER 2---------- */


.PreFooter2{
    display: grid;
    height: 150px;
    grid-template-columns: repeat(4,1fr); 
  }

  .PreFooter2 > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .PreFooter2 > div > p{
    color: rgba(0, 0, 0, 0.842);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size:1.5vmax;
    width: 18vmax;
    margin: 0% ;
  }
  .PreFooter2 > div > span{
    color: rgba(51, 51, 51, 0.842);
    width: 18vmax;
    font-size:1vmax;
  }

  .PreFooter2 > div > div > input{
    border: none;
    outline: none;
    padding: 0.5vmax 1vmax;
    background-color: rgb(255, 255, 255);
    font-size: 1vmax;

    width: 20.4vmax;
  }
  .PreFooter2 > div > div > button{
    border: none;
    padding: 0.5vmax;
    background-color: rgb(255, 255, 255);
    outline: none;
  }
  .PreFooter2 > div > div{
  border: 1px solid rgba(126, 126, 126, 0.493);
  }

  .PreFooter2 > div:nth-child(2) > span{
    width: 22vmax;
  }


  .PreFooter2 > div:nth-child(3){
    justify-content: center;
    align-items:flex-end;
  }

  .PreFooter2 > div:nth-child(3) > p{
    width: 14vmax;
  }

  .PreFooter2 > div:nth-child(3) > span{
    width: 14vmax;
  }
  .PreFooter2 > div:nth-child(4) {
    flex-direction: row;
  }
  .PreFooter2 > div:nth-child(4) > svg{
    cursor: pointer;
    margin: 1vmax;
    fill: rgba(138, 138, 138, 0.705);
  }
  .PreFooter2 > div:nth-child(4) > svg:hover{
    fill: rgb(94, 94, 94);
  }

Enter fullscreen mode Exit fullscreen mode

And now if you move to the browser it will look like this.

Image description

Lets start working on the Footer.

Image description

Image description

Image description

Before discussing about the above code let's have a look on the data.json.

Image description

Here you can see that footer is an object and has some array of datas for support, shop and learn, retail store etc so footer will consist that much section.

Line 64 to 70 made the support section of the footer.

Line 72 to 79 made the shop and learn section of the footer.

Line 80 to 86 made the retail store section of the footer.

Line 88 to 94 made the About section of the footer.

Line 96 to 102 made the Contact Us section of the footer.

Line 104 to 106 made the Chat Now button with some text.

Line 110 to 112 a border and the copyright message.

Now if you move to the browser it will look some thing like this let's design them.

.footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
    padding: 4.5vmax;
    background-color: rgb(37, 37, 37);
    color: rgb(197, 197, 197);
}

.footer > div{
    margin:1vmax;
    display: flex;
    flex-direction: column;

}

.footer > div:nth-child(2){
    display: block;
}
.footer > div:nth-child(2) >a{
        display: inline-block;

}
.footer > div > a{
    color: rgb(197, 197, 197);
    font-size: 1vmax;
    text-decoration: none;
    margin: 0.6vmax 0;
}

.footer > div > a:hover{
    color: white;
}


.footer > div:last-child >div{
    width: 45%;
    margin: 1vmax 0;
    font-size: 0.8vmax;
}

.footer > div:last-child >button{
width: 50%;
border:1px solid white;
background-color: rgb(37, 37, 37);
color: white;
padding: 0.6vmax 0;
font-size: 0.98vmax;
font-weight: 100;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
transition: all 0.5s;
}

.footer > div:last-child >button:hover{
    background-color: rgb(248, 244, 244);
    color: rgb(37, 37, 37);
}

.footerBorder{
    background-color:   rgb(37, 37, 37)  ; 
    color: white;

}
.footerBorder >div{
    border-top: 1px solid rgba(197, 197, 197, 0.185) ;
    color: rgb(197, 197, 197);
    width: 90vmax;
    margin: auto;
    padding: 2vmax;
   font-size: 0.98vmax;
}
Enter fullscreen mode Exit fullscreen mode

Add this CSS Code to Footer.Css.

Image description

Now it will look like this in the browser.

Top comments (0)

🌚 Life is too short to browse without dark mode