added node live-server

app.js

@@ -2,21 +2,25 @@
 const Services = [
 
   {
+    image: "assets/header.jpg",
     name: "Service 1",
     servicepic: "",
     description: "This is a service description for service 1"
   },
   {
+    image: "assets/header.jpg",
     name: "Service 2",
     servicepic: "",
     description: "This is a service description for service 2"
   },
   {
+    image: "assets/header.jpg",
     name: "Service 3",
     servicepic: "",
     description: "This is a service description for service 3"
   },
   {
+    image: "assets/header.jpg",
     name: "Service 4",
     servicepic: "",
     description: "This is a service description for service 4"
@@ -29,7 +33,8 @@ function createServiceCard(Services){
 
   return `
     <article>
-      <h3>${Services.name}</h3>
+      <img src="${Services.image}">
+      <h5>${Services.name}</h5>
       <p>${Services.description}</p>
     </article>
   `;

css/styles.css

@@ -60,9 +60,34 @@ header div input{
   padding: 2em;
 }
 
-#sect_service{
-  text-align: center;
-  padding: 1em;
+/*Service Cards*/
+
+#sect_service h4{
+  text-align: center;  
+}
+
+article{
+  min-height: 300px;
+  max-width: 400px;
+  transition: box-shadow 400ms ease;
+}
+
+article:hover{
+  cursor: pointer;
+  box-shadow: 8px 12px 19px -5px rgba(0,0,0,0.1);
+}
+
+article img{
+  width: 100%;
+}
+
+article h5{
+  margin-top: 1em;  
+}
+
+article p{
+  font-weight: lighter;
+  font-size: .8em;
 }
 
 /* Map */