update 404 screen

ribeirojpn · Aug 26, 2017 · 9cb3c94 · 9cb3c94
1 parent 7ade051
commit 9cb3c94
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/src/components/NotFound/index.js b/src/components/NotFound/index.js
@@ -1,12 +1,33 @@
 import React, { Component } from 'react'
+import './style.css'
+import NavBar from './../NavBar'
 
 class NotFound extends Component {
   render () {
     return (
       <div className='not-found text-center'>
-        <h1>
-        404 <small>Not Found :(</small>
-        </h1>
+        <NavBar />
+        <div className="container">
+          <h1>
+          404 <small>Not Found :(</small>
+          </h1>
+          <div className='row'>
+            <div className='col-md-6 col-md-offset-3'>
+              <h2>
+                "Lost<br />
+                &nbsp;Lost in the heat of it all<br />
+                &nbsp;... you know you're lost<br />
+                &nbsp;Lost in the thrill of it all..."
+              </h2>
+              <p><strong>Lost, by Frank Ocean</strong></p>
+              <p>
+                <a href='https://open.spotify.com/track/4L7jMAP8UcIe309yQmkdcO'>Musica no Spotify</a>
+                &emsp;&emsp;&emsp;
+                <a href='https://genius.com/Frank-ocean-lost-lyrics'>Letra no Genius</a>
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }

diff --git a/src/components/NotFound/style.css b/src/components/NotFound/style.css
@@ -0,0 +1,12 @@
+.not-found h1 {
+  margin-top: 80px;
+  font-size: 70px;
+  margin-bottom: 60px;
+}
+
+.not-found h2, .not-found p {
+  text-align: left;
+}
+.not-found p {
+  text-align: right;
+}
diff --git a/src/components/Playlists/playlist.js b/src/components/Playlists/playlist.js
@@ -12,7 +12,7 @@ class Playlist extends Component {
       <div className='playlist'>
         <div className='box'>
           <a href={`/playlist?id=${playlist.id}&user=${playlist.owner.id}`}>
-            <img src={imgUrl} width='270px' height='270px' />
+            <img src={imgUrl} width='270px' height='270px' alt='playlist' />
             <div className='title'><p>{playlist.name}</p></div>
           </a>
         </div>