Kickstarter-Success · Cireimu · Sep 27, 2019 · Sep 27, 2019
diff --git a/README.md b/README.md
@@ -1 +1,13 @@
-# Web-UI
+# Web-UI
+
+This is the marketing page for KickStarter Success and consist of a the Landing(Home) and the Meet The Team(Team) page with a link to the react  through the login button. 
+
+## Less 
+Less is being used for styling in which everything is compiled into the index.css file by importing all less files into the index.less.
+
+Navigation, footer, and global are in their own less files and are used accross the site.
+
+### Variables
+
+Variables reside within their own less file titled variables.less
+
diff --git a/about.html b/about.html
@@ -41,7 +41,7 @@ <h1>Meet The Team</h1>
             <div class="team-profiles">
                 <div class="team-profile">
                     <div class="team-profile-img">
-                        <img src="img/Jordan-Ireland.jpg" alt="A picture of a DE">
+                        <img src="img/Jordan Ireland.jpg" alt="A picture of a DE">
                     </div>
                     <div class="team-role">
                         <ul>

diff --git a/css/index.css b/css/index.css
@@ -184,6 +184,12 @@ h3 {
     margin-left: 0;
   }
 }
+@media (max-width:530px) {
+  .navigation .kickstarter-success-logo {
+    margin-left: -1rem;
+    width: 100%;
+  }
+}
 .navigation .kickstarter-success-logo img {
   width: 6rem;
   margin: auto;
@@ -192,15 +198,21 @@ h3 {
 }
 @media (max-width:530px) {
   .navigation .kickstarter-success-logo img {
-    width: 12%;
+    width: 5rem;
     align-content: center;
-    margin-left: 6rem;
+    margin-left: auto;
   }
 }
 .navigation .kickstarter-success-logo p {
   font-size: 3rem;
   font-weight: 400;
 }
+@media (max-width:530px) {
+  .navigation .kickstarter-success-logo p {
+    font-size: 3rem;
+    margin-left: 1rem;
+  }
+}
 .navigation nav {
   margin: auto;
   display: flex;
@@ -231,7 +243,6 @@ h3 {
     text-align: center;
     align-items: center;
     font-size: 3rem;
-    margin-left: 3rem;
   }
 }
 footer {
@@ -326,16 +337,15 @@ footer {
 .intro-section img {
   width: 50%;
 }
-@media (max-width: 1550px) {
+@media screen and (max-width: 1550px) and (min-width: 531px) {
   .intro-section img {
     width: 70%;
-    padding-left: 12rem;
+    padding-left: 15rem;
   }
 }
 @media (max-width:530px) {
   .intro-section img {
-    width: 100vw;
-    padding-bottom: 5rem;
+    width: 100%;
   }
 }
 .body-content {
@@ -763,14 +773,10 @@ footer {
   background: linear-gradient(90.4deg, #74d5ab 0.21%, #abd7c4 99.73%);
   padding-bottom: 10rem;
 }
-@media (max-width: 1550px) {
-  .about-upper-portion {
-    padding-bottom: 0rem;
-  }
-}
 @media (max-width:530px) {
   .about-upper-portion {
-    padding-bottom: 8rem;
+    padding-bottom: 4rem;
+    width: 100%;
   }
 }
 .about-upper-portion .about-us {
@@ -780,14 +786,10 @@ footer {
   margin: 0 auto;
   padding: 5rem;
 }
-@media (max-width: 1550px) {
-  .about-upper-portion .about-us {
-    padding: 5rem 0;
-  }
-}
 @media (max-width:530px) {
   .about-upper-portion .about-us {
     width: 100%;
+    padding: 4rem;
   }
 }
 .about-upper-portion .about-us .about-info {
@@ -806,7 +808,7 @@ footer {
 }
 @media (max-width:530px) {
   .about-upper-portion .about-us .about-info h1 {
-    font-size: 5rem;
+    font-size: 4rem;
     padding-top: 2rem;
   }
 }
@@ -817,7 +819,7 @@ footer {
 }
 @media (max-width:530px) {
   .about-upper-portion .about-us .about-info p {
-    font-size: 2.5rem;
+    font-size: 2rem;
   }
 }
 .meet-the-team {

diff --git a/img/Jordan Ireland.jpg b/img/Jordan Ireland.jpg
diff --git a/img/jordan-ireland.jpg b/img/jordan-ireland.jpg
diff --git a/less/about.less b/less/about.less
@@ -0,0 +1,122 @@
+
+.about-upper-portion{
+    background: linear-gradient(90.4deg, #74d5ab 0.21%, #abd7c4 99.73%);
+    padding-bottom: 10rem;
+
+    @media @mobile{
+        padding-bottom: 4rem;
+        width: 100%;
+    }
+    .about-us{
+        display:flex;
+        flex-flow: column wrap;
+        align-items: center;
+        margin:0 auto;
+        padding: 5rem;
+
+        @media @mobile{
+            width: 100%;
+            padding: 4rem;
+        }
+        .about-info{
+            width: 40%;
+            line-height: 5rem;
+            @media @mobile{
+                width: 100%;
+            }
+            h1{
+                text-align: center;
+                font-size: 6rem;
+                padding-bottom: 2rem;
+                @media @mobile{
+                    font-size: 4rem;
+                    padding-top: 2rem;
+                }
+            }
+
+            p{
+                font-size: 3rem;
+                text-align: center;
+                font-weight: 400;
+
+                @media @mobile{
+                    font-size:2rem;
+                }
+            }
+        }
+    }
+}
+
+.meet-the-team{
+    margin: 0 auto;
+    display:flex;
+    flex-flow: column wrap;
+    align-items: center;
+    padding: 2rem 0;
+    font-size: 3rem;
+
+    @media @mobile{
+        padding: 3rem;
+    }
+    h2{
+        text-align: center;
+        font-size: 2.5rem;
+    }
+}
+
+.team-profiles{
+    display: flex;
+    flex-wrap: wrap;
+    width: 80%;
+    padding: 1rem 0;
+
+
+
+
+    .team-profile{
+        width: 30vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        flex: 1 1 0;
+        padding: 8rem;
+        border-radius: 6px;
+        background: whitesmoke;
+        color: #6e6e6e;
+        box-shadow: 2px 2px 2px rgba(0,0,0,0.85);
+        margin: 1rem;
+        @media @mobile{
+            padding: 4rem;
+        }
+
+        .team-profile-img{
+            width: 150px;
+            height: 150px;
+            justify-self: center;
+            border-radius: 50%;
+            box-shadow: 2px 2px 2px #a7a6a6;
+
+            img{
+                    width: 100%;
+                    border-radius: 50%;
+                    align-self: center;
+                    filter: grayscale(40%);
+            }
+        }
+
+        .team-role{
+            padding: 2rem;
+            text-align: center;
+            font-size: 1.5rem;
+        }
+        .github-link{
+            align-self: center;
+            i{
+                font-size: 3rem;
+                color: @main-bg-color;
+            }
+        }
+        }
+
+    }
diff --git a/less/home-page.less b/less/home-page.less
@@ -34,7 +34,7 @@
         justify-content: space-between;
 
 
-        @media @laptop{
+        @media @laptop {
             flex-flow: row nowrap;
             width: 30%;
         }
@@ -95,15 +95,13 @@
         width: 50%;
 
 
-        @media @laptop{
+        @media screen and (max-width: 1550px) and (min-width: 531px) {
             width: 70%;
-            padding-left: 12rem;
+            padding-left: 15rem;
         }
 
         @media @mobile{
-            width: 100vw;
-
-            padding-bottom: 5rem;
+            width: 100%;
         }
     }
 }

diff --git a/less/navigation.less b/less/navigation.less
@@ -21,8 +21,14 @@
         margin-left: 5rem;
 
         @media @laptop{
-         margin-left: 0; 
+            margin-left: 0; 
+
+        }
 
+        @media @mobile{
+            margin-left: -1rem;
+            width: 100%;
+
         }
 
         img{
@@ -32,16 +38,21 @@
             font-size: 4rem;
 
             @media @mobile{
-                width: 12%;
+                width: 5rem;
                 align-content: center;
-                margin-left: 6rem;
+               margin-left: auto;
+
             }
         }
 
         p{
             font-size: 3rem;
             font-weight: 400;
 
+            @media @mobile{
+                font-size: 3rem;
+                margin-left: 1rem;
+            }
         }
     }
 
@@ -61,7 +72,7 @@
             width: 100%;
             text-align: center;
             justify-content: space-evenly;
-            
+
 
         }
 
@@ -78,7 +89,7 @@
                 text-align: center;
                 align-items: center;
                 font-size: 3rem;
-                margin-left: 3rem;
+
             }
         }
     }

diff --git a/less/variables.less b/less/variables.less
@@ -23,6 +23,7 @@
 @mobile: ~'(max-width:530px)';
 
 @laptop: ~'(max-width: 1550px)';
+
 
 //Fonts
 @lato: 'Lato', sans-serif;