styling for homepage done

front-end/src/App.js

@@ -7,6 +7,9 @@ import styled from 'styled-components'
 import Home from './components/Home';
 import Plant from './components/Plant';
 import PlantList from './components/PlantList';
+
+import Login from './components/Login';
+
 import SignupPage from './components/SignupPage';
 import PrivateRoute from './components/PrivateRoute';
 import UserProfile from './components/UserProfile';
@@ -15,6 +18,7 @@ import UserProfile from './components/UserProfile';
 const StyleHeader = styled.header`
 background-color: #e8dfe3;`
 
+
 const initialFormValues = {
   nickname: '',
   species: '',

front-end/src/components/Home.js

@@ -30,6 +30,23 @@ export default function Home() {
 
 
 return(
+    <div className='home-container'>
+        <h2>Never kill a plant again (hopefully)</h2>
+        <img src="https://rem-stroitelstvo.ru/wp-content/uploads/2017/02/skandi22.jpg" />
+
+        <p>Ok, so we can’t really guarantee you won’t kill your houseplants. <br></br>Plants have different needs and react to sunlight, water, and fertilizer in a variety of ways. Learn about their needs and you might be able to stop the damage in time. Use a little extra TLC, and they might even <i>flourish</i>.</p>
+
+        <p>Not sure where to start? <br></br>Our app is here to help you figure out what your plants need and how you can nurture them.</p>
+
+        <h2>Identify Your Plant</h2>
+        <p>Manually enter your plant babies' species into the app and you'll get a brief description of what your plants should look like when they're healthy, care instructions with their water and light preferences, as well as a list of common issues that cause them to fall ill.</p>
+
+        <h2>Smart Tracking</h2>
+        <p>By logging the different species of plants you have at home, you can manually keep track of the light intensity of the room in which they're placed and <b>get push notifications</b> about when you should water them based on the weather in your area.</p>
+        <h4></h4>
+    </div>
+
+
 <StyleHome>
         <div>
 <h1>Water My Plants</h1>
@@ -41,6 +58,7 @@ return(
 
 
 </StyleHome>
+
 )
 
 }

front-end/src/components/Login.js

@@ -0,0 +1 @@
+

front-end/src/index.css

@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #cebdb3;
+  /* background-image: url("https://images.pexels.com/photos/2266845/pexels-photo-2266845.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); */
 }
 
 code {
@@ -15,7 +17,10 @@ code {
 nav {
   display: flex;
   justify-content: space-evenly;
-  margin-bottom: 1%;
+  margin: 1% 20%;
+  border: 2px solid black;
+  padding: 0.5%;
+  border-radius: 12px;
 }
 
 nav a {
@@ -27,6 +32,31 @@ nav a:hover {
   font-weight: bold;
 }
 
+header {
+  color: #485a36;
+  font-weight: bold;
+}
+
+/* HOMEPAGE STYLING */
+.home-container {
+  max-width: 68%;
+  margin: auto;
+}
+
+.home-container img {
+  width: 825px;
+  height: 407px;
+  border: 2px solid black;
+  border-radius: 3px;
+  opacity: 0.85;
+}
+
+.home-container h2 {
+  color: #485a36;
+  font-style: italic;
+}
+
+/* PLANTLIST STYLING */
 #plant-form {
   background-image: url("https://images.pexels.com/photos/4503823/pexels-photo-4503823.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
   background-repeat: no-repeat;