cmd

npx create-react-app ecommerce-app –template redux

cd ecommerce-app

code .

#vs code terminal

npm i react-icons

npm i react-router-dom

npm start

public

images folder rkh diya

1. Setup our layout - we need react-router-dom

index.js

import React from 'react';

import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

const container = document.getElementById('root');

const root = createRoot(container);

root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import React from 'react';

import logo from './logo.svg';
import { Counter } from './features/counter/Counter';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Counter />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<span>
<span>Learn </span>
<a
className="App-link"
href="https://reactjs.org/"
target="_blank"
rel="noopener noreferrer"
>
React
</a>
<span>, </span>
<a
className="App-link"
href="https://redux.js.org/"
target="_blank"
rel="noopener noreferrer"
>
Redux
</a>
<span>, </span>
<a
className="App-link"
href="https://redux-toolkit.js.org/"
target="_blank"
rel="noopener noreferrer"
>
Redux Toolkit
</a>
,<span> and </span>
<a
className="App-link"
href="https://react-redux.js.org/"
target="_blank"
rel="noopener noreferrer"
>
 React Redux
</a>
</span>
</header>
</div>
);
}

export default App;

delete this files

setupTests.js

reportWebVitals.js

logo.svg

index.css

App.test.js

index.js

import React from 'react';

import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');

const root = createRoot(container);

root.render(<App />);

App.js

import React from 'react';

import './App.css';

function App() {
return <h1>Hello from app</h1>

export default App;

App.js
import React from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';

function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
//inside this route we need to pass all our route
//whatever we pass inside this .......it will reflect with the help of
this outlet (which is present inside Layout.js)
</Route>
</Routes>
</BrowserRouter>
</>
);
}

export default App;

Layout.js

import React from 'react';

import { Outlet } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
const Layout = () => {
return (
<>
<Header />
<Outlet />
<Footer />
</>
);
}

export default Layout;

Header.js

import React from 'react';

const Header = () => {

return (
 <div>
Header
</div>
)
}

export default Header;

Footer.js

import React from 'react';

const Footer = () => {

return (
<div>
Footer
</div>
)
}

export default Footer;

App.js

import React from 'react';

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';

function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
//inside this route we need to pass all our route
//whatever we pass inside this .......it will reflect with the help of
this outlet (which is present inside Layout.js)
<Route index element={<Home />} /> //index.......means "/" itself
</Route>
</Routes>
</BrowserRouter>
</>
);
}

export default App;

pages

Home.js

import React from 'react';

const Home = () => {

return (
<div>
Home
</div>
)
}

export default Home;

chrome output http://localhost:3000/

Header
Home
Footer

App.js
import React from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
//inside this route we need to pass all our route
//whatever we pass inside this .......it will reflect with the help of this outlet (which is present
inside Layout.js)
<Route index element={<Home />} /> //index.......means "/" itself //so this Home is our child
route
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
}

export default App;

pages

About.js
import React from 'react';

const About = () => {

return (
<div>
About
</div>
)
}

export default About;

pages

Contact.js
import React from 'react';

const Contact = () => {

return (
<div>
Contact
</div>
)
}

export default Contact;

chrome http://localhost:3000/

Header
Home
Footer

Chrome http://localhost:3000/about

Header
About
Footer

Chrome http://localhost:3000/contact

Header
Contact
Footer
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
 content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

//google font rubrik link............and also include rules in App.css

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Rubrik:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">

//bootstrap link
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>React Redux App</title>

</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

//bundle link 5.0bootstrap

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/
tWtIaxVXM"
crossorigin="anonymous"></script>

</body>
</html>

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Rubrik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

3rd header part

Header.js

<header className="header-bottom py-3">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="menu-bottom d-flex align-items-center gap-30">

{/* i am going to create 2nd part now */}

<div>
{/* this is dropdown code */}
<div className="dropdown">
<button
className="btn btn-secondary dropdown-toggle bg-
transparent border-0 gap-15 d-flex align-items-center"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<img src="images/menu.svg" alt="" />
<span className="me-5 d-inline-block">Shop
Categories</span>
</button>
<ul className="dropdown-menu" aria-
labelledby="dropdownMenuButton1">
<li><a className="dropdown-item"
href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another
action</a></li>
<li><a className="dropdown-item" href="#">Something
else here</a></li>
</ul>
</div>

</div>
<div className="menu-links">
<div className="d-flex align-items-center gap-15">
<NavLink to="/">Home</NavLink>
<NavLink to="/">Our Store</NavLink>
<NavLink to="/">Blogs</NavLink>
<NavLink to="/contact">Contact</NavLink>
</div>
</div>
 </div>
</div>
</div>
</div>
</header>

App.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;

}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}
.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
}

/* Header Part End Here */

- - - - - - - - - - - - - - - - - -- - - - - - -- - -- - - - - - - -- - - - - -- - - - -
-- -

Change

a – Link

href – to

Header.js

import React from 'react';

import { NavLink, Link } from 'react-router-dom';
import { BsSearch } from 'react-icons/bs';
const Header = () => {
return (
<>
{/* header.header-top-strip
.container-xxl
.row
padding py-3 */}
<header className="header-top-strip py-3">
<div className="container-xxl">
<div className="row">
<div className="col-6">
<p className="text-white mb-0">
Free Shipping Over 1000 & Free Returns
</p>
</div>
<div className="col-6">
<p className="text-end text-white">
Hotline: <a className="text-white" href="tel:+91 9993705500">+91
9993705500</a>
 </p>
</div>
</div>
</div>
</header>

<header className="header-upper py-3">

<div className="container-xxl">
<div className="row align-items-center">
<div className="col-2">
<h2>
<Link className="text-white">Dev Corner</Link>
{/* this link means a tag..... and a tag donot take color from our parents
*/}
</h2>
</div>

<div className="col-5">
<div className="input-group">
<input
type="text"
className="form-control py-2"
placeholder="Search Product Here..."
aria-label="Search Product Here..."
aria-describedby="basic-addon2"
/>
<span className="input-group-text p-3" id="basic-addon2">
{/* @example.com */}
<BsSearch className="fs-6" />
</span>
</div>
</div>

<div className="col-5">
<div className="header-upper-links d-flex align-items-center justify-
content-between">

<div>
<Link className="d-flex align-items-center gap-10 text-white">
<img src="images/compare.svg" alt="compare" />
<p className="mb-0">
Compare <br /> Products
</p>
</Link>
</div>
<div>
<Link className="d-flex align-items-center gap-10 text-white">
<img src="images/wishlist.svg" alt="wishlist" />
<p className="mb-0">
Favourite <br /> wishlist
</p>
</Link>
</div>
 <div>
<Link className="d-flex align-items-center gap-10 text-white">
<img src="images/user.svg" alt="user" />
<p className="mb-0">
Login <br /> My Account
</p>
</Link >
</div>
<div>
<Link className="d-flex align-items-center gap-10 text-white">
<img src="images/cart.svg" alt="cart" />
<div className="d-flex flex-column gap-10">
<span className="badge bg-white text-dark">0</span>
<p className="mb-0">$ 500</p>
</div>
</Link>
</div>

</div>
</div>

</div>
</div>
</header>

<header className="header-bottom py-3">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="menu-bottom d-flex align-items-center gap-30">

{/* i am going to create 2nd part now */}

<div>
{/* this is dropdown code */}
<div className="dropdown">
<button
className="btn btn-secondary dropdown-toggle bg-
transparent border-0 gap-15 d-flex align-items-center"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<img src="images/menu.svg" alt="" />
<span className="me-5 d-inline-block">Shop
Categories</span>
</button>
<ul className="dropdown-menu" aria-
labelledby="dropdownMenuButton1">
<li><Link className="dropdown-item text-white"
to="">Action</Link></li>
<li><Link className="dropdown-item text-white"
to="">Another action</Link></li>
 <li><Link className="dropdown-item text-white"
to="">Something else here</Link></li>
</ul>
</div>

</div>
<div className="menu-links">
<div className="d-flex align-items-center gap-15">
<NavLink to="/">Home</NavLink>
<NavLink to="/">Our Store</NavLink>
<NavLink to="/">Blogs</NavLink>
<NavLink to="/contact">Contact</NavLink>
</div>
</div>

</div>
</div>
</div>
</div>
</header>
</>
)
}

export default Header;

// className
// text-end - to text align right
// text-start - used for text align left
// py - padding from top & bottom
// px - padding from left & right
// ps - padding from left
// pe - padding from end

// mb - margin bottom
// pb - padding bottom
// pd - padding top
// md - margin top

//col-2 for logo

//col-5 for search bar
//col-5 for our links

// p-3 padding from top bottom left right

// fs font-size ex- fs-4 kr denge to search wala size bda ho jayega...isliye fs-6

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;

}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}
.header-upper .header-upper-links img{
width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

Footer.js initially

import React from 'react';

const Footer = () => {

return (
<div>
Footer
</div>
)
}

export default Footer;

Footer.js
import React from 'react';

const Footer = () => {

return (
<>
<footer className="py-3"></footer>
<footer className="py-3"></footer>
<footer className="py-3">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<p className="text-center">&copy; {new Date().getFullYear()}; Powered By
Developer's Corner </p>
</div>
</div>
</div>
</footer>
 </>
);
};

export default Footer;

App.css
footer {
background-color: var(--color-232f3e);
}

- - - - - -- - - - - --- - -- - - - - - - - - - - - - - - -- - -- - - -- ---

Footer.js

import React from 'react';

const Footer = () => {

return (
<>
<footer className="py-3"></footer>
<footer className="py-3"></footer>
<footer className="py-3">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<p className="text-center mb-0 text-white">
&copy; {new Date().getFullYear()}; Powered By Developer's Corner
</p>
</div>
</div>
</div>
</footer>
 </>
);
};

export default Footer;

ab
Powered By Developer's Corner (white color m display hoga)

Footer.js

import React from 'react';

const Footer = () => {

return (
<>
<footer className="py-4">
<div className="container-xxl">
<div className="row align-items-center">
<div className="col-5">
<div className="footer-top-data d-flex gap-30 align-items-center">
<img src="images/newsletter.png" alt="newsletter" />
<h2 className="mb-0 text-white">Sign Up for Newsletter</h2>
</div>
</div>
<div className="col-7">

<div className="input-group">
<input
type="text"
className="form-control py-1"
placeholder="Your Email Address"
aria-label="Your Email Address"
aria-describedby="basic-addon2"
/>
<span className="input-group-text p-2" id="basic-addon2">
{/* @example.com p-2 se chota ho gya ...search bar ki size puri*/}
{/* <BsSearch className="fs-6" /> */}
Subscribe
</span>
</div>

</div>

</div>
</div>
</footer>

<footer className="py-3"></footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">
 <div className="col-12">
<p className="text-center mb-0 text-white">
&copy; {new Date().getFullYear()}; Powered By Developer's Corner
</p>
</div>
</div>
</div>
</footer>
</>
);
};

export default Footer;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;

}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}
.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

Footer middle wala bcha h abhi

import React from 'react';
import { Link } from "react-router-dom";

const Footer = () => {

return (
<>
<footer className="py-4">
<div className="container-xxl">
<div className="row align-items-center">
<div className="col-5">
<div className="footer-top-data d-flex gap-30 align-items-center">
<img src="images/newsletter.png" alt="newsletter" />
<h2 className="mb-0 text-white">Sign Up for Newsletter</h2>
</div>
</div>
<div className="col-7">

<div className="input-group">
<input
type="text"
className="form-control py-1"
placeholder="Your Email Address"
aria-label="Your Email Address"
aria-describedby="basic-addon2"
/>
<span className="input-group-text p-2" id="basic-addon2">
{/* @example.com p-2 se chota ho gya ...search bar ki size puri*/}
{/* <BsSearch className="fs-6" /> */}
Subscribe
</span>
</div>

</div>

</div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">

<div className="col-4">
<h4 className="text-white mb-4">Contact Us</h4>
<div></div>
</div>
<div className="col-3">
<h4 className="text-white mb-4">Information</h4>
<div></div>
</div>
<div className="col-3">
<h4 className="text-white mb-4">Account</h4>
<div></div>
 </div>
<div className="col-2">
<h4 className="text-white mb-4">Quick Links</h4>
<div className="footer-links">
<Link className="text-white py-2 mb-1">Laptops</Link>
<Link className="text-white py-2 mb-1">Headphones</Link>
<Link className="text-white py-2 mb-1">Tablets</Link>
<Link className="text-white py-2 mb-1">Watch</Link>
</div>
</div>

</div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<p className="text-center mb-0 text-white">
&copy; {new Date().getFullYear()}; Powered By Developer's Corner
</p>
</div>
</div>
</div>
</footer>
</>
);
};

export default Footer;

Quick Links dekhna ab

import React from 'react';

import { Link } from "react-router-dom";

const Footer = () => {

return (
<>
<footer className="py-4">
<div className="container-xxl">
<div className="row align-items-center">
<div className="col-5">
<div className="footer-top-data d-flex gap-30 align-items-center">
<img src="images/newsletter.png" alt="newsletter" />
<h2 className="mb-0 text-white">Sign Up for Newsletter</h2>
</div>
</div>
<div className="col-7">

<div className="input-group">
<input
type="text"
className="form-control py-1"
placeholder="Your Email Address"
aria-label="Your Email Address"
aria-describedby="basic-addon2"
/>
<span className="input-group-text p-2" id="basic-addon2">
{/* @example.com p-2 se chota ho gya ...search bar ki size puri*/}
{/* <BsSearch className="fs-6" /> */}
Subscribe
</span>
</div>

</div>

</div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">

<div className="col-4">
<h4 className="text-white mb-4">Contact Us</h4>
<div></div>
</div>
<div className="col-3">
<h4 className="text-white mb-4">Information</h4>
<div></div>
</div>
<div className="col-3">
<h4 className="text-white mb-4">Account</h4>
 <div></div>
</div>
<div className="col-2">
<h4 className="text-white mb-4">Quick Links</h4>
<div className="footer-links d-flex flex-column">
<Link className="text-white py-2 mb-1">Laptops</Link>
<Link className="text-white py-2 mb-1">Headphones</Link>
<Link className="text-white py-2 mb-1">Tablets</Link>
<Link className="text-white py-2 mb-1">Watch</Link>
</div>
</div>

</div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<p className="text-center mb-0 text-white">
&copy; {new Date().getFullYear()}; Powered By Developer's Corner
</p>
</div>
</div>
</div>
</footer>
</>
);
};

export default Footer;

Footer.js

import React from 'react';

import { Link } from "react-router-dom";
import { BsLinkedin,BsGithub,BsYoutube,BsInstagram } from "react-icons/bs";
const Footer = () => {
return (
<>
<footer className="py-4">
<div className="container-xxl">
<div className="row align-items-center">
<div className="col-5">
<div className="footer-top-data d-flex gap-30 align-items-center">
<img src="images/newsletter.png" alt="newsletter" />
<h2 className="mb-0 text-white">Sign Up for Newsletter</h2>
</div>
</div>
<div className="col-7">

<div className="input-group">
<input
type="text"
className="form-control py-1"
placeholder="Your Email Address"
aria-label="Your Email Address"
aria-describedby="basic-addon2"
/>
<span className="input-group-text p-2" id="basic-addon2">
{/* @example.com p-2 se chota ho gya ...search bar ki size puri*/}
{/* <BsSearch className="fs-6" /> */}
Subscribe
</span>
</div>

</div>

</div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">

<div className="col-4">
<h4 className="text-white mb-4">Contact Us</h4>

<div>
<address className="text-white fs-6">Hno: 277 NearVill chopal, <br /> Sonipat,
Haryana <br />
PinCode: 131103
</address>
 <a href="tel:+91 8264954234" className="mt-3 d-block mb-1 text-white">+91
8264954234</a>
<a href="mail:indvibeinfotech@gmail.com" className="mt-2 d-block mb-0 text-
white">indvibeinfotech@gmail.com</a>

<div className="social_icons d-flex align-items-center gap-30 mt-4">

<a className="text-white" href="">
<BsLinkedin className="fs-4" />
</a>
<a className="text-white" href="">
<BsInstagram className="fs-4" />
</a>
<a className="text-white" href="">
<BsGithub className="fs-4" />
</a>
<a className="text-white" href="">
<BsYoutube className="fs-4" />
</a>

</div>
</div>

</div>
<div className="col-3">
<h4 className="text-white mb-4">Information</h4>
<div className="footer-links d-flex flex-column">
<Link className="text-white py-2 mb-1">Privacy Policy</Link>
<Link className="text-white py-2 mb-1">Refund Policy</Link>
<Link className="text-white py-2 mb-1">Shipping Policy</Link>
<Link className="text-white py-2 mb-1">Terms of Service</Link>
<Link className="text-white py-2 mb-1">Blogs</Link>
</div>
</div>
<div className="col-3">
<h4 className="text-white mb-4">Account</h4>
<div className="footer-links d-flex flex-column">
<Link className="text-white py-2 mb-1">About Us</Link>
<Link className="text-white py-2 mb-1">Faq</Link>
<Link className="text-white py-2 mb-1">Contact</Link>
</div>

</div>
<div className="col-2">
<h4 className="text-white mb-4">Quick Links</h4>

<div className="footer-links d-flex flex-column">

<Link className="text-white py-2 mb-1">Laptops</Link>
<Link className="text-white py-2 mb-1">Headphones</Link>
<Link className="text-white py-2 mb-1">Tablets</Link>
<Link className="text-white py-2 mb-1">Watch</Link>
</div>

</div>
 </div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<p className="text-center mb-0 text-white">
&copy; {new Date().getFullYear()}; Powered By Developer's Corner
</p>
</div>
</div>
</div>
</footer>
</>
);
};

