From 1757c8e2d724b329e2a6fd64e938deef444743b4 Mon Sep 17 00:00:00 2001
From: Fil Cesana <cesanf@usi.ch>
Date: Wed, 18 Mar 2020 16:35:42 +0100
Subject: [PATCH] Instructions pages done, I will wait until the app is more or
 less completed before writing the actual instructions, for many thing may
 change along the way.

---
 smart-hut/src/views/Instruction.js | 97 +++++++++++++++++++++++++++++-
 1 file changed, 96 insertions(+), 1 deletion(-)

diff --git a/smart-hut/src/views/Instruction.js b/smart-hut/src/views/Instruction.js
index a5bee71..6a58d4a 100644
--- a/smart-hut/src/views/Instruction.js
+++ b/smart-hut/src/views/Instruction.js
@@ -14,8 +14,103 @@ import {
   Grid
 } from "semantic-ui-react";
 
+const ContainerExampleAlignment = () => (
+  <div>
+    <HomeNavbar />
+    <Container textAlign='justified'>
+    <Header as="h1"> Instructions Page </Header>
+    <Grid>
+    <Grid.Row height={15}></Grid.Row>
+  </Grid>
+    </Container>
+    <Container textAlign='justified'>
+      <b>First Step</b>
+      <Divider />
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+        ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+        magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+        quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+        Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+        dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
+        tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
+        enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
+        Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+        imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+        ultricies nisi.
+      </p>
+      <Divider />
+    </Container>
+    <Container textAlign='justified'>
+    <b>Second Step</b>
+    <Divider />
+    <p>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+      ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+      magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+      ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+      quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+      arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+      Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
+      tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
+      enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
+      Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+      imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+      ultricies nisi.
+    </p>
+    <Divider />
+  </Container>
+  <Container textAlign='justified'>
+  <b>Third Step</b>
+  <Divider />
+  <p>
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+    ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+    magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+    ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+    quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+    arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+    Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+    dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
+    tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
+    enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
+    Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+    imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+    ultricies nisi.
+  </p>
+  <Divider />
+</Container>
+<Container textAlign='justified'>
+<b>Last Step</b>
+<Divider />
+<p>
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
+  ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et
+  magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+  ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
+  quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
+  arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
+  Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras
+  dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
+  tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
+  enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
+  Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+  imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+  ultricies nisi.
+</p>
+<Divider />
+</Container>
+  </div>
+)
+
+
 export default class Insturction extends Component{
     render() {
-        return;
+        return(
+          <ContainerExampleAlignment />
+        )
     }
 }
\ No newline at end of file