@@ -3,7 +3,7 @@
color:#282828;
margin: 0px;
}
-
+
.nav-bar {
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
height: 60px;
@@ -22,30 +22,30 @@
margin: 40px;
box-shadow: 0px .5px 1px #d8d8d8;
.product-image {
width: 80%;
.product-image,
.product-info {
margin-top: 10px;
width: 50%;
.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;
@@ -54,25 +54,25 @@
width: 100px;
font-size: 14px;
- }
+ }
.disabledButton {
background-color: #d8d8d8;
.review-form {
width: 400px;
padding: 20px;
input {
- width: 100%;
+ width: 100%;
height: 25px;
margin-bottom: 20px;
textarea {
width: 100%;
@@ -86,4 +86,8 @@
.activeTab {
color: #16C0B0;
text-decoration: underline;
+ [v-cloak] {
+ display: none
@@ -20,7 +20,11 @@
</a>
</div>
<div class="product-info">
- <h1>{{ product }}</h1>
+ <h1 v-cloak>{{ product }}</h1>
+ <p v-cloak v-show="inventory > 10">In stock</p>
+ <p v-cloak v-show="inventory <= 10 && inventory > 0">Limited stock</p>
+ <p v-cloak v-show="inventory <= 0">Out of stock</p>
+ <p v-if="onSale">On sale! Act fast.</p>
@@ -3,7 +3,10 @@ const app = new Vue({
data: {
description: "Chaussettes montantes",
image: "./assets/img/vmSocks-green-onWhite.jpg",
+ inventory: 90,
link: "https://www.google.com/search?q=vuejs+socks",
+ onSale: false,
product: "Socks",
});