export default Footer;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;

}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */
.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

pages

Home.js initially

import React from 'react';

const Home = () => {

return (
<div>
Home
</div>
)
}

export default Home;

Home.js

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner p-3">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
 alt="main-banner"
/>
<div className="main-banner-content">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link></Link>
</div>
</div>
</div>

<div className="col-6"></div>
</div>
</div>
</section>
</>
);
};

export default Home;

Home.js

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
 <div className="main-banner position-relative p-3">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link></Link>
</div>
</div>
</div>

<div className="col-6"></div>
</div>
</div>
</section>
</>
);
};

export default Home;

App.css

/* Home page */
.main-banner-content{
top: 15%;
left: 5%;
}
/* Home Page Ends */

App.css

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

/* Home Page Ends */

App.css

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 52px;
line-height: 64px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

/* Home Page Ends */

Home.js

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative p-3">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6"></div>
</div>
</div>
</section>
</>
 );
};

export default Home;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
 border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}
.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* Home Page Ends */

Our one card is ready

Other 4 are left

Home.js

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative p-3">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
 <h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap justify-content-between align-items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative p-3">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>
</>
);
};

export default Home;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
 /* SUBSCRIBE button ka color change kr dete h */
footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* Home Page Ends */

Home.js

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
 className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-items-
center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
 <p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>
</>
);
};

export default Home;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
 display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
 font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}
/* Home Page Ends */

Home page pr ab another section bnayenge hm ab

Home.js

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">
 <div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>
 <div className="small-banner position-relative">
<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div>
<img src="images/service.png" alt="services" />
<div>
 <h6>Free Shipping</h6>
<p>From all orders over $5</p>
</div>
</div>
<div>
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p>Save upto 25% off</p>
</div>
</div>
<div>
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p>Shop with an expert</p>
</div>
</div>
<div>
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p>Get Factory Default Price</p>
</div>
</div>
<div>
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p>100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>
</>
);
};

export default Home;

App.css

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

Home.js

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
 <h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
 <h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p>Save upto 25% off</p>
 </div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>
</>
);
};

export default Home;

<p className="mb-0">100% Protected Payment</p>

Home.js section 3 – categories section

import React from 'react';

import { Link } from "react-router-dom";

const Home = () => {

return (
<>
 <section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
 <p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">
 <div className="d-flex align-items-center gap-15">
<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
 <div className="categories d-flex justify-content-between align-items-
center">

<div className="d-flex gap-30 align-items-center">

<div>
<h6>Cameras</h6>
<p>10 items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>
</>
);
};

export default Home;

App.css

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

/* categories section ends here */

Home.js

Section 3 categories section

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between align-items-
center">

<div className="d-flex gap-30 align-items-center">

<div>
<h6>Cameras</h6>
<p>10 items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>
</>
);
};

export default Home;

Home.js
import React from 'react';
import { Link } from "react-router-dom";

const Home = () => {

return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
 <div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
 src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
 </div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between align-items-
center">

<div className="d-flex gap-30 align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap-30 align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap-30 align-items-center">

<div>
 <h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap-30 align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>
</>
);
};

export default Home;

Home.js

import React from 'react';

import { Link } from "react-router-dom";
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
 />
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
 <div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>
 <section className="home-wrapper-2 py-5">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap
align-items-center">

<div className="d-flex align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

{/* copy all 4 above div */}

<div className="d-flex align-items-center">
<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>
 <div className="d-flex align-items-center">
<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>
</>
);
};

export default Home;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
 --color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
 background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
 /* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);
}

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

This 3rd sections is completed

Footer.js

import React from 'react';

import { Link } from "react-router-dom";
import { BsLinkedin,BsGithub,BsYoutube,BsInstagram } from "react-icons/bs";
const Footer = () => {
return (
<>
<footer className="py-4">
<div className="container-xxl">
<div className="row align-items-center">
<div className="col-5">
<div className="footer-top-data d-flex gap-30 align-items-center">
<img src="images/newsletter.png" alt="newsletter" />
<h2 className="mb-0 text-white">Sign Up for Newsletter</h2>
</div>
</div>
<div className="col-7">

<div className="input-group">
<input
type="text"
className="form-control py-1"
placeholder="Your Email Address"
aria-label="Your Email Address"
aria-describedby="basic-addon2"
/>
<span className="input-group-text p-2" id="basic-addon2">
 {/* @example.com p-2 se chota ho gya ...search bar ki size puri*/}
{/* <BsSearch className="fs-6" /> */}
Subscribe
</span>
</div>

</div>

</div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">

<div className="col-4">
<h4 className="text-white mb-4">Contact Us</h4>

<div>
<address className="text-white fs-6">Hno: 277 NearVill chopal, <br />
Sonipat, Haryana <br />
PinCode: 131103
</address>

<a href="tel:+91 8264954234" className="mt-3 d-block mb-1 text-

white">+91 8264954234</a>
<a href="mail:indvibeinfotech@gmail.com" className="mt-2 d-block
mb-0 text-white">indvibeinfotech@gmail.com</a>

<div className="social_icons d-flex align-items-center gap-30 mt-

4">
<a className="text-white" to="">
<BsLinkedin className="fs-4" />
</a>
<a className="text-white" to="">
<BsInstagram className="fs-4" />
</a>
<a className="text-white" to="">
<BsGithub className="fs-4" />
</a>
<a className="text-white" to="">
<BsYoutube className="fs-4" />
</a>

</div>
</div>
 </div>
<div className="col-3">
<h4 className="text-white mb-4">Information</h4>
<div className="footer-links d-flex flex-column">
<Link className="text-white py-2 mb-1">Privacy Policy</Link>
<Link className="text-white py-2 mb-1">Refund Policy</Link>
<Link className="text-white py-2 mb-1">Shipping Policy</Link>
<Link className="text-white py-2 mb-1">Terms of Service</Link>
<Link className="text-white py-2 mb-1">Blogs</Link>
</div>
</div>
<div className="col-3">
<h4 className="text-white mb-4">Account</h4>
<div className="footer-links d-flex flex-column">
<Link className="text-white py-2 mb-1">About Us</Link>
<Link className="text-white py-2 mb-1">Faq</Link>
<Link className="text-white py-2 mb-1">Contact</Link>
</div>

</div>
<div className="col-2">
<h4 className="text-white mb-4">Quick Links</h4>

<div className="footer-links d-flex flex-column">

<Link className="text-white py-2 mb-1">Laptops</Link>
<Link className="text-white py-2 mb-1">Headphones</Link>
<Link className="text-white py-2 mb-1">Tablets</Link>
<Link className="text-white py-2 mb-1">Watch</Link>
</div>

</div>

</div>
</div>
</footer>

<footer className="py-4">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<p className="text-center mb-0 text-white">
&copy; {new Date().getFullYear()}; Powered By Developer's Corner
</p>
</div>
</div>
</div>
</footer>
 </>
);
};

export default Footer;

npm i react-fast-marquee

Home.js

import React from 'react';

import { Link } from "react-router-dom";
import Marquee from "react-fast-marquee";
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
 <h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>
 </div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
 </div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap
align-items-center">

<div className="d-flex gap align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>
 {/* copy all 4 above div */}
<div className="d-flex gap align-items-center">
<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>

<section className="marque-wrapper py-5">

<div className="container-xxl">
<div className="row">
<div className="marquee-inner-wrapper card-wrapper">

<Marquee className="d-flex">
<div className="mx-4 w-25">
<img src="images/brand-01.png" alt="brand" />
 </div>

<div className="mx-4 w-25">

<img src="images/brand-02.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-03.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-04.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-05.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-06.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-07.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-08.png" alt="brand" />
</div>

</Marquee>

</div>
</div>
</div>
</section>
</>
);
};

export default Home;

// mx - left or right

App.css
*{
margin: 0;
padding: 0;
 box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
}
body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
 background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}
/* marque m use kiya h card-wrapper ko */
.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}
 /* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
 font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
 font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}
.categories > div:nth-child(5),
.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

5th section – Our Latest Blogs

Home.js

import React from 'react';

import { Link } from "react-router-dom";
import Marquee from "react-fast-marquee";
import BlogCard from '../components/BlogCard';
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
 className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
 className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
 <div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap
align-items-center">

<div className="d-flex gap align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
 <img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

{/* copy all 4 above div */}

<div className="d-flex gap align-items-center">
<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
 </div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>

<section className="marque-wrapper py-5">

<div className="container-xxl">
<div className="row">
<div className="marquee-inner-wrapper card-wrapper">

<Marquee className="d-flex">
<div className="mx-4 w-25">
<img src="images/brand-01.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-02.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-03.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-04.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-05.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-06.png" alt="brand" />
</div>
 <div className="mx-4 w-25">
<img src="images/brand-07.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-08.png" alt="brand" />
</div>

</Marquee>

</div>
</div>
</div>
</section>

<section className="blog-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Latest Blogs</div>
</div>

<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
</div>
</div>

</section>
</>
);
};

export default Home;

// mx - left or right

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
 /* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
 text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
 line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part */

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
 line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

Featured Collection section in

Home.js

import React from 'react';

import { Link } from "react-router-dom";
import Marquee from "react-fast-marquee";
import BlogCard from '../components/BlogCard';
import ProductCard from '../components/ProductCard';
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
 <div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
 <div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
 <h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap
align-items-center">

<div className="d-flex gap align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>
<div className="d-flex gap align-items-center">
<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

{/* copy all 4 above div */}

<div className="d-flex gap align-items-center">
<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>
 <div className="d-flex gap align-items-center">
<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>

<section className="marque-wrapper py-5">

<div className="container-xxl">
<div className="row">
<div className="marquee-inner-wrapper card-wrapper">

<Marquee className="d-flex">
<div className="mx-4 w-25">
<img src="images/brand-01.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-02.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-03.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-04.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-05.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-06.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-07.png" alt="brand" />
</div>
 <div className="mx-4 w-25">
<img src="images/brand-08.png" alt="brand" />
</div>

</Marquee>

</div>
</div>
</div>
</section>

{/* copy Our Latest Blogs section code */}

<section className="blog-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Featured Collection</div>
</div>

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>

</section>

<section className="blog-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Latest Blogs</div>
</div>

<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
</div>
</div>

</section>
 </>
);
};

export default Home;

// mx - left or right

component

ProductCard.js

import React from 'react';

import ReactStarts from "react-rating-stars-component";
import { Link } from 'react-router-dom';

const ProductCard = () => {

return (
<div className="col-3">
<div className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" alt="product image" />
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false}

activeColor="#ffd700" />

<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
 </Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</div>
</div>
);
};

export default ProductCard;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
 background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}
.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
 background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}
.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

}
/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
 border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
}
.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also
we have done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card.product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

Image change hogi hover krenge tb isme……

Home.js same code

ProductCard.js

import React from 'react';

import ReactStarts from "react-rating-stars-component";
import { Link } from 'react-router-dom';

const ProductCard = () => {

return (
<div className="col-3">
<Link className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image"
/>
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false}

activeColor="#ffd700" />

<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>
 </Link>
</div>
);
};

export default ProductCard;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
 text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}
.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
 background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}
.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* is upr ki 2 lines se img fit ho gyi frame m dono,,,,,to change image of

Featured Collection - below 3 are used */
.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}
.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also
we have done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

Output-same

Section – Special Product wala

Home.js
import React from 'react';
import { Link } from "react-router-dom";
import Marquee from "react-fast-marquee";
import BlogCard from '../components/BlogCard';
import ProductCard from '../components/ProductCard';
import SpecialProduct from '../components/SpecialProduct';
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
 src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
 </div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap align-items-center">

<div className="d-flex gap align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
 </div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

{/* copy all 4 above div */}

<div className="d-flex gap align-items-center">
<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>

{/* copy Our Latest Blogs section code */}

<section className="featured-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
 <div className="row">

<div className="col-12">
<div className="section-heading">Featured Collection</div>
</div>

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>

</section>

<section className="special-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<h3 className="section-heading">Special Products</h3>
</div>

</div>

<div className="row">
<SpecialProduct />
<SpecialProduct />
<SpecialProduct />
</div>

</div>
</section>

<section className="marque-wrapper py-5">

<div className="container-xxl">
<div className="row">
<div className="marquee-inner-wrapper card-wrapper">

<Marquee className="d-flex">
<div className="mx-4 w-25">
<img src="images/brand-01.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-02.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-03.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-04.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-05.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-06.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-07.png" alt="brand" />
</div>

<div className="mx-4 w-25">

 <img src="images/brand-08.png" alt="brand" />
</div>

</Marquee>

</div>
</div>
</div>
</section>

<section className="blog-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Latest Blogs</div>
</div>

<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
</div>
</div>

</section>

</>
);
};

export default Home;

// mx - left or right

SpecialProduct.js
import React from 'react';
import ReactStarts from "react-rating-stars-component";
import { Link } from 'react-router-dom';

const SpecialProduct = () => {

return (
<div className="col-6 mb-3">
<div className="special-product-card">

<div className="d-flex justify-content-between">

<div>
<img src="images/watch.jpg" className="img-fluid" alt="watch" />
</div>

<div className="special-product-content">
<h5 className="brand">Havels</h5>
<h6 className="title">Samsung Galaxy Note10+ Mobile Phone; Sim...</h6>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

<p className="price">
<span className="red-p">$100</span> &nbsp; <strike>$200</strike>
</p>

<div className="discount-till d-flex align-items-center gap-10">

<p className="mb-0">
<b>5 </b>days
</p>
 <div className="d-flex gap-10 align-items-center">
<span className="badge rounded-circle p-3 bg-danger">l</span>:
<span className="badge rounded-circle p-3 bg-danger">l</span>:
<span className="badge rounded-circle p-3 bg-danger">l</span>
</div>

</div>

<div className="prod-count my-3">

<p>Products: 5</p>

<div className="progress">
<div className="progress-bar" role="progressbar" style={{ width: "25%" }} aria-
valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

</div>

<Link className="button">Add to Cart</Link>

</div>

</div>

</div>
</div>
);
};

export default SpecialProduct;

App.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so it is easy to change it
in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
 font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

 box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
 display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have done transition in action-
bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

Our Popular Products – section

Home.js

import React from 'react';

import { Link } from "react-router-dom";
import Marquee from "react-fast-marquee";
import BlogCard from '../components/BlogCard';
import ProductCard from '../components/ProductCard';
import SpecialProduct from '../components/SpecialProduct';
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>
 <div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-items-
center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
 <h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
 <h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap align-
items-center">

<div className="d-flex gap align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

{/* copy all 4 above div */}

<div className="d-flex gap align-items-center">
<div>
 <h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>

{/* copy Our Latest Blogs section code */}

<section className="featured-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Featured Collection</div>
</div>

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>

</section>
<section className="special-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<h3 className="section-heading">Special Products</h3>
</div>

</div>

<div className="row">
<SpecialProduct />
<SpecialProduct />
<SpecialProduct />
</div>

