Q and A
No edit summary
(Undo revision 12821 by Edgar (talk))
Line 1: Line 1:
<html>
<html>
<style>
<style>
 
    @media (max-width: 767px) {
.container {
        .content {
  display: flex;
            padding: 2em 1em;
}
            max-width: none;
 
        }
.sidebar {
        .heading {
  flex: 0 0 200px; /* Adjust the width as needed */
            font-size: 1.5em;
  padding: 20px;
        }
  display: flex;
        .sub-heading {
  flex-direction: column;
            font-size: 1em;
}
        }
 
        .description {
.menu-item {
            font-size: 0.875em;
  color: #0060A8;
        }
  font-size: 16px;
        .input-container {
  font-weight: 500;
            max-width: none;
  margin-bottom: 10px; /* Space between menu items */
            height: auto;
  word-wrap: break-word;
        }
}
        .search-icon {
 
            margin-left: 1em;
.card-container , .card-container-3 {
        }
  display: grid;
        .search-input {
  grid-template-columns: repeat(3, 1fr);
            padding-left: 1em;
  grid-gap: 32px;
            padding-right: 1em;
  margin: 0 auto;
        }
  max-width: 960px;
}
 
.cards {
  width: 296px;
  background: white;
  border-radius: 6px;
  border: 1px solid #E3E8EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px; /* Space between card rows */
}
 
.card img {
  width: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
 
.contentss {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
 
.title {
  color: #112B3C;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px; /* Adjust as needed */
}
 
.description {
  font-size: 14px;
  font-weight: 300;
  color: black;
}
 
.download-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #F67A07;
  font-size: 14px;
  font-weight: 600;
}
 
.download-indicator {
  width: 12px;
  height: 12px;
  background: #F67A07;
  transform: rotate(-90deg);
  border: 2px solid #F67A07;
}
 
  .sidebar a {
    display: block;
    color: #182933;
    text-decoration: none;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    font-weight: 500;
  }
 
  .sidebar a.active {
    color: #1A50AD;
  }
 
  .sidebar a.active svg {
    position: absolute;
    left: 0;
    top: 0;
  }
 
@media screen and (max-width: 768px) {
    .container {
      flex-direction: column;
    }
 
    .sidebar {
      width: 100%;
      flex-direction: row;
      overflow-x: auto;
      white-space: nowrap;
      padding-bottom: 10px;
      box-sizing: border-box;
    }
 
    .sidebar .menu-item {
      display: inline-block;
      margin-right: 10px;
    }
 
    .card-container, .card-container-3 {
      grid-template-columns: 1fr;
      padding: 0 20px;
      max-width: none;
    }
 
    .cards {
      width: auto;
    }
 
    .menu-item {
      padding: 10px;
      font-size: 14px;
    }
 
    section h2, .card-container {
      margin-left: 0;
    }
  }
 
@media (max-width: 768px) {
    .sidebar,
    .card-container,
    .card-container-3 {
      flex: 0 0 100%;
      max-width: 100%;
      margin-left: 0;
    }
 
    .card-container,
    .card-container-3 {
      grid-template-columns: 1fr;
     }
     }
  }
  .search-container {
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #E3E8EE;
    background: #FFF;
    width: 951px;
    height: 36px;
    flex-shrink: 0;
  }
 
  .search-container input[type="search"] {
    border: none;
    outline: none;
    width: 100%;
    padding: 0 10px;
    height: 100%;
    color: #999B9E; /* Placeholder text color */
  }
 
  .search-container svg {
    margin: 0 10px;
  }
 
  /* Change placeholder color */
  .search-container input::placeholder {
    color: #999B9E;
  }
 
  /* If you want to ensure that the input does not have border in any browser */
  .search-container input:focus {
    border: none;
    outline: none;
  }
</style>
</style>
</head>
<body>


<div class="container">
<div style="background: linear-gradient(94deg, #E2F5FA 0%, #F7FAFC 49%, #FFDABB 100%);">
   <div class="sidebar">
   <div class="content" style="padding: 5em;  width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; margin-bottom:50px;">
    <!-- Menu items -->
<div style="color: #44546F;">Q&A</div>
    <a href="#complete-models" class="menu-item">Complete models</a>
    <div class="heading" style="color: #182933; font-size: 2.25em;  font-weight: 700; text-transform: uppercase; ">WHAT DO YOU NEED HELP WITH TODAY?</div>
  <a href="#another-model" class="menu-item">Another model</a>
    <div class="description" style="color: black; font-size: 1em; font-weight: 400; word-wrap: break-word;">Find The Answers To All Your Questions </div>
  <a href="#final-model" class="menu-item">Final model</a>
    <div class="input-container" style="max-width: 589px; height: 2.25em; position: relative; display: flex; align-items: center; background: white; border-radius: 4px; border: 1px #E3E8EE solid;">
  </div>
        <div class="search-icon" style="margin-left: 10px;">
<main>
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<div class="search-container">
                <path d="M13 13L9 9L13 13ZM10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#999B9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
            </svg>
    <path d="M13 13L9 9L13 13ZM10.3333 5.66667C10.3333 8.244 8.244 10.3333 5.66667 10.3333C3.08934 10.3333 1 8.244 1 5.66667C1 3.08934 3.08934 1 5.66667 1C8.244 1 10.3333 3.08934 10.3333 5.66667Z" stroke="#999B9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <input type="search" id="searchBox" onkeyup="searchCards()" placeholder="Search here...">
</div>
    <!-- Section for Complete Models -->
<section id="complete-models">
      <h2>Complete Models</h2>
  <div class="card-container">
    <!-- Card 1 -->
    <div class="cards">
      <img src="https://via.placeholder.com/301x175" alt="Placeholder">
      <div class="contentss">
        <div class="title">Base App</div>
        <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
        <div class="download-link">
          <div class="download-indicator"></div>
          <div>Download .zip</div>
         </div>
         </div>
      </div>
    <form id="bs-extendedsearch-box" class="form-inline " action="/index.php" method="GET" role="search" style="width:100%;">
        <input class="search-input" type="search" placeholder="Type in your question" style="flex-grow: 1; border: none; outline: none; padding-left: 10px;" name="raw_term" >
    <div id="suggestion-container"></div>
        <input type="hidden" name="title" value="Special:SearchCenter">
            <input type="hidden" name="fulltext" value="1">
        </form>
     </div>
     </div>
    <!-- Card 2 -->
    <!-- Repeat the structure for other cards as needed -->
    <!-- ... -->
    <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
   </div>
   </div>
</div>
</div>
</section>
<style>
<style>
@media screen and (min-width: 769px) {
  .card-container {
  #another-model,
    display: flex;
  #final-model {
    gap: 70px;
     margin-left: 300px;
    justify-content: center;
     padding: 5em;
   }
   }
}


