Changed column widths, added labels

pbx.html

@@ -22,14 +22,14 @@
     <script>
         $(document)
             .ready(function () {
-                $('.special.card .image').dimmer({
+                // $('.special.card .image').dimmer({
-                    on: 'hover'
+                //     on: 'hover'
-                });
+                // });
 
-                $('.card .dimmer')
+                // $('.card .dimmer')
-                    .dimmer({
+                //     .dimmer({
-                        on: 'hover'
+                //         on: 'hover'
-                    });
+                //     });
 
                 $('#numberofstaff').slider({
                     min: 1, max: 6,
@@ -191,7 +191,7 @@
         </div>
         <h4 class="ui dividing header">Handset options</h4>
         <p>Mix and match as you see fit!</p>
-        <div class="ui four stackable cards">
+        <div class="ui five stackable cards">
             <div class="ui card" ng-repeat="phone in options.phones">
                 <div class="image dimmable">
                     <div class="ui blurring inverted dimmer transition hidden" style="display: none;">
@@ -201,6 +201,9 @@
                             </div>
                         </div>
                     </div>
+                    <div class="ui {{phone.tag.color}} ribbon label" ng-if="phone.tag">
+                        <i class="{{phone.tag.icon}} icon"></i> {{phone.tag.text}}
+                      </div>
                     <img ng-src="{{phone.image}}">
                     <!-- <img src="https://placehold.co/600x400"> -->
                 </div>
@@ -226,9 +229,9 @@
         </div>
         <h4 class="ui dividing header">Accessories</h4>
         <p>Mix and match as you see fit!</p>
-        <div class="ui four stackable cards">
+        <div class="ui five stackable cards">
             <div class="ui card" ng-repeat="phone in options.accessories">
-                <div class="image dimmable">
+                <div class="image dimmable">                    
                     <div class="ui blurring inverted dimmer transition hidden" style="display: none;">
                         <div class="content">
                             <div class="center">
@@ -336,12 +339,14 @@
                 <div class="column">
                     <i class="huge hashtag icon"></i>
                     <h3 class="ui inverted header">Keep your numbers</h3>
-                    <p>We'll port your phone numbers across from your existing carriers to our platform to ensure you don't miss any calls.</p>
+                    <p>We'll port your phone numbers across from your existing carriers to our platform to ensure you
+                        don't miss any calls.</p>
                 </div>
                 <div class="column">
                     <i class="huge mobile alternate icon"></i>
                     <h3 class="ui inverted header">Mobile apps</h3>
-                    <p>For Android and iOS. Never miss a call - take and make calls from your office phone number when you're out and about. </p>
+                    <p>For Android and iOS. Never miss a call - take and make calls from your office phone number when
+                        you're out and about. </p>
                 </div>
                 <div class="column">
                     <i class="huge window restore outline icon"></i>
@@ -367,7 +372,8 @@
                 <div class="column">
                     <i class="huge dollar sign icon"></i>
                     <h3 class="ui inverted header">Cut your telco costs</h3>
-                    <p>Combine your individual phone systems across multiple sites into one. Get more features for less cost.</p>
+                    <p>Combine your individual phone systems across multiple sites into one. Get more features for less
+                        cost.</p>
                 </div>
                 <div class="column">
                     <i class="huge address card outline icon"></i>
@@ -386,6 +392,7 @@
             <div class="description">
                 <div class="ui header">Thanks for using our quote builder!</div>
                 <p>Please wait while we calculate your quote based on the options you've selected.</p>
+                <p>This is the part where we ask for the customer's details?</p>
                 <div class="ui blue indeterminate progress">
                     <div class="bar">
                         <div class="progress">Calculating...</div>

pbx.js

@@ -34,13 +34,13 @@ app.controller('PBX', function ($scope) {
         ],
         "phones": [
             {
-                "name": "Softphone only",
+                "name": "Softphone Only",
                 "tagline": "Use an app as your phone",
                 "description": "Use a powerful app as your office phone. For Windows, Mac, iOS and Android",
                 "image": "3cx-softphone.png"
             },
             {
-                "name": "Basic deskphone",
+                "name": "Basic Deskphone",
                 "tagline": "Fanvil X3S Lite",
                 "description": "A modern, Enterprise-ready phone",
                 "image": "x3slite.png"
@@ -49,7 +49,12 @@ app.controller('PBX', function ($scope) {
                 "name": "Standard Deskphone",
                 "tagline": "Fanvil X6U",
                 "description": "A high-end modern, Enterprise-ready phone",
-                "image": "x6u.png"
+                "image": "x6u.png",
+                "tag": {
+                    "color": "green",
+                    "icon": "thumbs up outline",
+                    "text": "Best value"
+                }
             },
             {
                 "name": "Advanced Deskphone",