Question 188738 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How can I make a scroll animation to bottom and top, and pause it on mouse hover and continue on mouse leave?

I am designing a website for a master’s course and need help with adding an automatic scroll animation to each section of a vertical accordion. The animation should make scroll to the bottom and top, pause when the mouse hovers and continue when the mouse leaves (just like on this website: https://ext.maat.pt/ ) and should work only on the class ".links", so that the "margin-text" stays fixed.

I have created a structure in JSFiddle, which can be accessed here:
JSFiddle

I would need some help 🙂 Thank you!

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>MDC 22-23</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <!--menu bar-->
    <div class="sidebarAbout">
      <div class="menu">
        <p id="menu-button" class="title">And (now and then) the mirror cracked</p>
      </div>
    </div>
    <!--accordion-->
    <ul id="vertical-accordion">
      <!-- MICRO 1 -->
      <li id="col">
        <div id="projects">
          <div class="margin">
            <div class="margin-text"> All human life is born of <span class="word">woman</span></div>
          </div>
          <ul class="links">
            <li data-index="0" id="project-link">
              <h1>Motherhood as Fiction</h1>
              <p class="sub"> Uma ficção a partir de The Lost Daughter <br> (2021), de Maggie Gyllenhaal</p>
              <p class="keywords">#Motherhood #Natural mother #Capitalism #State control</p>
            </li>
            <li data-index="1" id="project-link">
              <h1>The Lost Daughter</h1>
              <h2>Natural Unaturality</h2>
              <p class="keywords">#Motherhood #Natural mother #Feminine interior #Sexuality</p>
            </li>
            <li data-index="2" id="project-link">
              <h1>Mistress America</h1>
              <h2>Quase alguém: entre a Companhia <br>e a solidão </h2>
              <p class="keywords">#Femininity #Women’s role #Womanhood #Identity crisis </p>
            </li>
            <li data-index="3" id="project-link">
              <h1>Todo Sobre <br>Mi Madre</h1>
              <h2>Os batimentos de um coração espartilhado e os seus mĂșltiplos estilhaços</h2>
              <p class="keywords">#Womanhood #Feminine interior #Emotion #Symbolism</p>
            </li>
          </ul>
        </div>
      </li>
      <!-- MICRO 2 -->
      <li id="col">
        <div id="projects">
          <div class="margin">
            <div class="margin-text"><span class="word">Woman</span> as looking glasses</div>
          </div>
          <ul class="links">
            <li data-index="4" id="project-link">
              <h1>Here, Where Women Watch Themselves Being Looked At...</h1>
              <p class="sub"> Uma ficção a partir de I Am Love (2009),<br>de Luca Guadanino</p>
              <p class="keywords">#Female gaze #Gender roles #Female liberation #Womanhood</p>
            </li>
            <li data-index="5" id="project-link">
              <h1>Klute</h1>
              <h2>“A Walk on the Wild Side”</h2>
              <p class="keywords">#Feminine interior #Feminism #Marginality #Male gaze</p>
            </li>
            <li data-index="6" id="project-link">
              <h1>Une Femme est Une Femme</h1>
              <h2>Toute Les Femmes</h2>
              <p class="keywords">#Male gaze #Femininity #Feminine interior #Gender roles</p>
            </li>
            <li data-index="7" id="project-link">
              <h1>Rabbit or Duck</h1>
              <h2>7 (rabbit’s) foot 9</h2>
              <p class="keywords">#Mythical norm #Privilege #Women liberation #Body</p>
            </li>
          </ul>
        </div>
      </li>
      <!-- MICRO 3 -->
      <li id="col">
        <div id="projects">
          <div class="margin">
            <div class="margin-text">Subversive acts of <span class="word">gender</span></div>
          </div>
          <ul class="links">
            <li data-index="8" id="project-link">
              <h1>Titane:</h1>
              <h2>Beyond Gender, Beyond Human</h2>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
            <li data-index="9" id="project-link">
              <h1>Metagenesis</h1>
              <h2>Beyond Human, Beyond Gender</h2>
              <p class="sub"> Uma ficção a partir de Titane (2021), <br>de Julia Ducournau</p>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
            <li data-index="10" id="project-link">
              <h1>Iris:</h1>
              <h2>Beyond Words</h2>
              <p class="sub"> Uma ficção a partir de Orlando (1993), <br>de Sally Potter</p>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
          </ul>
      </li>
      <!-- MICRO 4 -->
      <li id="col">
        <div id="projects">
          <div class="margin">
            <div class="margin-text"><span class="word">Woman</span> as looking glasses</div>
          </div>
          <ul class="links">
            <li data-index="4" id="project-link">
              <h1>Here, Where Women Watch Themselves Being Looked At...</h1>
              <p class="sub"> Uma ficção a partir de I Am Love (2009),<br>de Luca Guadanino</p>
              <p class="keywords">#Female gaze #Gender roles #Female liberation #Womanhood</p>
            </li>
            <li data-index="5" id="project-link">
              <h1>Klute</h1>
              <h2>“A Walk on the Wild Side”</h2>
              <p class="keywords">#Feminine interior #Feminism #Marginality #Male gaze</p>
            </li>
            <li data-index="6" id="project-link">
              <h1>Une Femme est Une Femme</h1>
              <h2>Toute Les Femmes</h2>
              <p class="keywords">#Male gaze #Femininity #Feminine interior #Gender roles</p>
            </li>
            <li data-index="7" id="project-link">
              <h1>Rabbit or Duck</h1>
              <h2>7 (rabbit’s) foot 9</h2>
              <p class="keywords">#Mythical norm #Privilege #Women liberation #Body</p>
            </li>
          </ul>
        </div>
      </li>
      <!-- MICRO 3 -->
      <li id="col">
        <div id="projects">
          <div class="margin">
            <div class="margin-text">Subversive acts of <span class="word">gender</span></div>
          </div>
          <ul class="links">
            <li data-index="8" id="project-link">
              <h1>Titane:</h1>
              <h2>Beyond Gender, Beyond Human</h2>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
            <li data-index="9" id="project-link">
              <h1>Metagenesis</h1>
              <h2>Beyond Human, Beyond Gender</h2>
              <p class="sub"> Uma ficção a partir de Titane (2021), <br>de Julia Ducournau</p>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
            <li data-index="10" id="project-link">
              <h1>Iris:</h1>
              <h2>Beyond Words</h2>
              <p class="sub"> Uma ficção a partir de Orlando (1993), <br>de Sally Potter</p>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
          </ul>
      </li>
      <!-- MICRO 5 -->
      <li id="col">
        <div id="projects">
          <div class="margin">
            <div class="margin-text"><span class="word">Woman</span> as looking glasses</div>
          </div>
          <ul class="links">
            <li data-index="4" id="project-link">
              <h1>Here, Where Women Watch Themselves Being Looked At...</h1>
              <p class="sub"> Uma ficção a partir de I Am Love (2009),<br>de Luca Guadanino</p>
              <p class="keywords">#Female gaze #Gender roles #Female liberation #Womanhood</p>
            </li>
            <li data-index="5" id="project-link">
              <h1>Klute</h1>
              <h2>“A Walk on the Wild Side”</h2>
              <p class="keywords">#Feminine interior #Feminism #Marginality #Male gaze</p>
            </li>
            <li data-index="6" id="project-link">
              <h1>Une Femme est Une Femme</h1>
              <h2>Toute Les Femmes</h2>
              <p class="keywords">#Male gaze #Femininity #Feminine interior #Gender roles</p>
            </li>
            <li data-index="7" id="project-link">
              <h1>Rabbit or Duck</h1>
              <h2>7 (rabbit’s) foot 9</h2>
              <p class="keywords">#Mythical norm #Privilege #Women liberation #Body</p>
            </li>
          </ul>
        </div>
      </li>
      <!-- MICRO 3 -->
      <li id="col">
        <div id="projects">
          <div class="margin">
            <div class="margin-text">Subversive acts of <span class="word">gender</span></div>
          </div>
          <ul class="links">
            <li data-index="8" id="project-link">
              <h1>Titane:</h1>
              <h2>Beyond Gender, Beyond Human</h2>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
            <li data-index="9" id="project-link">
              <h1>Metagenesis</h1>
              <h2>Beyond Human, Beyond Gender</h2>
              <p class="sub"> Uma ficção a partir de Titane (2021), <br>de Julia Ducournau</p>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
            <li data-index="10" id="project-link">
              <h1>Iris:</h1>
              <h2>Beyond Words</h2>
              <p class="sub"> Uma ficção a partir de Orlando (1993), <br>de Sally Potter</p>
              <p class="keywords"> #Gender performativity #Bodily acts #Human evolution</p>
            </li>
          </ul>
      </li>
    </ul>
    <!--project template-->
    <div class="project_template">
      <div id="micro">
        <h3 class="microtitle"></h3>
      </div>
      <div id="infos">
        <button>x</button>
        <h3 class="title">
          </h1>
          <h3 class="subtitle">
            </h1>
            <h4 class="sub">
              </h2>
              <p class="content"></p>
              <p class="credits"></p>
              <div class="image"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>

</html>

CSS

/* Fonts */
@font-face {
    font-family: "AuthenticSans-C-130";
    src: url(FONTS/AUTHENTICSans-Condensed-130 - cópia.otf);
}
@font-face {
    font-family: "AuthenticSans-C-90";
    src: url(FONTS/AUTHENTICSans-Condensed-90 - cópia.otf );
}
@font-face {
    font-family: "AuthenticSans-C-60";
    src: url(FONTS/AUTHENTICSans-Condensed-60 - cópia.otf);
}
@font-face {
    font-family: "Romie-I";
    src: url(FONTS/RomieTrial-Regular-Italic - cópia.otf);
}
@font-face {
    font-family: "Messina";
    src: url(FONTS/MessinaSansMono-Book.ttf);
}
/* Paragraph Style */
.title {
    font-family: "AuthenticSans-C-130";
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 20px;
}
.margin-text {
    font-family: "Romie-I";
    font-size: 25px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-align: center;
    color: white;
    transform: rotate(180deg);
    margin-top: 20px;
    vertical-align: baseline;
    text-shadow: 0px 2px 4px rgb(5, 5, 5);
    white-space: nowrap;
}
.word {
    font-family: "AuthenticSans-C-130";
}
h1,h2{
    color: white;
    padding-left: 35px;
    hyphens: auto;    
    word-wrap: break-word;
    text-transform: uppercase;
}
h1{
    font-family: "AuthenticSans-C-130";
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 0;
    line-height: 1;
}
h2{
    font-family: "AuthenticSans-C-90";
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2px;
}
.sub{
    font-family: "Romie-I";
    font-size: 10px;
    padding-left: 55px;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 5px;
}
.keywords{
    font-family: "Messina";
    font-size: 5px;
    padding-left: 35px;
}
/* */
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
.sidebarAbout {
    height: 100vh;
    z-index: 4;
    background-color: black;
    width: 20px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    -webkit-box-shadow: inset -5px 0px 7px -3px rgba(255, 255, 255, 0.837);
    -moz-box-shadow: inset -5px 0px 7px -3px rgba(255, 255, 255, 0.837);
    box-shadow: inset -5px 0px 7px -3px rgba(255, 255, 255, 0.837);
}
.menu {
    height: 100%;
    width: 55px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}
#menu-button {
    writing-mode: vertical-rl;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(180deg);
    text-shadow: 0px 0px 4px rgb(139, 139, 139);
    pointer-events: none;
}
/* accordion */
ul, #vertical-accordion, #col {
    margin: 0;
    padding: 0;
    list-style: none;
}
#vertical-accordion {
    display: flex;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}