/* Styles for mobile screens to remove the margin */
  @media (max-width: 768px) {
@media screen and (max-width: 768px) {
    .card-container {
  #another-model,
      flex-direction: column;
  #final-model {
      align-items: center;
    margin-left: 0;
    }
   }
   }
}
</style>
</style>
<!-- Section for Complete Models -->
<section id="another-model">
      <h2>Complete Models</h2>
  <div class="card-container">
    <!-- Card 1 -->
    <div class="cards">
      <img src="https://via.placeholder.com/301x175" alt="Placeholder">
      <div class="contentss">
        <div class="title">Base App</div>
        <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
        <div class="download-link">
          <div class="download-indicator"></div>
          <div>Download .zip</div>
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <!-- Repeat the structure for other cards as needed -->
    <!-- ... -->
    <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
  </div>
</div>
</section>
<!-- Section for Complete Models -->
<section id="final-model">
      <h2>Complete Models</h2>
  <div class="card-container">
    <!-- Card 1 -->
    <div class="cards">
      <img src="https://via.placeholder.com/301x175" alt="Placeholder">
      <div class="contentss">
        <div class="title">Base App</div>
        <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
        <div class="download-link">
          <div class="download-indicator"></div>
          <div>Download .zip</div>
        </div>
      </div>
    </div>
    <!-- Card 2 -->
    <!-- Repeat the structure for other cards as needed -->
    <!-- ... -->
    <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Test</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
      <div class="cards">
        <img src="https://via.placeholder.com/301x175" alt="Placeholder">
        <div class="contentss">
          <div class="title">Base App</div>
          <div class="description">You can use this as a starting point or you can merge it with most of the other examples and template models.</div>
          <div class="download-link">
            <div class="download-indicator"></div>
            <div>Download .zip</div>
          </div>
        </div>
      </div>
  </div>
