Remove the scroll bar or disable

Question

I wonder why the scroll bar still appears while the <nav ul> is appearing, and why it does not stay fixed despite the content of the page?

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;

menuBtn.addEventListener('click', () =>{
    if(!menuOpen){
        menuBtn.classList.add('open');
        menuOpen = true;
    }else{
        menuBtn.classList.remove('open');
        menuOpen = false;
    }
    
})

html {
  padding: 0;
  margin: 0
}
body{
    background-color: rgba(192,192,192,0.4)
}

p{
    text-align: justify;
    text-indent: 2em;
    line-height: 1.5em;
    padding: 10px;
}

.grid-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.texto {
    grid-column: 3/5;
    grid-row: 1/3;
    
}
.texto-2{
    grid-column: 2/5;
    grid-row: 3/6
}

/* --- NAVBAR --- */

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

nav {
  height: 100px;
  background: #4747F9;
  border-bottom: 2px solid black;
}

nav img {
    width: 250px;
    height: 220px;
    margin-top: -61px;
    position: absolute;
    left: 8%;
}

.fa {
    font-size: 20px
}

nav ul {
  float: right;
  margin-right: 25px;
    margin-bottom: -10px;
    z-index: 16;
}

nav .menu-btn.open+ul {
  left: 0;
}

nav ul li {
  display: inline-block;
  line-height: 100px;
  margin: 0 25px;
}

nav ul li a {
    color: white;
    font-family: 'Josefin Sans', sans-serif;
    position: relative;
    font-size: 20px;
    text-transform: uppercase;
    padding: 5px 0;
}

nav ul li a:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background-color: yellow;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s linear;
}

nav ul li a:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  float: right;
  margin: 20px 20px 0 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /*border: 3px solid #fff;*/
  display: none;
}

.menu_burger {
  width: 35px;
  height: 5px;
  margin-left: 7.5px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
  display: none;
}

.menu_burger::before,
.menu_burger::after {
  content: '';
  position: absolute;
  width: 35px;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rga(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu_burger::before {
  transform: translateY(-12px)
}

.menu_burger::after {
  transform: translateY(12px)
}

@media (max-width: 1600px) {
    
    nav img {
    left: 2%;
  }
    nav ul li {
    display: inline-block;
    line-height: 100px;
    margin: 0 25px;
    }
    nav ul li a{
    font-size: 18px
    }
}
@media (max-width: 1200px){
    nav ul li {
        display: inline-block;
        line-height: 100px;
        margin: 0 15px;
    }
    nav ul li a{
    font-size: 17px
    }
}
@media (max-width: 944px) {
   nav img {
    left: -20px;
       position: absolute;
  }
  .menu-btn {
    position: relative;
    align-items: center;
    float: right;
    margin: 30px 30px 0 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    /*border: 3px solid #fff;*/
    display: flex;
  }
  .menu_burger {
    width: 32px;
    height: 4px;
    margin-left: 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
    display: flex;
  }
  .menu_burger::before,
  .menu_burger::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 5px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
  }
  .menu_burger::before {
    transform: translateY(-10px);
  }
  .menu_burger::after {
    transform: translateY(10px);
  }
  .menu-btn.open .menu_burger {
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
  }
  .menu-btn.open .menu_burger::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  .menu-btn.open .menu_burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #0C0CCF;
    top: 100px;
    left: -100%;
    text-align: center;
    transition: all .7s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 60px;
  }
  nav ul li a {
    font-size: 20px;
    font-family: 'Josefin Sans', sans-serif;
    color: white;
  }
}

/* ---- FIM NAV-BAR ----- */
/* ---- CAROUSEL ---- */
.carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 10px;
}

.carousel-item{
    text-align: center;
    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}

.bs-example{
	margin: 0px;   
}

.carousel-item img{
        margin: 0 auto;
        width: 1280px;
        height: 450px;
        margin-top: -15px;
    }