</div>
</section>

{/* copy featured-wrapper(Featured Collection) section code */}

<section className="popular-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Popular Products</div>
</div>

</div>

<div className="row">
<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>

</section>

<section className="marque-wrapper py-5">

<div className="container-xxl">
<div className="row">
<div className="marquee-inner-wrapper card-wrapper">

<Marquee className="d-flex">
<div className="mx-4 w-25">
<img src="images/brand-01.png" alt="brand" />
</div>

<div className="mx-4 w-25">

 <img src="images/brand-02.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-03.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-04.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-05.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-06.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-07.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-08.png" alt="brand" />
</div>

</Marquee>

</div>
</div>
</div>
</section>

<section className="blog-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Latest Blogs</div>
</div>

<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
</div>
</div>

</section>
 </>
);
};

export default Home;

// mx - left or right

Home.js

import React from 'react';

import { Link } from "react-router-dom";
import Marquee from "react-fast-marquee";
import BlogCard from '../components/BlogCard';
import ProductCard from '../components/ProductCard';
import SpecialProduct from '../components/SpecialProduct';
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
 <div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>

<div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-
items-center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
 <div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-

between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
 <h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
<div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap
align-items-center">

<div className="d-flex gap align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>
<div className="d-flex gap align-items-center">
<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

{/* copy all 4 above div */}

<div className="d-flex gap align-items-center">
<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>
 <div className="d-flex gap align-items-center">
<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>

{/* copy Our Latest Blogs section code */}

<section className="featured-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Featured Collection</div>
</div>

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>

</section>

<section className="famous-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-1.jpg" className="img-fluid" alt="famous"
/>
<div className="famous-content position-absolute">
<h5>Big Screen</h5>
<h6>Smart Watch Series 7</h6>
<p>From $399 or $16.62/mo. from 24 mo.* </p>
</div>
</div>
 </div>

<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-2.jpg" className="img-fluid" alt="famous"
/>
<div className="famous-content position-absolute">
<h5 className="text-dark">Studio Display</h5>
<h6 className="text-dark">600 nits of brightness.</h6>
<p className="text-dark">27-inch 5K Retina display</p>
</div>
</div>

</div>

<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-3.jpg" className="img-fluid" alt="famous"
/>
<div className="famous-content position-absolute">
<h5 className="text-dark">Smartphones</h5>
<h6 className="text-dark">Smartphone 13 Pro.</h6>
<p className="text-dark">Now in Green. From $999.00 or $41.62/mo.
for 24 mo. Footnote*</p>
</div>
</div>

</div>

<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-4.jpg" className="img-fluid" alt="famous"
/>
<div className="famous-content position-absolute">
<h5 className="text-dark">Home Speakers</h5>
<h6 className="text-dark">Room-filling sound.</h6>
<p className="text-dark">From $699 or $116.58/mo. for 12 mo.*</p>
</div>
</div>

</div>

</div>
 </div>
</section>

<section className="special-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<h3 className="section-heading">Special Products</h3>
</div>

</div>

<div className="row">
<SpecialProduct />
<SpecialProduct />
<SpecialProduct />
<SpecialProduct />
</div>

</div>
</section>

{/* copy featured-wrapper(Featured Collection) section code */}

<section className="popular-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Popular Products</div>
</div>

</div>

<div className="row">
<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>

</section>

<section className="marque-wrapper py-5">

<div className="container-xxl">
<div className="row">
<div className="marquee-inner-wrapper card-wrapper">
 <Marquee className="d-flex">
<div className="mx-4 w-25">
<img src="images/brand-01.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-02.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-03.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-04.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-05.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-06.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-07.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-08.png" alt="brand" />
</div>

</Marquee>

</div>
</div>
</div>
</section>

<section className="blog-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Latest Blogs</div>
 </div>

<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
</div>
</div>

</section>

</>
);
};

export default Home;

// mx - left or right

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}
/* marque m use kiya h card-wrapper ko */
.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
 border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}
.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
 text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
 background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}
/* to change image of Featured Collection - below 3 are used */
.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also
we have done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
 border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

pages

About.js

Contact.js

Home.js

OurStore.js new

App.js

Header.js

to=”/store”> Our store </NavLink>

components

BlogCard.js

Footer.js

Header.js

Layout.js

ProductCard.js

SpecialProduct.js

BreadCrumb.js new
 Meta.js new

npm i react-helmet

OurStore.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';

const OurStore = () => {

return (
<>
<Meta title={"Our Store"} />
<BreadCrumb title="Our Store" />
</>
);
};

export default OurStore;

App.js

import React from 'react';

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import OurStore from './pages/OurStore';

function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
{/* inside this route we need to pass all our route
whatever we pass inside this .......it will reflect with the help of this
outlet (which is present inside Layout.js) */}
{/* in below line.....index.......means "/" itself //so this Home is our
child route */}
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
<Route path="store" element={<OurStore />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
}

export default App;

BreadCrumbs.js

import React from 'react'

import { Link } from 'react-router-dom';

const BreadCrumb = (props) => {

const { title } = props;
return (
<div className="breadcrumb mb-0 py-4">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<p className="text-center mb-0">
<Link to="/" className="text-dark">Home &nbsp; </Link> / {title}
</p>
</div>
</div>
</div>
</div>
);
};

export default BreadCrumb

Meta.js

import {Helmet} from "react-helmet";

import React from 'react';

const Meta = (props) => {

return (

<Helmet>
<meta charSet="utf-8" />
<title>{props.title}</title>

</Helmet>
);
};

export default Meta;

- - - - - - - - - - - - - - - -- - - - -- - - - - - - - - -- - - - - - - - - - -
- -

OurStore.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import ReactStarts from "react-rating-stars-component";

const OurStore = () => {

return (
 <>
<Meta title={"Our Store"} />
<BreadCrumb title="Our Store" />
<div className="store-wrapper home-wrapper-2 py-5">
<div className="container-xxl">
<div className="row">

{/* Left Sidebar */}

<div className="col-3">
{/* Shop By Categories */}
<div className="filter-card mb-3">
<h3 className="filter-title">Shop By Categories</h3>
<div>
<ul className="ps-0">
<li>Watch</li>
<li>Tv</li>
<li>Camera</li>
<li>Laptop</li>
</ul>
</div>
</div>

{/* Filter By Availability */}

<div className="filter-card mb-3">
<h3 className="filter-title">Filter By</h3>

<div>

<h5 className="sub-title">Availability</h5>

<div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="inStock"
/>
<label className="form-check-label" htmlFor="inStock">
In Stock (1)
</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value=""
id="outOfStock" />
<label className="form-check-label" htmlFor="outOfStock">
Out Of Stock(0)
</label>
</div>

</div>

<h5 className="sub-title">Price</h5>
<div className="d-flex align-items-center gap-10">
<div className="form-floating">
<input type="email" className="form-control" id="floatingInput"
placeholder="From" />
 <label htmlFor="floatingInput">From</label>
</div>

<div className="form-floating">
<input type="email" className="form-control" id="floatingInput1"
placeholder="To" />
<label htmlFor="floatingInput">To</label>
</div>

</div>

<h5 className="sub-title">Colors</h5>
<div>
<ul className="colors ps-0">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div>

<h5 className="sub-title">Size</h5>
<div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="color-1"
/>
<label className="form-check-label" htmlFor="color-1">
S (2)
</label>
</div>

<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="color-2"
/>
<label className="form-check-label" htmlFor="color-2">
M (2)
</label>
</div>

</div>

</div>
</div>

{/* Product Tags */}

 <div className="filter-card mb-3">
<h3 className="filter-title">Product Tags</h3>
<div>
<div className="product-tags d-flex flex-wrap align-items-center gap-10">
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Headphone</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Laptop</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Mobile</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Wire</span>
</div>
</div>
</div>

{/* Random Product */}

<div className="filter-card mb-3">
<h3 className="filter-title">Random Product</h3>
<div>
<div className="random-products mb-3 d-flex">
<div className="w-50">
<img src="images/watch.jpg" className="img-fluid" alt="watch" />
</div>
<div className="w-50">
<h5>Kids headphones bulk 10 pack multi colored for students</h5>

<ReactStarts count={5} size={24} value={4} edit={false}

activeColor="#ffd700" />
<b>$ 300</b>
</div>
</div>

<div className="random-products d-flex">

<div className="w-50">
<img src="images/watch.jpg" className="img-fluid" alt="watch" />
</div>
<div className="w-50">
<h5>Kids headphones bulk 10 pack multi colored for students</h5>

<ReactStarts count={5} size={24} value={4} edit={false}

activeColor="#ffd700" />
<b>$ 300</b>
</div>
</div>

</div>
</div>
</div>

{/* Main Content */}

<div className="col-9">
{/* Add your main content here */}
</div>
 </div>
</div>
</div>
</>
);
};

export default OurStore;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}
.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}
.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}
/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
}

