From 3b26733dda559b331d6b7aa2f37f4ecedffc0ad3 Mon Sep 17 00:00:00 2001
From: varsharen <rvarsha0150@gmail.com>
Date: Tue, 13 Apr 2021 16:23:18 +0100
Subject: [PATCH] Dashboard Page

Signed-off-by: varsharen <rvarsha0150@gmail.com>
---
 wtwui/.gitignore                  |   2 +-
 wtwui/package.json                |   2 +
 wtwui/src/App.js                  |  27 ++++-----
 wtwui/src/Images/Blog.svg         |   1 +
 wtwui/src/Images/Logo.png         | Bin 0 -> 8556 bytes
 wtwui/src/Images/Logo.svg         |   1 +
 wtwui/src/Images/Recipe.svg       |   1 +
 wtwui/src/Images/Workout.svg      |   1 +
 wtwui/src/components/Dashboard.js |  42 ++++++++++++++
 wtwui/src/components/Navbar.js    |  92 ++++++++++++++++++++++++++++++
 wtwui/src/components/Tile.js      |  60 +++++++++++++++++++
 wtwui/src/css/Navbar.css          |  16 ++++++
 wtwui/src/css/Tile.css            |   7 +++
 13 files changed, 234 insertions(+), 18 deletions(-)
 create mode 100644 wtwui/src/Images/Blog.svg
 create mode 100644 wtwui/src/Images/Logo.png
 create mode 100644 wtwui/src/Images/Logo.svg
 create mode 100644 wtwui/src/Images/Recipe.svg
 create mode 100644 wtwui/src/Images/Workout.svg
 create mode 100644 wtwui/src/components/Dashboard.js
 create mode 100644 wtwui/src/components/Navbar.js
 create mode 100644 wtwui/src/components/Tile.js
 create mode 100644 wtwui/src/css/Navbar.css
 create mode 100644 wtwui/src/css/Tile.css

diff --git a/wtwui/.gitignore b/wtwui/.gitignore
index 4d29575..529310e 100644
--- a/wtwui/.gitignore
+++ b/wtwui/.gitignore
@@ -4,7 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
-
+.package-lock.json
 # testing
 /coverage
 
diff --git a/wtwui/package.json b/wtwui/package.json
index 57f81b7..76722de 100644
--- a/wtwui/package.json
+++ b/wtwui/package.json
@@ -6,7 +6,9 @@
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^4.6.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.1"
diff --git a/wtwui/src/App.js b/wtwui/src/App.js
index 3784575..40419f4 100644
--- a/wtwui/src/App.js
+++ b/wtwui/src/App.js
@@ -1,23 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+
+import "./App.css";
+import Navbar from "./components/Navbar";
+import "bootstrap/dist/css/bootstrap.css";
+import Dashboard from "./components/Dashboard";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Navbar></Navbar>
+
+      <Dashboard></Dashboard>
     </div>
   );
 }
diff --git a/wtwui/src/Images/Blog.svg b/wtwui/src/Images/Blog.svg
new file mode 100644
index 0000000..2b019ad
--- /dev/null
+++ b/wtwui/src/Images/Blog.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.07 98.61"><defs><style>.cls-1{fill:#231f20;}.cls-2{font-size:22.41px;fill:#d1b22b;font-family:Galvji-Bold, Galvji;font-weight:700;letter-spacing:0.2em;}</style></defs><g id="Artboard_4" data-name="Artboard 4"><rect class="cls-1" x="8.69" y="15.78" width="94.7" height="58.81" rx="12"/><polygon class="cls-1" points="75.02 74.59 48.74 92.74 56.03 74.59 75.02 74.59"/><text class="cls-2" transform="translate(17.67 51.79)">BLOG</text></g></svg>
\ No newline at end of file
diff --git a/wtwui/src/Images/Logo.png b/wtwui/src/Images/Logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..63153d28189366edbc575be83ea92a2a704a3bd9
GIT binary patch
literal 8556
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

literal 0
HcmV?d00001

