Mobile view enhanced

Author: ggsingla

Agency Page/Styles/style.css

@@ -250,6 +250,17 @@ main {
   #burger {
     display: flex;
   }
+  #team.show-more {
+    max-height: 40em;
+    overflow: hidden;
+    mask-image: linear-gradient(180deg, white, white, transparent);
+    -webkit-mask-image: linear-gradient(180deg, white, white, transparent);
+  }
+  .container[data-section='team'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
 /* Hero Section */
 #hero {
@@ -312,12 +323,32 @@ main {
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 4em;
   place-items: center;
+  transition: all 300ms ease-in;
 }
 #team .team-member {
   display: flex;
   align-items: center;
   gap: 2em;
 }
+
+#show-more {
+  display: block;
+  background-color: white;
+  color: var(--clr-accent);
+  border: 2px solid var(--clr-accent);
+  margin-block: -1.25em 1.5em;
+}
+#show-more:hover {
+  background-color: var(--clr-accent);
+  color: white;
+}
+
+@media screen and (min-width: 768px) {
+  #show-more {
+    display: none;
+  }
+}
+
 .team-member img {
   border-radius: 50%;
   height: 5em;

Agency Page/app.js

@@ -22,7 +22,9 @@ for (let i = 1; i <= 12; i++) {
   client.alt = `Client ${i}`
   clients.appendChild(client)
 }
+// Populating the Team Section
 let i = 1
+
 for (const key in teamNames) {
   if (Object.hasOwnProperty.call(teamNames, key)) {
     const el = teamNames[key]
@@ -42,3 +44,16 @@ const navMenu = (e) => {
     e.classList.toggle('fix')
   })
 }
+
+// Show more in the team section
+
+const showMore = document.getElementById('show-more')
+
+showMore.addEventListener('click', () => {
+  team.classList.toggle('show-more')
+  if (showMore.textContent == 'Show More') {
+    showMore.innerText = 'Show Less'
+  } else {
+    showMore.innerText = 'Show More'
+  }
+})

Agency Page/index.html

@@ -14,7 +14,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"
         integrity="sha512-OivR4OdSsE1onDm/i3J3Hpsm5GmOVvr9r49K3jJ0dnsxVzZgaOJ5MfxEAxCyGrzWozL9uJGKz6un3A7L+redIQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-
     <!-- Custom Sytle Sheet -->
     <link rel="stylesheet" href="./Styles/style.css">
     <title>Agency Page</title>
@@ -121,7 +120,8 @@ <h3>Quality Assurance</h3>
             <div class="container"><span>Our Team</span></div>
         </header>
         <div class="container" data-section="team">
-            <section id="team"></section>
+            <section class="show-more" id="team"></section>
+            <button class="button" id="show-more">Show More</button>
         </div>
     </main>
     <footer class="primary-footer">