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 (
+
+
+ )
+};
+
+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