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

Shapes background done

Browse Source
This commit is contained in:
Francisco Pessano
2022-01-24 16:02:44 -03:00
parent de757658e7
commit 6749efb43f
6 changed files with 185 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/index.html
View File

@@ -24,7 +24,12 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Crypto Page</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

9
src/App.js
View File

@@ -1,9 +0,0 @@
function App() {
return (
<div className="App">
</div>
);
}
export default App;

155
src/App.jsx Normal file
View File

@@ -0,0 +1,155 @@
import Header from "./components/Header/Header";
import styled from 'styled-components'
function App() {
const Div = styled.div`
height: 100%;
background: rgb(46,66,105);
background: linear-gradient(180deg, rgba(46,66,105,1) 0%, rgba(0,26,47,1) 100%);
.paths {
height: 100%;
position: absolute;
top: 0;
left: 0;
.path {
&::before {
content: "";
background: red;
}
/* background: #ffffff45; */
background: rgb(255,255,255);
background: linear-gradient(135deg, rgba(255,255,255,0.08727240896358546) 0%, rgba(46,66,105,0.07046568627450978) 100%);
position: absolute;
&:nth-child(1) {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
top: 20%;
left: calc(85vw - 200px);
width: 180px;
height: 180px;
transform: rotate(14deg)
}
&:nth-child(2) {
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: 30%;
left: 12vw;
width: 170px;
height: 170px;
}
&:nth-child(3) {
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);
transform: rotate(30deg);
width: 180px;
height: 180px;
}
&:nth-child(4) {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 80%;
left: 13vw;
transform: rotate(-30deg);
width: 100px;
height: 100px;
}
&:nth-child(5) {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 81%;
left: 30vw;
transform: rotate(-12deg);
width: 80px;
height: 80px;
}
&:nth-child(6) {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 90%;
left: 8vw;
transform: rotate(30deg);
width: 70px;
height: 70px;
}
&:nth-child(7) {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
top: 92%;
left: 25vw;
transform: rotate(-30deg);
width: 100px;
height: 100px;
}
&:nth-child(8) {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
top: 100%;
left: 20vw;
transform: rotate(40deg)
}
}
}
`
return (
<Div>
<Header />
<div className="paths">
<div className="path"></div>
<div className="path"></div>
<div className="path"></div>
<div className="path"></div>
<div className="path"></div>
<div className="path"></div>
<div className="path"></div>
<div className="path"></div>
</div>
</Div>
);
}
export default App;

13
src/components/Header/Header.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
const Header = () => {
return (
<header>
<h1>Crypto Page</h1>
</header>
)
};
export default Header;

1
src/index.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './styles.css'
ReactDOM.render(
<React.StrictMode>

10
src/styles.css Normal file
View File

@@ -0,0 +1,10 @@
body, html, #root {
height: 100%;
}
* {
margin: 0;
padding: 0;
}