finished basic contacts page

app/assets/stylesheets/application.scss

@@ -14,3 +14,7 @@
 @import "layouts/index";
 @import "components/index";
 @import "pages/index";
+
+body {
+  background-color: $background;
+}

app/assets/stylesheets/config/_colors.scss

@@ -14,3 +14,5 @@ $secondary: #5ED17E;
 $background: #33333D;
 $card-background: #464650;
 $navbar-background: #1F1F29;
+$text-darker: #CDCDCD;
+$icon: #EDECEC;

app/assets/stylesheets/layouts/_contacts.scss

@@ -1,17 +0,0 @@
-.card {
-  display: flex;
-  justify-content: space-between;
-
-  background-color: $card-background;
-  .profile {
-
-  }
-  .call {
-    transform: scaleX(-1);
-    -moz-transform: scaleX(-1);
-    -webkit-transform: scaleX(-1);
-    -ms-transform: scaleX(-1);
-  }
-
-}
-

app/assets/stylesheets/pages/_contacts.scss

@@ -0,0 +1,121 @@
+a:hover {
+  text-decoration: none;
+}
+
+.card {
+  display: flex;
+  justify-content: space-between;
+  background: $card-background;
+  align-items: center;
+  margin-bottom: 10px;
+
+  border-radius: 5px;
+  box-shadow: 1px 1px 15px 1px rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    box-shadow: inset 0px 0px 0px 2px $primary;
+  }
+
+  .info {
+    display: flex;
+    align-items: center;
+    .text {
+      p {
+        padding: 0;
+        margin: 0;
+      }
+      .darker {
+        color: $text-darker;
+      }
+    }
+  }
+  .profile {
+    margin-left: 15px;
+    margin-right: 15px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    img {
+      width: 50px;
+    }
+  }
+
+  .call {
+    margin-left: 20px;
+    margin-right: 20px;
+    transform: scaleX(-1);
+    -moz-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    -ms-transform: scaleX(-1);
+    i {
+      color: $icon;
+      font-size: 25px;
+    }
+  }
+
+}
+
+.video-feed {
+  padding-top: 67px;
+  padding-left: 50px;
+}
+
+.video-content {
+  height: 485px;
+  background-color: black;
+}
+
+.half {
+  width: 50%;
+}
+
+.text-color {
+  color: white;
+}
+
+.contacts-container {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-header {
+  border-bottom: 0px;
+  i {
+    font-size: 50px;
+  }
+}
+
+.modal-color {
+  background-color: $card-background;
+}
+
+.vertical-alignment-helper {
+    display:table;
+    height: 100%;
+    width: 100%;
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
+}
+.modal-content {
+    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
+    width:35%;
+    height:inherit;
+    /* To center horizontally */
+    margin: 0 auto;
+}
+
+.modal-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

app/assets/stylesheets/pages/_index.scss

@@ -1,2 +1,3 @@
 // Import page-specific CSS files here.
 @import "home";
+@import "contacts"