@media (max-width: 1980px){
    .carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 10px 0px;
    }
    .carousel-item img{
        margin: 0 auto;
        width: 1180px;
        height: 480px;
        margin-top: -15px;
    }
    .bs-example{
	margin: -10px 0px 0px 0px;
}
@media (max-width:1200px){
    .carousel-item img{
        margin: 0 auto;
        width: 1280px;
        height: 450px;
        margin-top: -15px;
    }
    .carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 15px 0px;
    }
    .bs-example{
	margin: -15px 0px 0px 0px;   
    }
}
@media (max-width:940px){
    .carousel-item img{
        margin: 0 auto;
        width: 940px;
        height: 280px;
    
    }
    .carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 10px 0px;
    }
    .bs-example{
	margin: -15px 5px 0px 5px;   
}
}
/* ---- FIM CAROUSEL ---- */

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Tesla Engenharia &copy;</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="_css/HomeStyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="jquery-3.4.1.min.js"></script>
        <style>
            nav ul li a:hover{
                color: white;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <img src="imagens/Design.png" title="Tesla Engenharia &copy">
            <div class="menu-btn">
                <div class="menu_burger"></div>
            </div>
            
            <ul><li>
                    <a href="#">
                        <i class="fa fa-home"></i>
                        Home
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-book"></i>
                        Sobre
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-phone fa-flip-horizontal"></i>
                        Contate-nos
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-map-marked-alt"></i>
                        Localização
                    </a>
                </li>
            </ul>
        </nav>
        </header>
         
        <div class="bs-example">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Carousel indicators--> 
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for carousel items -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="img-fluid" src="./imagens/associese.png" alt="First Slide">
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="./imagens/corredorconhecimento.png" alt="Second Slide">
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="./imagens/seel.png" alt="Third Slide">
                    </div>
                </div>
                <!-- Carousel controls -->
                <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>
        
        <main>
            <h1>Sum Lipsim</h1>
            <div class="grid-container">
            <section class="texto">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, quam a pretium laoreet, nulla mi vulputate massa, non pulvinar justo tellus at tellus. Nulla facilisi. Praesent quam sem, molestie non aliquet id, varius vel sapien. Suspendisse id metus sit amet velit tristique rhoncus. Mauris feugiat leo nec nisi condimentum interdum. Fusce malesuada est mauris, tristique pretium odio tincidunt nec. Aliquam rutrum laoreet nisl eget iaculis. Quisque vel ex faucibus, faucibus odio id, dictum arcu. Integer id congue ligula, elementum aliquet leo. Praesent id justo viverra mi molestie eleifend porttitor vel ipsum. Vestibulum at varius purus. Integer elementum mauris a nulla scelerisque, ultrices varius orci molestie. Curabitur ac risus interdum, porttitor tortor id, accumsan magna. In hac habitasse platea dictumst. Donec faucibus accumsan porta.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, quam a pretium laoreet, nulla mi vulputate massa, non pulvinar justo tellus at tellus. Nulla facilisi. Praesent quam sem, molestie non aliquet id, varius vel sapien. Suspendisse id metus sit amet velit tristique rhoncus. Mauris feugiat leo nec nisi condimentum interdum. Fusce malesuada est mauris, tristique pretium odio tincidunt nec. Aliquam rutrum laoreet nisl eget iaculis. Quisque vel ex faucibus, faucibus odio id, dictum arcu. Integer id congue ligula, elementum aliquet leo. Praesent id justo viverra mi molestie eleifend porttitor vel ipsum. Vestibulum at varius purus. Integer elementum mauris a nulla scelerisque, ultrices varius orci molestie. Curabitur ac risus interdum, porttitor tortor id, accumsan magna. In hac habitasse platea dictumst. Donec faucibus accumsan porta.
                </p>
            </section>
            <section class="texto-2">
                <p>Porta non pulvinar neque laoreet suspendisse interdum. Sed adipiscing diam donec adipiscing. Nulla at volutpat diam ut. Blandit turpis cursus in hac habitasse. Adipiscing elit duis tristique sollicitudin nibh. Fringilla ut morbi tincidunt augue interdum velit. Tempus iaculis urna id volutpat lacus laoreet non. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Neque viverra justo nec ultrices. Natoque penatibus et magnis dis parturient. Iaculis at erat pellentesque adipiscing commodo elit. Cras semper auctor neque vitae tempus.
                </p>
                <p>Aliquet nec ullamcorper sit amet risus. Libero id faucibus nisl tincidunt eget nullam non. Orci eu lobortis elementum nibh tellus. Id aliquet lectus proin nibh nisl condimentum id. Turpis massa sed elementum tempus egestas sed sed risus pretium. Euismod lacinia at quis risus sed vulputate odio ut. Nibh tortor id aliquet lectus. Auctor augue mauris augue neque. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pellentesque nec nam aliquam sem. A diam sollicitudin tempor id eu nisl nunc. Ornare arcu dui vivamus arcu felis bibendum.
                </p>
            </section>
        </div>
        </main>
        
        <script src="Home.js"></script>
        <script src="https://kit.fontawesome.com/038ca0294c.js" crossorigin="anonymous"></script>
        <script src="./css/bootstrap.min.css"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Answer 1

Just in the event you open and close the remove menu the overflow of body

Notice that in the script below I added the const elt = document.body; and then inside the if/else I add or remove the overflow in the body

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
const elt = document.body;

menuBtn.addEventListener('click', () =>{
    if(!menuOpen){
        menuBtn.classList.add('open');
        menuOpen = true;
        elt.style.overflow = 'hidden'
    }else{
        menuBtn.classList.remove('open');
        menuOpen = false;
        elt.style.removeProperty('overflow')
    }
    
})

html {
  padding: 0;
  margin: 0
}
body{
    background-color: rgba(192,192,192,0.4)
}

p{
    text-align: justify;
    text-indent: 2em;
    line-height: 1.5em;
    padding: 10px;
}

.grid-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.texto {
    grid-column: 3/5;
    grid-row: 1/3;
    
}
.texto-2{
    grid-column: 2/5;
    grid-row: 3/6
}

/* --- NAVBAR --- */

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

nav {
  height: 100px;
  background: #4747F9;
  border-bottom: 2px solid black;
}

nav img {
    width: 250px;
    height: 220px;
    margin-top: -61px;
    position: absolute;
    left: 8%;
}

.fa {
    font-size: 20px
}

nav ul {
  float: right;
  margin-right: 25px;
    margin-bottom: -10px;
    z-index: 16;
}

nav .menu-btn.open+ul {
  left: 0;
}

nav ul li {
  display: inline-block;
  line-height: 100px;
  margin: 0 25px;
}

nav ul li a {
    color: white;
    font-family: 'Josefin Sans', sans-serif;
    position: relative;
    font-size: 20px;
    text-transform: uppercase;
    padding: 5px 0;
}

nav ul li a:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background-color: yellow;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s linear;
}

