Single

components/Layout.js

@@ -1,6 +1,6 @@
 import React from 'react'
 // import Link from 'next/link'
-import '../sass/app.scss';
+// import '../sass/app.scss';
 import Head from '../components/head'
 
 const Layout = (props) => (

pages/single.js

@@ -1,15 +1,61 @@
 import Layout from '../components/Layout'
 
+import '../static/app.css';
+
 class Single extends React.Component {
     render() {
+
         return (
             <Layout>
+                 <div className="App">
+          <div>
+                <img src="../static/images/left.svg" className="logo" alt="logo" />
+          </div>
+
+          <div className="single-fruit-image">
+                <img src="../static/images/banana.jpg" alt="My image" className="image" />
+          </div>
+
+          <div className="single-fruit-display">
+                <div>
+                    <h2> Banana </h2> 
+                </div>
+
+                <div>
+                    <h3> May - June </h3> 
+                </div>
+          </div>
+          <div style={{clear: 'both'}}></div>
+          <div className="single-fruit-category">
                 <div>
-                    <h1>Single Fruit Page </h1>
+                    <h1>Nutritional Value</h1>
                 </div>
+                <div>
+                  <img src="../static/images/up.svg" className="up" alt="logo" />   
+                </div>
+          </div>
+
+                <div className="single-fruit-category">
+                <div>
+                    <h1>Health Benefit</h1>
+                </div>
+                <div>
+                      <img src="../static/images/down.svg" className="down" alt="logo" />
+                </div>
+           </div>
+
+          <div>
+                <p>1. Bananas May Aid Weight Loss</p>
+                <p>2. Bananas May Support Heart Health</p>
+                <p>3. Bananas Contain Powerful Antioxidants</p>
+                <p>4. Manganese in Bananas is good for your skin</p>
+          </div>
+
+  </div>
             </Layout>
         )
     }
 }
 
-export default Single
+export default Single
+

static/app.css

@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css?family=Dosis:400,700&display=swap');
+
+
+body{
+      font-family: 'Dosis', sans-serif !important;
+      background:#FFFFFF ;
+      margin: 0 auto;
+}
+
+.single-fruit-image {
+  padding: 10px;
+}
+.App {
+      width: 90%;
+      margin: auto;
+}
+img{
+      border-radius: 10px;
+      max-width: 100%;
+      width: 100%;
+      height: auto;
+}
+
+.up{
+     height: 25px;
+}
+
+.down{
+      height: 25px;      
+}
+
+.logo{
+      margin-left:13px;
+      width: 30px;
+      height: 70px;
+}
+
+h2{
+      font-weight: bold;
+      margin-left: 12px ;
+      margin-top:10px;
+}
+.single-fruit-display{
+  display: flex;
+}
+
+.single-fruit-display > div {
+  width:50%;
+}
+.single-fruit-display > div:nth-child(2) { 
+  padding-right:10px;
+  text-align: right;
+}
+
+h3{
+      margin-top:10px;
+      font-weight: bolder;
+      font-size: 25px;
+}
+
+h1{
+      font-size:25px;
+}
+
+p{
+      padding: 0;
+      margin: 5px;
+      font-size: 20px;
+      margin-left: 10px;
+}
+
+.single-fruit-category  {
+  display: flex;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 0px;
+  padding-top: 0px;
+
+}
+
+.single-fruit-category > div:nth-child(2) {
+  margin-left: auto;
+  width: 10%;
+  padding-top: 20px;
+}