diff --git a/wtwui/src/Images/Logo.svg b/wtwui/src/Images/Logo.svg
new file mode 100644
index 0000000..4a58951
--- /dev/null
+++ b/wtwui/src/Images/Logo.svg
@@ -0,0 +1 @@
+<svg id="Artboard_1" data-name="Artboard 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.98 34.07"><defs><style>.cls-1,.cls-2{fill:#231f20;}.cls-2{font-size:3.77px;font-family:Galvji-Bold, Galvji;font-weight:700;}.cls-3{fill:#d1b22b;}</style></defs><path class="cls-1" d="M40.19,16.92a126.62,126.62,0,0,0-19.62,3.37c-.24-.95-.49-1.9-.74-2.84A128.61,128.61,0,0,1,39.88,14C40,15,40.09,16,40.19,16.92Z"/><path class="cls-1" d="M85,16.79a129.77,129.77,0,0,1,20.25,3.47c.24-1,.49-1.89.74-2.84a134.34,134.34,0,0,0-20.68-3.55C85.24,14.84,85.14,15.81,85,16.79Z"/><text class="cls-2" transform="translate(42.57 28.87)"><tspan xml:space="preserve">WORTH  THE  WEIGHT</tspan></text><path class="cls-1" d="M51.35,23.11q-1.71-5.59-3.51-11.17-1.29,5.72-2.49,11.44l-2.79.16q-3-8.74-6.35-17.45c1.33-.11,2.67-.2,4-.29q1.76,5.47,3.42,11,1.08-5.66,2.24-11.29l3.36-.16q1.68,5.52,3.26,11.05,1.15-5.61,2.41-11.23l4-.07q-2.5,9-4.74,18Q52.76,23,51.35,23.11Z"/><path class="cls-1" d="M44.75,22.68l-1.68.1q-2.77-8-5.79-16l2.37-.17q2.12,6.56,4.09,13.13h.09q1.28-6.77,2.68-13.52l2.15-.1q2,6.6,3.89,13.23h.09Q54,12.57,55.53,5.85l2.37,0Q55.64,14,53.59,22.3l-1.71.06q-2-6.56-4.11-13.08h-.1Q46.14,16,44.75,22.68Z"/><path class="cls-1" d="M61.28,22.9q0-7.33-.07-14.67c-1.76,0-3.51,0-5.27.06l-.06-3.18Q63,5,70.05,5.11L70,8.29c-1.75,0-3.51-.06-5.26-.06q0,7.33-.07,14.67Z"/><path class="cls-1" d="M63.93,22.17H62q0-7.34,0-14.68-2.64,0-5.28.06l0-1.72q6.3-.12,12.61,0l0,1.72c-1.76,0-3.51,0-5.27-.06Q64,14.83,63.93,22.17Z"/><path class="cls-1" d="M80.55,23.38q-1.18-5.73-2.48-11.44-1.81,5.58-3.51,11.17c-.93,0-1.86-.07-2.8-.09q-2.22-9-4.74-18l4,.07q1.26,5.61,2.42,11.23,1.57-5.53,3.25-11l3.37.16q1.17,5.64,2.24,11.29,1.67-5.49,3.42-11c1.33.09,2.67.18,4,.29q-3.31,8.7-6.35,17.45Z"/><path class="cls-1" d="M74,22.36l-1.68-.06Q70.3,14.05,68,5.81l2.37,0q1.51,6.72,2.89,13.45h.09q1.88-6.63,3.89-13.23l2.15.1q1.41,6.75,2.68,13.52h.09q2-6.58,4.09-13.13l2.37.17q-3,8-5.79,16l-1.7-.1Q79.77,16,78.24,9.28h-.1Q76,15.81,74,22.36Z"/><rect class="cls-3" x="19.35" y="6.46" width="3" height="23.96" rx="1.5" transform="translate(44.59 32.97) rotate(170)"/><rect class="cls-3" x="15.74" y="12.31" width="3" height="15.09" rx="1.5" transform="translate(-3.19 3.3) rotate(-10)"/><path class="cls-3" d="M2.56,18.54l0,.3h0L7.49,18a.51.51,0,1,1,.18,1l-4.88.87h0l.13.75h0l4.89-.86a.51.51,0,0,1,.17,1l-4.88.87h0l.13.75h0l4.89-.86a.51.51,0,0,1,.6.42h0a.5.5,0,0,1-.42.59l-4.89.87h0l.13.75h0l4.89-.86a.51.51,0,0,1,.6.42.5.5,0,0,1-.42.59l-4.89.87h0l.1.54a.52.52,0,0,0,.6.42l5.84-1a2.51,2.51,0,0,0,2-2.91L11.73,19a2.51,2.51,0,0,0-2.91-2L3,17.94A.51.51,0,0,0,2.56,18.54Z"/><path class="cls-3" d="M14.87,21.32,11,22.74c-.27.05-.65-1.17-.76-1.84h0c-.12-.67-.18-1.92.09-2l4.16,0C14.71,18.85,15.14,21.28,14.87,21.32Z"/><rect class="cls-3" x="102.89" y="6.46" width="3" height="23.96" rx="1.5" transform="translate(4.79 -17.85) rotate(10)"/><rect class="cls-3" x="106.5" y="12.31" width="3" height="15.09" rx="1.5" transform="translate(210.9 58.17) rotate(-170)"/><path class="cls-3" d="M111,18.7l5.39.25c.35.06.33,1.35.2,2h0c-.12.67-.54,1.85-.9,1.79l-5.13-1.64C110.23,21.06,110.67,18.63,111,18.7Z"/><ellipse class="cls-3" cx="119.8" cy="21.61" rx="4.27" ry="5.92" transform="translate(77.08 135.6) rotate(-79.68)"/></svg>
\ No newline at end of file
diff --git a/wtwui/src/Images/Recipe.svg b/wtwui/src/Images/Recipe.svg
new file mode 100644
index 0000000..d7ede8a
--- /dev/null
+++ b/wtwui/src/Images/Recipe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.07 98.61"><defs><style>.cls-1{fill:#231f20;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.25px;}.cls-2{fill:#d1b22b;}.cls-3{fill:#f7ec13;}.cls-4{fill:#e32028;}.cls-5{fill:#e41e26;}.cls-6{fill:#63923f;}.cls-7{fill:#d2d3ab;}.cls-8{fill:#e15526;}</style></defs><g id="Artboard_2" data-name="Artboard 2"><path class="cls-1" d="M104.41,47.52c6,10.83-17.52,48.37-48.37,48.37S1.62,58.35,7.66,47.52c2.82-5,10.93-2.29,48.82-2.3C93.72,45.21,101.64,42.54,104.41,47.52Z"/><path class="cls-2" d="M44.58,75.58q-1.68-5.51-3.46-11-1.27,5.64-2.45,11.28L35.91,76q-3-8.62-6.26-17.21l3.94-.29q1.74,5.4,3.38,10.82Q38,63.75,39.18,58.19c1.1-.06,2.21-.11,3.31-.15q1.65,5.43,3.21,10.89,1.15-5.54,2.39-11.07c1.31,0,2.63-.06,3.94-.07q-2.47,8.84-4.67,17.71Z"/><path class="cls-2" d="M38.07,75.16l-1.66.1q-2.73-7.94-5.71-15.82L33,59.27q2.09,6.46,4,12.95h.09q1.24-6.68,2.64-13.34l2.12-.1q2,6.51,3.83,13h.09q1.36-6.63,2.85-13.26l2.34,0q-2.24,8.13-4.25,16.27l-1.68,0q-2-6.45-4.06-12.89H41Q39.43,68.55,38.07,75.16Z"/><path class="cls-2" d="M54.38,75.38q0-7.23-.08-14.47L49.11,61c0-1,0-2.09-.07-3.13q7-.15,14,0c0,1-.05,2.09-.07,3.13-1.73,0-3.45,0-5.18-.06L57.7,75.38Z"/><path class="cls-2" d="M57,74.66H55.1q0-7.25-.05-14.48c-1.73,0-3.47,0-5.2.06l0-1.7q6.21-.1,12.43,0l0,1.7q-2.59,0-5.19-.06Q57,67.43,57,74.66Z"/><path class="cls-2" d="M73.38,75.85q-1.17-5.64-2.45-11.28c-1.19,3.66-2.34,7.34-3.46,11l-2.76-.08Q62.51,66.62,60,57.79c1.31,0,2.63,0,3.94.07q1.25,5.53,2.39,11.07Q67.93,63.47,69.58,58c1.1,0,2.21.09,3.31.15Q74,63.76,75.1,69.33q1.65-5.41,3.38-10.82l3.94.29Q79.15,67.38,76.16,76Z"/><path class="cls-2" d="M66.94,74.84l-1.66,0q-2-8.15-4.25-16.27l2.34,0q1.49,6.63,2.85,13.26h.09q1.84-6.54,3.83-13l2.12.1q1.39,6.66,2.64,13.34H75q2-6.48,4-12.95l2.34.17q-3,7.89-5.71,15.82L74,75.16Q72.61,68.55,71.1,62H71Q68.9,68.39,66.94,74.84Z"/><path class="cls-3" d="M81.72,33.63l1,1.77a9.42,9.42,0,0,0,5.28-1,12.64,12.64,0,0,0,3-2.74c2.41-2.71,3.53-6.88,3.27-11.29-.12-2.15-.41-4.2-2-5.8s-4-2.22-6.14-2.79a20.61,20.61,0,0,0-2.42-.49l-1.9-.89-.36-.16c-.13-.07-.36.19-.56.52s-.42.91-.26,1l.27.15,1.4.81q11.35,8.75.93,18.45A8.19,8.19,0,0,0,81.72,33.63Z"/><path d="M81.79,34.75c-.07.1.85.75.92.65l-1-1.77C81.53,33.64,81.59,34.76,81.79,34.75Z"/><path d="M81.2,12,82,10.47l-.55-.25c-.28-.16-1.11,1.36-.82,1.52Z"/><path class="cls-4" d="M58.15,10.25c1.11-8.28,17-6.14,15.9,2.13Z"/><circle class="cls-4" cx="74.11" cy="38.43" r="3.37"/><path class="cls-5" d="M44.11,42C44.37,41.47,44,40.83,43,40a17.77,17.77,0,0,0-5.24-2.1c-3.28-1.35-6-2.91-7.51-5-2.06-2.78-2.65-5.64-1.47-8.61.67-2,1-3.74-.11-4.47A9.81,9.81,0,0,1,25,18.37c-1.31-.54-2.28.53-3,2.94a17.71,17.71,0,0,0,3,13.55c3.75,5.43,9.43,7,16.37,6.19a4,4,0,0,1,2.46,1.1"/><path class="cls-6" d="M28.58,19.87a1.52,1.52,0,0,1-.51-.25c-.65-.49-.43-1.45.65-2.87a12.06,12.06,0,0,1,2-1.78c.1-.3-.08-.46-.56-.45-.7,0-1.57.67-2.62,2.17l-.74.89a1.53,1.53,0,0,1-1.5.87L25,18.4l2,1"/><circle class="cls-6" cx="41.22" cy="9.16" r="5.61"/><path class="cls-7" d="M64.44,33.78c1.1-2-3.3-9-9-9s-10.08,7-9,9,8.17.9,9-1.45c.2-.59.07-1.5.21-1.51s.26,1.06.6,1.73C57.5,34.9,63.47,35.5,64.44,33.78Z"/><path class="cls-7" d="M54.81,30.57c.12,1.62.23,3.23.35,4.84-2.28.87-1.88,1.86,0,2.91,1.67.31,2.55,0,2.81-.93s.21-1.49-1.25-2.18c0-1.55.07-3.1.11-4.65"/><circle class="cls-8" cx="66.77" cy="20.37" r="2.45"/></g></svg>
\ No newline at end of file
diff --git a/wtwui/src/Images/Workout.svg b/wtwui/src/Images/Workout.svg
new file mode 100644
index 0000000..81821d7
--- /dev/null
+++ b/wtwui/src/Images/Workout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.07 98.61"><defs><style>.cls-1{fill:#231f20;}.cls-2,.cls-3{fill:none;stroke-miterlimit:10;}.cls-2{stroke:#231f20;}.cls-3{stroke:#d1b22b;stroke-width:2px;}</style></defs><g id="Artboard_3" data-name="Artboard 3"><rect class="cls-1" x="33.96" y="51.79" width="41.46" height="3.6"/><rect class="cls-2" x="29.15" y="37.16" width="4.81" height="32.87" rx="0.46"/><rect class="cls-2" x="24.43" y="41.16" width="4.71" height="24.87" rx="0.46"/><rect class="cls-2" x="75.42" y="37.16" width="4.81" height="32.87" rx="0.46" transform="translate(155.65 107.19) rotate(180)"/><path class="cls-2" d="M82.59,41.16a2.36,2.36,0,0,0-2.36,2.36V63.67a2.36,2.36,0,0,0,4.72,0V43.52A2.36,2.36,0,0,0,82.59,41.16Z"/><path class="cls-3" d="M54.91,25.26c-11.77-14.12-22.78-12.77-33.23,0-5.05,8.07-4.7,16.48,0,25.15l.69,1.38"/><path class="cls-3" d="M36.47,68.11,51.85,80.37c2.76,2.06,3.58,5.2,3.77,8.69"/><path class="cls-3" d="M74.12,67.55l-14,12.59c-2.52,2.11-3.26,5.34-3.43,8.92"/><path class="cls-3" d="M54.11,25.26c11.77-14.12,22.78-12.77,33.22,0,5.06,8.07,4.71,16.48,0,25.15l-.68,1.38"/></g></svg>
\ No newline at end of file
diff --git a/wtwui/src/components/Dashboard.js b/wtwui/src/components/Dashboard.js
new file mode 100644
index 0000000..953ca6b
--- /dev/null
+++ b/wtwui/src/components/Dashboard.js
@@ -0,0 +1,42 @@
+import React, { Fragment } from "react";
+
+import logo from "../Images/Logo.svg";
+import workout from "../Images/Workout.svg";
+import blog from "../Images/Blog.svg";
+import recipe from "../Images/Recipe.svg";
+
+import Tile from "./Tile";
+
+export default function Dashboard() {
+  return (
+    <Fragment>
+      <Tile
+        logo={workout}
+        logo2={recipe}
+        logo3={blog}
+        cardTitle={"Workouts"}
+        cardText={"View workouts for targeted areas"}
+        stylecss={{
+          width: 18 + "rem",
+          height: 30 + "rem",
+        }}
+      />
+      {/* <Tile
+        logo={logo}
+        cardTitle={"Recipes"}
+        stylecss={{
+          width: 18 + "rem",
+          height: 30 + "rem",
+        }}
+      />
+      <Tile
+        logo={logo}
+        cardTitle={"Blog"}
+        stylecss={{
+          width: 18 + "rem",
+          height: 30 + "rem",
+        }}
+      /> */}
+    </Fragment>
+  );
+}
diff --git a/wtwui/src/components/Navbar.js b/wtwui/src/components/Navbar.js
new file mode 100644
index 0000000..be968d2
--- /dev/null
+++ b/wtwui/src/components/Navbar.js
@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import logo from "../Images/Logo.svg";
+import "../css/Navbar.css";
+
+export class Navbar extends Component {
+  render() {
+    return (
+      <nav className="navbar navbar-expand-lg navbar-light bg-light">
+        <div className="container-fluid">
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <a className="navbar-brand" href="#">
+            <img
+              src={logo}
+              alt="Logo"
+              width="300"
+              height="90"
+              textalign="center"
+            ></img>
+          </a>
+          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+              <li className="nav-item">
+                <a className="nav-link active" aria-current="page" href="#">
+                  Home
+                </a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link" href="#">
+                  Link
+                </a>
+              </li>
+              <li className="nav-item dropdown">
+                <a
+                  className="nav-link dropdown-toggle"
+                  href="#"
+                  id="navbarDropdown"
+                  role="button"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  Dropdown
+                </a>
+                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li>
+                    <a className="dropdown-item" href="#">
+                      Action
+                    </a>
+                  </li>
+                  <li>
+                    <a className="dropdown-item" href="#">
+                      Another action
+                    </a>
+                  </li>
+                  <li>
+                    <hr className="dropdown-divider"></hr>
+                  </li>
+                  <li>
+                    <a className="dropdown-item" href="#">
+                      Something else here
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li className="nav-item">
+                <a
+                  className="nav-link disabled"
+                  href="#"
+                  tabIndex="-1"
+                  aria-disabled="true"
+                >
+                  Disabled
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    );
+  }
+}
+
+export default Navbar;
diff --git a/wtwui/src/components/Tile.js b/wtwui/src/components/Tile.js
new file mode 100644
index 0000000..fafc033
--- /dev/null
+++ b/wtwui/src/components/Tile.js
@@ -0,0 +1,60 @@
+// import logo from "../Images/Logo.png";
+import blog from "../Images/Blog.svg";
+import recipe from "../Images/Recipe.svg";
+
+// import { Card, CardGroup } from "reactstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { Card, Button, CardGroup } from "react-bootstrap";
+// import Button from "@bit/react-bootstrap.react-bootstrap.button";
+// import Card from "@bit/react-bootstrap.react-bootstrap.card";
+export default function Tile(props) {
+  return (
+    // <div className="card1" style={props.stylecss}>
+    //   <img className="card-img-top" src={props.logo} alt="Card image cap"></img>
+    //   <div className="card-body" style={props.cbodycss}>
+    //     <h5 className="card-title">{props.cardTitle}</h5>
+    //     <p className="card-text">{props.cardText}</p>
+
+    //     <a href={props.url} className="btn btn-primary">
+    //       Select
+    //     </a>
+    //   </div>
+    // </div>
+    <div>
+      <br></br>
+      <br></br>
+      <CardGroup>
+        <Card>
+          <Card.Img variant="top" src={props.logo} />
+          <Card.Body>
+            <Card.Title>Workout</Card.Title>
+            <Card.Text>View workouts for targeted area</Card.Text>
+          </Card.Body>
+          <a href={props.url} className="btn btn-primary">
+            Workouts
+          </a>
+        </Card>
+        <Card>
+          <Card.Img variant="top" src={props.logo2} />
+          <Card.Body>
+            <Card.Title>Recipe </Card.Title>
+            <Card.Text>Prep your next meal here.</Card.Text>
+          </Card.Body>
+          <a href={props.url} className="btn btn-primary" >
+            Recipes
+          </a>
+        </Card>
+        <Card>
+          <Card.Img variant="top" src={props.logo3} />
+          <Card.Body>
+            <Card.Title>Blog</Card.Title>
+            <Card.Text>Connect with other user's.</Card.Text>
+          </Card.Body>
+          <a href={props.url} className="btn btn-primary">
+            Blog
+          </a>
+        </Card>
+      </CardGroup>
+    </div>
+  );
+}
diff --git a/wtwui/src/css/Navbar.css b/wtwui/src/css/Navbar.css
new file mode 100644
index 0000000..8900903
--- /dev/null
+++ b/wtwui/src/css/Navbar.css
@@ -0,0 +1,16 @@
+.navbar-brand {
+  transform: translateX(-50%);
+  left: 50%;
+  position: absolute;
+}
+
+/* DEMO example styles for logo image */
+.navbar-brand {
+  padding: 0px;
+  
+}
+.navbar-brand > img {
+  height: 240;
+  width: 200;
+  padding: 7px 14px;
+}
diff --git a/wtwui/src/css/Tile.css b/wtwui/src/css/Tile.css
new file mode 100644
index 0000000..025e2f1
--- /dev/null
+++ b/wtwui/src/css/Tile.css
@@ -0,0 +1,7 @@
+.btn-primary {
+  width: 50%;
+}
+
+.btn-primary:hover {
+  background-color: darkgoldenrod;
+}
-- 
GitLab