Footer style with modal and collapse – ep01

Footer style with modal and collapse – ep01

html

<div class="sitemap bg-dark">
  <div class="container">
    <div class="collapse text-light text-center" id="collapseFoot">
      <div class="p-5 text-center text-light">
        <h3>sitemap</h3>
        <hr class="hr2">
        <nav class="navbar navbar-expand-sm navbar-dark">
          <ul class="navbar-nav m-auto row" id="Mmenu"></ul>
          <ul class="navbar-nav ml-auto"><a class="nav-link" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot"><i class="fas fa-times fa-2x"></i></a></ul>
        </nav>
      </div>
    </div> 
  </div>
</div>



<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Terms of use</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam phasellus vestibulum lorem sed risus ultricies tristique. Aliquet nec ullamcorper sit amet risus nullam. Proin nibh nisl condimentum id venenatis. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Mauris cursus mattis molestie a iaculis. Arcu odio ut sem nulla pharetra diam sit. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Eget gravida cum sociis natoque penatibus et magnis dis parturient. Dolor magna eget est lorem ipsum. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. In metus vulputate eu scelerisque felis imperdiet proin. Sit amet purus gravida quis blandit turpis.
          </p>
          <p>
          Integer vitae justo eget magna fermentum iaculis eu non diam. Maecenas sed enim ut sem viverra. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget mi proin sed libero enim. Lectus sit amet est placerat in egestas. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Tortor at auctor urna nunc id cursus metus aliquam. Id donec ultrices tincidunt arcu non. Et molestie ac feugiat sed. Arcu risus quis varius quam quisque id diam vel quam. Lectus sit amet est placerat in egestas erat imperdiet sed. Potenti nullam ac tortor vitae purus. Id faucibus nisl tincidunt eget. Et molestie ac feugiat sed lectus. Sit amet nisl purus in.
          </p>
          <p>
          Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Gravida cum sociis natoque penatibus et magnis dis. Commodo odio aenean sed adipiscing diam donec. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Erat velit scelerisque in dictum non consectetur a erat. Amet justo donec enim diam. Porttitor leo a diam sollicitudin tempor. Gravida arcu ac tortor dignissim. Libero id faucibus nisl tincidunt eget nullam non nisi. Sodales neque sodales ut etiam sit amet nisl purus in. Eget dolor morbi non arcu. A pellentesque sit amet porttitor eget dolor. Magna fermentum iaculis eu non diam. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Sit amet justo donec enim diam vulputate ut.
          </p>
          <p>
          Elementum sagittis vitae et leo. Amet mattis vulputate enim nulla. Dictum non consectetur a erat. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Non sodales neque sodales ut etiam sit amet. Hendrerit dolor magna eget est lorem ipsum dolor. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Elit at imperdiet dui accumsan sit amet nulla. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Semper feugiat nibh sed pulvinar proin.
          </p>
          <p>
          Dolor sed viverra ipsum nunc aliquet bibendum. Non curabitur gravida arcu ac tortor dignissim convallis. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Amet justo donec enim diam. Enim praesent elementum facilisis leo vel fringilla. Feugiat in ante metus dictum at tempor commodo. Porttitor eget dolor morbi non arcu. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Euismod nisi porta lorem mollis aliquam. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Tincidunt eget nullam non nisi est sit. Mauris ultrices eros in cursus turpis massa tincidunt dui ut.
          </p>
          <p>
          Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Cum sociis natoque penatibus et magnis dis parturient. Id consectetur purus ut faucibus. Id neque aliquam vestibulum morbi blandit. Et molestie ac feugiat sed. Suspendisse sed nisi lacus sed viverra tellus in hac. Nam aliquam sem et tortor consequat. Tortor dignissim convallis aenean et tortor at risus viverra. Pulvinar sapien et ligula ullamcorper malesuada proin. Nisl purus in mollis nunc sed id semper. Accumsan lacus vel facilisis volutpat est velit egestas. Eget est lorem ipsum dolor sit. Consequat interdum varius sit amet mattis vulputate enim. Ultrices sagittis orci a scelerisque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Dignissim cras tincidunt lobortis feugiat vivamus at augue. Velit ut tortor pretium viverra suspendisse potenti nullam. Dignissim cras tincidunt lobortis feugiat vivamus. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
          </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>




<footer>

  <div class="Mfoot1 py-5">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-5 text-center text-lg-left">
          <p>&copy;Copyright <img src="images/symbol.svg" height="14px"> <span class="font-weight-bold">Meeny</span>.com</a> All rights reserved</p>
        </div>
        <div class="col-12 col-lg-7">
          <ul class="footMnu nav justify-content-center justify-content-lg-end">
            <li class="nav-item"><a href="" class="btn btn-light">About Us</a></li>
            <li class="nav-item"><a href="" class="btn btn-light">Products</a></li>
            <li class="nav-item"><a href="" class="btn btn-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
            <li class="nav-item"><a href="" class="btn btn-light">Privacy policy</a></li>
            <li class="nav-item"><a class="btn btn-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

scss

.Mfoot1{
    border-top: 2px solid $gray-700;
    ul.footMnu{
        .nav-item{
            padding: 2px;
        }
    }
}

Multiple Menus with one Json Array Data

Bootstrap4 theming ep01

Bootstrap4 theming ep02