Cleaned up default photos, sylized dark theme

css/style.css

@@ -9,12 +9,12 @@
 --------------------------------------------------------------*/
 body {
   background: #fff;
-  color: #666666;
+  color: #999;
   font-family: "Open Sans", sans-serif;
 }
 
 a {
-  color: #03C4EB;
+  color: #1a82d8;
   transition: 0.5s;
 }
 
@@ -75,14 +75,14 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .back-to-top:hover {
-  background: #03C4EB;
+  background: #1a82d8;
   color: #fff;
 }
 
 /*--------------------------------------------------------------
 # Welcome
 --------------------------------------------------------------*/
-#hero {
+#top {
   display: table;
   width: 100%;
   height: 100vh;
@@ -90,15 +90,15 @@ h1, h2, h3, h4, h5, h6 {
   background-size: cover;
 }
 
-#hero .hero-logo {
+#top .hero-logo {
   margin: 20px;
 }
 
-#hero .hero-logo img {
+#top .hero-logo img {
   max-width: 100%;
 }
 
-#hero .hero-container {
+#top .hero-container {
   background: rgba(0, 0, 0, 0.3);
   display: table-cell;
   margin: 0;
@@ -107,7 +107,7 @@ h1, h2, h3, h4, h5, h6 {
   vertical-align: middle;
 }
 
-#hero h1 {
+#top h1 {
   margin: 30px 0 10px 0;
   font-weight: 700;
   line-height: 48px;
@@ -116,33 +116,33 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 @media (max-width: 768px) {
-  #hero h1 {
+  #top h1 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
-#hero h2 {
+#top h2 {
   color: #999;
   margin-bottom: 50px;
 }
 
 @media (max-width: 768px) {
-  #hero h2 {
+  #top h2 {
     font-size: 24px;
     line-height: 26px;
     margin-bottom: 30px;
   }
-  #hero h2 .rotating {
+  #top h2 .rotating {
     display: block;
   }
 }
 
-#hero .rotating > .animated {
+#top .rotating > .animated {
   display: inline-block;
 }
 
-#hero .actions a {
+#top .actions a {
   font-family: "Raleway", sans-serif;
   text-transform: uppercase;
   font-weight: 500;
@@ -155,26 +155,26 @@ h1, h2, h3, h4, h5, h6 {
   margin: 10px;
 }
 
-#hero .btn-get-started {
-  background: #03C4EB;
-  border: 2px solid #03C4EB;
+#top .btn-get-started {
+  background: #1a82d8;
+  border: 2px solid #1a82d8;
   color: #fff;
 }
 
-#hero .btn-get-started:hover {
+#top .btn-get-started:hover {
   background: none;
   border: 2px solid #fff;
   color: #fff;
 }
 
-#hero .btn-services {
+#top .btn-services {
   border: 2px solid #fff;
   color: #fff;
 }
 
-#hero .btn-services:hover {
-  background: #03C4EB;
-  border: 2px solid #03C4EB;
+#top .btn-services:hover {
+  background: #1a82d8;
+  border: 2px solid #1a82d8;
 }
 
 /*--------------------------------------------------------------
@@ -311,7 +311,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .nav-menu a:hover, .nav-menu li:hover > a, .nav-menu .menu-active > a {
-  color: #03C4EB;
+  color: #1a82d8;
 }
 
 .nav-menu ul {
@@ -419,11 +419,11 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 #mobile-nav ul .menu-has-children i.fa-chevron-up {
-  color: #03C4EB;
+  color: #1a82d8;
 }
 
 #mobile-nav ul .menu-item-active {
-  color: #03C4EB;
+  color: #1a82d8;
 }
 
 #mobile-body-overly {
@@ -471,7 +471,7 @@ body.mobile-nav-active #mobile-nav-toggle {
 .section-title-divider {
   width: 50px;
   height: 3px;
-  background: #03C4EB;
+  background: #1a82d8;
   margin: 0 auto;
   margin-bottom: 20px;
 }
@@ -479,18 +479,10 @@ body.mobile-nav-active #mobile-nav-toggle {
 /* Get Started Section
 --------------------------------*/
 #about {
-  background-color: #111;
+  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url("../img/engine.jpg") fixed center center;
   padding: 80px 0;
 }
 
-#about .about-container {
-  background: url(../img/about-img.jpg) left top no-repeat;
-}
-
-#about .about-content {
-  background: #fff;
-}
-
 #about .about-title {
   color: #333;
   font-weight: 700;
@@ -508,7 +500,7 @@ body.mobile-nav-active #mobile-nav-toggle {
 /* Network Section
 --------------------------------*/
 #network {
-  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../img/circuit.jpg") fixed center center;
+  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("../img/datacenter.jpg") fixed center center;
   background-size: cover;
   padding: 60px 0 40px 0;
 }
@@ -519,11 +511,11 @@ body.mobile-nav-active #mobile-nav-toggle {
 
 #network .service-icon {
   float: left;
-  background: #03C4EB;
+  background: transparent;
   padding: 16px;
   border-radius: 50%;
   transition: 0.5s;
-  border: 1px solid #03C4EB;
+  border: 1px solid white;
 }
 
 #network .service-icon i {
@@ -532,11 +524,14 @@ body.mobile-nav-active #mobile-nav-toggle {
 }
 
 #network .service-item:hover .service-icon {
-  background: #fff;
+  border: 1px solid #1a82d8;
+  outline: 0;
+  color: white;
+  background-color: #1a82d8;
 }
 
 #network .service-item:hover .service-icon i {
-  color: #03C4EB;
+  color: white;
 }
 
 #network .service-title {
@@ -544,11 +539,11 @@ body.mobile-nav-active #mobile-nav-toggle {
   font-weight: 700;
   margin-bottom: 15px;
   text-transform: uppercase;
-  color: #111;
+  color: white;
 }
 
 #network .service-title a {
-  color: #111;
+  color: inherit;
 }
 
 #network .service-description {
@@ -568,9 +563,9 @@ body.mobile-nav-active #mobile-nav-toggle {
 /* status Section
 --------------------------------*/
 #status {
-  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/network.jpg) fixed center center;
+  background-color: #111;
   background-size: cover;
-  padding: 80px 0;
+  padding: 40px 0;
 }
 
 #status .status-title {
@@ -604,8 +599,8 @@ body.mobile-nav-active #mobile-nav-toggle {
 }
 
 #status .status-btn:hover {
-  background: #03C4EB;
-  border: 2px solid #03C4EB;
+  background: #1a82d8;
+  border: 2px solid #1a82d8;
 }
 
 /* Portfolio Section
@@ -699,7 +694,7 @@ body.mobile-nav-active #mobile-nav-toggle {
 
 #testimonials .profile h4 {
   font-weight: 700;
-  color: #03C4EB;
+  color: #1a82d8;
   margin-bottom: 5px;
 }
 
@@ -774,7 +769,7 @@ body.mobile-nav-active #mobile-nav-toggle {
 }
 
 #team .member .social a:hover {
-  color: #03C4EB;
+  color: #1a82d8;
 }
 
 #team .member .social i {
@@ -786,7 +781,7 @@ body.mobile-nav-active #mobile-nav-toggle {
 --------------------------------*/
 #contact {
   background: #111;
-  padding: 20px 0;
+  padding: 30px 0;
   text-align: center;
 }
 
@@ -794,7 +789,7 @@ body.mobile-nav-active #mobile-nav-toggle {
 # Footer
 --------------------------------------------------------------*/
 #footer {
-  background: #111;
+  background: black;
   padding: 30px 0;
   color: #fff;
 }
