mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent a612ab9299
commit 9b21dfda29
5 changed files with 35 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/App.js
  2. 12
      src/components/productDesign/ProductDesign.js
  3. 20
      src/components/vodProductDesign/VodProductDesign.js
  4. 4
      src/components/vodProductDesign/VodProductDesign.scss

32
src/App.js
Unescape View File

@ -21,23 +21,23 @@ import Functionality from "./components/functionality/Functionality";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
{/* <ProductDesign /> */} <ProductDesign />
{/* <VodProductDesign /> */} <VodProductDesign />
{/* <BookDesign /> */} <BookDesign />
{/* <ButtonDesign /> */} <ButtonDesign />
{/* <ProductTags /> */} <ProductTags />
{/* <CounterDesign /> */} <CounterDesign />
{/* <BlogDesign1 /> */} <BlogDesign1 />
{/* <BlogDesign2 /> */} <BlogDesign2 />
{/* <BlogDesign3 /> */} <BlogDesign3 />
{/* <BlogDesign4 /> */} <BlogDesign4 />
{/* <BlogDesign5 /> */} <BlogDesign5 />
{/* <BlogDesign6 /> */} <BlogDesign6 />
{/* <HeaderDesign1 /> */} <HeaderDesign1 />
{/* <ContactInfoSection /> */} <ContactInfoSection />
{/* <FooterDesign1 /> */} <FooterDesign1 />
{/* <Testttt /> */} {/* <Testttt /> */}
{/* <Design2D /> */} <Design2D />
<Functionality /> <Functionality />
</div> </div>
); );

12
src/components/productDesign/ProductDesign.js
Unescape View File

@ -44,7 +44,7 @@ const ProductDesign = ({
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setProgressFlag(true); setProgressFlag(true);
}, 500); }, 1000);
}, []); }, []);
return ( return (
@ -98,19 +98,19 @@ const ProductDesign = ({
{/* icons on image */} {/* icons on image */}
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 cursor-pointer"> <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-bold text-xs"> <p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span> 23<span>%</span>
</p> </p>
</div> </div>
)} )}
{likeBtn && ( {likeBtn && (
<div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce"> <div className="bg-likeBtnBg rounded-md py-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {discount && (
<div className="rounded-md mt-2 cursor-pointer hover:animate-pulse"> <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )}
@ -224,7 +224,7 @@ const ProductDesign = ({
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : "" priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`} }`}
> >
@ -249,7 +249,7 @@ const ProductDesign = ({
{rangeHolder && ( {rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div <div
className={`bg-rangeFillBgColor h-3 rounded duration-300`} className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{ style={{
width: progressFlag ? rangeWidth : 0, width: progressFlag ? rangeWidth : 0,
}} }}

20
src/components/vodProductDesign/VodProductDesign.js
Unescape View File

@ -51,7 +51,7 @@ const VodProductDesign = ({
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setProgressFlag(true); setProgressFlag(true);
}, 500); }, 1000);
}); });
return ( return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -75,7 +75,7 @@ const VodProductDesign = ({
> >
{/* product image */} {/* product image */}
<div <div
className="group w-full relative flex items-center justify-center cursor-pointer" className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
style={{ style={{
backgroundImage: `url(${watermelon})`, backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
@ -86,19 +86,19 @@ const VodProductDesign = ({
{/* icons on image */} {/* icons on image */}
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 cursor-pointer hover:motion-safe:animate-spin"> <div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-bold text-xs"> <p className="text-discountPriceTitle font-bold text-xs">
23<span>%</span> 23<span>%</span>
</p> </p>
</div> </div>
)} )}
{likeBtn && ( {likeBtn && (
<div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 cursor-pointer hover:animate-bounce"> <div className="bg-likeBtnBg rounded-md p-1 flex justify-center mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={heart} alt="" className="w-5" /> <img src={heart} alt="" className="w-5" />
</div> </div>
)} )}
{discount && ( {discount && (
<div className="rounded-md mt-2 cursor-pointer hover:animate-pulse"> <div className="rounded-md mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<img src={discountImg} alt="" className="w-full" /> <img src={discountImg} alt="" className="w-full" />
</div> </div>
)} )}
@ -107,7 +107,11 @@ const VodProductDesign = ({
<div <div
className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`} className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`}
> >
<img src={whitePlayIcon} alt="" className="w-5 h-5" /> <img
src={whitePlayIcon}
alt=""
className="playBtnImg w-5 h-5 group-hover:w-7 group-hover:h-7"
/>
</div> </div>
{/* select Color */} {/* select Color */}
{colors && ( {colors && (
@ -209,7 +213,7 @@ const VodProductDesign = ({
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${ className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : "" priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`} }`}
> >
@ -243,7 +247,7 @@ const VodProductDesign = ({
{rangeHolder && ( {rangeHolder && (
<div className="bg-rangeBgColor h-3 w-full rounded mt-2"> <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
<div <div
className={`bg-rangeFillBgColor h-3 rounded duration-300`} className={`bg-rangeFillBgColor h-3 rounded duration-500`}
style={{ style={{
width: progressFlag ? rangeWidth : 0, width: progressFlag ? rangeWidth : 0,
}} }}

4
src/components/vodProductDesign/VodProductDesign.scss
Unescape View File

@ -1,7 +1,3 @@
.playBtnImg { .playBtnImg {
transition: all 0.4s; transition: all 0.4s;
} }
.parent-img:hover .playBtnImg {
transition: all 0.4s;
transform: translateY(-10px) !important;
}

Write Preview
Loading…
Cancel
Save