master
mahdi 3 years ago
parent 2663a508b1
commit bbad4522fe
  1. 2
      src/App.js
  2. 12
      src/components/Advertisement/design1/index.js
  3. 30
      src/components/Advertisement/design2/index.js

@ -66,7 +66,7 @@ function App() {
{/* <ProductTab /> */} {/* <ProductTab /> */}
{/* <ProductStatusCard /> */} {/* <ProductStatusCard /> */}
<AdvertisementDesign1 /> <AdvertisementDesign1 />
{/* <AdvertisementDesign2 /> */} <AdvertisementDesign2 />
{/* <AdvertisementDesign3 /> */} {/* <AdvertisementDesign3 /> */}
</div> </div>
</Provider> </Provider>

@ -12,27 +12,27 @@ const AdvertisementDesign1 = () => {
width: "calc(100vw / 10)", width: "calc(100vw / 10)",
height: "calc(100vw / 10)", height: "calc(100vw / 10)",
left: "20%", left: "20%",
top: "30%", top: "15%",
}} }}
className="rounded-full absolute bg-blue-300 bg-opacity-30 backdrop-filter backdrop-blur-md z-30" className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30"
></div> ></div>
<div <div
style={{ style={{
width: "calc(100vw / 7)", width: "calc(100vw / 7)",
height: "calc(100vw / 7)", height: "calc(100vw / 7)",
right: "25%", right: "25%",
bottom: "5%", bottom: "4%",
}} }}
className="rounded-full absolute bg-purple-300 bg-opacity-30 backdrop-filter backdrop-blur-md" className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md"
></div> ></div>
<div <div
style={{ style={{
width: "calc(100vw / 8)", width: "calc(100vw / 8)",
height: "calc(100vw / 8)", height: "calc(100vw / 8)",
right: "3%", right: "3%",
top: "20%", top: "15%",
}} }}
className="rounded-full absolute bg-green-300 bg-opacity-40 backdrop-filter backdrop-blur-md" className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md"
></div> ></div>
<div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50"> <div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50">
<h2 className="text-lg">تبلیغات دانوینی</h2> <h2 className="text-lg">تبلیغات دانوینی</h2>

@ -18,16 +18,34 @@ const AdvertisementDesign2 = () => {
</button> </button>
</div> </div>
<div <div
style={{ backgroundColor: "#00FFFF33" }} style={{
className="rounded-full w-32 h-32 absolute left-1/4 top-1/3 transform -translate-x-1/2 -translate-y-1/2 z-20 backdrop-filter backdrop-blur-md" backgroundColor: "#00FFFF33",
width: "calc(100vw / 15)",
height: "calc(100vw / 15)",
left: "20%",
top: "15%",
}}
className="rounded-full absolute z-20 backdrop-filter backdrop-blur-md"
></div> ></div>
<div <div
style={{ backgroundColor: "#6E6EEF33" }} style={{
className="rounded-full w-44 h-44 absolute left-1/4 -bottom-2/4 transform -translate-x-1/2 -translate-y-1/2 z-10 backdrop-filter backdrop-blur-md" backgroundColor: "#6E6EEF66",
width: "calc(100vw / 10)",
height: "calc(100vw / 10)",
left: "7%",
bottom: "-15%",
}}
className="rounded-full absolute z-10 backdrop-filter backdrop-blur-md"
></div> ></div>
<div <div
style={{ backgroundColor: "white" }} style={{
className="rounded-full w-44 h-44 absolute left-0 top-2 backdrop-filter backdrop-blur-md" backgroundColor: "white",
width: "calc(100vw / 12)",
height: "calc(100vw / 12)",
left: "0%",
top: "10%",
}}
className="rounded-full absolute backdrop-filter backdrop-blur-md"
></div> ></div>
</div> </div>
</section> </section>

Loading…
Cancel
Save