Changed headers in About. Changed Contact.

Changed headers in About page to a serif italic font.

Removed the contact form in the header part. Created a design which
looks more like an actual businesscard.

Still to be done:
* Fix the design on mobile.
* Add vCard as download link

css/default.css

@@ -180,8 +180,9 @@ p.lead {
 }
 
 p.contacttext {
-   font: 19px/36px 'opensans-light', sans-serif;
-   color: #ebeeee;
+   font: 19px/19px 'opensans-light', sans-serif;
+   text-align: center;
+   color: #ffffff;
 }
 
 @media only screen and (min-width: 889px) {

css/layout.css

@@ -243,7 +243,7 @@ ul#nav li.current a { color: #11ABB0; }
 #about a:hover, #about a:focus { color: #11ABB0; }
 
 #about h2 {
-   font: 22px/30px 'opensans-bold', sans-serif;
+   font: 32px/30px 'librebaskerville-italic', serif;
    color: #fff;
    margin-bottom: 12px;
 }
@@ -253,7 +253,7 @@ ul#nav li.current a { color: #11ABB0; }
 }
 #about .profile-pic {
    position: relative;
-   width: 120px;
+   width: 160px;
    border-radius: 100%;
 }
 #about .contact-details { width: 41.66667%; }
@@ -877,29 +877,18 @@ call-to-action .button {
    padding-bottom: 70px;
    color: #636363;
 }
-#contact .section-head { margin-bottom: 42px; }
+#contact .section-head { margin-bottom: 20px; }
 
 #contact a, #contact a:visited  { color: #11ABB0; }
 #contact a:hover, #contact a:focus { color: #fff; }
 
 #contact h1 {
-   font: 18px/24px 'opensans-bold', sans-serif;
-   text-transform: uppercase;
+   font: 39px/50px 'librebaskerville-italic', serif;
    letter-spacing: 3px;
-   color: #EBEEEE;
-   margin-bottom: 6px;
+   text-align: center;
+   color: #FFFFFF;
 }
 #contact h1 span { display: none; }
-#contact h1:before {
-   font-family: 'Font Awesome 5 Free';
-   content: "\f2b9";
-	padding-right: 10px;
-	font-size: 90px;
-   line-height: 90px;
-   text-align: left;
-   float: left;
-   color: #ebeeee;
-}
 
 #contact h4 {
    font: 16px/24px 'opensans-bold', sans-serif;
@@ -912,108 +901,115 @@ call-to-action .button {
 }
 #contact .header-col { padding-top: 0px; }
 
-
-/* contact form */
-#contact form { margin-bottom: 30px; }
-#contact label {
-   font: 15px/24px 'opensans-bold', sans-serif;
-   margin: 12px 0;
-   color: #EBEEEE;
-	display: inline-block;
-	float: left;
-   width: 26%;
-}
-#contact input,
-#contact textarea,
-#contact select {
-   padding: 18px 20px;
-	color: #eee;
-	background: #373233;
-	margin-bottom: 42px;
-	border: 0;
-	outline: none;
-   font-size: 15px;
-   line-height: 20px;
-   width: 95%;
-}
-#contact input:focus,
-#contact textarea:focus,
-#contact select:focus {
-	color: #fff;
-	background-color: #11ABB0;
-}
-#contact button.submit {
-	text-transform: uppercase;
-	letter-spacing: 3px;
-	color:#fff;
-   background: #0D0D0D;
-	border: none;
-   cursor: pointer;
-   height: auto;
+#contact  li { 
+   position: relative; 
+   font:22px/1.1em 'hackregular', monospace;
+   vertical-align: middle;
+   text-align: right;
    display: inline-block;
-	border-radius: 3px;
-   margin-left: 0%;
-}
-#contact button.submit:hover {
-	color: #0D0D0D;
-	background: #fff;
-}
-#contact span.required {
-	color: #11ABB0;
-	font-size: 13px;
-}
-#message-warning, #message-success {
-   display: none;
-	background: #0F0F0F;
-	padding: 24px 24px;
-	margin-bottom: 36px;
-   width: 100%;
-}
-#message-warning { color: #D72828; }
-#message-success { color: #11ABB0; }
 
-#message-warning i,
-#message-success i {
-   margin-right: 10px;
 }
-#image-loader {
-   display: none;
+
+#contact  ul { 
+    margin-top: 70px;
+    margin-left: 20px;
+    margin-bottom: 30px;
+
+}
+
+#row-businesscard {
+    display: flex;
+}
+
+#contact .profile-pic {
+   display: block;
+   margin: 50px auto 0 auto;
    position: relative;
-   left: 18px;
-   top: 17px;
+   text-align: center;
+   width: 180px;
+   border-radius: 100%;
 }
 
-.contact-detail-wrapper {
-   padding-top: 10px;
+#contact .name {
+   font: 28px/0px 'librebaskerville-italic', serif;
+   text-align: center;
+   color: #0F0F0F;
+   margin-top: 35px;
+}
+
+
+#contact .contact-right {
+   border-radius: 0px 10px 10px 0px;
+   background-color: #0F0F0F;
+}
+
+#contact .contact-left {
+   border-radius: 10px 0px 0px 10px;
+   background-color: #EBEEEE;
+}
+
+#contact-social-list > li {
+    margin: 0px 10px;
+}
+#contact-social-list {
+    text-align: center;
+    color: #0F0F0F;
+} 
+#contact-social-list a {
+    color: #0F0F0F;
+} 
+#contact-social-list a:visited {
+    color: #0F0F0F;
+} 
+#contact-social-list a:hover {
+    color: #11ABB0;
+} 
+
+#contact .businesscard {
+   margin-top: 30px;
 }
 
 .contact-column-wrapper {
   display: inline-block;
 }
 
+
 #contact-fa {
-   font-size: 25px;
+   font-size: 28px;
+   vertical-align: top;
    float: left;
-   margin-top: 3px;
 }
 
 #contact-phone {
-   font-size: 20px;
+   margin-top: 3px;
    float: left;
-   margin-left: 7px;
+   margin-left: 12px;
 }
 
 #contact-email {
-   font-size: 20px;
+   margin-top: 3px;
+   float: left;
+   margin-left: 12px;
+}
+
+#contact-riot {
+   margin-top: 3px;
+   float: left;
+   margin-left: 12px;
+}
+
+#contact-riot-logo {
+   width: 30px;
+   height: 30px;
+   background: #0F0F0F url(../images/riot.svg);
+   vertical-align: top;
+   margin-left: -5px;
    float: left;
-   margin-left: 7px;
 }
 
 #contact-pgp {
    float: left;
-   margin-left: 7px;
-   font:20px/1.1em 'hackregular', monospace;
-   margin-top: -4px;
+   margin-left: 12px;
 }
 
 /* Fixes for contact details really small screens */