nav ul li a:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  float: right;
  margin: 20px 20px 0 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /*border: 3px solid #fff;*/
  display: none;
}

.menu_burger {
  width: 35px;
  height: 5px;
  margin-left: 7.5px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
  display: none;
}

.menu_burger::before,
.menu_burger::after {
  content: '';
  position: absolute;
  width: 35px;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rga(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu_burger::before {
  transform: translateY(-12px)
}

.menu_burger::after {
  transform: translateY(12px)
}

@media (max-width: 1600px) {
    
    nav img {
    left: 2%;
  }
    nav ul li {
    display: inline-block;
    line-height: 100px;
    margin: 0 25px;
    }
    nav ul li a{
    font-size: 18px
    }
}
@media (max-width: 1200px){
    nav ul li {
        display: inline-block;
        line-height: 100px;
        margin: 0 15px;
    }
    nav ul li a{
    font-size: 17px
    }
}
@media (max-width: 944px) {
   nav img {
    left: -20px;
       position: absolute;
  }
  .menu-btn {
    position: relative;
    align-items: center;
    float: right;
    margin: 30px 30px 0 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    /*border: 3px solid #fff;*/
    display: flex;
  }
  .menu_burger {
    width: 32px;
    height: 4px;
    margin-left: 5px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
    display: flex;
  }
  .menu_burger::before,
  .menu_burger::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 5px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
    transition: all .5s ease-in-out;
  }
  .menu_burger::before {
    transform: translateY(-10px);
  }
  .menu_burger::after {
    transform: translateY(10px);
  }
  .menu-btn.open .menu_burger {
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
  }
  .menu-btn.open .menu_burger::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  .menu-btn.open .menu_burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #0C0CCF;
    top: 100px;
    left: -100%;
    text-align: center;
    transition: all .7s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 60px;
  }
  nav ul li a {
    font-size: 20px;
    font-family: 'Josefin Sans', sans-serif;
    color: white;
  }
}

/* ---- FIM NAV-BAR ----- */
/* ---- CAROUSEL ---- */
.carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 10px;
}

.carousel-item{
    text-align: center;
    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}

.bs-example{
	margin: 0px;   
}

.carousel-item img{
        margin: 0 auto;
        width: 1280px;
        height: 450px;
        margin-top: -15px;
    }

