Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How To Build A Full E-commerce Website Using React JS | React JS Ecommerce Project From Scratch", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Setting Up the Project
Create a Project Folder:
- Make a new folder, for instance, “ecommerce-website”.
- Open this folder in your VS Code editor.
Initialize the Project:
npm create vite@latest ./ -- --template react
npm install
npm run dev
Modify folder and CSS Files:
- Remove the default assets folder and App.css file.
- Replace the content of index.css with the provided CSS code.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
/* News Letter Style */
.news-letter {
margin: 15vh 0;
text-align: center;
}
.news-letter h3 {
font-size: 5em;
text-transform: uppercase;
font-weight: 500;
color: #D5D6D7;
}
.news-letter > div {
display: flex;
justify-content: center;
align-items: center;
max-width: 600px;
margin: 0 auto;
margin-top: 40px;
}
.news-letter > div input {
flex: 1;
padding: 10px;
font-size: 1em;
font-family: "Poppins", sans-serif;
outline: none;
border: 1px solid #000;
}
.news-letter > div button {
width: 30%;
padding: 15px;
background: #000;
color: #fff;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: all 0.5s ease;
}
.news-letter > div button:hover {
border: 1px solid #000;
background: transparent;
color: #000;
letter-spacing: 8px;
}
/* Responsive */
@media (max-width: 768px) {
.news-letter h3 {
font-size: 2.5em;
}
.news-letter > div {
flex-direction: column;
width: 80%;
gap: 10px;
}
.news-letter > div input {
width: 100%;
}
.news-letter > div button {
width: 100%;
}
}
Creating the Components
- Article. Create the files. Article.jsx, Article.css
- Display. Create the files. Display.jsx, Display.css
- Hero. Create the files. Hero.jsx, Hero.css
- NavBar. Create the files, NavBar.jsx, NavBar.css
- Swiper. Create the files, NavBar.jsx, NavBar.css
- VideoPopup. Create the files, VideoPopup.jsx, VidePopup.css
- Footer. Create the files, Footer.jsx, Footer.css
Adding the Codes
import React from 'react'
import "./Article.css"
import article1 from "../assets/article1.jpg"
import article2 from "../assets/article2.jpg"
import article3 from "../assets/article3.jpg"
//Framer Motion
import { motion } from 'framer-motion'
const Article = () => {
return (
<div className='articles'>
<motion.div className="article-header"
initial={{opacity: 0, x: -200}}
whileInView={{opacity: 1, x: 0}}
transition={{duration: 1}}
viewport={{once: true, amount: 0}}
>
<h3>news articles</h3>
<button>read all</button>
</motion.div>
<motion.div className="all-articles"
initial={{opacity: 0, y: 200}}
whileInView={{opacity: 1, y: 0}}
transition={{duration: 0.6}}
viewport={{once: true, amount: 0}}
>
<div className="article">
<img src={article1} alt="" />
<h4>best electric produce to buy this season</h4>
</div>
<div className="article">
<img src={article2} alt="" />
<h4>how to follow the trend budget list.</h4>
</div>
<div className="article">
<img src={article3} alt="" />
<h4>unique gadget to own by tech collectors.</h4>
</div>
</motion.div>
</div>
)
}
export default Article
.articles {
margin-top: 10vh;
padding: 1em;
}
.article-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.article-header h3 {
font-size: 2.7em;
text-transform: uppercase;
font-weight: 500;
}
.article-header button {
padding: 15px 40px;
border: none;
text-transform: uppercase;
cursor: pointer;
background: #424649;
color: #fff;
transition: all 0.5s ease;
}
.article-header button:hover {
letter-spacing: 8px;
}
.all-articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1em;
}
.article {
cursor: pointer;
}
.article img {
width: 100%;
}
.article h4 {
text-transform: uppercase;
font-size: 1.5em;
margin-top: 10px;
font-weight: 500;
}
@media (max-width: 768px) {
.article-header {
flex-direction: column;
align-items: flex-start;
gap: 1em;
}
.article-header h3 {
font-size: 2em;
}
.article-header button {
padding: 10px 30px;
}
.all-articles {
gap: 2em;
}
.article h4 {
font-size: 1.4em;
}
}
import React from 'react'
import "./Display.css"
//Framer Motion
import { motion } from "framer-motion";
const Display = () => {
return (
<div className='display'>
<motion.div
initial={{opacity: 0, x: -200}}
whileInView={{opacity: 1, x: 0}}
transition={{duration: 0.6}}
viewport={{once: true, amount: 0.2}}
>
<div>
<h2>deal of the day</h2>
<span>up to 45% off on laptops</span>
<button>shop now</button>
</div>
</motion.div>
<motion.div
initial={{opacity: 0, y: 200}}
whileInView={{opacity: 1, y: 0}}
transition={{duration: 0.6}}
viewport={{once: true, amount: 0}}
>
<div>
<h2>the best selling</h2>
<span>starting price from $100</span>
<button>shop now</button>
</div>
</motion.div>
</div>
)
}
export default Display
.display {
position: relative;
margin-top: 91vh;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}
.display > div {
position: relative;
width: 100%;
height: 700px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.display > div:first-child {
background-image: url("../assets/display-1.jpg");
}
.display > div:last-child {
background-image: url("../assets/display-2.jpg");
}
.display > div > div {
position: absolute;
top: 80%;
width: 100%;
transform: translateY(-80%);
background: rgba(255, 255, 255, 0.1);
padding: 3em 0;
text-align: center;
color: #fff;
}
.display > div > div h2 {
font-size: 3.5em;
text-transform: uppercase;
font-weight: 500;
}
.display > div > div span {
display: block;
margin: 20px 0;
text-transform: uppercase;
font-size: 1.5em;
}
.display > div > div button {
padding: 15px 50px;
border: none;
text-transform: uppercase;
font-size: 1em;
cursor: pointer;
background: #fff;
transition: all 0.5s ease;
}
.display > div > div button:hover {
background: transparent;
border: 1px solid #fff;
color: #fff;
}
/* Responsiveness */
@media (max-width: 768px) {
.display {
flex-direction: column;
padding: 0.6em;
gap: 0;
margin-top: 90vh;
}
}
import React from 'react'
import "./Hero.css"
import { motion } from 'framer-motion'
const Hero = () => {
return (
<div className='hero'>
<motion.div
initial={{opacity: 0, x: -200}}
whileInView={{opacity: 1, x: 0}}
transition={{duration: 1}}
viewport={{once: true, amount: 0}}
>
<span>up to 50% off</span>
<h1>the best apple watch series</h1>
<button>shop collection</button>
</motion.div>
</div>
)
}
export default Hero
.hero {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url("../assets/hero.jpg") no-repeat center center/cover;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 15em;
color: #fff;
}
.hero > div span {
font-size: 3em;
}
.hero > div h1 {
font-size: 5em;
text-transform: uppercase;
font-weight: 500;
max-width: 600px;
line-height: 1.3em;
letter-spacing: 0.0001em;
}
.hero > div button {
padding: 15px 50px;
text-transform: uppercase;
background: transparent;
border: 1px solid #fff;
color: #fff;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
.hero > div button:hover {
background: #fff;
color: #000;
}
/* Responsiveness */
@media (max-width: 1000px) {
.hero {
padding-left: 5%;
}
}
@media (max-width: 768px) {
.hero > div span {
font-size: 2em;
}
.hero > div h1 {
font-size: 2.5em;
line-height: 1.5em;
}
}
import React, { useState } from "react";
import "./Navbar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCartShopping, faChevronDown, faTimes } from "@fortawesome/free-solid-svg-icons";
import { faHeart, faUser } from "@fortawesome/free-solid-svg-icons";
import logo from "../assets/logo.png"
//Framer Motion
import { motion } from "framer-motion";
const Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false);
const [dropdownOpen, setDropdownOpen] = useState(false);
const [cartOpen, setCartOpen] = useState(false);
return (
<>
<motion.header className="navbar"
initial={{opacity: 0, y: -50}}
whileInView={{opacity: 1, y: 0}}
transition={{duration: 0.6}}
viewport={{once: true, amount: 0}}
>
<a href="" className="navbar-logo"><img src={logo} alt="logo" /></a>
<nav className={`navbar-links ${menuOpen ? "active" : ""}`}>
<ul>
<li>
<a href="#"><span>Home</span></a>
</li>
<li><a href="#"><span>About</span></a></li>
<li onClick={() => setDropdownOpen(!dropdownOpen)}><a href="#"><span>Shop</span><FontAwesomeIcon icon={faChevronDown} className="icon" /></a>
<ul className={`dropdown ${dropdownOpen ? "show" : ""}`}>
<li><a href="#">Shop Now</a></li>
<li><a href="#">Shop Products</a></li>
</ul>
</li>
<li><a href="#"><span>Blog</span></a></li>
<li><a href="#"><span>Page</span></a></li>
</ul>
</nav>
<div className="navbar-icons">
<a href="#" className="icon" onClick={() => setCartOpen(!cartOpen)}><FontAwesomeIcon icon={faCartShopping} /></a>
<a href="#" className="icon"><FontAwesomeIcon icon={faHeart} /></a>
<a href="#" className="icon"><FontAwesomeIcon icon={faUser} /></a>
<span className="hamburger" onClick={() => setMenuOpen(!menuOpen)}>☰</span>
</div>
</motion.header>
{/* Cart Dropdown */}
<div className={`cart-dropdown ${cartOpen && "active"}`}>
<button className="close-btn" onClick={() => setCartOpen(!cartOpen)}><FontAwesomeIcon icon={faTimes} className="icon" /></button>
<div className="cart-items">
<div className="cart-header">
<h3>your cart</h3>
<div>3</div>
</div>
<div className="cart-details">
<div>
<div>
<h4>Product one</h4>
<p>Brief description</p>
</div>
<p>$120</p>
</div>
<div>
<div>
<h4>Product two</h4>
<p>Brief description</p>
</div>
<p>$120</p>
</div>
<div>
<div>
<h4>Product three</h4>
<p>Brief description</p>
</div>
<p>$120</p>
</div>
<div className="total">
<p>Total (USD)</p>
<p>$120</p>
</div>
</div>
</div>
<button>continue to checkout</button>
</div>
</>
);
};
export default Navbar;
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
padding: 1.5em 3em;
position: relative;
z-index: 99;
}
.navbar-logo {
font-size: 2em;
font-weight: 500;
color: #fff;
text-decoration: none;
}
.navbar-links ul {
display: flex;
list-style: none;
gap: 4em;
}
.navbar-links li {
position: relative;
cursor: pointer;
}
.navbar-links li::before {
content: "";
position: absolute;
width: 0;
height: 2px;
background: #fff;
top: 100%;
left: 0;
transition: all 0.5s ease;
}
.navbar-links li:hover::before {
width: 100%;
}
.navbar-links li > a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 5px;
}
.navbar-links li > a .icon {
font-size: 0.9em;
}
.navbar-links li .dropdown {
position: absolute;
top: 30px;
left: 0;
background: #fff;
padding: 10px 20px;
min-width: 200px;
list-style: none;
z-index: 100;
border-radius: 5px;
display: none;
}
.navbar-links li .dropdown li {
margin-bottom: 8px;
}
.navbar-links li .dropdown li a {
color: #222;
}
.dropdown li:last-child {
margin-bottom: 0;
}
.navbar-links li .dropdown.show {
display: block;
}
.navbar-icons {
display: flex;
gap: 20px;
align-items: center;
}
.navbar-icons .icon {
cursor: pointer;
font-size: 1.2em;
color: #fff;
transition: all 0.5s ease;
}
.navbar-icons .icon:hover {
color: #cccc;
}
.hamburger {
font-size: 1.5em;
cursor: pointer;
display: none;
}
/* Cart Dropdown */
.cart-dropdown {
position: fixed;
top: 0;
right: 0;
background: #fff;
color: #000;
padding: 0 20px;
max-width: 400px;
width: 100%;
height: 100vh;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
z-index: 99;
transform: translateX(9999px);
transition: all 0.5s ease;
}
.cart-dropdown button.close-btn {
float: right;
border: none;
width: auto;
padding: 10px 15px;
}
.cart-items {
margin-top: 80px;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-header h3 {
text-transform: uppercase;
}
.cart-header > div {
width: 30px;
height: 30px;
border-radius: 50%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
color: #ffff;
}
.cart-details {
margin-top: 20px;
border: 1px solid rgba(0,0,0,0.1);
padding: 10px 15px;
}
.cart-details > div {
display: flex;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 10px 0;
}
.cart-details > div:last-child {
border: none;
}
.cart-details > div h4 {
font-weight: 500;
text-transform: uppercase;
font-size: 1.1em;
}
.cart-details > div p {
font-size: 1em;
color: rgba(0,0,0,0.5);
}
.cart-details > div.total p {
color: #000;
font-weight: 600;
}
.cart-dropdown button {
margin-top: 20px;
padding: 15px 0;
background: #222;
color: #fff;
border: none;
cursor: pointer;
width: 100%;
font-size: 1em;
text-transform: uppercase;
}
.cart-dropdown.active {
transform: translateX(0);
}
/* Responsive */
@media (max-width: 1000px) {
.navbar-links ul {
gap: 1.5em;
}
}
@media (max-width: 768px) {
.navbar {
padding: 1.5em 1.5em;
}
.navbar-links {
display: none;
position: absolute;
top: 60px;
left: 0;
background: #000;
width: 100%;
padding: 20px 10px;
flex-direction: column;
}
.navbar-links.active {
display: flex;
}
.navbar-links ul {
flex-direction: column;
gap: 15px;
}
.hamburger {
display: block;
}
.navbar-icons .icon {
display: none;
}
}
import React from 'react'
import "./SwiperFunc.css"
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css/pagination';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight, faTimes, faHeart } from '@fortawesome/free-solid-svg-icons';
import { motion } from 'framer-motion';
const SwiperFunc = ({swiperTitle, imageSlides, content, swiperSubTitle, textSlides, paginationID}) => {
return (
<div className='swiper-container'>
<motion.div className="swiper-title"
initial={{opacity: 0, x: -200}}
whileInView={{opacity: 1, x: 0}}
transition={{duration: 1}}
viewport={{once: true, amount: 0}}
>
{swiperTitle ? <>
<h3>{swiperTitle}</h3>
<button>Shop All</button>
</> : <h3 className='review'>{swiperSubTitle}</h3>}
</motion.div>
{imageSlides &&
<Swiper
modules={[Autoplay, Pagination]}
spaceBetween={30}
slidesPerView={1}
{...paginationID && {loop: true, autoplay: {delay: 2500, disableOnInteraction: false}, pagination: {enabled: true, clickable: true}}}
// loop={true}
// autoplay={{delay: 2500, disableOnInteraction: false}}
//Responsiveness
breakpoints={{
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 4,
},
}}
>
{imageSlides.map((src, index) => (
<SwiperSlide key={index}>
<motion.div className='image-slide'
initial={{opacity: 0, y: 200}}
whileInView={{opacity: 1, y: 0}}
transition={{duration: 0.6 * index}}
viewport={{once: true, amount: 0}}
>
<img src={src} alt={`Slide ${index + 1}`} />
<div className="slide-description">
<span>Add To Cart <FontAwesomeIcon icon={faArrowRight} /> </span> <FontAwesomeIcon icon={faHeart} /><FontAwesomeIcon icon={faTimes} />
</div>
{content && content[index] && (
<div className='image-content'>
<span>{content[index].range}</span>
<span>{content[index].price}</span>
</div>
)}
</motion.div>
</SwiperSlide>
))}
</Swiper>}
{textSlides &&
<div style={{width: "90%", margin: "0 auto"}}>
<Swiper
modules={[Autoplay, Pagination]}
spaceBetween={50}
slidesPerView={1}
loop={true}
pagination={{clickable: true}}
//Responsiveness
breakpoints={{
640: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
spaceBetween: 50
},
1024: {
slidesPerView: 2,
},
}}
>
{textSlides.map((src, index) => (
<SwiperSlide key={index}>
<div className='text-slide'>
<p>{src.text}</p>
<span>{src.author}</span>
</div>
</SwiperSlide>
))}
</Swiper>
</div>}
</div>
)
}
export default SwiperFunc
.swiper-container {
margin-top: 10vh;
padding: 1em;
}
.swiper-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
}
.swiper-title h3 {
font-size: 2.7em;
text-transform: uppercase;
font-weight: 500;
}
.swiper-title button {
padding: 15px 40px;
border: none;
text-transform: uppercase;
cursor: pointer;
background: #424649;
color: #fff;
transition: all 0.5s ease;
}
.swiper-title button:hover {
letter-spacing: 8px;
}
.image-slide {
position: relative;
max-width: 350px;
width: 100%;
height: 400px;
margin-bottom: 100px;
}
.image-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.swiper-pagination-bullet-active {
background-color: #000 !important;
transform: scale(1.2);
}
.slide-description {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -80%);
width: 80%;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 50px;
font-size: 1.2em;
opacity: 0;
transition: all 0.5s ease;
}
.slide-description span {
font-size: 0.9em;
}
.image-slide:hover .slide-description {
top: 80%;
opacity: 1;
}
.image-content {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.2em;
text-transform: uppercase;
margin-top: 10px;
}
.image-content span:last-child {
font-weight: 550;
}
.swiper-title h3.review {
font-size: 5em;
color: #D5D6D7;
}
.text-slide {
text-align: center;
font-size: 1.2em;
color: #424649;
margin-bottom: 50px;
}
.text-slide span {
display: block;
margin: 20px 0;
color: #000;
font-weight: 550;
}
/* Responsiveness */
@media (max-width: 768px) {
.swiper-title {
flex-direction: column;
align-items: flex-start;
gap: 1em;
}
.swiper-title h3 {
font-size: 2em;
}
.swiper-title button {
padding: 10px 30px;
}
.swiper-title h3.review {
font-size: 2.5em;
}
.slide-description {
padding: 10px 30px;
}
}
import { faPlayCircle } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React, { useState, useRef, useEffect } from 'react'
import "./VideoPopup.css"
//Framer Motion
import { motion } from 'framer-motion'
const VideoPopup = () => {
const [openPopup, setOpenPopup] = useState(false);
const popupRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (popupRef.current && !popupRef.current.contains(event.target)) {
setOpenPopup(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (
<>
<motion.div className='video-popup'
initial={{opacity: 0, scale: 0}}
whileInView={{opacity: 1, scale: 1}}
transition={{duration: 0.6}}
viewport={{once: true, amount: 0}}
>
<button onClick={() => setOpenPopup(true)}><FontAwesomeIcon icon={faPlayCircle} /></button>
</motion.div>
{openPopup && <div className='popup-contianer'>
<div ref={popupRef} className="popup">
<iframe src="https://www.youtube.com/embed/MOKIi86cx8w?si=vh_skqSdofrrGVfh" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
</div>
</div>}
</>
)
}
export default VideoPopup
.video-popup {
width: 100%;
height: 70vh;
background-image: url("../assets/video.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.video-popup button {
font-size: 7em;
background: transparent;
border: none;
cursor: pointer;
color: #fff;
animation: zoom 4s linear alternate infinite;
}
@keyframes zoom {
0% {transform: scale(1);}
100% {transform: scale(1.5);}
}
.popup-contianer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99;
background: rgba(0, 0, 0, .7);
display: flex;
justify-content: center;
align-items: center;
}
.popup {
max-width: 700px;
width: 90%;
height: 500px;
padding: 10px;
background: #fff;
}
.popup iframe {
width: 100%;
height: 100%;
}
import React from 'react'
import "./Footer.css"
import logo from "../assets/logo.png"
import { motion } from 'framer-motion'
const Footer = () => {
return (
<motion.div className='footer'
initial={{opacity: 0}}
whileInView={{opacity: 1}}
transition={{duration: 1}}
viewport={{once: true, amount: 0}}
>
<div className="footer-container">
<a href='' className="footer-section brand">
<img src={logo} />
</a>
<div className="footer-section">
<ul>
<li>ABOUT</li>
<li>SHOP</li>
<li>SALE</li>
<li>ARTICLES</li>
</ul>
</div>
<div className="footer-section">
<ul>
<li>TRACK ORDER</li>
<li>RETURN POLICY</li>
<li>SHIPPING</li>
<li>CONTACT US</li>
</ul>
</div>
<div className="footer-section">
<ul>
<li>FACEBOOK</li>
<li>INSTAGRAM</li>
<li>TWITTER</li>
<li>YOUTUBE</li>
<li>PINTEREST</li>
</ul>
</div>
<div className="footer-section contact">
<p>Do you have any queries?</p>
<a href="mailto:youremailaddress@gmail.com">
youremailaddress@gmail.com
</a>
<p>If you need support? Give us a call.</p>
<p>+12 23 34 456 678</p>
</div>
</div>
<div className="footer-bottom">
<p>
© All rights reserved by{" "}
<a
href=""
target="_blank"
rel="noopener noreferrer"
>
U-GINE MEDIA
</a>
</p>
</div>
</motion.div>
)
}
export default Footer
.footer {
background-color: #000;
color: #fff;
padding: 6em 3em;
padding-bottom: 0;
font-family: sans-serif;
}
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
font-size: 0.9em;
margin-bottom: 10em;
}
.footer-section {
flex: 1;
min-width: 150px;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section li {
margin-bottom: 0.5rem;
cursor: pointer;
}
.contact a {
color: #fff;
text-decoration: underline;
display: block;
margin: 0.5rem 0;
}
.footer-bottom {
text-align: center;
border-top: 1px solid #333;
padding: 2em 0;
}
.footer-bottom p {
font-size: 1.1em;
}
.footer-bottom a {
color: #fff;
text-decoration: underline;
}
/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
align-items: flex-start;
margin-bottom: 0;
gap: 0.5rem;
padding-top: 2em;
}
.footer-section {
width: 100%;
margin-bottom: 1.5rem;
}
.footer-bottom {
text-align: left;
font-size: 13px;
}
}
@media (max-width: 480px) {
.footer {
padding: 2rem 1rem;
}
.brand h2 {
font-size: 20px;
}
.footer-bottom {
font-size: 12px;
}
}
import React from 'react'
import Navbar from './NavBar/NavBar'
import Hero from './Hero/Hero'
import Display from './Display/Display'
import SwiperFunc from './Swiper/SwiperFunc'
import item1 from "./assets/item1.jpg"
import item2 from "./assets/item2.jpg"
import item3 from "./assets/item3.jpg"
import item4 from "./assets/item4.jpg"
import item5 from "./assets/item5.jpg"
import VideoPopup from './VideoPopup/VideoPopup'
import Article from './Article/Article'
import Footer from './Footer/Footer'
//Framer Motion
import { motion } from 'framer-motion'
const App = () => {
const slides = [item1, item2, item3, item4, item5];
const slideContent = [
{range: "product one", price: "$22.00"},
{range: "product two", price: "$50.00"},
{range: "product trhee", price: "$12.00"},
{range: "product four", price: "$220.00"},
{range: "product five", price: "$100.00"},
]
const reviews = [
{text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam libero odit dignissimos magni explicabo!", author: "John Doe"},
{text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam libero odit dignissimos magni explicabo!", author: "Williams Jack"},
{text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam libero odit dignissimos magni explicabo!", author: "Nicholas Anderson"},
]
return <>
<Navbar />
<Hero />
<Display />
<SwiperFunc swiperTitle="New Arrival Items" imageSlides={slides} content={slideContent} />
<SwiperFunc swiperSubTitle="Customer's review" textSlides={reviews} />
<VideoPopup />
<SwiperFunc swiperTitle="Best-selling Items" imageSlides={slides} content={slideContent} paginationID={true} />
<Article />
<motion.div className="news-letter"
initial={{opacity: 0, scale: 0}}
whileInView={{opacity: 1, scale: 1}}
transition={{duration: 0.6}}
viewport={{once: true, amount: 0}}
>
<h3>subscribe us</h3>
<div><input type='text' placeholder='Write your email address here...' /><button>Subscribe</button></div>
</motion.div>
<Footer />
</>
}
export default App
0 Comments
We are happy to hear from you.