</div>
<script>
function searchCards() {
  var input, filter, cards, title, i, txtValue;
  input = document.getElementById("searchBox");
  filter = input.value.toUpperCase();
  cards = document.getElementsByClassName("cards");
 
  for (i = 0; i < cards.length; i++) {
    title = cards[i].getElementsByClassName("title")[0];
    if (title) {
      txtValue = title.textContent || title.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        cards[i].style.display = "";
      } else {
        cards[i].style.display = "none";
      }
    }     
  }
}
</script>
<script>
// JavaScript to scroll to the section smoothly when a sidebar link is clicked
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('.sidebar a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetSection = document.querySelector(targetId);
      if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('.sidebar a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetSection = document.querySelector(targetId);
      if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="4" height="16" viewBox="0 0 4 16" fill="none">
    <path d="M0 0C2.20914 0 4 1.79086 4 4L4 12C4 14.2091 2.20914 16 0 16L0 0Z" fill="#1A50AD"/>
  </svg>`;
  // Function to create a new SVG element
  const createSvgElement = (htmlString) => {
    const div = document.createElement('div');
    div.innerHTML = htmlString.trim();
    return div.firstChild;
  };
  // Function to update active link style and SVG
  const updateActiveLink = (targetId) => {
    document.querySelectorAll('.sidebar a').forEach(link => {
      if (link.getAttribute('href') === targetId) {
        link.classList.add('active');
        // Insert SVG for active link
        link.prepend(createSvgElement(svgMarkup));
      } else {
        link.classList.remove('active');
        // Remove SVG for non-active links
        if (link.querySelector('svg')) {
          link.removeChild(link.querySelector('svg'));
        }
      }
    });
  };


  document.querySelectorAll('.sidebar a').forEach(link => {
<div class="card-container">
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      updateActiveLink(targetId);
      const targetSection = document.querySelector(targetId);
      if (targetSection) {
        targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});
</script>
</html>
</html>
{{#widget:Card|heading=|subheading=FAQs|text=Common questions by MDriven users|cardColor=#E2F5FA|link=/index.php/Contact|linktext=Visit}}
{{#widget:Card|heading=|subheading=Contact Us|text=Inbox us your specific question|cardColor=#E2F5FA|link=/index.php/Training:MDriven Levels: Stars & Certificates|linktext=Visit}}
{{#widget:Card|heading=|subheading=Visit our Stack Overflow|text=Check out the questions and answers on our stack|cardColor=#E2F5FA|link=/index.php/Training:MDriven Levels: Stars & Certificates|linktext=Visit}}

Revision as of 14:07, 9 November 2023

Q&A
WHAT DO YOU NEED HELP WITH TODAY?
Find The Answers To All Your Questions
Icon
Training
FAQs
Common questions by MDriven users
Icon
Training
Contact Us
Inbox us your specific question
Icon
Training
Visit our Stack Overflow
Check out the questions and answers on our stack

Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Q_and_A&oldid=12770"

© MDRIVEN . All Rights Reserved

Glossary API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved