style fixes on landing page

Resources/landing-page/css/custom.css

@@ -8,6 +8,17 @@
     }
   }
   
+@media (max-width: 768px) {
+    #mainNav, #mainNav.navbar-scrolled {
+        padding: 0 1rem 0 1rem !important;
+    }
+    .branding {
+        height: 40px !important;
+    }
+    #mainNav .navbar-nav .nav-item .nav-link{
+        padding-left: 1rem;
+    }
+}
   /* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
   @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
     #mainNav,
@@ -73,12 +84,20 @@
 #mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
     color: #12afa0;
   }
-  #mainNav .navbar-nav .nav-item .nav-link.active {
+#mainNav .navbar-nav .nav-item .nav-link.active {
     color: #12afa0 !important;
   }
 .navbar-light .navbar-toggler-icon {
     filter: invert(1);
 }
+.navbar-light .navbar-toggler {
+    color: rgba(0, 0, 0, 0.5);
+    border-color: rgb(255 255 255 / 10%);
+}
+
+.branding {
+    height: 55px;
+}
 
 .mfp-container {
     backdrop-filter: blur(10px);
@@ -166,28 +185,6 @@ header.masthead {
     margin: 0;
 }
 
-
-#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
-#portfolio .container-sm .portfolio-box .portfolio-box-caption,
-#portfolio .container-md .portfolio-box .portfolio-box-caption,
-#portfolio .container-lg .portfolio-box .portfolio-box-caption,
-#portfolio .container-xl .portfolio-box .portfolio-box-caption {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    bottom: 0;
-    text-align: center;
-    opacity: 0;
-    color: #fff;
-    background: transparent;
-    transition: opacity 0.25s ease;
-    text-align: center;
-}
-
 .bg-primary,
 .bg-dark {
     background: #2d2d2d;
@@ -241,46 +238,42 @@ p {
     font-weight: 500;
     line-height: 1.2;
 }
-@media (min-width: 992px) {
+/* @media (min-width: 992px) {
 .portfolio-box img {
     object-fit: cover;
-    width: 562.4px;
-    height: 295.56px;
  }
+} */
+
+/* EXAMPLE IMAGES*/
+#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.aquamarine-hover,
+#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.hotline-hover,
+#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.space-gray-hover,
+#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.organizr-dark-hover,
+#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.dark-hover,
+#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.plex-hover {
+    opacity: .9;
 }
 
-#portfolio .container-fluid .portfolio-box .portfolio-box-caption.aquamarine-hover:hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.aquamarine-hover {
     background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
-    opacity: .9;
-    width: 562.4px;
 }
 
-#portfolio .container-fluid .portfolio-box .portfolio-box-caption.hotline-hover:hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotline-hover {
     background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
-    opacity: .9;
-    width: 562.4px;
 }
 
-#portfolio .container-fluid .portfolio-box .portfolio-box-caption.space-gray-hover:hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.space-gray-hover {
     background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
-    opacity: .9;
-    width: 562.4px;
 }
 
-#portfolio .container-fluid .portfolio-box .portfolio-box-caption.organizr-dark-hover:hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-dark-hover {
     background: #1f1f1f;
-    opacity: .9;
-    width: 562.4px;
 }
 
-#portfolio .container-fluid .portfolio-box .portfolio-box-caption.dark-hover:hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dark-hover {
     background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
-    opacity: .9;
-    width: 562.4px;
 }
 
-#portfolio .container-fluid .portfolio-box .portfolio-box-caption.plex-hover:hover {
+#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover {
     background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
-    opacity: .9;
-    width: 562.4px;
 }

Resources/landing-page/css/styles.css

@@ -470,7 +470,7 @@ mark,
   color: #6c757d;
 }
 .blockquote-footer::before {
-  content: "— ";
+  content: "— ";
 }
 
 .img-fluid {
@@ -2443,32 +2443,32 @@ fieldset:disabled a.btn {
 
 .btn-primary {
   color: #fff;
-  background-color: #009688;
+  background-color: #f4623a;
-  border-color: #009688;
+  border-color: #f4623a;
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #12afa0;
+  background-color: #f24516;
-  border-color: #12afa0;
+  border-color: #ee3e0d;
 }
 .btn-primary:focus, .btn-primary.focus {
   color: #fff;
-  background-color: #12afa0;
+  background-color: #f24516;
-  border-color: #12afa0;
+  border-color: #ee3e0d;
-  box-shadow: 0 0 0 0.2rem #12afa080;
+  box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5);
 }
 .btn-primary.disabled, .btn-primary:disabled {
   color: #fff;
-  background-color: #009688;
+  background-color: #f4623a;
-  border-color: #009688;
+  border-color: #f4623a;
 }
 .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
   color: #fff;
-  background-color: #12afa0;
+  background-color: #ee3e0d;
-  border-color: #12afa0;
+  border-color: #e23a0d;
 }
 .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem #12afa080;
+  box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5);
 }
 
 .btn-secondary {
@@ -10105,12 +10105,12 @@ hr.light {
 header.masthead {
   padding-top: 10rem;
   padding-bottom: calc(10rem - 4.5rem);
-  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.404)  100%), url("../assets/img/slides/2.jpg");
+  background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../assets/img/bg-masthead.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-size: cover;
-} 
+}
 header.masthead h1 {
   font-size: 2.25rem;
 }

