├── assets ├── images │ ├── socks_blue.jpg │ └── socks_green.jpg └── styles.css ├── index.html └── main.js /assets/images/socks_blue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Pop/Intro-to-Vue-3/8d5ddd851e0d29f9ba073bcc94a719307c0f5238/assets/images/socks_blue.jpg -------------------------------------------------------------------------------- /assets/images/socks_green.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Pop/Intro-to-Vue-3/8d5ddd851e0d29f9ba073bcc94a719307c0f5238/assets/images/socks_green.jpg -------------------------------------------------------------------------------- /assets/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f2f2f2; 3 | margin: 0px; 4 | font-family: tahoma; 5 | color: #282828; 6 | } 7 | 8 | .button { 9 | margin: 30px; 10 | background-color: #39495c; 11 | border-radius: 5px; 12 | font-size: 18px; 13 | width: 160px; 14 | height: 60px; 15 | color: white; 16 | padding: 20px; 17 | box-shadow: inset 0 -0.6em 1em -0.35em rgba(0, 0, 0, 0.17), 18 | inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.15), 19 | inset 0 0 0em 0.05em rgba(255, 255, 255, 0.12); 20 | text-align: center; 21 | cursor: pointer; 22 | } 23 | 24 | .cart { 25 | margin: 25px 100px; 26 | float: right; 27 | border: 1px solid #d8d8d8; 28 | padding: 10px 30px; 29 | background-color: white; 30 | -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 31 | -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 32 | box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57); 33 | } 34 | 35 | .color-circle { 36 | width: 50px; 37 | height: 50px; 38 | margin-top: 8px; 39 | border: 2px solid #d8d8d8; 40 | border-radius: 50%; 41 | } 42 | 43 | 44 | .disabledButton { 45 | background-color: #d8d8d8; 46 | cursor: not-allowed; 47 | } 48 | 49 | h1 { 50 | font-size: 50px; 51 | } 52 | 53 | h3 { 54 | font-size: 25px; 55 | } 56 | 57 | img { 58 | border: 2px solid #d8d8d8; 59 | width: 70%; 60 | margin: 40px; 61 | padding: 15px; 62 | -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 63 | -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 64 | box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57); 65 | } 66 | 67 | input { 68 | width: 100%; 69 | height: 40px; 70 | margin-bottom: 20px; 71 | } 72 | 73 | label { 74 | font-size: 20px; 75 | margin-bottom: 5px; 76 | } 77 | 78 | li { 79 | font-size: 18px; 80 | } 81 | 82 | .nav-bar { 83 | background: linear-gradient(-90deg, #84cf6a, #16c0b0); 84 | height: 60px; 85 | margin-bottom: 25px; 86 | -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 87 | -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 88 | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.57); 89 | } 90 | 91 | .out-of-stock-img { 92 | opacity:0.5 93 | } 94 | 95 | p { 96 | font-size: 22px; 97 | } 98 | 99 | .product-display { 100 | display: flex; 101 | flex-direction: column; 102 | padding: 1rem; 103 | } 104 | 105 | .product-container { 106 | display: flex; 107 | flex-direction: row; 108 | flex-wrap: wrap; 109 | } 110 | 111 | .product-image, 112 | .product-info { 113 | width: 50%; 114 | } 115 | 116 | .review-form { 117 | display: flex; 118 | flex-direction: column; 119 | width: 425px; 120 | padding: 20px; 121 | margin: 40px; 122 | border: 2px solid #d8d8d8; 123 | background-color: white; 124 | -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 125 | -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57); 126 | box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57); 127 | } 128 | 129 | .review-container { 130 | width: 425px; 131 | padding: 20px; 132 | background-color: white; 133 | -webkit-box-shadow: 0px 2px 20px -12px rgba(0, 0, 0, 0.57); 134 | -moz-box-shadow: 0px 2px 20px -12px rgba(0, 0, 0, 0.57); 135 | box-shadow: 2px 20px -12px rgba(0, 0, 0, 0.57); 136 | margin-left: 40px; 137 | border: 2px solid #d8d8d8; 138 | } 139 | 140 | .review-container li { 141 | margin-bottom: 30px; 142 | } 143 | 144 | .review-form .button { 145 | display: block; 146 | margin: 30px auto; 147 | } 148 | 149 | select { 150 | height: 40px; 151 | font-size: 20px; 152 | background-color: white; 153 | cursor: pointer; 154 | } 155 | 156 | textarea { 157 | width: 95%; 158 | height: 70px; 159 | padding: 10px; 160 | font-size: 20px; 161 | margin-bottom: 20px; 162 | } 163 | 164 | ul { 165 | list-style-type: none; 166 | } 167 | 168 | @media only screen and (max-width: 600px) { 169 | .container { 170 | flex-direction: column; 171 | } 172 | 173 | .product-image, 174 | .product-info { 175 | margin-left: 10px; 176 | width: 100%; 177 | } 178 | 179 | .review-form { 180 | width: 90%; 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Mastery 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Product goes here

14 |
15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const product = 'Socks' 2 | --------------------------------------------------------------------------------