.product-card .product-image {
 height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
 background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* Our Store ends here */

Our left part is done

OurStore.js

import React, { useState } from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import ReactStarts from "react-rating-stars-component";
import ProductCard from '../components/ProductCard';

const OurStore = () => {

const [grid,setGrid] = useState(4);
alert(grid);
return (
<>
<Meta title={"Our Store"} />
<BreadCrumb title="Our Store" />
<div className="store-wrapper home-wrapper-2 py-5">
<div className="container-xxl">
<div className="row">

{/* Left Sidebar */}

<div className="col-3">
{/* Shop By Categories */}
<div className="filter-card mb-3">
<h3 className="filter-title">Shop By Categories</h3>
<div>
<ul className="ps-0">
<li>Watch</li>
<li>Tv</li>
<li>Camera</li>
<li>Laptop</li>
</ul>
 </div>
</div>

{/* Filter By Availability */}

<div className="filter-card mb-3">
<h3 className="filter-title">Filter By</h3>

<div>

<h5 className="sub-title">Availability</h5>

<div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="inStock"
/>
<label className="form-check-label" htmlFor="inStock">
In Stock (1)
</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value=""
id="outOfStock" />
<label className="form-check-label" htmlFor="outOfStock">
Out Of Stock(0)
</label>
</div>

</div>

<h5 className="sub-title">Price</h5>
<div className="d-flex align-items-center gap-10">
<div className="form-floating">
<input type="email" className="form-control" id="floatingInput"
placeholder="From" />
<label htmlFor="floatingInput">From</label>
</div>

<div className="form-floating">
<input type="email" className="form-control" id="floatingInput1"
placeholder="To" />
<label htmlFor="floatingInput">To</label>
</div>

</div>

<h5 className="sub-title">Colors</h5>
<div>
<ul className="colors ps-0">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
 <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div>

<h5 className="sub-title">Size</h5>
<div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="color-1"
/>
<label className="form-check-label" htmlFor="color-1">
S (2)
</label>
</div>

<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="color-2"
/>
<label className="form-check-label" htmlFor="color-2">
M (2)
</label>
</div>

</div>

</div>
</div>

{/* Product Tags */}

<div className="filter-card mb-3">
<h3 className="filter-title">Product Tags</h3>
<div>
<div className="product-tags d-flex flex-wrap align-items-center gap-10">
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Headphone</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Laptop</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Mobile</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Wire</span>
</div>
</div>
</div>

{/* Random Product */}

<div className="filter-card mb-3">
<h3 className="filter-title">Random Product</h3>
 <div>
<div className="random-products mb-3 d-flex">
<div className="w-50">
<img src="images/watch.jpg" className="img-fluid" alt="watch" />
</div>
<div className="w-50">
<h5>Kids headphones bulk 10 pack multi colored for students</h5>

<ReactStarts count={5} size={24} value={4} edit={false}

activeColor="#ffd700" />
<b>$ 300</b>
</div>
</div>

<div className="random-products d-flex">

<div className="w-50">
<img src="images/watch.jpg" className="img-fluid" alt="watch" />
</div>
<div className="w-50">
<h5>Kids headphones bulk 10 pack multi colored for students</h5>

<ReactStarts count={5} size={24} value={4} edit={false}

activeColor="#ffd700" />
<b>$ 300</b>
</div>
</div>

</div>
</div>
</div>

{/* Main Content */}

<div className="col-9">
{/* Add your main content here */}
<div className="filter-sort-grid mb-4">
<div className="d-flex justify-content-between align-items-center">

<div className="d-flex align-items-center gap-10">

<p className="mb-0 d-block">Sort By:</p>
<select name="" className="form-control form-select" id="">
<option value="manual">Featured</option>
<option value="best-selling" selected="selected">Best selling</option>
<option value="title-ascending">Alphabetically, A-Z</option>
<option value="title-descending">Alphabetically, Z-A</option>
<option value="price-ascending">Price, low to high</option>
<option value="price-descending">Price, high to low</option>
<option value="created-ascending">Date, old to new</option>
<option value="created-descending">Date, new to old</option>
</select>
</div>

<div className="d-flex align-items-center gap-10">

<p className="totalproducts mb-0" style={{width: "100px"}}>21 Products</p>
<div className="d-flex gap-10 align-items-center grid">
 <img
onClick={() => { setGrid(4); }}
src="images/gr4.svg" className="d-block img-fluid" alt="grid" />
<img
onClick={() => { setGrid(3); }}
src="images/gr3.svg" className="d-block img-fluid" alt="grid" />
<img
onClick={() => { setGrid(2); }}
src="images/gr2.svg" className="d-block img-fluid" alt="grid" />
<img
onClick={() => { setGrid(1); }}
src="images/gr.svg" className="d-block img-fluid" alt="grid" />
</div>
</div>

</div>
</div>

{/* next we have to list our products */}

<div className="products-list pb-5">
<ProductCard grid={grid} />
</div>

</div>

</div>
</div>
</div>
</>
);
};

export default OurStore;

ProductCard.js

import React from 'react';

import ReactStarts from "react-rating-stars-component";
import { Link } from 'react-router-dom';

const ProductCard = () => {

return (
<div className="col-3">
<Link className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image" />
</div>

<div className="product-details">
 <h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</Link>
</div>
);
};

export default ProductCard;

we want to make this call dynamically

{/* next we have to list our products */}

<div className="products-list pb-5">
<ProductCard grid={grid} />
</div>
- - - - - - - - -- - -- - - - - - - -- -- - - - - - - - - - - - -- - -- - - -
-

React-router-dom useLocation

ProductCard.js

const ProductCard = () => {

let location = useLocation();
// alert(location);
console.log(location);
// we are getting /store
return (
Objecthash: ""

key: "a9jgrkrf"

pathname: "/store"

search: ""

state: null

[[Prototype]]: Object

OurStore.js

import React, { useState } from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import ReactStarts from "react-rating-stars-component";
import ProductCard from '../components/ProductCard';

const OurStore = () => {

const [grid,setGrid] = useState(4);
// alert(grid);
return (
<>
<Meta title={"Our Store"} />
<BreadCrumb title="Our Store" />
<div className="store-wrapper home-wrapper-2 py-5">
<div className="container-xxl">
<div className="row">

{/* Left Sidebar */}

<div className="col-3">
{/* Shop By Categories */}
<div className="filter-card mb-3">
<h3 className="filter-title">Shop By Categories</h3>
<div>
<ul className="ps-0">
<li>Watch</li>
<li>Tv</li>
<li>Camera</li>
<li>Laptop</li>
</ul>
</div>
</div>

{/* Filter By Availability */}

<div className="filter-card mb-3">
<h3 className="filter-title">Filter By</h3>

<div>

<h5 className="sub-title">Availability</h5>

<div>
<div className="form-check">
 <input className="form-check-input" type="checkbox" value="" id="inStock"
/>
<label className="form-check-label" htmlFor="inStock">
In Stock (1)
</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value=""
id="outOfStock" />
<label className="form-check-label" htmlFor="outOfStock">
Out Of Stock(0)
</label>
</div>

</div>

<h5 className="sub-title">Price</h5>
<div className="d-flex align-items-center gap-10">
<div className="form-floating">
<input type="email" className="form-control" id="floatingInput"
placeholder="From" />
<label htmlFor="floatingInput">From</label>
</div>

<div className="form-floating">
<input type="email" className="form-control" id="floatingInput1"
placeholder="To" />
<label htmlFor="floatingInput">To</label>
</div>

</div>

<h5 className="sub-title">Colors</h5>
<div>
<ul className="colors ps-0">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div>

<h5 className="sub-title">Size</h5>
<div>
 <div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="color-1"
/>
<label className="form-check-label" htmlFor="color-1">
S (2)
</label>
</div>

<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="color-2"
/>
<label className="form-check-label" htmlFor="color-2">
M (2)
</label>
</div>

</div>

</div>
</div>

{/* Product Tags */}

<div className="filter-card mb-3">
<h3 className="filter-title">Product Tags</h3>
<div>
<div className="product-tags d-flex flex-wrap align-items-center gap-10">
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Headphone</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Laptop</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Mobile</span>
<span className="badge bg-light text-secondary rounded-3 py-2 px-
3">Wire</span>
</div>
</div>
</div>

{/* Random Product */}

<div className="filter-card mb-3">
<h3 className="filter-title">Random Product</h3>
<div>
<div className="random-products mb-3 d-flex">
<div className="w-50">
<img src="images/watch.jpg" className="img-fluid" alt="watch" />
</div>
<div className="w-50">
<h5>Kids headphones bulk 10 pack multi colored for students</h5>

<ReactStarts count={5} size={24} value={4} edit={false}

activeColor="#ffd700" />
<b>$ 300</b>
</div>
</div>
 <div className="random-products d-flex">
<div className="w-50">
<img src="images/watch.jpg" className="img-fluid" alt="watch" />
</div>
<div className="w-50">
<h5>Kids headphones bulk 10 pack multi colored for students</h5>

<ReactStarts count={5} size={24} value={4} edit={false}

activeColor="#ffd700" />
<b>$ 300</b>
</div>
</div>

</div>
</div>
</div>

{/* Main Content */}

<div className="col-9">
{/* Add your main content here */}
<div className="filter-sort-grid mb-4">
<div className="d-flex justify-content-between align-items-center">

<div className="d-flex align-items-center gap-10">

<p className="mb-0 d-block">Sort By:</p>
<select name="" className="form-control form-select" id="">
<option value="manual">Featured</option>
<option value="best-selling" selected="selected">Best selling</option>
<option value="title-ascending">Alphabetically, A-Z</option>
<option value="title-descending">Alphabetically, Z-A</option>
<option value="price-ascending">Price, low to high</option>
<option value="price-descending">Price, high to low</option>
<option value="created-ascending">Date, old to new</option>
<option value="created-descending">Date, new to old</option>
</select>
</div>

<div className="d-flex align-items-center gap-10">

<p className="totalproducts mb-0" style={{width: "100px"}}>21 Products</p>
<div className="d-flex gap-10 align-items-center grid">
<img
onClick={() => { setGrid(3); }}
src="images/gr4.svg" className="d-block img-fluid" alt="grid" />
<img
onClick={() => { setGrid(4); }}
src="images/gr3.svg" className="d-block img-fluid" alt="grid" />
<img
onClick={() => { setGrid(6); }}
src="images/gr2.svg" className="d-block img-fluid" alt="grid" />
<img
onClick={() => { setGrid(12); }}
src="images/gr.svg" className="d-block img-fluid" alt="grid" />
</div>
 </div>

</div>
</div>

{/* next we have to list our products */}

<div className="products-list pb-5">
<div className="d-flex gap-10 flex-wrap">
<ProductCard grid={grid} />
</div>
</div>

</div>

</div>
</div>
</div>
</>
);
};

export default OurStore;

ProductCard.js

import React from 'react';

import ReactStarts from "react-rating-stars-component";
import { Link, useLocation } from 'react-router-dom';

const ProductCard = (props) => {

const { grid } = props;
let location = useLocation();

return (
<>
<div className={` ${location.pathname == "/store" ? `col-${grid}` : "col-3" } `}>
<Link className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image" />
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

 <p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</Link>
</div>

<div className={` ${location.pathname == "/store" ? `col-${grid}` : "col-3" } `}>

<Link className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image" />
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
 <img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</Link>
</div>

</>
);
};

export default ProductCard;

it is working

now we are creating our own product class …..in ProductCard.js

instead of this

const ProductCard = (props) => {

const { grid } = props;
let location = useLocation();

return (
<>
<div className={` ${location.pathname == "/store" ? `col-${grid}` : "col-3" } `}>

Now

ProductCard.js

import React from 'react';

import ReactStarts from "react-rating-stars-component";
import { Link, useLocation } from 'react-router-dom';

const ProductCard = (props) => {

const { grid } = props;
let location = useLocation();

return (
<>
<div className={` ${location.pathname == "/store" ? `gr-${grid}` : "col-3" } `}>
 <Link className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image" />
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

<p className="description">
Experience the ultimate convenience and
versatility with our multifunctional smartwatch,
featuring cutting-edge technology and stylish design.
Enhance your lifestyle effortlessly...
</p>
<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</Link>
</div>

<div className={` ${location.pathname == "/store" ? `gr-${grid}` : "col-3" } `}>

<Link className="product-card position-relative">
 <div className="wishlist-icon position-absolute">
<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image" />
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

<p className="description">
Experience the ultimate convenience and
versatility with our multifunctional smartwatch,
featuring cutting-edge technology and stylish design.
Enhance your lifestyle effortlessly...
</p>
<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</Link>
</div>

</>
);
};

export default ProductCard;

App.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}
.header-bottom .dropdown button:focus {
box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
 color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
 width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
 top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}
 /* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
 border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}
.gr-12 .action-bar{
top: 13%;
}

/* Our Store ends here */

- - -- - - ---- - - --- - --

Hm description tbhi dikhana chahte h jb……..ak ak hi product show ho rha ho gr-12

ho tb

ProductCard.js

import React from 'react';

import ReactStarts from "react-rating-stars-component";
import { Link, useLocation } from 'react-router-dom';

const ProductCard = (props) => {

const { grid } = props;
let location = useLocation();

return (
<>
<div className={` ${location.pathname == "/store" ? `gr-${grid}` : "col-3" } `}>
<Link className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image" />
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
 <h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
</h5>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

<p className={`description ${grid === 12 ? "d-block" : "d-none" }`}>
Experience the ultimate convenience and
versatility with our multifunctional smartwatch,
featuring cutting-edge technology and stylish design.
Enhance your lifestyle effortlessly...
</p>
<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</Link>
</div>

<div className={` ${location.pathname == "/store" ? `gr-${grid}` : "col-3" } `}>

<Link className="product-card position-relative">

<div className="wishlist-icon position-absolute">

<Link><img src="images/wish.svg" alt="wishlist" /></Link>
</div>

<div className="product-image">
<img src="images/watch.jpg" className="img-fluid" alt="product image" />
<img src="images/watch-1.jpg" className="img-fluid" alt="product image" />
</div>

<div className="product-details">
<h6 className="brand">Havels</h6>
<h5 className="product-title">
Kids headphones bulk 10 pack multi colored for students
 </h5>

<ReactStarts count={5} size={24} value={3} edit={false} activeColor="#ffd700" />

<p className={`description ${grid === 12 ? "d-block" : "d-none" }`}>
Experience the ultimate convenience and
versatility with our multifunctional smartwatch,
featuring cutting-edge technology and stylish design.
Enhance your lifestyle effortlessly...
</p>
<p className="price">$100.00</p>
</div>

<div className="action-bar position-absolute">

<div className="d-flex flex-column gap-15">

<Link>
<img src="images/prodcompare.svg" alt="compare" />
</Link>

<Link>
<img src="images/view.svg" alt="view" />
</Link>

<Link>
<img src="images/add-cart.svg" alt="addcart" />
</Link>

</div>
</div>

</Link>
</div>

</>
);
};

export default ProductCard;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
 --color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
 margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}
.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */
.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}
.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}
.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
 border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}
 /* we are creating our own class in ProductCard.js */
.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

Blogs page next

pages

About.js

Contact.js

Home.js

OurStore.js

Blog.js new

App.js

Header.js

to=”/blogs”> Blogs </NavLink>

App.js

import React from 'react';

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import OurStore from './pages/OurStore';
import Blog from './pages/Blog';

function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
{/* inside this route we need to pass all our route
whatever we pass inside this .......it will reflect with the help of this
outlet (which is present inside Layout.js) */}
{/* in below line.....index.......means "/" itself //so this Home is our
child route */}
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />

<Route path="store" element={<OurStore />} />

<Route path="blogs" element={<Blog />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
}

export default App;

Blog.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
const Blog = () => {
return (
<>
<Meta title={"Blogs"} />
<BreadCrumb title="Blogs" />

</>
);
};

export default Blog;

- - - - - - - - - - - - - - - - - - - -- - - -- --

BlogCard.js

import React from 'react';

import { Link } from 'react-router-dom';

const BlogCard = () => {

 return (

<div className="blog-card">

<div className="card-image">
<img src="images/blog-1.jpg" className="img-fluid w-100" alt="blog" />
</div>

<div className="blog-content">
<p className="date">1 Dec 2023</p>
<h5 className="title">A beautiful sunday morning renaissance</h5>
<p className="desc">A serene Sunday morning ushers i
n a rebirth of joy and tranquility, welcoming a new day's embrace.</p>
<Link to="/" className="button">Read More</Link>
</div>

</div>

);
};

export default BlogCard;

we have removed one div from it

Home.js

import React from 'react';

import { Link } from "react-router-dom";
import Marquee from "react-fast-marquee";
import BlogCard from '../components/BlogCard';
import ProductCard from '../components/ProductCard';
import SpecialProduct from '../components/SpecialProduct';
const Home = () => {
return (
<>
<section className="home-wrapper-1 py-5">
<div className="container-xxl">
<div className="row">

<div className="col-6">
<div className="main-banner position-relative">
<img
src="images/main-banner-1.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="main-banner-content position-absolute">
<h4>SUPERCHARGED FOR PROS. </h4>
<h5>iPad S13+ Pro.</h5>
<p>From $999.00 or $41.62/mo.</p>
<Link className="button">BUY NOW</Link>
</div>
</div>
</div>
 <div className="col-6">
<div className="d-flex flex-wrap gap-10 justify-content-between align-items-
center">
{/* paste above COL-6 ke under wala div here now */}

<div className="small-banner position-relative">

<img
src="images/catbanner-01.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>BEST SALE</h4>
<h5>Laptops Max</h5>
<p>From $1699.00 or <br /> $64.62/mo.</p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-02.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative">

<img
src="images/catbanner-03.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
<div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

<div className="small-banner position-relative ">

<img
src="images/catbanner-04.jpg"
className="img-fluid rounded-3"
alt="main-banner"
/>
 <div className="small-banner-content position-absolute">
<h4>NEW ARRIVAL</h4>
<h5>Buy IPad Air</h5>
<p>From $5999 or <br /> $49.91/mo. for 12 mo.* </p>

</div>
</div>

</div>
</div>

</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">

<div className="services d-flex align-items-center justify-content-between">

<div className="d-flex align-items-center gap-15">

<img src="images/service.png" alt="services" />
<div>
<h6>Free Shipping</h6>
<p className="mb-0">From all orders over $5</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-02.png" alt="services" />
<div>
<h6>Daily Suprise Offers</h6>
<p className="mb-0">Save upto 25% off</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-03.png" alt="services" />
<div>
<h6>Support 24/7</h6>
<p className="mb-0">Shop with an expert</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-04.png" alt="services" />
<div>
<h6>Affordable Prices</h6>
<p className="mb-0">Get Factory Default Price</p>
</div>
</div>
<div className="d-flex align-items-center gap-15">
<img src="images/service-05.png" alt="services" />
 <div>
<h6>Secure Payments</h6>
<p className="mb-0">100% Protected Payment</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

<section className="home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="categories d-flex justify-content-between flex-wrap align-
items-center">

<div className="d-flex gap align-items-center">

<div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

{/* copy all 4 above div */}

<div className="d-flex gap align-items-center">
 <div>
<h6>Music & Gaming</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Cameras</h6>
<p>10 Items</p>
</div>
<img src="images/camera.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Smart Tv</h6>
<p>10 Items</p>
</div>
<img src="images/tv.jpg" alt="camera" />
</div>

<div className="d-flex gap align-items-center">

<div>
<h6>Headphones</h6>
<p>10 Items</p>
</div>
<img src="images/headphone.jpg" alt="camera" />
</div>

</div>
</div>
</div>
</div>
</section>

{/* copy Our Latest Blogs section code */}

<section className="featured-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Featured Collection</div>
</div>

<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>
 </section>

<section className="famous-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-1.jpg" className="img-fluid" alt="famous" />
<div className="famous-content position-absolute">
<h5>Big Screen</h5>
<h6>Smart Watch Series 7</h6>
<p>From $399 or $16.62/mo. from 24 mo.* </p>
</div>
</div>

</div>

<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-2.jpg" className="img-fluid" alt="famous" />
<div className="famous-content position-absolute">
<h5 className="text-dark">Studio Display</h5>
<h6 className="text-dark">600 nits of brightness.</h6>
<p className="text-dark">27-inch 5K Retina display</p>
</div>
</div>

</div>

<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-3.jpg" className="img-fluid" alt="famous" />
<div className="famous-content position-absolute">
<h5 className="text-dark">Smartphones</h5>
<h6 className="text-dark">Smartphone 13 Pro.</h6>
<p className="text-dark">Now in Green. From $999.00 or $41.62/mo. for 24 mo.
Footnote*</p>
</div>
</div>

</div>

<div className="col-3">

<div className="famous-card position-relative">

<img src="images/famous-4.jpg" className="img-fluid" alt="famous" />
<div className="famous-content position-absolute">
<h5 className="text-dark">Home Speakers</h5>
<h6 className="text-dark">Room-filling sound.</h6>
<p className="text-dark">From $699 or $116.58/mo. for 12 mo.*</p>
 </div>
</div>

</div>

</div>
</div>
</section>

<section className="special-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<h3 className="section-heading">Special Products</h3>
</div>

</div>

<div className="row">
<SpecialProduct />
<SpecialProduct />
<SpecialProduct />
<SpecialProduct />
</div>

</div>
</section>

{/* copy featured-wrapper(Featured Collection) section code */}

<section className="popular-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<div className="section-heading">Our Popular Products</div>
</div>

</div>

<div className="row">
<ProductCard />
<ProductCard />
<ProductCard />
<ProductCard />
</div>
</div>

</section>

<section className="marque-wrapper py-5">

 <div className="container-xxl">
<div className="row">
<div className="marquee-inner-wrapper card-wrapper">

<Marquee className="d-flex">
<div className="mx-4 w-25">
<img src="images/brand-01.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-02.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-03.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-04.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-05.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-06.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-07.png" alt="brand" />
</div>

<div className="mx-4 w-25">

<img src="images/brand-08.png" alt="brand" />
</div>

</Marquee>

</div>
</div>
</div>
</section>

<section className="blog-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<h3 className="section-heading">Our Latest Blogs</h3>
</div>
 {/* here we have direct call of 4 BlogCard but now we have changed it */}
</div>

<div className="row">
<div className="col-3">
<BlogCard />
</div>
<div className="col-3">
<BlogCard />
</div>
<div className="col-3">
<BlogCard />
</div>
<div className="col-3">
<BlogCard />
</div>
</div>

</div>

</section>

</>
);
};

export default Home;

// mx - left or right

Blog.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import BlogCard from '../components/BlogCard';
const Blog = () => {
return (
<>
<Meta title={"Blogs"} />
<BreadCrumb title="Blogs" />

<div className="blog-wrapper home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-3">
{/* copy filter-card mb-3 from OurStore.js */}
<div className="filter-card mb-3">
<h3 className="filter-title">Find By Categories</h3>
<div>
 <ul className="ps-0">
<li>Watch</li>
<li>Tv</li>
<li>Camera</li>
<li>Laptop</li>
</ul>
</div>
</div>

</div>

<div className="col-9">
<div className="row">
<div className="col-6 mb-3">
<BlogCard />
</div>
<div className="col-6 mb-3">
<BlogCard />
</div>
<div className="col-6 mb-3">
<BlogCard />
</div>
<div className="col-6 mb-3">
<BlogCard />
</div>

</div>
</div>

</div>
</div>
</div>

</>
);
};

export default Blog;

Contact page next

Contact.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import { AiOutlineHome, AiOutlineMail } from 'react-icons/ai';
import { BiPhoneCall, BiInfoCircle } from 'react-icons/bi';

