Q and A
    m ((username removed) (log details removed))
    No edit summary
    Line 1: Line 1:
    <html>
    <html>
    <style>
    <style>
        @media (max-width: 767px) {
     
            .content {
    .container {
                padding: 2em 1em;
      display: flex;
                max-width: none;
    }
            }
     
            .heading {
    .sidebar {
                font-size: 1.5em;
      flex: 0 0 200px; /* Adjust the width as needed */
            }
      padding: 20px;
            .sub-heading {
      display: flex;
                font-size: 1em;
      flex-direction: column;
            }
    }
            .description {
     
                font-size: 0.875em;
    .menu-item {
            }
      color: #0060A8;
            .input-container {
      font-size: 16px;
                max-width: none;
      font-weight: 500;
                height: auto;
      margin-bottom: 10px; /* Space between menu items */
            }
      word-wrap: break-word;
            .search-icon {
    }
                margin-left: 1em;
     
            }
    .card-container , .card-container-3 {
            .search-input {
      display: grid;
                padding-left: 1em;
      grid-template-columns: repeat(3, 1fr);
                padding-right: 1em;
      grid-gap: 32px;
            }
      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 style="background: linear-gradient(94deg, #E2F5FA 0%, #F7FAFC 49%, #FFDABB 100%);">
    <div class="container">
       <div class="content" style="padding: 5em;  width: 100%; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; margin-bottom:50px;">
       <div class="sidebar">
    <div style="color: #44546F;">Q&A</div>
        <!-- Menu items -->
        <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="#complete-models" class="menu-item">Complete models</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="#another-model" class="menu-item">Another 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;">
      <a href="#final-model" class="menu-item">Final model</a>
            <div class="search-icon" style="margin-left: 10px;">
      </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
    <main>
                    <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"/>
    <div class="search-container">
                </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
        <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>
        <form id="bs-extendedsearch-box" class="form-inline " action="/index.php" method="GET" role="search" style="width:100%;">
          </div>
            <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>
      .card-container {
    @media screen and (min-width: 769px) {
        display: flex;
      #another-model,
        gap: 70px;
      #final-model {
         justify-content: center;
         margin-left: 300px;
        padding: 5em;
       }
       }
    }


      @media (max-width: 768px) {
    /* Styles for mobile screens to remove the margin */
        .card-container {
    @media screen and (max-width: 768px) {
          flex-direction: column;
      #another-model,
          align-items: center;
      #final-model {
        }
        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'));
            }
          }
        });
      };


    <div class="card-container">
      document.querySelectorAll('.sidebar a').forEach(link => {
        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:00, 9 November 2023

    Complete models Another model Final model

    Complete Models

    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip

    Complete Models

    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip

    Complete Models

    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Test
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip

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

    © MDRIVEN . All Rights Reserved

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

    © MDRIVEN . All Rights Reserved

    MDriven Chat

    How would you like to chat today?

    Setting up your conversation…

    This may take a few moments