franpcode/Crypto-Prices
1
0
Fork 0
mirror of https://github.com/FranP-code/Crypto-Prices.git synced 2025-10-12 23:53:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Background growed

Browse Source
This commit is contained in:
Francisco Pessano
2022-01-26 20:06:23 -03:00
parent 989d100ef1
commit f8e74e5536
1 changed files with 110 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/App.jsx
View File

@@ -4,6 +4,50 @@ import Cryptos from "./components/Cryptos/Cryptos";
function App() {
const pathsPosition = {
one: {
top: "20%",
left: "calc(85vw - 200px)"
},
two: {
top: "30%",
left: "12vw"
},
three: {
top: "60%",
left: "calc(82vw - 200px)"
},
four: {
top: "80%",
left: "13vw"
},
five: {
top: "81%",
left: "30vw"
},
six: {
top: "90%",
left: "8vw"
},
seven: {
top: "92%",
left: "25vw"
},
eight: {
top: "95%",
left: "20vw"
}
}
const Div = styled.div`
/* height: 100%; */
@@ -38,15 +82,20 @@ function App() {
&.one {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
top: ${pathsPosition.one.top};
left: ${pathsPosition.one.left};
top: 20%;
left: calc(85vw - 200px);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
width: 180px;
height: 180px;
transform: rotate(14deg)
transform: rotate(14deg);
&.second {
top: calc(${pathsPosition.one.top} + 100%)
}
}
&.two {
@@ -54,11 +103,16 @@ function App() {
clip-path: circle(50% at 50% 50%);
top: 30%;
left: 12vw;
top: ${pathsPosition.two.top};
left: ${pathsPosition.two.left};
width: 170px;
height: 170px;
&.second {
top: calc(${pathsPosition.two.top} + 100%)
}
}
&.three {
@@ -66,74 +120,104 @@ function App() {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: circle(50% at 50% 50%);
top: 60%;
left: calc(82vw - 200px);
top: ${pathsPosition.three.top};
left: ${pathsPosition.three.left};
transform: rotate(30deg);
width: 180px;
height: 180px;
&.second {
top: calc(${pathsPosition.three.top} + 100%)
}
}
&.four {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 80%;
left: 13vw;
top: ${pathsPosition.four.top};
left: ${pathsPosition.four.left};
transform: rotate(-30deg);
width: 100px;
height: 100px;
&.second {
top: calc(${pathsPosition.four.top} + 100%)
}
}
&.five {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 81%;
left: 30vw;
top: ${pathsPosition.five.top};
left: ${pathsPosition.five.left};
transform: rotate(-12deg);
width: 80px;
height: 80px;
&.second {
top: calc(${pathsPosition.five.top} + 100%)
}
}
&.six {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 90%;
left: 8vw;
top: ${pathsPosition.six.top};
left: ${pathsPosition.six.left};
transform: rotate(30deg);
width: 70px;
height: 70px;
&.second {
top: calc(${pathsPosition.six.top} + 100%)
}
}
&.seven {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 92%;
left: 25vw;
top: ${pathsPosition.seven.top};
left: ${pathsPosition.seven.left};
transform: rotate(-30deg);
width: 100px;
height: 100px;
&.second {
top: calc(${pathsPosition.seven.top} + 100%)
}
}
&.eight {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
top: 95%;
left: 20vw;
top: ${pathsPosition.eight.top};
left: ${pathsPosition.eight.left};
transform: rotate(40deg)
}
&.second {
top: calc(${pathsPosition.eight.top} + 100%)
}
}
}
@@ -151,6 +235,14 @@ function App() {
<div className="path six"></div>
<div className="path seven"></div>
<div className="path eight"></div>
<div className="path one second"></div>
<div className="path two second"></div>
<div className="path three second"></div>
<div className="path four second"></div>
<div className="path five second"></div>
<div className="path six second"></div>
<div className="path seven second"></div>
<div className="path eight second"></div>
</div>
<Cryptos />