const Contact = () => {

return (
<>
<Meta title={"Contact Us"} />
<BreadCrumb title="Contact Us" />

<div className="contact-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">

<div className="col-12">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d224357.28960408914!2d77.40182544999998!3d28.522201799999994!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!3m3!1m2!1s0x390ce5a43173357b%3A0x37ffce30c87cc03f!2sNoida%2C%20Uttar%20Pradesh!
5e0!3m2!1sen!2sin!4v1713948430620!5m2!1sen!2sin"
width="600"
height="450"
title="Google Maps"
// style="border:0;"
className="border-0 w-100"
allowFullScreen=""
loading="lazy"
 referrerPolicy="no-referrer-when-downgrade">
</iframe>
</div>

<div className="col-12 mt-5">

<div className="contact-inner-wrapper d-flex justify-content-between">
<div>
<h3 className="contact-title mb-4">Contact</h3>
<form action="" className="d-flex flex-column gap-15">
<div>
<input type="text" className="form-control" placeholder="Name" />
</div>
<div>
<input type="email" className="form-control" placeholder="Email" />
</div>
<div>
<input type="tel" className="form-control" placeholder="Mobile Number"
/>
</div>
<div>
<textarea name="" id="" className="w-100 form-control" cols="30"
rows="4" placeholder="Comments"></textarea>
</div>
<div>
<button className="button border-0">Submit</button>
</div>

</form>
</div>

<div>
<h3 className="contact-title mb-4">Get in touch with us</h3>
<div>
<ul className="ps-0">
<li className="mb-3 d-flex gap-15 align-items-center">
<AiOutlineHome className="fs-5" />
<address className="mb-0">Hno.277, Near village, Mandaura,
Sonipat, Haryana</address>
</li>
<li className="mb-3 d-flex gap-15 align-items-center">
<BiPhoneCall className="fs-5" />
<a href="tel:+91 8264954234">+91 8264954234</a>
</li>
<li className="mb-3 d-flex gap-15 align-items-center">
<AiOutlineMail className="fs-5" />
<a
href="mailto:navdeepdahiya@gmail.com">navdeepdahiya@gmail.com</a>
</li>
<li className="mb-3 d-flex gap-15 align-items-center">
<BiInfoCircle className="fs-5" />
<p className="mb-0">Monday - Friday 10 AM - 8 PM</p>
</li>
</ul>
</div>
 </div>
</div>
</div>

</div>
</div>
</div>

</>
)
}

export default Contact;

App.css

We have used react-icons here

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
 font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}
.header-upper .header-upper-links img{
width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
 background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
 right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}
/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
 height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
 margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

Signin page next

pages

About.js

Contact.js

Home.js

OurStore.js

Blog.js

CompareProduct.js new

App.js

<Route path="compare-product" element={<CompareProduct />} />

</Route>
</Routes>
</BrowserRouter>
</>
);
}
export default App;

Header.js

import React from 'react';

import { NavLink, Link } from 'react-router-dom';
import { BsSearch } from 'react-icons/bs';
const Header = () => {
return (
<>
{/* header.header-top-strip
.container-xxl
.row
padding py-3 */}
<header className="header-top-strip py-3">
<div className="container-xxl">
<div className="row">
<div className="col-6">
<p className="text-white mb-0">
Free Shipping Over 1000 & Free Returns
</p>
</div>
<div className="col-6">
<p className="text-end text-white">
Hotline: <a className="text-white" href="tel:+91 9993705500">+91
9993705500</a>
</p>
</div>
</div>
</div>
</header>

<header className="header-upper py-3">

<div className="container-xxl">
<div className="row align-items-center">
<div className="col-2">
<h2>
<Link className="text-white">Dev Corner</Link>
{/* this link means a tag..... and a tag donot take color from our parents
*/}
</h2>
</div>

<div className="col-5">

<div className="input-group">
<input
type="text"
className="form-control py-2"
placeholder="Search Product Here..."
aria-label="Search Product Here..."
aria-describedby="basic-addon2"
/>
 <span className="input-group-text p-3" id="basic-addon2">
{/* @example.com */}
<BsSearch className="fs-6" />
</span>
</div>

</div>

<div className="col-5">
<div className="header-upper-links d-flex align-items-center justify-
content-between">

<div>
<Link to="/compare-product" className="d-flex align-items-center
gap-10 text-white">
<img src="images/compare.svg" alt="compare" />
<p className="mb-0">
Compare <br /> Products
</p>
</Link>
</div>
<div>
<Link to="/wishlist" className="d-flex align-items-center gap-10
text-white">
<img src="images/wishlist.svg" alt="wishlist" />
<p className="mb-0">
Favourite <br /> wishlist
</p>
</Link>
</div>
<div>
<Link to="/login" className="d-flex align-items-center gap-10 text-
white">
<img src="images/user.svg" alt="user" />
<p className="mb-0">
Login <br /> My Account
</p>
</Link >
</div>
<div>
<Link to="cart" className="d-flex align-items-center gap-10 text-
white">
<img src="images/cart.svg" alt="cart" />
<div className="d-flex flex-column gap-10">
<span className="badge bg-white text-dark">0</span>
<p className="mb-0">$ 500</p>
</div>
</Link>
</div>

</div>
</div>
 </div>
</div>
</header>

<header className="header-bottom py-3">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="menu-bottom d-flex align-items-center gap-30">

{/* i am going to create 2nd part now */}

<div>
{/* this is dropdown code */}
<div className="dropdown">
<button
className="btn btn-secondary dropdown-toggle bg-
transparent border-0 gap-15 d-flex align-items-center"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<img src="images/menu.svg" alt="" />
<span className="me-5 d-inline-block">Shop
Categories</span>
</button>
<ul className="dropdown-menu" aria-
labelledby="dropdownMenuButton1">
<li><Link className="dropdown-item text-white"
to="">Action</Link></li>
<li><Link className="dropdown-item text-white"
to="">Another action</Link></li>
<li><Link className="dropdown-item text-white"
to="">Something else here</Link></li>
</ul>
</div>

</div>
<div className="menu-links">
<div className="d-flex align-items-center gap-15">
<NavLink to="/">Home</NavLink>
<NavLink to="/store">Our Store</NavLink>
<NavLink to="/blogs">Blogs</NavLink>
<NavLink to="/contact">Contact</NavLink>
</div>
</div>

</div>
</div>
</div>
</div>
</header>
</>
)
}

export default Header;

// className
// text-end - to text align right
// text-start - used for text align left
// py - padding from top & bottom
// px - padding from left & right
// ps - padding from left
// pe - padding from end

// mb - margin bottom
// pb - padding bottom
// pd - padding top
// md - margin top

//col-2 for logo

//col-5 for search bar
//col-5 for our links

// p-3 padding from top bottom left right

// fs font-size ex- fs-4 kr denge to search wala size bda ho jayega...isliye fs-6

CompareProduct.jsinitially

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';

const CompareProduct = () => {

return (
<>
<Meta title={"Compare Products"} />
<BreadCrumb title="Compare Products" />

</>
);
};

export default CompareProduct;

CompareProduct.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';

const CompareProduct = () => {

return (
 <>
<Meta title={"Compare Products"} />
<BreadCrumb title="Compare Products" />

<div className="compare-product-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-3">
<div className="compare-product-card position-relative">
<img src="images/cross.svg" alt="cross" className="position-
absolute cross img-fluid" />
<div className="product-card-image">
<img src="images/watch.jpg" alt="watch" />
</div>
<div className="compare-product-details">
<h5 className="title">
Honor T1 7.0 1 GB ROM 7 Inch With Wi-Fi+3G Tablet
</h5>
<h6 className="price mb-3">$ 100</h6>
<div>
<div className="product-detail">
<h5>Brand:</h5>
<p>Havels</p>
</div>
<div className="product-detail">
<h5>Type:</h5>
<p>Havels</p>
</div>

<div className="product-detail">
<h5>Availability:</h5>
<p>Havels</p>
</div>
<div className="product-detail">
<h5>Color:</h5>
<p>Havels</p>
</div>
<div className="product-detail">
<h5>Size:</h5>

<div className="d-flex gap-10">

<p>S</p>
<p>M</p>
</div>
</div>

</div>

</div>

</div>
</div>
</div>
 </div>
</div>
</>
);
};

export default CompareProduct;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
 box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
 color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}
.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
 border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;
}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
 margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

 height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

/* compare Product Page */

.compare-product-card {
 padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title {
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid var(--color-f5f5f7);
}

/* Compare Product Page ends here */

CompareProduct.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import Color from '../components/Color';

const CompareProduct = () => {

return (
<>
<Meta title={"Compare Products"} />
<BreadCrumb title="Compare Products" />

<div className="compare-product-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-3">
<div className="compare-product-card position-relative">
 <img src="images/cross.svg" alt="cross" className="position-absolute cross
img-fluid" />
<div className="product-card-image">
<img src="images/watch.jpg" alt="watch" />
</div>
<div className="compare-product-details">
<h5 className="title">
Honor T1 7.0 1 GB ROM 7 Inch With Wi-Fi+3G Tablet
</h5>
<h6 className="price mb-3 mt-3">$ 100</h6>
<div>
<div className="product-detail">
<h5>Brand:</h5>
<p>Havels</p>
</div>
<div className="product-detail">
<h5>Type:</h5>
<p>Watch</p>
</div>

<div className="product-detail">
<h5>Availability:</h5>
<p>In Stock</p>
</div>
<div className="product-detail">
<h5>Color:</h5>
<Color />
</div>
<div className="product-detail">
<h5>Size:</h5>

<div className="d-flex gap-10">

<p>S</p>
<p>M</p>
</div>
</div>

</div>

</div>

</div>
</div>

{/* copy above col-3 */}

<div className="col-3">
<div className="compare-product-card position-relative">
<img src="images/cross.svg" alt="cross" className="position-absolute cross
img-fluid" />
<div className="product-card-image">
<img src="images/watch.jpg" alt="watch" />
</div>
<div className="compare-product-details">
<h5 className="title">
Honor T1 7.0 1 GB ROM 7 Inch With Wi-Fi+3G Tablet
</h5>
<h6 className="price mb-3 mt-3">$ 100</h6>
<div>
<div className="product-detail">
<h5>Brand:</h5>
 <p>Havels</p>
</div>
<div className="product-detail">
<h5>Type:</h5>
<p>Watch</p>
</div>

<div className="product-detail">
<h5>Availability:</h5>
<p>In Stock</p>
</div>
<div className="product-detail">
<h5>Color:</h5>
<Color />
</div>
<div className="product-detail">
<h5>Size:</h5>

<div className="d-flex gap-10">

<p>S</p>
<p>M</p>
</div>
</div>

</div>

</div>

</div>
</div>

</div>
</div>
</div>
</>
);
};

export default CompareProduct;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so it is easy
to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
 --color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside bda ho rha
*/

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
 background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to black se white
ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
 line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have done
transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */
.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
 background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
 width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}
.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title {
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

Favourite wishlist page next

Wishlist.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';

const Wishlist = () => {

return (
<>
<Meta title={"Wishlist"} />
<BreadCrumb title="Wishlist" />

<div className="wishlist-wrapper home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-3">
<div className="wishlist-card position-relative">
<img src="images/cross.svg" alt="cross" className="position-absolute cross img-
fluid" />

<div className="wishlist-card-image">
<img src="images/watch.jpg" className="img-fluid w-100" alt="watch" />
<div className="py-3 px-3">
<h5 className="title"> Honor T1 7.0 1 GB ROM 7 Inch With Wi-Fi+3G
Tablet</h5>
<h6 className="price">$ 100</h6>
</div>
</div>
</div>
</div>

{/* copy col-3 */}

 <div className="col-3">
<div className="wishlist-card position-relative">
<img src="images/cross.svg" alt="cross" className="position-absolute cross img-
fluid" />

<div className="wishlist-card-image">
<img src="images/watch.jpg" className="img-fluid w-100" alt="watch" />
<div className="py-3 px-3">
<h5 className="title"> Honor T1 7.0 1 GB ROM 7 Inch With Wi-Fi+3G
Tablet</h5>
<h6 className="price">$ 100</h6>
</div>
</div>
</div>
</div>

{/* copy col-3 */}

<div className="col-3">
<div className="wishlist-card position-relative">
<img src="images/cross.svg" alt="cross" className="position-absolute cross img-
fluid" />

<div className="wishlist-card-image">
<img src="images/watch.jpg" className="img-fluid w-100" alt="watch" />
<div className="py-3 px-3">
<h5 className="title"> Honor T1 7.0 1 GB ROM 7 Inch With Wi-Fi+3G
Tablet</h5>
<h6 className="price">$ 100</h6>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</>
);
};

export default Wishlist;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so it is easy
to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
 --color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside bda ho rha
*/

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to black se white
ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
 letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}
/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
 display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have done
transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */
.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
 border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
 list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross,
.wishlist-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title,
.wishlist-card h5.title {
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price,
.wishlist-card h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

Login MyAccount (login page ) next

pages

About.js

Contact.js

Home.js

OurStore.js

Blog.js

CompareProduct.js

Wishlist.js

Login.js new

Signup.js new

Forgotpassword.js new

Resetpassword.js new

App.js

Login.js
import React from 'react';
import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import { Link } from 'react-router-dom';

const Login = () => {

return (
<>
<Meta title={"Login"} />
<BreadCrumb title="Login" />

<div className="login-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-12">
{/* login-card */}
<div className="auth-card">
<h3 className="text-center mb-3">Login</h3>
<form action="" className="d-flex flex-column gap-15">
<div>
<input type="email" name="email" placeholder="Email"
className="form-control" />
</div>
<div className="mt-1">
<input type="password" name="password"
placeholder="Password" className="form-control" />
</div>
<div>
<Link to="/forgot-password">Forgot Password</Link>
<div className="mt-3 d-flex justify-content-center
gap-15 align-items-center">
<button className="button border-0"
type="submit">Login</button>
<Link to="/signup" className="button
signup">SignUp</Link>
</div>
</div>
</form>
</div>
</div>
</div>

</div>
</div>
</>
);
};
export default Login;

Signup.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import { Link } from 'react-router-dom';

const Signup = () => {

return (
<>
<Meta title={"Sign Up"} />
<BreadCrumb title="Sign Up" />

{/* copy login-wrapper from login.js*/}

<div className="login-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">
<div className="col-12">
{/* login-card */}
<div className="auth-card">
<h3 className="text-center mb-3">Sign Up</h3>
<form action="" className="d-flex flex-column gap-15">
<div>
<input type="text" name="name" placeholder="Name"
className="form-control" />
</div>
<div>
<input type="email" name="email" placeholder="Email"
className="form-control" />
</div>
<div>
<input type="tel" name="mobile" placeholder="Mobile
Number" className="form-control" />
</div>

<div className="mt-1">
<input type="password" name="password"
placeholder="Password" className="form-control" />
</div>
<div>

<div className="mt-3 d-flex justify-content-center

gap-15 align-items-center">
<button className="button border-0"
type="submit">Sign Up</button>

</div>
 </div>
</form>
</div>
</div>
</div>

</div>
</div>

</>
);
};

export default Signup;

Forgotpassword.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import { Link } from 'react-router-dom';

const Forgotpassword = () => {

return (
<>
<Meta title={"Forgot Password"} />
<BreadCrumb title="Forgot Password" />

{/* copy login-wrapper from login.js */}

<div className="login-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">
<div className="col-12">
{/* login-card */}
<div className="auth-card">
<h3 className="text-center mb-3">Reset Your Password</h3>
<p className="text-center mt-2 mb-3">
We will send you an email to reset your password
</p>

<form action="" className="d-flex flex-column gap-15">

<div>
<input type="email" name="email" placeholder="Email"
className="form-control" />
</div>
<div>
 <div className="mt-3 d-flex justify-content-center
flex-column gap-15 align-items-center">
<button className="button border-0"
type="submit">Submit</button>

<Link to="/login">Cancel</Link>
</div>
</div>
</form>
</div>
</div>
</div>

</div>
</div>

</>
);
};

export default Forgotpassword;

Resetpassword.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import { Link } from 'react-router-dom';

const Resetpassword = () => {

return (
<>
<Meta title={"Reset Password"} />
<BreadCrumb title="Reset Password" />

{/* copy login-wrapper from signup.js */}

<div className="login-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">
<div className="col-12">
{/* login-card */}
<div className="auth-card">
<h3 className="text-center mb-3">Reset Password</h3>
<form action="" className="d-flex flex-column gap-15">

<div>
<input type="password" name="password"
placeholder="Password" className="form-control" />
 </div>

<div className="mt-1">
<input type="password" name="confpassword"
placeholder="Comfirm Password" className="form-control" />
</div>
<div>

<div className="mt-3 d-flex justify-content-center

gap-15 align-items-center">
<button className="button border-0"
type="submit">Ok</button>

</div>
</div>
</form>
</div>
</div>
</div>

</div>
</div>

</>
);
};

export default Resetpassword;

localhost:3000/reset-password

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
 --color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
 padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
 background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
 color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
 letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}
