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

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

© MDRIVEN . All Rights Reserved