From 6749efb43fda21fd75550e963d389c5ecc6ddfff Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Mon, 24 Jan 2022 16:02:44 -0300 Subject: [PATCH] Shapes background done --- public/index.html | 7 +- src/App.js | 9 -- src/App.jsx | 155 +++++++++++++++++++++++++++++++ src/components/Header/Header.jsx | 13 +++ src/index.js | 1 + src/styles.css | 10 ++ 6 files changed, 185 insertions(+), 10 deletions(-) delete mode 100644 src/App.js create mode 100644 src/App.jsx create mode 100644 src/components/Header/Header.jsx create mode 100644 src/styles.css diff --git a/public/index.html b/public/index.html index aa069f2..b7e6469 100644 --- a/public/index.html +++ b/public/index.html @@ -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`. --> - React App + + + Crypto Page diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 07fe1de..0000000 --- a/src/App.js +++ /dev/null @@ -1,9 +0,0 @@ -function App() { - return ( -
- -
- ); -} - -export default App; diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..fbda239 --- /dev/null +++ b/src/App.jsx @@ -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 ( +
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} + +export default App; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx new file mode 100644 index 0000000..a113dc0 --- /dev/null +++ b/src/components/Header/Header.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +const Header = () => { + + return ( + +
+

Crypto Page

+
+ ) +}; + +export default Header; diff --git a/src/index.js b/src/index.js index 7998135..5a22b0b 100644 --- a/src/index.js +++ b/src/index.js @@ -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( diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..97eead3 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,10 @@ +body, html, #root { + + height: 100%; +} + +* { + + margin: 0; + padding: 0; +} \ No newline at end of file