style product page #52

public/style/sass/_product.scss

@@ -0,0 +1,44 @@
+.product-block {
+  width: 100%;
+  background-color: white;
+  padding: 1rem;
+  border-radius: .5rem;
+  font: 1.5rem Gidole;
+  color: #555;
+  box-shadow: 0 .3rem 1rem -.2rem #222;
+}
+
+.product-block:not(:last-child) {
+  margin-bottom: 3rem;
+}
+
+.page-content.product {
+  justify-content: flex-start;
+}
+
+.product-image {
+  @include flex;
+  width: 23rem;
+  height: 23rem;
+  border-radius: 100%;
+  background-color: #eee;
+  color: #aaa;
+  font-size: 3rem;
+  box-shadow: 0 .3rem 1rem -.2rem #222;
+  margin-bottom: 2rem;
+}
+
+.product-button {
+  -webkit-appearance: none;
+  padding: .8rem 1rem;
+  border-radius: .3rem;
+  font: bold 2.5rem Gidole;
+  color: $main;
+  background-color: white;
+  box-shadow: 0 .3rem 1rem -.2rem #222;
+}
+
+.centre {
+  text-align: center;
+  font-size: 2rem;
+}

public/style/sass/_reset.scss

@@ -1,4 +1,4 @@
-body, header, h1, a, div, input, textarea, p, select {
+body, header, h1, a, div, input, textarea, p, select, span {
   margin: 0;
   padding: 0;
   border: 0;

public/style/sass/main.scss

@@ -8,3 +8,4 @@
 // PAGES
 @import 'home';
 @import 'profile';
+@import 'product';

views/product.hbs

@@ -1,5 +1,13 @@
 {{>header}}
 
-<div class="page-content">
-  <p class="block">{{description}}</p>
+<div class="page-content product">
+  <span class="block-title">ABOUT</span>
+  <p class="product-block">{{description}}</p>
+
+  <img class="product-image" src="{{image}}" />
+
+  <span class="block-title">PRICE</span>
+  <span class="product-block centre">{{price}}</span>
+
+  <a class="product-button">ADD TO CART</a>
 </div>

views/register.hbs

@@ -4,19 +4,19 @@
   <form class="form" id="register-form" autocomplete="off">
     <div class="form-input-wrap">
       <label>Username
-        <input type="text" name="username">
+        <input type="text" name="username" value="Dan">
       </label>
 
       <label>Email Address
-        <input type="text" name="email">
+        <input type="text" name="email" value="dan@dan.com">
       </label>
 
       <label>Password
-        <input type="password" name="password">
+        <input type="password" name="password" value="123">
       </label>
 
       <label>Confirm Password
-        <input type="password" name="confirm">
+        <input type="password" name="confirm" value="123">
       </label>
     </div>
     <input id="submit" type="submit" value="SUBMIT">