index.html

@@ -28,8 +28,8 @@
     <!-- Navigation-->
     <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
         <div class="container">
-            <a class="navbar-brand js-scroll-trigger" href="#page-top"><img
+            <a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="branding"
-                    src="Resources/landing-page/assets/img/themepark-logo.png" height="55px" alt=""></a>
+                    src="Resources/landing-page/assets/img/themepark-logo.png" alt=""></a>
             <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                 data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                 aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
@@ -357,98 +357,67 @@
             </div>
         </div>
     </section>
-    <!-- Portfolio-->
+<!-- Portfolio-->
-    <div id="portfolio" class="theme-overview">
+<div id="portfolio" class="theme-overview">
-        <div class="container-fluid p-0">
+    <div class="container-fluid p-0">
-            <div class="row no-gutters theme-overview">
+        <div class="row no-gutters">
-                <div class="col-lg-4 col-sm-6 p-1">
+            <div class="col-lg-4 col-sm-6">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
+                <a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.png" alt="..." />
+                    <img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
-                        <div class="portfolio-box-caption aquamarine-hover">
+                    <div class="portfolio-box-caption aquamarine-hover">
-                            <div class="project-category text-white-50">Theme</div>
+                        <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Aquamarine</div>
+                        <div class="project-name">Aquamarine</div>
-                        </div>
+                    </div>
-                    </a>
+                </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.png" alt="..." />
-                        <div class="portfolio-box-caption hotline-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Hotline</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.png" alt="..." />
-                        <div class="portfolio-box-caption space-gray-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Space Gray</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.png" alt="..." />
-                        <div class="portfolio-box-caption organizr-dark-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Organizr Dark</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.png" alt="..." />
-                        <div class="portfolio-box-caption dark-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Dark</div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6 p-1">
-                    <a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
-                        <img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.png" alt="..." />
-                        <div class="portfolio-box-caption p-3 plex-hover">
-                            <div class="project-category text-white-50">Theme</div>
-                            <div class="project-name">Plex</div>
-                        </div>
-                    </a>
-                </div>
             </div>
-        </div>
+            <div class="col-lg-4 col-sm-6">
-    </div>
+                <a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
-    <!-- Call to action-->
+                    <img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." />
-    <!-- <section class="page-section bg-dark text-white">
+                    <div class="portfolio-box-caption hotline-hover">
-        <div class="container text-center">
+                        <div class="project-category text-white-50">Theme</div>
-            <h2 class="mb-4">Free Download at Start Bootstrap!</h2>
+                        <div class="project-name">Hotline</div>
-            <a class="btn btn-light btn-xl" href="https://startbootstrap.com/theme/creative/">Download Now!</a>
+                    </div>
-        </div>
+                </a>
-    </section> -->
-    <!-- Contact-->
-    <!-- <section class="page-section" id="contact">
-        <div class="container">
-            <div class="row justify-content-center">
-                <div class="col-lg-8 text-center">
-                    <h2 class="mt-0">Let's Get In Touch!</h2>
-                    <hr class="divider my-4" />
-                    <p class="text-white-50 mb-5">Ready to start your next project with us? Give us a call or send us an
-                        email and we will get back to you as soon as possible!</p>
-                </div>
             </div>
-            <div class="row">
+            <div class="col-lg-4 col-sm-6">
-                <div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
+                <a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
-                    <i class="fas fa-phone fa-3x mb-3 text-white-50"></i>
+                    <img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." />
-                    <div>+1 (555) 123-4567</div>
+                    <div class="portfolio-box-caption space-gray-hover">
-                </div>
+                        <div class="project-category text-white-50">Theme</div>
-                <div class="col-lg-4 mr-auto text-center">
+                        <div class="project-name">Soace Gray</div>
-                    <i class="fas fa-envelope fa-3x mb-3 text-white-50"></i>
+                    </div>
-                    <!-- Make sure to change the email address in BOTH the anchor text and the link target below!-->
+                </a>
-    <!-- <a class="d-block" href="mailto:contact@yourwebsite.com">contact@yourwebsite.com</a>
+            </div>
-                </div>
+            <div class="col-lg-4 col-sm-6">
+                <a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
+                    <img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg" alt="..." />
+                    <div class="portfolio-box-caption organizr-dark-hover">
+                        <div class="project-category text-white-50">Theme</div>
+                        <div class="project-name">Organizr Dark</div>
+                    </div>
+                </a>
+            </div>
+            <div class="col-lg-4 col-sm-6">
+                <a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
+                    <img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." />
+                    <div class="portfolio-box-caption dark-hover">
+                        <div class="project-category text-white-50">Theme</div>
+                        <div class="project-name">Dark</div>
+                    </div>
+                </a>
+            </div>
+            <div class="col-lg-4 col-sm-6">
+                <a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
+                    <img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." />
+                    <div class="portfolio-box-caption p-3 plex-hover">
+                        <div class="project-category text-white-50">Theme</div>
+                        <div class="project-name">Plex</div>
+                    </div>
+                </a>
             </div>
         </div>
-    </section>  -->
+    </div>
+</div>
     <!-- Footer-->
     <footer class=" py-5">
         <div class="container">