Homepage looking pretty good

Author: JayWelborn

myblog/home/static/home/css/home.css

@@ -122,7 +122,7 @@ Change color of gradient to match color scheme of site
 }
 
 .jumbotron-home .typed-wrapper {
-    min-height: 65px;
+    min-height: 75px;
 }
 
 .page-header {

myblog/home/static/home/css/index.css

@@ -7,9 +7,9 @@ nav.navbar.navbar-default {
 }
 
 .jumbotron {
-    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */         /* OLD - Firefox 19- (buggy but mostly works) */
-    display: -ms-flexbox;      /* TWEENER - IE 10 */     /* NEW - Chrome */
-    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -ms-flexbox; /* TWEENER - IE 10 */ /* NEW - Chrome */
+    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
@@ -33,7 +33,7 @@ nav.navbar.navbar-default {
 
 .jumbotron-home a {
     background-color: rgba(108, 31, 43, .94);
-    font-family: 'Ubuntu';
+    font-family: 'Ubuntu', sans-serif;
     font-weight: 600;
     font-size: 1.2em;
     color: #dadada;
@@ -60,27 +60,27 @@ nav.navbar.navbar-default {
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
 }
 
 .index-content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-flow: row wrap;
-        flex-flow: row wrap;
+    flex-flow: row wrap;
     -ms-flex-pack: distribute;
-        justify-content: space-around;
+    justify-content: space-around;
     -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
     width: 95%;
     max-width: 1080px;
     margin-left: auto;
     margin-right: auto;
-    padding-bottom: 80px;
-    padding-top: 80px;
+    padding-bottom: 30px;
+    padding-top: 30px;
 }
 
 .index-container .logo-container {
@@ -90,18 +90,18 @@ nav.navbar.navbar-default {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-flow: row wrap;
-        flex-flow: row wrap;
+    flex-flow: row wrap;
     -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
 }
 
 .index-container .index-logo {
-    max-width: 90px;
+    max-width: 120px;
     margin: 20px;
     -webkit-filter: drop-shadow(0px 0px 7px rgba(50, 50, 50, .6));
     filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="7" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(50,50,50,0.6)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
-    filter:         drop-shadow(0px 0px 7px rgba(50, 50, 50, .6));
+    filter: drop-shadow(0px 0px 7px rgba(50, 50, 50, .6));
 }
 
 .index-container .text-container {
@@ -119,13 +119,21 @@ nav.navbar.navbar-default {
     margin-bottom: .5em;
 }
 
+#my-work h1 {
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 600;
+    font-size: 4em;
+    margin-bottom: .5em;
+    text-align: center;
+}
+
 .index-container .text-container p {
     font-family: 'Lora', serif;
     font-style: italic;
     font-size: 1.5em;
 }
 
-#python-django hr, #bootstrap-github hr{
+#software-engineer hr {
     border-color: #666;
 }
 
@@ -145,3 +153,116 @@ nav.navbar.navbar-default {
     }
 
 }
+
+/* Slideshow container */
+.slideshow-container {
+    max-width: 1000px;
+    position: relative;
+    margin: auto;
+}
+
+/* Hide the images by default */
+.mySlides {
+    display: none;
+}
+
+.mySlides h3 {
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 600;
+    font-size: 2em;
+    margin-bottom: 0;
+}
+
+.mySlides p {
+    font-family: 'Lora', serif;
+    font-style: italic;
+    font-size: 1.5em;
+}
+
+/* Next & previous buttons */
+.prev, .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    margin-top: -22px;
+    padding: 16px;
+    color: #333;
+    font-weight: bold;
+    font-size: 18px;
+    transition: 0.6s ease;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+    right: 0;
+    border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover, .next:hover {
+    background-color: #dadada;
+}
+
+/* Caption text */
+.text {
+    color: #333;
+    background-color: #dadada;
+    font-size: 15px;
+    padding: 8px 12px;
+    width: 100%;
+    text-align: center;
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+    color: #f2f2f2;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+}
+
+/* The dots/bullets/indicators */
+.dot {
+    cursor: pointer;
+    height: 15px;
+    width: 15px;
+    margin: 0 2px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    transition: background-color 0.6s ease;
+}
+
+.active, .dot:hover {
+    background-color: #717171;
+}
+
+/* Fading animation */
+.fader {
+    -webkit-animation-name: fade;
+    -webkit-animation-duration: 1.5s;
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@-webkit-keyframes fade {
+    from {
+        opacity: .4
+    }
+    to {
+        opacity: 1
+    }
+}
+
+@keyframes fade {
+    from {
+        opacity: .4
+    }
+    to {
+        opacity: 1
+    }
+}