/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
 background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also
we have done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);
 margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
 font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
 font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
 width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
 width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross,
.wishlist-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title,
.wishlist-card h5.title {
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price,
.wishlist-card h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

/* auth card */

.auth-card {
padding: 20px;
background-color: white;
width: 500px;
margin: 30px auto;
border-radius: 10px;
}
.auth-card h3 {
font-size: 19px;
font-weight: 500;
color: var(--color-777777);
}

/* this below 1 is for forgot password p */

.auth-card p {
font-size: 13px;
color: var(--color-777777);
}

.auth-card .form-control {
height: 50px;
background-color: var(--color-f5f5f7);
 color: var(--color-777777);
font-size: 14px;
border-radius: 10px;
border-color: transparent;
}

.auth-card a {
font-size: 14px;
font-weight: 400;
color: var(--color-1c1c1b);
}
.auth-card .signup {
background-color: var(--color-febd69);
color: var(--color-131921);
}
.auth-card .signup:hover {
background-color: var(--color-131921);
color: white;
}

/* auth card ends here */

App.js

import React from 'react';

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import OurStore from './pages/OurStore';
import Blog from './pages/Blog';
import CompareProduct from './pages/CompareProduct';
import Wishlist from './pages/Wishlist';
import Login from './pages/Login';
import Forgotpassword from './pages/Forgotpassword';
import Signup from './pages/Signup';
import Resetpassword from './pages/Resetpassword';

function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
{/* inside this route we need to pass all our route
 whatever we pass inside this .......it will reflect with the help of
this outlet (which is present inside Layout.js) */}
{/* in below line.....index.......means "/" itself //so this
Home is our child route */}
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />

<Route path="store" element={<OurStore />} />

<Route path="blogs" element={<Blog />} />
<Route path="compare-product" element={<CompareProduct />} />
<Route path="wishlist" element={<Wishlist />} />
<Route path="login" element={<Login />} />
<Route path="forgot-password" element={<Forgotpassword />} />
<Route path="signup" element={<Signup />} />
<Route path="reset-password" element={<Resetpassword />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
}

export default App;

Blogs…ka Read More page create krenge

pages

About.js

Contact.js

Home.js

OurStore.js

Blog.js

CompareProduct.js

Wishlist.js

Login.js

Signup.js

Forgotpassword.js

Resetpassword.js

SingleBlog.js new

BlogCard.js

<Link to=”/blog/:id” className=”button”>Read More ...

App.js
SingleBlog.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import { Link } from 'react-router-dom';
import { HiOutlineArrowLeft } from 'react-icons/hi';

const SingleBlog = () => {

return (
<>
<Meta title={"Dynamic Blog Name"} />
<BreadCrumb title="Dynamic Blog Name" />

{/* copy blog-wrapper from Blog.js */}

<div className="blog-wrapper home-wrapper-2 py-5">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="single-blog-card">
<Link to="/blogs" className="d-flex align-items-center gap-10">
<HiOutlineArrowLeft className="fs=4" /> Go back to Blogs
</Link>
<h3 className="title">
A Beautiful Sunday Morning Renaissance
</h3>
<img src="images/blog-1.jpg" className="img-fluid w-100 my-4" alt="blog"
/>
<p>
A serene Sunday morning
ushers in a rebirth of joy and tranquility,
welcoming a new day's embrace.
Experience the serene awakening of
a new day with our Sunday Morning Renaissance collection.
Embrace the tranquility of dawn with elegant designs and vibrant hues.
Let each piece evoke the essence of a fresh start,
infusing your day with beauty and vitality.
Explore now and embrace the enchantment!
</p>
</div>
</div>

</div>
</div>
</div>

</>
);
};

export default SingleBlog;

App.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}
.header-bottom .dropdown button:focus {
box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
 color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
 width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}

/* singleBlog.js ke liye */

.single-blog-card a {
font-size: 18px;
color: var(--color-777777);
margin-bottom: 20px;
}

.single-blog-card h3 {
font-size: 24px;
font-weight: 600;
color: var(--color-1c1c1b);
}
.single-blog-card p {
color: var(--color-777777);
font-size: 14px;
}

/* Blog Part ends Here */

/* Product Card */
.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}
.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
 color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
 width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross,
.wishlist-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title,
.wishlist-card h5.title {
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price,
.wishlist-card h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

/* auth card */

.auth-card {
 padding: 20px;
background-color: white;
width: 500px;
margin: 30px auto;
border-radius: 10px;
}
.auth-card h3 {
font-size: 19px;
font-weight: 500;
color: var(--color-777777);
}

/* this below 1 is for forgot password p */

.auth-card p {
font-size: 13px;
color: var(--color-777777);
}

.auth-card .form-control {
height: 50px;
background-color: var(--color-f5f5f7);
color: var(--color-777777);
font-size: 14px;
border-radius: 10px;
border-color: transparent;
}

.auth-card a {
font-size: 14px;
font-weight: 400;
color: var(--color-1c1c1b);
}
.auth-card .signup {
background-color: var(--color-febd69);
color: var(--color-131921);
}
.auth-card .signup:hover {
background-color: var(--color-131921);
color: white;
}

/* auth card ends here */

pages

About.js

Contact.js

Home.js

OurStore.js

Blog.js
 CompareProduct.js

Wishlist.js

Login.js

Signup.js

Forgotpassword.js

Resetpassword.js

SingleBlog.js

PrivacyPolicy.js

RefundPolicy.js

ShippingPolicy.js

TermAndConditions.js

App.js

Footer.js link to=””

App.css

PrivacyPolicy.js

RefundPolicy.js

ShippingPolicy.js

TermAndConditions.js (all 4 having same code)

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';

const TermAndConditions = () => {

return (
<>
<Meta title={"Term And Conditions"} />
<BreadCrumb title="Term And Conditions" />

<section className="policy-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="policy">

</div>
</div>
</div>
</div>
</section>

</>
 );
};

export default TermAndConditions;

OurStore --- click on any product --- main product page

SingleProduct.js

import React, { useState } from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import ProductCard from '../components/ProductCard';
import ReactStarts from "react-rating-stars-component";

const SingleProduct = () => {

const [orderedProduct, setorderedProduct] = useState(true);
// if it is false it will not come , if it is true Write a review option is come on right
side
return (
<>
<Meta title={"Product Name"} />
<BreadCrumb title="Product Name" />
{/* we make it dynamic product name */}

<div className="main-product-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-6"></div>
<div className="col-6"></div>
</div>
</div>
</div>

<div className="description-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<h4>Description</h4>
<div className="bg-white p-3">

<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Expedita perferendis
doloribus laudantium cum consequuntur possimus? Veritatis
soluta cupiditate voluptatibus recusandae?
</p>
</div>
</div>
</div>
</div>
</div>
 <section className="reviews-wrapper home-wrapper-2">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<h3>Reviews</h3>
<div className="review-inner-wrapper">

<div className="review-head d-flex justify-content-between align-items-end">

<div>
<h4 className="mb-2">Customer Reviews</h4>
<div className="d-flex align-items-center gap-10">
<ReactStarts count={5} size={24} value={4} edit={false}
activeColor="#ffd700" />
<p className="mb-0">Based on 2 Reviews</p>
</div>

</div>

{
orderedProduct && (
<div>
<a className="text-dark text-decoration-underline" href="">Write a
Review</a>
</div>
)}

</div>

<div className="review-form py-4">

{/* copy form from Contact.js here */}
<h4>Write a Review</h4>
<form action="" className="d-flex flex-column gap-15">
<div>
<ReactStarts count={5} size={24} value={4} edit={true}
activeColor="#ffd700" />
</div>
<div>
<textarea name="" id="" className="w-100 form-control" cols="30"
rows="4" placeholder="Comments"></textarea>
</div>
<div className="d-flex justify-content-end">
<button className="button border-0">Submit Review</button>
</div>

</form>

</div>

<div className="reviews mt-4">

<div className="review">
<div className="d-flex gap-10 align-items-center">
<h6 className="mb-0">Navdeep</h6>
 <ReactStarts count={5} size={24} value={4} edit={false}
activeColor="#ffd700" />
</div>

<p className="mt-3">Lorem ipsum dolor sit amet consectetur adipisicing

elit. Consequatur dolorem, assumenda expedita
adipisci magni quo quisquam enim nostrum iure
voluptate vitae a iste! Iste repellendus magnam
praesentium minus quidem ullam.
</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

{/* copy popular-wrapper from Home.js here */}

<section className="popular-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<h3 className="section-heading">Our Popular Products</h3>
</div>

</div>

<div className="row">
<ProductCard />
</div>
</div>

</section>

</>
);
};

export default SingleProduct;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}

/* singleBlog.js ke liye */

.single-blog-card a {
font-size: 18px;
color: var(--color-777777);
margin-bottom: 20px;
}

.single-blog-card h3 {
font-size: 24px;
font-weight: 600;
color: var(--color-1c1c1b);
}
.single-blog-card p {
color: var(--color-777777);
font-size: 14px;
}

/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
 overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;
 transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
 border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}
/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross,
.wishlist-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title,
.wishlist-card h5.title {
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price,
.wishlist-card h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

/* auth card */

.auth-card {
padding: 20px;
background-color: white;
width: 500px;
margin: 30px auto;
border-radius: 10px;
}
.auth-card h3 {
font-size: 19px;
font-weight: 500;
color: var(--color-777777);
}

/* this below 1 is for forgot password p */

.auth-card p {
font-size: 13px;
color: var(--color-777777);
}

.auth-card .form-control {
height: 50px;
background-color: var(--color-f5f5f7);
color: var(--color-777777);
font-size: 14px;
border-radius: 10px;
border-color: transparent;
}

.auth-card a {
font-size: 14px;
font-weight: 400;
color: var(--color-1c1c1b);
}
.auth-card .signup {
background-color: var(--color-febd69);
color: var(--color-131921);
}
.auth-card .signup:hover {
background-color: var(--color-131921);
color: white;
}

/* auth card ends here */

/* Policy Pages */

.policy {
background-color: white;
padding: 30px;
}

/* Policy Pages ends */

/* Main Product Page */

.description-wrapper h4,
.reviews-wrapper h3 {
font-size: 26px;
color: #1c1c1b;
margin-bottom: 10px;
}
.description-wrapper p {
font-size: 14px;
color: var(--color-777777);
}

.review-inner-wrapper {
background-color: white;
padding: 30px;
}

.review-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
}
.review-head h4 {
font-size: 18px;
color: var(--color-1c1c1b);
}
.review-head p,
.review-head a {
font-size: 14px;
color: var(--color-777777);
}

.review-form h4 {
font-size: 16px;
color: var(--color-777777);
}

.review-form {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review p {
font-size: 14px;
color: var(--color-777777);
}

/* Main Product Page ends here */

SpecialProduct.js

import React, { useState } from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';
import ProductCard from '../components/ProductCard';
import ReactStarts from "react-rating-stars-component";

import ReactImageZoom from 'react-image-zoom';

import Color from '../components/Color';
import { TbGitCompare } from 'react-icons/tb';
import { AiOutlineHeart } from 'react-icons/ai';

const SingleProduct = () => {

const props = {width: 400, height: 600, zoomWidth: 600, img:
"http://www.zastavki.com/pictures/originals/2014/Brands____Beautiful_watches_065807_.jpg"};
const [orderedProduct, setorderedProduct] = useState(true);
const copyToClipboard = (text) => {
console.log('text', text)
var textField = document.createElement('textarea')
textField.innerText = text
document.body.appendChild(textField)
textField.select()
document.execCommand('copy')
textField.remove()
}
// if it is false it will not come , if it is true Write a review option is come on right
side
return (
<>
<Meta title={"Product Name"} />
 <BreadCrumb title="Product Name" />
{/* we make it dynamic product name */}

<div className="main-product-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-6">
<div className="main-product-image">
<div>
<ReactImageZoom {...props} />
</div>
</div>

<div className="other-product-images d-flex flex-wrap gap-15">

<div><img
src="http://www.zastavki.com/pictures/originals/2014/Brands____Beautiful_watches_065807_.jpg"
className="img-fluid" alt="" /></div>
<div><img
src="http://www.zastavki.com/pictures/originals/2014/Brands____Beautiful_watches_065807_.jpg"
className="img-fluid" alt="" /></div>
<div><img
src="http://www.zastavki.com/pictures/originals/2014/Brands____Beautiful_watches_065807_.jpg"
className="img-fluid" alt="" /></div>
<div><img
src="http://www.zastavki.com/pictures/originals/2014/Brands____Beautiful_watches_065807_.jpg"
className="img-fluid" alt="" /></div>
</div>
</div>

<div className="col-6">

<div className="main-product-details">
<div className="border-bottom">
<h3 className="title">
Kids Headphones Bulk 10 pack Multi Colored For Students
</h3>
</div>

<div className="border-bottom py-3">

<p className="price">$ 100</p>
<div className="d-flex align-items-center gap-10">
<ReactStarts count={5} size={24} value={4} edit={false}
activeColor="#ffd700" />
<p className="mb-0 t-review">( 2 Reviews )</p>
</div>
<a className="review-btn" href="#review">Write a Review</a>

</div>
{/* here className="border-bottom" below */}
<div className=" py-3">
<div className="d-flex gap-10 align-items-center my-2">
<h3 className="product-heading">Type :</h3>
<p className="product-data">Watch</p>
</div>
 <div className="d-flex gap-10 align-items-center my-2">
<h3 className="product-heading">Brand :</h3>
<p className="product-data">Havels</p>
</div>
<div className="d-flex gap-10 align-items-center my-2">
<h3 className="product-heading">Category :</h3>
<p className="product-data">Watch</p>
</div>
<div className="d-flex gap-10 align-items-center my-2">
<h3 className="product-heading">Tags :</h3>
<p className="product-data">Watch</p>
</div>
<div className="d-flex gap-10 align-items-center my-2">
<h3 className="product-heading">Availability :</h3>
<p className="product-data">In Stock</p>
</div>
<div className="d-flex gap-10 flex-column mt-2 mb-3">
<h3 className="product-heading">Size :</h3>
<div className="d-flex flex-wrap gap-15">
<span className="badge border border-1 bg-white text-dark
border-secondary">S</span>
<span className="badge border border-1 bg-white text-dark
border-secondary">M</span>
<span className="badge border border-1 bg-white text-dark
border-secondary">XL</span>
<span className="badge border border-1 bg-white text-dark
border-secondary">XXL</span>
</div>
</div>
<div className="d-flex gap-10 flex-column mt-2 mb-3">
<h3 className="product-heading">Color :</h3>
<Color />
</div>
<div className="d-flex align-items-center gap-15 flex-row mt-2
mb-3">
<h3 className="product-heading">Quantity :</h3>
<div className="">
<input type="number" name="" min={1} max={10}
className="form-control" style={{ width: "70px" }} id="" />
</div>
<div className="d-flex align-items-center gap-30 ms-5">
<button className="button border-0" type="submit">Add to
Cart</button>
<button className="button signup">Buy It Now</button>

</div>
</div>

<div className="d-flex align-items-center gap-15">

<div>
<a href="">
<TbGitCompare className="fs-5 me-2" />Add to Compare</a>
</div>
<div>
 <a href="">
<AiOutlineHeart className="fs-5 me-2" />Add to
Wishlist</a>
</div>
</div>

<div className="d-flex gap-10 flex-column my-3">

<h3 className="product-heading">Shipping & Returns :</h3>
<p className="product-data">
Free shipping and returns available on all orders!<br />
We shipping
all US domestic orders within <b>5-10 bussiness days!</b>
</p>
</div>
<div className="d-flex gap-10 align-items-center my-3">
<h3 className="product-heading">Product Link:</h3>
<a href="javascript:void(0);" onClick={()=>
{copyToClipboard("http://www.zastavki.com/pictures/originals/2014/
Brands____Beautiful_watches_065807_.jpg"
);
}}>
Copy Product Link
</a>
</div>

</div>

</div>

</div>
</div>
</div>
</div>

<div className="description-wrapper py-5 home-wrapper-2">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<h4>Description</h4>
<div className="bg-white p-3">

<p>
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Expedita perferendis
doloribus laudantium cum consequuntur possimus? Veritatis
soluta cupiditate voluptatibus recusandae?
</p>
</div>
</div>
</div>
</div>
</div>
 <section className="reviews-wrapper home-wrapper-2">
<div className="container-xxl">
<div className="row">
<div className="col-12">
<h3 id="review">Reviews</h3>
<div className="review-inner-wrapper">

<div className="review-head d-flex justify-content-between align-items-end">

<div>
<h4 className="mb-2">Customer Reviews</h4>
<div className="d-flex align-items-center gap-10">
<ReactStarts count={5} size={24} value={4} edit={false}
activeColor="#ffd700" />
<p className="mb-0">Based on 2 Reviews</p>
</div>

</div>

{
orderedProduct && (
<div>
<a className="text-dark text-decoration-underline" href="">Write a
Review</a>
</div>
)}

</div>

<div className="review-form py-4">

{/* copy form from Contact.js here */}
<h4>Write a Review</h4>
<form action="" className="d-flex flex-column gap-15">
<div>
<ReactStarts count={5} size={24} value={4} edit={true}
activeColor="#ffd700" />
</div>
<div>
<textarea name="" id="" className="w-100 form-control" cols="30"
rows="4" placeholder="Comments"></textarea>
</div>
<div className="d-flex justify-content-end">
<button className="button border-0">Submit Review</button>
</div>

</form>

</div>

<div className="reviews mt-4">

<div className="review">
<div className="d-flex gap-10 align-items-center">
<h6 className="mb-0">Navdeep</h6>
 <ReactStarts count={5} size={24} value={4} edit={false}
activeColor="#ffd700" />
</div>

<p className="mt-3">Lorem ipsum dolor sit amet consectetur adipisicing

elit. Consequatur dolorem, assumenda expedita
adipisci magni quo quisquam enim nostrum iure
voluptate vitae a iste! Iste repellendus magnam
praesentium minus quidem ullam.
</p>
</div>
</div>

</div>

</div>
</div>
</div>
</section>

{/* copy popular-wrapper from Home.js here */}

<section className="popular-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">

<div className="col-12">
<h3 className="section-heading">Our Popular Products</h3>
</div>

</div>

<div className="row">
<ProductCard />
</div>
</div>

</section>

</>
);
};

export default SingleProduct;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}

