add basic styling for detail view

fac-13 · Apr 19, 2018 · 89e9fff · 89e9fff
1 parent 0be5fc1
commit 89e9fff
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 11 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1,4 +1,8 @@
+
+@import url('https://rsms.me/inter/inter-ui.css');
+
 html {
+  font-family: 'Inter UI', sans-serif;
 }
 
 body {
@@ -32,6 +36,44 @@ main {
 }
 .coin__logo {
 }
+
+.coin-article {
+  background-color: lightGray;
+  width: 400px;
+  margin: auto;
+  padding: 15px;
+}
+
+.coin-article__header {
+  background-color: skyblue;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  font-size: 2em;
+}
+
+.coin-article__header img {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+}
+
+.coin-article__header h1 {
+margin: auto;
+}
+
+.coin-article__body {
+
+}
+
+.coin-article__body div{
+  border: black solid 1px; 
+  padding: 10px;
+}
+
+.coin-article__footer {
+  background-color: gray;
+}
 /* .footer__container {} 
 .error {}
 .error__desc {} 

diff --git a/src/views/coindetail.hbs b/src/views/coindetail.hbs
@@ -1,19 +1,19 @@
-<article>
-  <header>
+<article class="coin-article">
+  <header class="coin-article__header">
     <img src="images/coins/{{ coinRecord.symbol }}.svg" />
     <h1>{{ coinRecord.name }}</h1>
   </header>
-  <main>
-    <p>Rank: {{ coinRecord.rank }}</p>
-    <p>Supply: {{ coinRecord.supply }}</p>
-    <p>Price (GBP): {{ coinRecord.price_gbp }}</p>
+  <main class="coin-article__body">
+    <p><strong>Rank:</strong> {{ coinRecord.rank }}</p>
+    <p><strong>Supply:</strong> {{ coinRecord.supply }}</p>
+    <p><strong>Price (GBP):</strong> {{ coinRecord.price_gbp }}</p>
     <div>
-    <p>Change in last hour: {{ coinRecord.percent_change_1h }}%</p>
-    <p>Change in last day: {{ coinRecord.percent_change_24h }}%</p>
-    <p>Change in last week:{{ coinRecord.percent_change_7d }}%</p>
+    <p><strong>Change in last hour:</strong> {{ coinRecord.percent_change_1h }}%</p>
+    <p><strong>Change in last day:</strong> {{ coinRecord.percent_change_24h }}%</p>
+    <p><strong>Change in last week:</strong> {{ coinRecord.percent_change_7d }}%</p>
     </div>
   </main>
-  <footer>
-    <p>Acronym: {{ coinRecord.symbol }}</p>
+  <footer class="coin-article__footer">
+    <p><strong>Acronym:</strong> {{ coinRecord.symbol }}</p>
   </footer>
 </article>