added search field

src/components/Home.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import {Container, Header, Logo, Image, Page, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent } from './styled/Home.styled';
+import {Container, Header, Logo, Image, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent } from './styled/Home.styled';
 
 const Home = () => {
   return (
@@ -12,6 +12,12 @@ const Home = () => {
           </Link>
         </Logo>
       </Header>
+      <Search>
+        <form>
+          <input type="text" placeholder="board.eth" />
+          <input type="submit" value="Search" />
+        </form>
+      </Search>
       <Page>
         <About>
           <AboutTitle>
@@ -19,7 +25,7 @@ const Home = () => {
           </AboutTitle>
           <AboutContent>
             <div id="content">
-              <p>Plebchan is a serverless, adminless, decentralized 4chan alternative that lives on  the <a href="https://plebbit.net">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share image links and even create a board. Search for any board .eth address, or feel free to click on a popular board below that interests you and jump right in! </p>
+              <p>Plebchan is a serverless, adminless, decentralized 4chan alternative that lives on  the <a href="https://plebbit.net" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share image links and even create a board. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
               <br />
               <p>There are no global rules, each board is completely independent and their owners decide how they should be moderated.</p>
             </div>

src/components/styled/Home.styled.jsx

@@ -1,11 +1,17 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  min-width: 0;
-  width: auto;
-  padding: 10px;
   margin: auto;
   text-align: left;
+  width: 57.69em;
+  min-width: 750px;
+  padding: 0;
+
+  @media (max-device-width: 640px) {
+    min-width: 0;
+    width: auto;
+    padding: 10px;
+  }
 `;
 
 export const Header = styled.div`
@@ -30,6 +36,38 @@ export const Image = styled.img`
   width: 100%;
 `;
 
+export const Search = styled.div`
+  text-align: center;
+  margin-bottom: 20px;
+
+  input[type="text"] {
+    width: 400px;
+    height: 30px;
+    font-size: 18px;
+    padding: 3px 10px;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    margin: 0;
+    margin-right: 2px;
+    border: 1px solid #aaa;
+    outline: none;
+    font-family: arial, helvetica, sans-serif;
+  }
+
+  input[type="submit"] {
+    width: 60px;
+    height: 30px;
+    font-size: 14px;
+    padding: 3px;
+    box-sizing: border-box;
+    vertical-align: top;
+    margin-left: 5px;
+  }
+
+`;
+
 export const Page = styled.div`
   margin: 0;
   padding: 0;