/* singleBlog.js ke liye */

.single-blog-card a {
font-size: 18px;
color: var(--color-777777);
margin-bottom: 20px;
}

.single-blog-card h3 {
font-size: 24px;
font-weight: 600;
color: var(--color-1c1c1b);
}
.single-blog-card p {
color: var(--color-777777);
font-size: 14px;
}

/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
 overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;
 transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
 border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}
/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross,
.wishlist-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title,
.wishlist-card h5.title {
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price,
.wishlist-card h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

/* auth card */

.auth-card {
padding: 20px;
background-color: white;
width: 500px;
margin: 30px auto;
border-radius: 10px;
}
.auth-card h3 {
font-size: 19px;
font-weight: 500;
color: var(--color-777777);
}

/* this below 1 is for forgot password p */

.auth-card p {
font-size: 13px;
color: var(--color-777777);
}

.auth-card .form-control {
height: 50px;
background-color: var(--color-f5f5f7);
color: var(--color-777777);
font-size: 14px;
border-radius: 10px;
border-color: transparent;
}

.auth-card a {
font-size: 14px;
font-weight: 400;
color: var(--color-1c1c1b);
}
/* we have removed .auth-card .signup so .auth-card from here */
.signup {
background-color: var(--color-febd69);
color: var(--color-131921);
border: none;
}
.signup:hover {
background-color: var(--color-131921);
color: white;
}

/* auth card ends here */

/* Policy Pages */

.policy {
background-color: white;
padding: 30px;
}

/* Policy Pages ends */

/* Main Product Page */

.description-wrapper h4,
.reviews-wrapper h3 {
font-size: 26px;
 color: #1c1c1b;
margin-bottom: 10px;
}
.description-wrapper p {
font-size: 14px;
color: var(--color-777777);
}

.review-inner-wrapper {
background-color: white;
padding: 30px;
}

.review-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
}
.review-head h4 {
font-size: 18px;
color: var(--color-1c1c1b);
}
.review-head p,
.review-head a {
font-size: 14px;
color: var(--color-777777);
}

.review-form h4 {
font-size: 16px;
color: var(--color-777777);
}

.review-form {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review p {
font-size: 14px;
color: var(--color-777777);
}

.main-product-image {
padding: 20px;
background-color: white;
border-radius: 10px;
}
.main-product-image > div {
border: 1px solid rgba(0, 0, 0, 0.25);
}
.main-product-image img {
width: 100% !important;
height: 600px !important;
object-fit: cover;
}

.other-product-images {
background-color: white;
padding: 20px;
}
.other-product-images > div {
padding: 20px;
width: 48%;;
border: 1px solid rgba(0, 0, 0, 0.25);
}

.main-product-image .js-image-zoom__zoomed-image {
left: 50px !important;
padding: 10px;
background-color: white;
border-radius: 10px;
z-index: 1000;
}

/* for remaining 4 images ....for 2nd col-6 */

.main-product-details {
padding: 30px 20px;
background-color: white;
border-radius: 10px;
}
.border-bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.main-product-details h3.title {
font-size: 18px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 10px;
}

.main-product-details p.price {
font-size: 16px;
line-height: 20px;
font-weight: 600;
margin-bottom: 10px;
}

.main-product-details a.review-btn,
.t-review {
color: var(--color-131921);
font-size: 13px;
}

.product-heading {
 font-size: 14px;
color: var(--color-1c1c1b);
margin-bottom: 0px;
}
.product-data {
font-size: 13px;
color: var(--color-777777);
margin-bottom: 0px;
}

.main-product-details a {
font-size: 14px;
color: var(--color-777777);
}

/* Main Product Page ends here */

Minor changes in

1) ProductCard.js
<Link to=”:id”
2) App.js
Phle path=”store” that <OurStore /> m

<Route path="product" element={<OurStore />} />

<Route path="product/:id" element={<SingleProduct />} />

3) Header.js
<Navlink to=”/store” tha phle
<Navlink to=”/product”> Our Store </Navlink>
 __________________________________________________________________________________
_____

We have import images as like

Prev

<img src="images/menu.svg" alt="" />

New
 import menu from “../images/menu.svg”;

<img src={menu} alt="" /

components

ProductCard.js

Footer.js

SingleBlog.js

Wishlist.js

OurStore.js

Home.js

CompareProduct.js

BlogCard.js

Header.js

SpecialProduct.js

Cart.js

import React from 'react';

import BreadCrumb from '../components/BreadCrumb';
import Meta from '../components/Meta';

import watch from "../images/watch.jpg";

import { AiFillDelete } from 'react-icons/ai';
import { Link } from 'react-router-dom';

const Cart = () => {

return (
<>
<Meta title={"Cart"} />
<BreadCrumb title="Cart" />

<section className="cart-wrapper home-wrapper-2 py-5">

<div className="container-xxl">
<div className="row">
<div className="col-12">
<div className="cart-header py-3 d-flex justify-content-between
align-items-center">
<h4 className="cart-col-1">Product</h4>
<h4 className="cart-col-2">Price</h4>
<h4 className="cart-col-3">Quantity</h4>
<h4 className="cart-col-4">Total</h4>
</div>
 <div className="cart-data py-3 mb-2 d-flex justify-content-
between align-items-center">
<div className="cart-col-1 gap-15 d-flex align-items-center">
<div className="w-25">
<img src={watch} className="img-fluid" alt="product
image" />
</div>
<div className="w-75">
<p>GDGDGDGD</p>
<p>Size: hgf</p>
<p>Color: gfd</p>
</div>
</div>
<div className="cart-col-2">
<h5 className="price">$ 100</h5>
</div>
<div className="cart-col-3 d-flex align-items-center gap-15">
<div>
<input className="form-control" type="number" name=""
min={1} max={10} id="" />
</div>
<div>
<AiFillDelete className="text-danger" />
</div>
</div>
<div className="cart-col-4">
<h5 className="price">$ 100</h5>
</div>
</div>

{/* copy again cart-data */}

</div>

<div className="col-12 py-2 mt-4">

<div className="d-flex justify-content-between align-items-
baseline">
<Link to="/product" className="button">Continue To
Shopping</Link>
<div className="d-flex flex-column align-items-end">
<h4>SubTotal: $ 1000</h4>
<p>Taxes and shipping calculated at checkout</p>
<Link to="/checkout" className="button">Checkout</Link>
</div>
</div>
</div>
</div>
</div>
 </section>

</>
);
};

export default Cart;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular
color ....so it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking
outside bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}

.header-bottom{
background-color: var(--color-232f3e);
}
.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate
h to black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */
footer {
background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}
 /* copy all 4 above and change main - to - small , font-size and line-height in
all 4 changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
 box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
 padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
color: var(--color-777777);
}

/* singleBlog.js ke liye */

.single-blog-card a {
font-size: 18px;
color: var(--color-777777);
margin-bottom: 20px;
}

.single-blog-card h3 {
font-size: 24px;
font-weight: 600;
color: var(--color-1c1c1b);
}
.single-blog-card p {
color: var(--color-777777);
font-size: 14px;
}

/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
 overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
/* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also
we have done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}
.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */

.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}

/* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
 margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross,
.wishlist-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title,
.wishlist-card h5.title {
 font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price,
.wishlist-card h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

/* auth card */

.auth-card {
padding: 20px;
background-color: white;
width: 500px;
margin: 30px auto;
border-radius: 10px;
}
.auth-card h3 {
font-size: 19px;
font-weight: 500;
color: var(--color-777777);
}

/* this below 1 is for forgot password p */

.auth-card p {
font-size: 13px;
color: var(--color-777777);
}

.auth-card .form-control {
height: 50px;
background-color: var(--color-f5f5f7);
color: var(--color-777777);
font-size: 14px;
 border-radius: 10px;
border-color: transparent;
}

.auth-card a {
font-size: 14px;
font-weight: 400;
color: var(--color-1c1c1b);
}
/* we have removed .auth-card .signup so .auth-card from here */
.signup {
background-color: var(--color-febd69);
color: var(--color-131921);
border: none;
}
.signup:hover {
background-color: var(--color-131921);
color: white;
}

/* auth card ends here */

/* Policy Pages */

.policy {
background-color: white;
padding: 30px;
}

/* Policy Pages ends */

/* Main Product Page */

.description-wrapper h4,
.reviews-wrapper h3 {
font-size: 26px;
color: #1c1c1b;
margin-bottom: 10px;
}
.description-wrapper p {
font-size: 14px;
color: var(--color-777777);
}

.review-inner-wrapper {
background-color: white;
padding: 30px;
}
.review-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
}
.review-head h4 {
font-size: 18px;
color: var(--color-1c1c1b);
}
.review-head p,
.review-head a {
font-size: 14px;
color: var(--color-777777);
}

.review-form h4 {
font-size: 16px;
color: var(--color-777777);
}

.review-form {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review p {
font-size: 14px;
color: var(--color-777777);
}

.main-product-image {
padding: 20px;
background-color: white;
border-radius: 10px;
}
.main-product-image > div {
border: 1px solid rgba(0, 0, 0, 0.25);
}

.main-product-image img {
width: 100% !important;
height: 600px !important;
object-fit: cover;
}
.other-product-images {
background-color: white;
padding: 20px;
}
.other-product-images > div {
padding: 20px;
width: 48%;;
border: 1px solid rgba(0, 0, 0, 0.25);
}

.main-product-image .js-image-zoom__zoomed-image {
left: 50px !important;
padding: 10px;
background-color: white;
border-radius: 10px;
z-index: 1000;
}

/* for remaining 4 images ....for 2nd col-6 */

.main-product-details {
padding: 30px 20px;
background-color: white;
border-radius: 10px;
}
.border-bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.main-product-details h3.title {
font-size: 18px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 10px;
}

.main-product-details p.price {
font-size: 16px;
line-height: 20px;
font-weight: 600;
margin-bottom: 10px;
}

.main-product-details a.review-btn,
.t-review {
color: var(--color-131921);
font-size: 13px;
}

.product-heading {
 font-size: 14px;
color: var(--color-1c1c1b);
margin-bottom: 0px;
}
.product-data {
font-size: 13px;
color: var(--color-777777);
margin-bottom: 0px;
}

.main-product-details a {
font-size: 14px;
color: var(--color-777777);
}

/* Main Product Page ends here */

/* Card Page */

.card-header,
.cart-data {
border-bottom: 1px solid #eaeaea;
}
.card-header h4 {
font-size: 13px;
color: var(--color-777777);
}
.cart-col-1 {
width: 40%;
}
.cart-col-1 p {
color: var(--color-777777);
font-size: 14px;
}
.cart-col-2 {
width: 10%;
}
.cart-col-3 {
width: 15%;
}
.cart-col-4 {
width: 15%;
}

.cart-data h5.price {
font-size: 14px;
color: var(--color-1c1c1b);
}
/* Card Page ends here */

Checkout page now

Checkout.js

import React from 'react';

import { BiArrowBack } from 'react-icons/bi';
import { Link } from 'react-router-dom';

import watch from "../images/watch.jpg";

const Checkout = () => {

return (
<>
<div className="checkout-wrapper py-5 home-wrapper-2">
<div className="container-xxl">
<div className="row">
<div className="col-7">
<div className="checkout-left-data">
<h3 className="website-name">Dev Cornver</h3>

<nav style={{ "--bs-breadcrumb-divider": ">" }}

aria-label="breadcrumb"
>
<ol className="breadcrumb">
<li className="breadcrumb-item">
<Link className="text-dark total-price" to="/cart">
 Cart</Link>
</li>
&nbsp; /&nbsp;
<li className="breadcrumb-item total-price active" aria-
current="page">
Information
</li>

{/* copy li */}

&nbsp; /
<li className="breadcrumb-item total-price active">
Shipping
</li>
&nbsp; /
<li className="breadcrumb-item total-price active" aria-
current="page">
Payment
</li>
</ol>
</nav>

<h4 className="title total">

Contact Information
</h4>
<p className="user-details total">
Navdeep Dahiya (monud0232@gmail.com)
</p>

<h4 className="mb-3">Shipping Address</h4>

<form action="" className="d-flex gap-15 flex-wrap justify-content-
between">
<div className="w-100">
<select name="" className="form-control form-select" id="">
<option value="" selected disabled>
Select Country
</option>
</select>
</div>
<div className="flex-grow-1">
<input type="text" placeholder="First Name" className="form-
control" />
</div>
<div className="flex-grow-1">
<input type="text" placeholder="Last Name" className="form-
control" />
</div>
<div className="w-100">
<input type="text" placeholder="Address" className="form-
control" />
</div>
<div className="w-100">
<input type="text" placeholder="Apartment, Suite, etc"
className="form-control" />
</div>
 <div className="flex-grow-1">
<input type="text" placeholder="City" className="form-control"
/>
</div>
<div className="flex-grow-1">
<select name="" className="form-control form-select" id="">
<option value="" selected disabled>
Select State
</option>
</select>
</div>
<div className="flex-grow-1">
<input type="text" placeholder="Zipcode" className="form-
control" />
</div>
<div className="w-100">
<div className="d-flex justify-content-between align-items-
center">
<Link to="/cart" className="text-dark">
<BiArrowBack />Return to Cart</Link>
<Link to="/cart" className="button">Continue to
Shipping</Link>
</div>
</div>
</form>
</div>
</div>

<div className="col-5">
<div className="border-bottom py-4">
<div className="d-flex gap-10 mb-2 align-items-center">
<div className="w-75 d-flex gap-10">
<div className="w-25 position-relative">
<span style={{ top:"-10px",right:"2px" }}
className="badge bg-secondary text-white rounded-
circle p-2 position-absolute">
1
</span>
<img className="img-fluid" src={watch} alt="product" />
</div>
<div>
<h5 className="total-price">gfdhgf</h5>
<p className="total-price">s / #agfgfd</p>
</div>
</div>
<div className="flex-grow-1">
<h5 className="total">$ 100</h5>
</div>
</div>
</div>

<div className="border-bottom py-4">

<div className="d-flex justify-content-between align-items-center">
 <p className="total">SubTotal</p>
<p className="total-price">$ 10000</p>
</div>
<div className="d-flex justify-content-between align-items-center">
<p className="mb-0 total">Shipping</p>
<p className="mb-0 total-price">$ 10000</p>
</div>
</div>
<div className="d-flex justify-content-between align-items-center border-
bottom py-4">
<h4 className="total">Total</h4>
<h5 className="total-price">$ 10000</h5>
</div>
</div>

</div>
</div>
</div>
</>
);
};

export default Checkout;

App.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* if 50 times i use a single color after that i want to change that particular color ....so
it is easy to change it in only one place */
/* we give color that we will use again & again */
/* we create a variable --color-#hta kr color code : color code; */
--color-131921: #131921;
--color-3b4149: #3b4149;
--color-febd69: #febd69;
--color-232f3e: #232f3e;
--color-bf4800: #bf4800;
--color-f5f5f7: #f5f5f7;
--color-ededed: #ededed;
--color-777777: #777777;
--color-1c1c1b: #1c1c1b;

}
.section-heading {
font-size: 26px;
line-height: 32px;
font-weight: 500;
margin-bottom: 30px;
}

