PlatziMaster · angelozdev · Jun 3, 2020 · Jun 3, 2020 · Jun 3, 2020 · Jun 3, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/README.md b/README.md
@@ -1,18 +1,21 @@
-# challenge-html-03 404 HTML
+# Challenge 404 Page 
+![](https://raw.githubusercontent.com/Angelozam17/challenge-html-03/master/src/assets/NotFoundPage.png)
+## Table of Contents
 
-Error 404 en HTML/CSS
+- [Installation](#installation)
+- [Usage](#usage)
 
-### RETO
+## Installation
 
-1. Mejora el CSS del sitio [Peronalizalo a tu gusto]
-2. Migrar este sitio en HTML/CSS a algún Framework/Libreria de JS (Angular, React, Vue, Svelte.)
-3. Envia tu Pull Request.
 
-### Enviar solución de reto
-Debes hacer un "Fork" de este proyecto, revolver los problemas y crear un Pull Request hacia este repositorio.
+```sh
+git clone https://github.com/Angelozam17/challenge-html-03.git
+npm start
+npm run build
+```
 
-### Contribuir
-Si alguien quiere agregar o mejorar algo, lo invito a colaborar directamente en este repositorio: [challenge-html-03](https://github.com/platzimaster/challenge-html-03/)
+## Usage
 
-### Licencia
-challenge-html-03 se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT).
+- 404 page
+- ReactJS, Webpack, styled-components
+- Licence MIT
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,9 +4,24 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production"
   },
   "keywords": [],
-  "author": "",
-  "license": "ISC"
+  "author": "Angelo Zambrano <angelozam17@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "babel-loader": "^8.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  }
 }
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+
+   <title>Error 404</title>
+</head>
+<body>
+   <div id="root">
+   </div>
+</body>
+</html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+/* Components */
+import NotFound from "./pages/NotFound";
+import Header from "./react-components/Header";
+
+/* Styles */
+import { GlobalStyle } from "./styles/global";
+
+const App = () => {
+   return(
+      <>
+         <Header />
+         <NotFound/>
+         <GlobalStyle />
+      </>
+   )
+}
+
+export default App;
diff --git a/src/assets/NotFoundPage.png b/src/assets/NotFoundPage.png
diff --git a/src/index.html b/src/index.html
diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react'
+import { render } from "react-dom";
+import App from './App';
+
+render(<App/>, document.getElementById('root'))
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+/* Components */
+import Wrapper from '../react-components/Wrapper';
+
+/* Styles */
+import styled from 'styled-components';
+
+const NotFoundStyled = styled.main`
+   height: 100%;
+   .content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+   }
+
+   .image {
+      width: 65%;
+      margin: 0;
+   }
+
+   .image img{
+      width: 100%;
+      margin: 0;
+      transform: translateY(0);
+      animation: float ease 8s infinite;
+   }
+
+   .details {
+      width: 35%;
+   }
+
+   .details h1{
+      font-weight: lighter;
+      font-size: 3rem;
+      margin: 0;
+   }
+
+   .details h2{
+      font-weight: bold;
+      font-size: 3rem;
+      margin: 0;
+   }
+
+   .details p {
+      text-align: justify;
+      opacity: 0.7;
+   }
+
+   .btn {
+      padding: .7rem 2rem;
+      color: var(--background);
+      border-radius: 1.5rem;
+      text-transform: uppercase;
+      font-size: .7rem;
+      letter-spacing: 1.5px;
+      margin: 3rem .5rem 3rem 0;
+      display: inline-block;
+   }
+
+   .btn.primary {
+      border: 1px solid var(--color-primary);
+      background-color: var(--color-primary);
+   }
+
+   .btn.outline-primary {
+      color: var(--color-primary);
+      border: 1px solid var(--color-primary);
+   }
+
+   @keyframes float {
+      0% {
+         transform: translateY(0);
+      }
+      50% {
+         transform: translateY(-10px);
+      }
+      100% {
+         transform: translateY(0);
+      }
+   }
+`
+
+const NotFound = () => {
+   return (
+      <NotFoundStyled className="main">
+         <Wrapper>
+            <div className="content">
+               <section className="details">
+                  <h1>404</h1>
+                  <h2>Lost in Space</h2>
+                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium expedita provident voluptates neque et excepturi, debitis non eius explicabo quos, repudiandae quis quo maiores illum velit accusantium, inventore modi ipsam!</p>
+                  <a className="btn primary" href="/">Go home</a>
+                  <a className="btn outline-primary" href="/">Back</a>
+
+               </section>
+               <figure className="image">
+                  <img src="https://cdn.dribbble.com/users/1355613/screenshots/5964475/attachments/1282620/spaceman_illustration.jpg" alt="404"/>
+               </figure>
+            </div>
+         </Wrapper>
+      </NotFoundStyled>
+   )
+}
+
+export default NotFound;
diff --git a/src/react-components/Header.jsx b/src/react-components/Header.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+/* Styles */
+import styled from "styled-components";
+
+/* Comoponetns */
+import Wrapper from './Wrapper';
+
+const HeaderStyled = styled.div`
+   margin: 0;
+   .content {
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+   }
+
+   .header__logo h3{
+      font-size: 1.75rem;
+      font-weight: bold;
+      margin: 0;
+   }
+
+   .header__nav {
+      display: flex;
+      list-style: none;
+      justify-items: center;
+   }
+
+   .header__nav li {
+      margin-left: 2rem;
+      cursor: pointer;
+      font-size: 1rem;
+   }
+`
+
+const Header = () => {
+   return (
+      <HeaderStyled className="header">
+         <Wrapper>
+            <div className="content">
+               <div className="header__logo">
+                  <h3>Clay</h3>
+               </div>
+
+               <ul className="header__nav">
+                  <li>About</li>
+                  <li>Contact</li>
+                  <li>Portfolio</li>
+                  <li>Job</li>
+               </ul>
+            </div>
+         </Wrapper>
+      </HeaderStyled>
+   )
+}
+
+export default Header;
diff --git a/src/react-components/Wrapper.jsx b/src/react-components/Wrapper.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+/* Styles */
+import styled from "styled-components";
+
+const WrapperStyled = styled.div`
+   width: 100%;
+   max-width: 1080px;
+   margin-left: auto;
+   margin-right: auto;
+   height: 100%;
+   padding: 0 2rem;
+`
+
+const Wrapper = (props) => {
+   const { children } = props;
+   return (
+      <WrapperStyled>
+         {children}
+      </WrapperStyled>
+   )
+}
+
+export default Wrapper
diff --git a/src/styles/global.js b/src/styles/global.js
@@ -0,0 +1,31 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+   :root {
+      --color-primary: rgb(102, 68, 153);
+      --background: #fff;
+      --text: rgb(34, 34, 34);
+   }
+
+
+   * {
+      box-sizing: border-box;
+   }
+
+   body {
+      height: 100vh;
+      margin: 0;
+      padding: 0;
+      font-family: 'Roboto', sans-serif;
+      background-color: var(--background);
+      color: var(--text);
+   }
+
+   a {
+      text-decoration: none;
+   }
+
+   #root {
+      height: calc(100vh - 80px);
+   }
+`