Merge pull request #116 from TAS-scorchedshadow/landing_page

Fixed some margin issues on landing page
TAS-scorchedshadow · Aug 20, 2023 · 01ac017 · 01ac017
2 parents 49f7b9f + 70817ac
commit 01ac017
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 57 deletions.
diff --git a/app/static/css/welcome/landing.css b/app/static/css/welcome/landing.css
@@ -5,7 +5,7 @@ body {
 
 .hero {
     background-image: linear-gradient(to right, #80d5f6, #4491e5);
-    height: 500px;
+    height: 35rem;
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -59,52 +59,6 @@ body {
     height: 120px;
 }
 
-/*@media (min-width: 900px) {*/
-/*    .hero-title {*/
-/*        margin-top: 10rem;*/
-/*    }*/
-/*    .hero-text {*/
-/*        margin-top: 3rem;*/
-/*    }*/
-/*    .hero-carousel {*/
-/*        min-width: 600px;*/
-/*        margin-right: 3rem;*/
-/*        margin-top: 3rem;*/
-/*    }*/
-/*}*/
-
-
-.carousel-inner {
-    border-radius: 30px;
-    box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
-    filter: drop-shadow(0 5px 8px #777777);
-    margin-right: 30px;
-}
-
-.carousel-inner > .carousel-item {
-    height: 250px;
-    border-radius: 30px;
-}
-
-.carousel {
-    margin-right: 2rem;
-    max-width: 800px;
-}
-
-@media (max-width: 900px) {
-
-    .carousel {
-        width: 80%;
-        margin: auto;
-        margin-top: 2rem;
-    }
-
-    .carousel-inner > .carousel-item {
-        height: 8rem;
-        border-radius: 30px;
-    }
-}
-
 .hero-btn {
     align-items: center;
     background-color: #0276FF;
@@ -132,7 +86,8 @@ body {
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 100px;
-    margin-top: 10px;
+    margin-top: 2rem;
+    font-size: 1.5rem;
 }
 
 .hero-btn:active {
@@ -143,6 +98,37 @@ body {
   background-color: #1C84FF;
 }
 
+.carousel-inner {
+    border-radius: 30px;
+    box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
+    filter: drop-shadow(0 5px 8px #777777);
+    margin-right: 30px;
+}
+
+.carousel-inner > .carousel-item {
+    height: 250px;
+    border-radius: 30px;
+}
+
+.carousel {
+    margin-right: 2rem;
+    max-width: 800px;
+}
+
+@media (max-width: 900px) {
+
+    .carousel {
+        width: 80%;
+        margin: auto;
+        margin-top: 2rem;
+    }
+
+    .carousel-inner > .carousel-item {
+        height: 8rem;
+        border-radius: 30px;
+    }
+}
+
 span.carousel-control-prev-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2ffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
 }
@@ -166,7 +152,7 @@ span.carousel-control-next-icon {
 }
 
 .get-started-btn {
-    transform: scale(130%);
+    font-size: 1.5rem;
 }
 
 .proud-partners {
@@ -183,7 +169,6 @@ span.carousel-control-next-icon {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    margin-top: 4rem;
     margin-bottom: 1rem;
 }
 
@@ -193,6 +178,7 @@ span.carousel-control-next-icon {
 
 .partner {
     display: flex;
+    transform: scale(80%);
 }
 
 .wave {
@@ -249,6 +235,10 @@ section {
     margin: 0 10%;
 }
 
+.hero-section {
+    height: 35rem;
+}
+
 .secondary-section .display-img {
     filter: drop-shadow(0 2px 0.3rem #858585);
 }
@@ -300,6 +290,16 @@ section {
         margin-left: 2rem;
         margin-right: 2rem;
     }
+
+    .showcase-top {
+        margin-top: 10% !important;
+        margin-bottom: -10%;
+    }
+
+    .showcase h2 {
+        margin-top: 0%;
+    }
+
     .showcase-item {
         height: 50%;
         margin-top: 0;

diff --git a/app/templates/welcome/landing_page.html b/app/templates/welcome/landing_page.html
@@ -84,7 +84,7 @@
 {#            </div>#}
 {#        </div>#}
 {#    </section>#}
-    <section>
+    <section class="hero-section">
         <div class="hero">
             <div class="hero-title">
                 <img class="hero-logo" src="../../static/images/riflelytics_logo.svg" alt="logo">
@@ -93,30 +93,30 @@ <h1>Riflelytics</h1>
             <div class="hero-subtitle">
                     Supporting Growing Rifle Shooters
             </div>
-            <a href="/login"><button class="hero-btn">Member Log In</button></a>
-        </div>
+            <a href="/login"><button class="hero-btn">Member Login</button></a>
             <div class="wave">
                 <svg class="wave-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                     <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
                     <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" opacity=".5" class="shape-fill"></path>
                     <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
                 </svg>
             </div>
+        </div>
     </section>
     <section class="primary-section">
         <div class="row showcase">
-            <div class="col-md-6 col-sm-12 showcase-item">
+            <div class="col-md-6 col-sm-12 showcase-item showcase-top">
                 <img src="../../static/images/stages.png" class="display-img">
             </div>
-            <div class="col-md-6 col-sm-12 showcase-item">
+            <div class="col-md-6 col-sm-12 showcase-item showcase-bot">
                 <h2>Catalogue your shoots</h2>
                 <p>Stores your past shooting history all in one place for easy viewing and review!</p>
             </div>
         </div>
     </section>
     <section class="secondary-section">
         <div class="row showcase">
-            <div class="col-md-6 col-sm-12 showcase-item">
+            <div class="col-md-6 col-sm-12 showcase-item showcase-top">
                 <h2>Individual Profile Pages</h2>
                 <p>Showcase your own skills, but also watch how others have been performing.</p>
             </div>
@@ -127,7 +127,7 @@ <h2>Individual Profile Pages</h2>
     </section>
     <section class="primary-section">
         <div class="row showcase">
-            <div class="col-md-6 col-sm-12 showcase-item">
+            <div class="col-md-6 col-sm-12 showcase-item showcase-top">
                 <img src="../../static/images/display_visualisations.png" class="display-img">
             </div>
             <div class="col-md-6 col-sm-12 showcase-item">