#col{
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    flex-direction: row;
   /* box shadow */
    -webkit-box-shadow: -2px 0px 11px 0px rgb(0, 0, 0);
    -moz-box-shadow: -2px 0px 11px 0px rgba(0, 0, 0, 0);
    box-shadow: -2px 0px 11px 0px rgba(0, 0, 0);
   /* animation */
    -webkit-transition: -webkit-box-flex 500ms ease-out;
    -webkit-transition: -webkit-flex 500ms ease-out;
    transition: -webkit-box-flex 500ms ease-out;
    transition: -ms-flex 500ms ease-out;
    transition: flex 500ms ease-out;
    background-color: black;
}
#vertical-accordion:not(:hover) #col.selected, #col:hover {
    -webkit-box-flex: 300px;
    -webkit-flex: 300px;
    -ms-flex: 300px;
    flex: 300px;
}
#projects {
    width: 390px;
    background-color: rgb(0, 0, 0);
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
#project-link:hover{
    cursor: pointer;
    text-decoration: none;
    -webkit-stroke-width: 4vmax;
    -webkit-stroke-color: #ffffffa5;
    -webkit-fill-color: #ffffffa5;
    text-shadow: 0px 0px 10px #ffffffa5;
}
.margin {
    width: 31px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: row;
    align-items: baseline;
    text-align: center;
    padding-left: 5px;
}
.links{
    cursor:pointer;
    overscroll-behavior: contain;
    color: white;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
#project-link{
    margin-bottom: 50px;
    overflow: hidden;
}
.my-img, img {
    width: 100%;
    position: static;
    height: 100%;
    object-fit: cover;
    padding-top: 10px;
}
/* project-template */
.project_template {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 97vw;
    height: 100vh;
    background-color: black;
}
.project_template.expanded {
    display: flex;
    flex-direction: row;
}
.micro {
    width: 1vw;
    padding: 20px;
    height: 100vw;
    background-color: white;
}
#infos {
    width: 35vw;
    height: 100vh;
    padding: 20px;
    background-color: white;
    overflow: scroll;
}
Tags:

