Skip to content

Commit fa01b34

Browse files
sirchrissirchris
committed
Attribute Binding
1 parent c4bdede commit fa01b34

File tree

5 files changed

+105
-7
lines changed

5 files changed

+105
-7
lines changed

‎img/vmSocks-blue-onWhite.jpg

676 KB
Loading

‎img/vmSocks-green-onWhite.jpg

762 KB
Loading

‎index.html

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,24 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
77
<title>Document</title>
8+
9+
<link rel="stylesheet" href="./style.css" />
810
</head>
911

1012
<body>
1113
<div id="app">
12-
<div class="product-image">
13-
<img src="" />
14-
</div>
14+
<div class="product">
15+
<div class="product-image">
16+
<img :src="image" />
17+
</div>
18+
19+
<div class="product-info">
20+
<h1>{{ product }}</h1>
1521

16-
<div class="product-info">
17-
<h1>{{ product }}</h1>
22+
<a :href="link" target="_blank">More products like this</a>
1823

19-
<p>{{ description }}</p>
24+
<p>{{ description }}</p>
25+
</div>
2026
</div>
2127
</div>
2228

‎index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ var app = new Vue({
22
el: '#app',
33
data: {
44
product: 'Socks',
5-
description: 'A pair of warm, fuzzy socks'
5+
description: 'A pair of warm, fuzzy socks',
6+
image: './img/vmSocks-blue-onWhite.jpg',
7+
link:
8+
'https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks'
69
}
710
});

‎style.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
body {
2+
font-family: tahoma;
3+
color:#282828;
4+
margin: 0px;
5+
}
6+
7+
.nav-bar {
8+
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
9+
height: 60px;
10+
margin-bottom: 15px;
11+
}
12+
13+
.product {
14+
display: flex;
15+
flex-flow: wrap;
16+
padding: 1rem;
17+
}
18+
19+
img {
20+
border: 1px solid #d8d8d8;
21+
width: 70%;
22+
margin: 40px;
23+
box-shadow: 0px .5px 1px #d8d8d8;
24+
}
25+
26+
.product-image {
27+
width: 80%;
28+
}
29+
30+
.product-image,
31+
.product-info {
32+
margin-top: 10px;
33+
width: 50%;
34+
}
35+
36+
.color-box {
37+
width: 40px;
38+
height: 40px;
39+
margin-top: 5px;
40+
}
41+
42+
.cart {
43+
margin-right: 25px;
44+
float: right;
45+
border: 1px solid #d8d8d8;
46+
padding: 5px 20px;
47+
}
48+
49+
button {
50+
margin-top: 30px;
51+
border: none;
52+
background-color: #1E95EA;
53+
color: white;
54+
height: 40px;
55+
width: 100px;
56+
font-size: 14px;
57+
}
58+
59+
.disabledButton {
60+
background-color: #d8d8d8;
61+
}
62+
63+
.review-form {
64+
width: 400px;
65+
padding: 20px;
66+
margin: 40px;
67+
border: 1px solid #d8d8d8;
68+
}
69+
70+
input {
71+
width: 100%;
72+
height: 25px;
73+
margin-bottom: 20px;
74+
}
75+
76+
textarea {
77+
width: 100%;
78+
height: 60px;
79+
}
80+
81+
.tab {
82+
margin-left: 20px;
83+
cursor: pointer;
84+
}
85+
86+
.activeTab {
87+
color: #16C0B0;
88+
text-decoration: underline;
89+
}

0 commit comments

Comments
 (0)