@@ -814,15 +809,15 @@ body.mobile-nav-active #mobile-nav-toggle {
 # Primary button
 --------------------------------------------------------------*/
 .btn-default {
-    border: 1px solid #2C9FFF;
-    color: #2C9FFF;
+    border: 1px solid white;
+    color: white;
     background-color: transparent;
 }
 
 .btn-default:hover,
 .btn-default:focus {
-    border: 1px solid #fff;
+    border: 1px solid #1a82d8;
     outline: 0;
-    color: #000;
-    background-color: #fff;
+    color: white;
+    background-color: #1a82d8;
 }

index.html

@@ -57,7 +57,7 @@
 <body>
   <div id="preloader"></div>
 
-  <section id="hero">
+  <section id="top">
     <div class="hero-container">
       <div class="wow fadeIn">
         <div class="hero-logo">
@@ -79,18 +79,17 @@
     <div class="container">
 
       <div id="logo" class="pull-left">
-        <a href="#hero"><img src="img/e-w.png" alt="ENPaul" title="" /></img></a>
+        <a href="#top"><img src="img/e-w.png" alt="ENPaul" title="" /></img></a>
       </div>
 
       <nav id="nav-menu-container">
         <ul class="nav-menu">
-          <li class="menu-active"><a href="#hero">Home</a></li>
           <li><a href="#about">About</a></li>
           <li><a href="#contact">Contact</a></li>
           <li class="menu-has-children"><a href="#network">Network</a>
             <ul>
               <li><a href="https://gitlab.enpaul.net/">GitLab</a></li>
-              <li><a href="https://storage.enpaul.net/">Web Storage</a></li>
+              <li><a href="https://storage.enpaul.net/">Cloud Storage</a></li>
               <li><a href="https://plex.enpaul.net/">Plex Media Server</a></li>
               <li><a href="https://docs.enpaul.net/vpn/overview/">VPN</a></li>
             </ul>
@@ -113,7 +112,22 @@
     </div>
     <div class="container about-container wow fadeInUp">
       <div class="row">
-        <div class="col-md-6 col-md-push-6 about-content">
+        <div class="col-md-6">
+          <h2 class="about-title">adfasdfWe provide great services and ideass</h2>
+          <p class="about-text">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+            in reprehenderit in voluptate
+          </p>
+          <p class="about-text">
+            Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+            id est laborum
+          </p>
+          <p class="about-text">
+            Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+            id est laborum
+          </p>
+        </div>
+        <div class="col-md-6 col-md-push-6">
           <h2 class="about-title">We provide great services and ideass</h2>
           <p class="about-text">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
@@ -138,22 +152,14 @@
         <div class="col-md-12">
           <h3 class="section-title">Contact Me</h3>
           <div class="section-title-divider"></div>
+          <p class="section-description">Send me an email at <a href="mailto:enpaul@enpaul.net">enpaul@enpaul.net</a> or feel free to <a href="https://download.enpaul.net/enpaul-resume.pdf" target="_blank">download my résumé</a>.</p>
           <ul class="list-inline">
-            <li>
-              <a href="mailto:enpaul@enpaul.net"><span class="hb hb-sm"><i class="fa fa-envelope-o"></i></span></a>
-            </li>
-            <li>
-              <a target="_blank" href="https://twitter.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-twitter"></i></span></a>
-            </li>
-            <li>
-              <a target="_blank" href="https://plus.google.com/+EthanPaul42"><span class="hb hb-sm"><i class="fa fa-google-plus"></i></span></a>
-            </li>
-            <li>
-              <a target="_blank" href="https://www.linkedin.com/in/enpaul"><span class="hb hb-sm"><i class="fa fa-linkedin"></i></span></a>
-            </li>
-            <li>
-              <a target="_blank" href="https://www.instagram.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-instagram"></i></span></a>
-            </li>
+            <!--<li><a href="mailto:enpaul@enpaul.net"><span class="hb hb-sm"><i class="fa fa-envelope-o"></i></span></a></li>-->
+            <li><a target="_blank" href="https://twitter.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-twitter"></i></span></a></li>
+            <li><a target="_blank" href="https://plus.google.com/+EthanPaul42"><span class="hb hb-sm"><i class="fa fa-google-plus"></i></span></a></li>
+            <li><a target="_blank" href="https://www.linkedin.com/in/enpaul"><span class="hb hb-sm"><i class="fa fa-linkedin"></i></span></a></li>
+            <!--<li><a target="_blank" href="https://www.facebook.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-facebook"></i></span></a></li>-->
+            <li><a target="_blank" href="https://www.instagram.com/theenpaul"><span class="hb hb-sm"><i class="fa fa-instagram"></i></span></a></li>
           </ul>
         </div>
       </div>
