Q and A
No edit summary
(Replacing message template with parser tag)
 
(23 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<message>Write the content here to display this box</message>
<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;
    }
  font-weight: 500;
.mw-parser-output > *:first-child {
  margin-bottom: 10px; /* Space between menu items */
display: none;
  word-wrap: break-word;
}
 
.card-container , .card-container-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  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;
}
}
 
.mainpage-card:hover {
.download-indicator {
    transform: translateY(-5px);
  width: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  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;">Get answers to anything you want to know about MDriven </div>
  <a href="#final-model" class="menu-item">Final model</a>
   </div>
   </div>
<main>
<div class="search-container">
  <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>
</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>
    <!-- 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>
<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=Post on our Stack|text=Ask us questions on StackOverflow. You will get a quality response as soon as possible.|cardColor=#E2F5FA|link=https://stackoverflow.com/questions/tagged/mdriven|linktext=Go to StackOverflow}}
{{#widget:Card|heading=|subheading=Contact Us|text=Want more customized solutions? Register here for paid support to reach us at support@mdriven.|cardColor=#E2F5FA|link=/index.php/Support_registration_form|linktext=Register here}}
{{Edited|July|12|2024}}
{{Class|scroll}}

Latest revision as of 07:54, 17 June 2024

Q&A
WHAT DO YOU NEED HELP WITH TODAY?
Get answers to anything you want to know about MDriven
Icon
Training
Post on our Stack
Ask us questions on StackOverflow. You will get a quality response as soon as possible.
Icon
Training
Contact Us
Want more customized solutions? Register here for paid support to reach us at support@mdriven.


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

© MDRIVEN . All Rights Reserved

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

© MDRIVEN . All Rights Reserved