@media (max-width: 1980px){
    .carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 10px 0px;
    }
    .carousel-item img{
        margin: 0 auto;
        width: 1180px;
        height: 480px;
        margin-top: -15px;
    }
    .bs-example{
	margin: -10px 0px 0px 0px;
}
@media (max-width:1200px){
    .carousel-item img{
        margin: 0 auto;
        width: 1280px;
        height: 450px;
        margin-top: -15px;
    }
    .carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 15px 0px;
    }
    .bs-example{
	margin: -15px 0px 0px 0px;   
    }
}
@media (max-width:940px){
    .carousel-item img{
        margin: 0 auto;
        width: 940px;
        height: 280px;
    
    }
    .carousel{
    background: #2f4357;
    margin-top: 20px;
    padding: 10px 0px;
    }
    .bs-example{
	margin: -15px 5px 0px 5px;   
}
}
/* ---- FIM CAROUSEL ---- */

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Tesla Engenharia &copy;</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="_css/HomeStyle.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="jquery-3.4.1.min.js"></script>
        <style>
            nav ul li a:hover{
                color: white;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <header>
            <nav>
                <img src="imagens/Design.png" title="Tesla Engenharia &copy">
            <div class="menu-btn">
                <div class="menu_burger"></div>
            </div>
            
            <ul><li>
                    <a href="#">
                        <i class="fa fa-home"></i>
                        Home
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-book"></i>
                        Sobre
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-phone fa-flip-horizontal"></i>
                        Contate-nos
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-map-marked-alt"></i>
                        Localização
                    </a>
                </li>
            </ul>
        </nav>
        </header>
         
        <div class="bs-example">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Carousel indicators--> 
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for carousel items -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="img-fluid" src="./imagens/associese.png" alt="First Slide">
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="./imagens/corredorconhecimento.png" alt="Second Slide">
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="./imagens/seel.png" alt="Third Slide">
                    </div>
                </div>
                <!-- Carousel controls -->
                <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>
        
        <main>
            <h1>Sum Lipsim</h1>
            <div class="grid-container">
            <section class="texto">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, quam a pretium laoreet, nulla mi vulputate massa, non pulvinar justo tellus at tellus. Nulla facilisi. Praesent quam sem, molestie non aliquet id, varius vel sapien. Suspendisse id metus sit amet velit tristique rhoncus. Mauris feugiat leo nec nisi condimentum interdum. Fusce malesuada est mauris, tristique pretium odio tincidunt nec. Aliquam rutrum laoreet nisl eget iaculis. Quisque vel ex faucibus, faucibus odio id, dictum arcu. Integer id congue ligula, elementum aliquet leo. Praesent id justo viverra mi molestie eleifend porttitor vel ipsum. Vestibulum at varius purus. Integer elementum mauris a nulla scelerisque, ultrices varius orci molestie. Curabitur ac risus interdum, porttitor tortor id, accumsan magna. In hac habitasse platea dictumst. Donec faucibus accumsan porta.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor, quam a pretium laoreet, nulla mi vulputate massa, non pulvinar justo tellus at tellus. Nulla facilisi. Praesent quam sem, molestie non aliquet id, varius vel sapien. Suspendisse id metus sit amet velit tristique rhoncus. Mauris feugiat leo nec nisi condimentum interdum. Fusce malesuada est mauris, tristique pretium odio tincidunt nec. Aliquam rutrum laoreet nisl eget iaculis. Quisque vel ex faucibus, faucibus odio id, dictum arcu. Integer id congue ligula, elementum aliquet leo. Praesent id justo viverra mi molestie eleifend porttitor vel ipsum. Vestibulum at varius purus. Integer elementum mauris a nulla scelerisque, ultrices varius orci molestie. Curabitur ac risus interdum, porttitor tortor id, accumsan magna. In hac habitasse platea dictumst. Donec faucibus accumsan porta.
                </p>
            </section>
            <section class="texto-2">
                <p>Porta non pulvinar neque laoreet suspendisse interdum. Sed adipiscing diam donec adipiscing. Nulla at volutpat diam ut. Blandit turpis cursus in hac habitasse. Adipiscing elit duis tristique sollicitudin nibh. Fringilla ut morbi tincidunt augue interdum velit. Tempus iaculis urna id volutpat lacus laoreet non. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Neque viverra justo nec ultrices. Natoque penatibus et magnis dis parturient. Iaculis at erat pellentesque adipiscing commodo elit. Cras semper auctor neque vitae tempus.
                </p>
                <p>Aliquet nec ullamcorper sit amet risus. Libero id faucibus nisl tincidunt eget nullam non. Orci eu lobortis elementum nibh tellus. Id aliquet lectus proin nibh nisl condimentum id. Turpis massa sed elementum tempus egestas sed sed risus pretium. Euismod lacinia at quis risus sed vulputate odio ut. Nibh tortor id aliquet lectus. Auctor augue mauris augue neque. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Pellentesque nec nam aliquam sem. A diam sollicitudin tempor id eu nisl nunc. Ornare arcu dui vivamus arcu felis bibendum.
                </p>
            </section>
        </div>
        </main>
        
        <script src="Home.js"></script>
        <script src="https://kit.fontawesome.com/038ca0294c.js" crossorigin="anonymous"></script>
        <script src="./css/bootstrap.min.css"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>