/* marque m use kiya h card-wrapper ko */

.card-wrapper {
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;
}

body {
font-family: "Rubik",sans-serif;
}
a {
text-decoration: none;
display: inline-block;
}

.form-control:focus {
box-shadow: none;
border-color: inherit;
}
/* isse product search bar click krne ke bd size chota ho rhaa....and after clicking outside
bda ho rha */

.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-30 {
gap: 30px;
}

.button {
background-color: var(--color-232f3e);
color: white;
font-size: 14px;
padding: 13px 33px;
border-radius: 25px;
}
.button:hover {
background-color: var(--color-febd69);
color: #131921;
}

/* Header Part */

.header-top-strip{
border-bottom: 1px solid var(--color-3b4149);
background-color: var(--color-131921);
}

.header-upper{
background-color: var(--color-131921);
}
.header-bottom{
background-color: var(--color-232f3e);
}

.header-upper .input-group-text{
background-color: var(--color-febd69);
}

.header-upper .header-upper-links img{

width: 35px;
height: 35px;
}

.header-bottom .menu-links a,
.header-bottom .dropdown button {
color: white;
font-size: 14px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0.3;
text-transform: uppercase;
}

.header-bottom .dropdown button:focus {

box-shadow: none;
}

/* work on dropdown-menu */
.header-bottom .dropdown-menu {
background-color: var(--color-131921);
width: 100%;
transform: translate3d(0px, 57px, 0px) !important;
}

.header-bottom .dropdown-item {
padding: 20px;
margin-bottom: 3px;
border-bottom: 1px solid var(--color-3b4149);
}

.header-bottom .dropdown-item:hover {
/* removing hover effect in drop down in Shop Categories ke drop down m jis pr jate h to
black se white ho jata h */
background-color: transparent;
color: var(--color-febd69) !important;
}

/* Header Part End Here */

/* Footer Part */

footer {
 background-color: var(--color-232f3e);
}
/* footer:nth-child(3) niche wale se 2 lines aa gyi white small small*/
footer:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* SUBSCRIBE button ka color change kr dete h */

footer .input-group-text {
background-color: var(--color-232f3e);
color: white;
padding: 8px 17px;
}

/* Footer Part Ends Here */

/* Home page */
.main-banner-content {
top: 15%;
left: 5%;
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.main-banner-content h5 {
font-size: 42px;
line-height: 54px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.main-banner-content p{
font-size: 18px;
line-height: 28px;
letter-spacing: 0.4;
color: var(--color-131921);
}

/* copy all 4 above and change main - to - small , font-size and line-height in all 4
changes*/
.small-banner-content {
top: 25%;
left: 10%;
}
.small-banner-content h4 {
font-size: 14px;
 font-weight: 400;
line-height: 24px;
color: var(--color-bf4800);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}

.small-banner-content h5 {
font-size: 22px;
line-height: 34px;
letter-spacing: -2px;
font-weight: 500;
text-transform: none;
}

.small-banner-content p{
font-size: 14px;
line-height: 22px;
letter-spacing: 0.4;
color: var(--color-131921);
}

.small-banner {
width: 49%;
}

/* home wrapper 2 */
.home-wrapper-2 {
background-color: var(--color-f5f5f7);

/* home wrapper 2 ends */

/* categories section */

.categories{
background-color: white;
box-shadow: 0 0 10px #0000001a;
padding: 15px;

}
.categories > div {
width: 25%;
padding: 10px 10px 10px 20px;
}

.categories > div > div {

width: 60%;
}
.categories > div:nth-child(1),
.categories > div:nth-child(2),
.categories > div:nth-child(3),
.categories > div:nth-child(4){
border-bottom: 1px solid var(--color-ededed );
}

.categories > div:nth-child(1),

.categories > div:nth-child(2),
.categories > div:nth-child(3) {
border-right: 1px solid var(--color-ededed );
}

.categories > div:nth-child(5),

.categories > div:nth-child(6),
.categories > div:nth-child(7) {
border-right: 1px solid var(--color-ededed );
}

/* categories section ends here */

/* Home Page Ends */

/* Blog part (Our Latest Blogs)*/

.blog-card {
background-color: white;
/* padding: 20px; */
border-radius: 10px;
}
.blog-card img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.blog-content {
padding: 15px;
}

.blog-contentp.date {
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 400;
color: var(--color-777777);
}

.blog-content h5 {
font-size: 18px;
color: var(--color-131921);
}
.blog-content p.desc {
font-size: 13px;
line-height: 22px;
 color: var(--color-777777);
}

/* singleBlog.js ke liye */

.single-blog-card a {
font-size: 18px;
color: var(--color-777777);
margin-bottom: 20px;
}

.single-blog-card h3 {
font-size: 24px;
font-weight: 600;
color: var(--color-1c1c1b);
}
.single-blog-card p {
color: var(--color-777777);
font-size: 14px;
}

/* Blog Part ends Here */

/* Product Card */

.product-card {
padding: 15px;
background-color: white;
border-radius: 10px;
overflow: hidden;
width: 100%;
}

.product-card .product-image {
height: 270px;
}
.product-card .product-image img{
object-fit: contain;
}

/* to change image of Featured Collection - below 3 are used */

.product-card .product-image > img:last-child {
display: none;
}
.product-card:hover .product-image > img:nth-child(1) {
display: none;
}
.product-card:hover .product-image > img:last-child {
display: block;
}

.product-card:hover .action-bar{
 /* hm thino icons vo dekh nhi pa rhe h bcoz we have done overflow:hidden and also we have
done transition in action-bar ab*/
right: 15px;
}

.product-card .product-details h6 {
color: var(--color-bf4800);
font-size: 13px;
}
.product-card .product-details h5 {
font-size: 15px;
color: var(--color-1c1c1b);
}
.product-card .product-details p.price {
font-size: 16px;
color: var(--color-1c1c1b);
}

/* description bd m lgaya 4.53 */

.product-card p.description {
font-size: 13px;
color: var(--color-777777);

margin-right: 20px;
}

.action-bar{
top:10%;
right: -23px;

transition: 0.3s;
}

.wishlist-icon {
top: 2%;
right: 15px;
}
/* Product Card ends here */

/* Special Product */

.special-product-card {
padding: 20px 10px;
border-radius: 10px;
background-color: white;
}

/* Special Product ends here */

/* Famous card */
.famous-card .famous-content {
top: 10%;
left: 5%;
}
.famous-card img {
border-radius: 10px;
}

.famous-content h5 {
font-size: 13px;
line-height: 20px;
font-weight: 400px;
color: white;
margin-bottom: 7px;
text-transform: uppercase;
}
.famous-content h6 {
font-size: 24px;
line-height: 38px;
font-weight: 500;
color: white;
}
.famous-content p {
font-size: 16px;
line-height: 24px;
font-weight: 100;
color: white;
}

/* Famous card ends here */

/* Our Store */

.filter-card {
background-color: white;
border-radius: 10px;
padding: 15px 15px 25px;

}
.filter-title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 20px;
}
.filter-card ul,
.filter-card .form-check-label {
list-style-type: none;
font-size: 13px;
line-height: 30px;
color: var(--color-777777);
cursor: pointer;
}
 /* 2nd Filter By */
.filter-card .form-check-input:focus {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.25);
}
.filter-card .form-check-input:checked {
background-color: var(--color-febd69);
border-color: var(--color-febd69);
}

.sub-title {
font-size: 14px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 15px;
margin-top: 20px;
}

.colors {
list-style-type: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.colors li {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}

/* Random product */
.random-products h5 {
font-size: 14px;
margin: 8px;
}
.random-products:first-child {
border-bottom: 1px solid var(--color-ededed);
}

/* right section of this page */

.filter-sort-grid {
padding: 10px;
background-color: white;
border-radius: 10px;
}

.grid img {
width: 35px;
height: 35px;
background-color: #f2f2f2;
 padding: 8px;
border-radius: 3px;

cursor: pointer;
}

/* we are creating our own class in ProductCard.js */

.gr-12 {
width: 100%;
}
.gr-6 {
width: 49%;
}
.gr-4 {
width: 32%;
}
gr-3 {
width: 24%;
}

.gr-12 .product-card {
display: flex;
gap: 20px;
}
.gr-6 .product-image {
width: 100%;
}
.gr-6 .product-image img {
margin: auto;
display: block;
}
.gr-12 .product-card .product-image {
width: 270px;
}

.gr-12 .product-card .product-image {

height: auto;
}

.gr-12 .action-bar{
top: 17%;
}

/* Our Store ends here */

/* contact page */

.contact-inner-wrapper {
padding: 30px 20px;
border-radius: 15px;
background-color: white;
 gap: 15px;
}
.contact-inner-wrapper > div {
width: 48%;
}
.contact-title {
font-size: 26px;
font-weight: 500;
line-height: 35px;
text-align: left;
}

.contact-inner-wrapper form .form-control {

background-color: var(--color-f5f5f7);
border-radius: 10px;
border-color: transparent;
padding: 10px;
}

.contact-inner-wrapper ul {
list-style: none;
}

.contact-inner-wrapper address,
.contact-inner-wrapper a,
.contact-inner-wrapper p {
color: var(--color-777777);
}

/* contact page ends here */

/* compare Product Page */

.compare-product-card {
padding: 20px 15px;
background-color: white;
border-radius: 10px;
}

.compare-product-card .cross,
.wishlist-card .cross {
top: 15px;
right: 15px;
width: 25px;
padding: 3px;
cursor: pointer;
}

/* this below 2 css is not applied 5.35 */

.compare-product-details h5.title,
.wishlist-card h5.title {
 font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--color-1c1c1b);
}
.compare-product-details h6.price,
.wishlist-card h6.price {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}

.compare-product-card .product-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Compare Product Page ends here */

/* auth card */

.auth-card {
padding: 20px;
background-color: white;
width: 500px;
margin: 30px auto;
border-radius: 10px;
}
.auth-card h3 {
font-size: 19px;
font-weight: 500;
color: var(--color-777777);
}

/* this below 1 is for forgot password p */

.auth-card p {
font-size: 13px;
color: var(--color-777777);
}

.auth-card .form-control {
height: 50px;
background-color: var(--color-f5f5f7);
color: var(--color-777777);
font-size: 14px;
border-radius: 10px;
border-color: transparent;
}

.auth-card a {
 font-size: 14px;
font-weight: 400;
color: var(--color-1c1c1b);
}
/* we have removed .auth-card .signup so .auth-card from here */
.signup {
background-color: var(--color-febd69);
color: var(--color-131921);
border: none;
}
.signup:hover {
background-color: var(--color-131921);
color: white;
}

/* auth card ends here */

/* Policy Pages */

.policy {
background-color: white;
padding: 30px;
}

/* Policy Pages ends */

/* Main Product Page */

.description-wrapper h4,
.reviews-wrapper h3 {
font-size: 26px;
color: #1c1c1b;
margin-bottom: 10px;
}
.description-wrapper p {
font-size: 14px;
color: var(--color-777777);
}

.review-inner-wrapper {
background-color: white;
padding: 30px;
}

.review-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
}
.review-head h4 {
font-size: 18px;
color: var(--color-1c1c1b);
}
.review-head p,
.review-head a {
 font-size: 14px;
color: var(--color-777777);
}

.review-form h4 {
font-size: 16px;
color: var(--color-777777);
}

.review-form {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.review p {
font-size: 14px;
color: var(--color-777777);
}

.main-product-image {
padding: 20px;
background-color: white;
border-radius: 10px;
}
.main-product-image > div {
border: 1px solid rgba(0, 0, 0, 0.25);
}

.main-product-image img {
width: 100% !important;
height: 600px !important;
object-fit: cover;
}

.other-product-images {
background-color: white;
padding: 20px;
}
.other-product-images > div {
padding: 20px;
width: 48%;;
border: 1px solid rgba(0, 0, 0, 0.25);
}

.main-product-image .js-image-zoom__zoomed-image {
left: 50px !important;
padding: 10px;
background-color: white;
border-radius: 10px;
z-index: 1000;
}

/* for remaining 4 images ....for 2nd col-6 */

.main-product-details {
padding: 30px 20px;
background-color: white;
border-radius: 10px;
}
.border-bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.main-product-details h3.title {
font-size: 18px;
font-weight: 600;
color: var(--color-1c1c1b);
margin-bottom: 10px;
}

.main-product-details p.price {
font-size: 16px;
line-height: 20px;
font-weight: 600;
margin-bottom: 10px;
}

.main-product-details a.review-btn,
.t-review {
color: var(--color-131921);
font-size: 13px;
}

.product-heading {
font-size: 14px;
color: var(--color-1c1c1b);
margin-bottom: 0px;
}
.product-data {
font-size: 13px;
color: var(--color-777777);
margin-bottom: 0px;
}

.main-product-details a {
font-size: 14px;
color: var(--color-777777);
}

/* Main Product Page ends here */

/* Card Page */

.card-header,
.cart-data {
 border-bottom: 1px solid #eaeaea;
}
.card-header h4 {
font-size: 13px;
color: var(--color-777777);
}
.cart-col-1 {
width: 40%;
}
.cart-col-1 p {
color: var(--color-777777);
font-size: 14px;
}
.cart-col-2 {
width: 10%;
}
.cart-col-3 {
width: 15%;
}
.cart-col-4 {
width: 15%;
}

.cart-data h5.price {
font-size: 14px;
color: var(--color-1c1c1b);
}
/* Card Page ends here */

/* Shipping Page */

.total {
font-size: 14px;
color: var(--color-1c1c1b);
}
.total-price {
font-size: 16px;
color: var(--color-777777);
}

/* Shipping Page ends here */

We will refractor our code & make code small

Convert

Home.js convert section – Container

Blog.js

Cart.js

Checkout.js

CompareProduct.js

Contact.js

Forgotpassword.js

Login.js

OurStore.js

PrivacyPolicy.js

RefundPolicy.js

Resetpassword.js
ShippingPolicy.js

Signup.js

SingleBlog.js

SingleProduct.js

TermAndCondition.js

Wishlist.js

components

CustomInput.js

Signup.js

Login.js

Forgotpassword.js

Resetpassword.js

Netlify m /product pr refresh kr rhe the to …………….404 error show ho rhi thi

Neflify.toml file

OurStore.js

Option m selected= “selected” ko hta diya

ProductCard.js 2 problem

return (
<>
{/* here "/store" is changed to "/product" */}
<div className={` ${location.pathname === "/product" ? `gr-${grid}` : "col-3" }
`}>
{/* <Link to=":id" */}
<Link
to={` ${
location.pathname == "/"
? "/product/:id"
: location.pathname == "/product/:id"
? "/product/:id"
: ":id"
}`}
className="product-card position-relative">