2

Answers


  1. 0

    First you just need to make an animation for all you boxes, like the following:

    .box.active {
  animation: scrollAnimation 10s infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

    Then u just need to use JavaScript to listen on an mouseover event for each box. Like the following:

      const boxes = document.querySelectorAll(".box");
  boxes.forEach((box)=>{
  box.addEventListener("mouseover",()=>{
    boxes.forEach((e)=>{
        e.classList.add("active");
    })
    box.classList.remove("active");
  })
  })

    Example code:

    <!DOCTYPE>
<html>
<head>
  <style>
  .scroll-box {
  height: 300px;
  overflow: hidden;
  position: relative;
}
.flex{
  display: flex;
}
.box.active {
  animation: scrollAnimation 10s infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
  </style>
</head>
<body>
<div class="flex">
  
  <div class="box active">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>


  <div class="box active">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Phasellus posuere, nisi eget fermentum aliquet, mauris lectus tristique turpis, ut congue ligula mi ac nunc.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>

</div>
  

</body>
<script>
    const boxes = document.querySelectorAll(".box");
  boxes.forEach((box)=>{
  box.addEventListener("mouseover",()=>{
    boxes.forEach((e)=>{
        e.classList.add("active");
    })
    box.classList.remove("active");
  })
  })
</script>
</html>

    I hope this helps! And good luck for your course

    Login or Signup to reply.
  2. 0

    No need for JS, you can do it with just animation-play-state

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.container {
  display: flex;
  height: 100vh;
  gap: 1.5em;
  padding: 1em;
}

.column {
  overflow: hidden;
}

.content {
  position: relative;
  animation: scroll 5s alternate infinite linear;
}

.content:hover {
  animation-play-state: paused;
}

p {
  margin-bottom: 0.5em;
  text-indent: 1em;
  text-align: justify;
}

@keyframes scroll {
  0% {
    top: 0;
    transform: translateY(0%);
  }
  100% {
    top: 100%;
    transform: translateY(-100%);
  }
}
    <div class="container">
  <div class="column">
    <div class="content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui ex quidem quaerat tenetur voluptatem nostrum veritatis! Odit, velit sint. Amet dolore dolorem, hic consequatur corporis quisquam illum expedita. Minus, nostrum?</p>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search