semantic ui used

src/components/ErrorPage.js

@@ -1,20 +1,42 @@
 import React, { Component } from 'react'
 import './../styles/ErrorPage.css'
 import './../styles/App.css'
-
+import { Header, Container } from 'semantic-ui-react';
 
 class ErrorPage extends Component {
-    render() {
-      return (
-           <div className="errorPage">
-             <div className="errorPage_content">
-                    <h1>404</h1>
-                    <h4>Oops! Page Not Found</h4>
-                    <p>Sorry, the page you were looking for doesn't exist. If you think something is wrong, try again.</p>
-                </div>
-            </div>
-     )
+  render() {
+    return (
+      <div className="errorPage">
+      <div className="errorPage_content"> 
+
+
+          <Header
+            as='h1'
+            content='404'
+            style={{
+              color: '#2185D0',
+              fontSize: '10vw',
+              fontWeight: 'bolder',
+              lineHeight: '1em',
+              textTransform: 'uppercase',  
+            }}
+          />
+          <Header
+            as='h4'
+            content='Oops! Page Not Found'
+            style={{
+              fontSize: '2em',
+              marginBottom: '20px',
+              textTransform: 'uppercase',
+              maxWidth: '600px',
+              color: '#0d0d0d',            
+            }}
+          />
+         <p>Sorry, the page you were looking for doesn't exist. If you think something is wrong, try again.</p>
+      </div>
+       </div>
+    )
   }
-}    
+}
 
 export default ErrorPage

src/styles/ErrorPage.css

@@ -20,21 +20,6 @@
     text-align: center;
 }
 
-.errorPage_content h1 {
-    color: #2185D0;;
-    font-size: 10vw;
-    font-weight: bolder;
-    line-height: 1em;
-}
-
-.errorPage_content h4 {
-    font-size: 2em;
-    margin-bottom: 20px;
-    text-transform: uppercase;
-    max-width: 600px;
-    color: #0d0d0d;
-}
-
 .errorPage_content p {
     font-size: 1.4em;
     color: gray;