From 08df653fdc595d0d282669711f0a7d95a9d36a12 Mon Sep 17 00:00:00 2001
From: Nadine Glettig <ariahm4e@hotmail.com>
Date: Wed, 16 Jan 2019 10:12:01 +0100
Subject: [PATCH] Vuemastery Session 3

---
 test.css  | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test.html | 23 +++++++++++++++++
 test.js   | 22 ++++++++++++++++
 3 files changed, 120 insertions(+)
 create mode 100644 test.css
 create mode 100644 test.html
 create mode 100644 test.js

diff --git a/test.css b/test.css
new file mode 100644
index 0000000..4a8837c
--- /dev/null
+++ b/test.css
@@ -0,0 +1,75 @@
+body {
+  font-family: tahoma;
+  color: #282828;
+  margin: 0px;
+}
+
+.nav-bar {
+  background: linear-gradient(-90deg, #84CF6A, #16C0B0);
+  height: 60px;
+  margin-bottom: 15px;
+}
+
+.product {
+  display: flex;
+}
+
+img {
+  border: 1px solid #d8d8d8;
+  width: 70%;
+  margin: 40px;
+  box-shadow: 0px .5px 1px #d8d8d8;
+}
+
+.product-image {
+  flex-basis: 700px;
+}
+
+.product-info {
+  margin-top: 10px;
+  flex-basis: 500px;
+}
+
+.color-box {
+  width: 40px;
+  height: 40px;
+  margin-top: 5px;
+}
+
+.cart {
+  margin-right: 25px;
+  float: right;
+  border: 1px solid #d8d8d8;
+  padding: 5px 20px;
+}
+
+button {
+  margin-top: 30px;
+  border: none;
+  background-color: #1E95EA;
+  color: white;
+  height: 40px;
+  width: 100px;
+  font-size: 14px;
+} 
+
+.disabledButton {
+  background-color: #d8d8d8;
+}
+
+.review-form {
+  width: 30%;
+  padding: 20px;
+  border: 1px solid #d8d8d8;  
+}
+
+input {
+  width: 100%;  
+  height: 25px;
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  height: 60px;
+}
\ No newline at end of file
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..9ce0e58
--- /dev/null
+++ b/test.html
@@ -0,0 +1,23 @@
+<div class="nav-bar"></div>
+
+<div id="app">
+  
+  <div class="product">
+  
+    <div class="product-image">
+      <img :src="image" />
+    </div>
+
+    <div class="product-info">
+      <h1>{{ product }}</h1>
+      <p v-if="inventory > 50">On Sale</p> 
+      <p v-else-if="inventory<= 10 && inventory > 0">Almost On Sale</p>
+      <p v-else>On SAle</p>
+    </div>
+    
+  </div>
+    
+</div> 
+
+
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
\ No newline at end of file
diff --git a/test.js b/test.js
new file mode 100644
index 0000000..fdb5a60
--- /dev/null
+++ b/test.js
@@ -0,0 +1,22 @@
+//Add an array of sizes to the data and use v-for to display them in a list. 
+
+var app = new Vue({
+  el: '#app',
+  data: {
+    product: 'Socks',
+    image: 'https://dl.dropboxusercontent.com/s/9zccs3f0pimj0wj/vmSocks-green-onWhite.jpg?dl=0',
+    inStock: true,
+    details: ['80% cotton', '20% polyester', 'Gender-neutral'],
+    variants: [
+      {
+        variantId: 2234,
+        variantColor: 'green'    
+      },
+      {
+        variantId: 2235,
+        variantColor: 'blue'
+      }
+    ]
+  } 
+})
+