create css for the site

we-are-x-days/.firebase/hosting.YnVpbGQ.cache

@@ -1,9 +1,11 @@
-asset-manifest.json,1604276896619,568389057dad60af50eebc0dacd9f3d9d890047e9054bb68dd72833b4f1c872c
-index.html,1604276896619,755a1646d9b4a9ed64515af1d9e77b78e5941af1f7b462a1b648ed47fe5b6345
-static/js/2.9a29ba51.chunk.js.LICENSE.txt,1604276896636,a53366d938ef04a895ba48587a7321457f7ede2ae32a40f5a018c32e840ca096
-static/js/main.e83442ca.chunk.js.map,1604276896635,8425ff1356fcf49e739ed9956c65d364e924a1318969a798177f2a5070904ddd
-static/js/main.e83442ca.chunk.js,1604276896635,6572f20b881f9ee4362f3a448b3ddb7b8c326cda4cbbea19dc77b85c1ff547cb
-static/js/runtime-main.40f63ab8.js,1604276896619,00d521aabb84335338b51dd4fbb1d596ad2a5c5dd308c12689ba55dd57be66b6
-static/js/runtime-main.40f63ab8.js.map,1604276896635,dcc14fb0e77c8d0e2f129f50404810f32ce9f44b80b89a87dc83ea83cd9cd105
-static/js/2.9a29ba51.chunk.js,1604276896635,734150bcb3bb46174fd2b4f5dc65a783c6ba943b97bbbd13267d5046c976d199
-static/js/2.9a29ba51.chunk.js.map,1604276896636,e8a7e35e7fce75310aca243873b37cecfed3b6d7b67f75059bed84a8f299bfaa
+asset-manifest.json,1604295877267,6227dab8ba650adba0f5fff6027e9b1a6f0fca1aacbdcede675029f6a98313d4
+index.html,1604295877267,264ad6155628fc8e7c8e4136f5f53916c3812674469d2e2908ee25e89730b735
+static/css/main.58eeb6f9.chunk.css,1604295877268,b7a2d7a44b68f3f56c2be17030b86f669fbbb21b04d389ad155bd71ae2d4dea6
+static/css/main.58eeb6f9.chunk.css.map,1604295877284,8532ec3c9530f19fa947562e1c074c719775d60fbeae209dace36e6e92a07eb3
+static/js/2.3dede0ec.chunk.js.LICENSE.txt,1604295877284,a53366d938ef04a895ba48587a7321457f7ede2ae32a40f5a018c32e840ca096
+static/js/main.3c2b1a43.chunk.js,1604295877271,0e3141490451782385bfbf0d38f419ea4975af84d522135f0a5ae3b575c9010a
+static/js/main.3c2b1a43.chunk.js.map,1604295877285,35ac89b5dddad5d5f13127fd95c8010945e8a21ba9c5e1a9bbb5b507c09b85bb
+static/js/runtime-main.40f63ab8.js,1604295877284,00d521aabb84335338b51dd4fbb1d596ad2a5c5dd308c12689ba55dd57be66b6
+static/js/runtime-main.40f63ab8.js.map,1604295877285,dcc14fb0e77c8d0e2f129f50404810f32ce9f44b80b89a87dc83ea83cd9cd105
+static/js/2.3dede0ec.chunk.js,1604295877284,6c4c2b5018437879d2a0383c12de9ecb95c840ae15ee4a90a6d0548ae01e314b
+static/js/2.3dede0ec.chunk.js.map,1604295877285,89ed0c1399da728b5b68833b7ed15cd326307c163bc51806093af17c672acd5a

we-are-x-days/public/index.html

@@ -16,4 +16,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
+  <footer>
+    <a href="https://www.linkedin.com/in/alexandre-okita/">Created by Alexandre Okita</a>
+  </footer>
 </html>

we-are-x-days/src/Site.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import db from './firebaseDB'
+import './styles/Site.css'
 
 class Site extends React.Component {
 
@@ -49,8 +50,8 @@ class Site extends React.Component {
         <div className="main-message">
           <h1>We are {this.state.days} seconds without {this.state.message} </h1>
         </div>
-        <div className="reset-button">
-          <button onClick={this.reset}>Reset</button>
+        <div className="reset-button" onClick={this.reset}>
+          Reset
         </div>
       </div>
     );

we-are-x-days/src/styles/App.css

@@ -8,7 +8,14 @@
 
 body{
     min-height: 100vh;
-    background-image: linear-gradient(120deg,#3498db,#8e44ad);
+    background-image: linear-gradient(120deg,#eeaeca,#94bbe9);
+}
+
+footer{
+    transform: translate(-50%,-50%);
+    position: absolute;
+    top: 98%;
+    left: 50%;
 }
 
 .app{

we-are-x-days/src/styles/Site.css

@@ -0,0 +1,41 @@
+*{
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    font-family: montserrat;
+    box-sizing: border-box;
+  }
+
+.main-message{
+    margin: auto;
+    width: 50%;
+    background-color: #f1f1f1;
+    text-align: center;
+    position: absolute;
+    top: 35%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    padding: 80px 40px;
+    border-radius: 10px;
+}
+
+.reset-button{
+    color: #fff;
+    transform: translate(-50%,-50%);
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    text-align: center;
+    padding: 25px 80px;
+    border-radius: 10px;
+    cursor: pointer;
+    outline: none;
+    transition: .5s;
+    background: linear-gradient(120deg,#fdbb2d,#22c1c3);
+    background-size: 200%;
+    border: none;
+}
+
+.reset-button:hover{
+    background-position: right;
+}