@@ -188,6 +194,15 @@
             <a class=" btn btn-default" href="https://docs.enpaul.net/vpn/connect/"><i class="fa fa-book"></i>&nbsp;Connect</a>
           </div>
         </div>
+        <div class="col-md-4 service-item">
+          <a href="https://storage.enpaul.net/"><div class="service-icon"><i class="fa fa-cloud"></i></div></a>
+          <h4 class="service-title"><a href="https://storage.enpaul.net/">Cloud Storage</a></h4>
+          <p class="service-description">Local cloud storage allows for secure storage of user data. Online access is provided by the <a href="https://github.com/misterunknown/ifm" target="_blank">Improved File Manager</a>.</p>
+          <div class="service-link">
+            <a class=" btn btn-default" href="https://docs.enpaul.net/storage/overview/"><i class="fa fa-book"></i>&nbsp;Docs</a>
+            <a class=" btn btn-default" href="https://storage.enpaul.net/"><i class="fa fa-chevron-right"></i>&nbsp;Storage</a>
+          </div>
+        </div>
         <div class="col-md-4 service-item">
           <a href="https://gitlab.enpaul.net/"><div class="service-icon"><i class="fa fa-gitlab"></i></div></a>
           <h4 class="service-title"><a href="https://gitlab.enpaul.net/">GitLab</a></h4>
@@ -206,21 +221,12 @@
             <a class=" btn btn-default" href="https://plex.enpaul.net/"><i class="fa fa-chevron-right"></i>&nbsp;Plex</a>
           </div>
         </div>
-        <div class="col-md-4 service-item">
-          <a href="https://storage.enpaul.net/"><div class="service-icon"><i class="fa fa-cloud"></i></div></a>
-          <h4 class="service-title"><a href="https://storage.enpaul.net/">Cloud Storage</a></h4>
-          <p class="service-description">Local cloud storage allows for secure storage of user data. Online access is provided by the <a href="https://github.com/misterunknown/ifm" target="_blank">Improved File Manager</a>.</p>
-          <div class="service-link">
-            <a class=" btn btn-default" href="https://docs.enpaul.net/storage/overview/"><i class="fa fa-book"></i>&nbsp;Docs</a>
-            <a class=" btn btn-default" href="https://storage.enpaul.net/"><i class="fa fa-chevron-right"></i>&nbsp;Storage</a>
-          </div>
-        </div>
         <div class="col-md-4 service-item">
           <a href="https://docs.enpaul.net/"><div class="service-icon"><i class="fa fa-book"></i></div></a>
           <h4 class="service-title"><a href="https://docs.enpaul.net/">Documentation</a></h4>
           <p class="service-description">Any system is only as good as its documentation. The docs, powered by <a href="http://www.mkdocs.org/" target="_blank">MkDocs</a>, are constantly being updated.</p>
           <div class="service-link">
-            <a class=" btn btn-default" href="https://docs.enpaul.net/docs/overview/"><i class="fa fa-book"></i>&nbsp;Docs (Meta)</a>
+            <a class=" btn btn-default" href="https://docs.enpaul.net/docs-meta/overview/"><i class="fa fa-book"></i>&nbsp;Meta Docs</a>
             <a class=" btn btn-default" href="https://docs.enpaul.net/"><i class="fa fa-chevron-right"></i>&nbsp;Docs</a>
           </div>
         </div>