Html Question posted in
Some basic documentation can be found here.

automatically scroll a <DIV> where the CSS overflow attribute is set to auto – Html

I am creating a testimonial section which have two an i want both of then div to automatic scroll, and keep scrolling anside the div whose height is fixed
I dont know why but only one div moves and the other doesnt in my code.
I have created one div and applied javascript for the automatic scroll, but the javascript doesnt work for the second div.

ScrollRate = 100;

function scrollDiv_init() {
  DivElmnt = document.getElementById("MyDivName");
  ReachedMaxScroll = false;

  DivElmnt.scrollTop = 0;
  PreviousScrollTop = 0;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop++;

    ReachedMaxScroll =
      DivElmnt.scrollTop >= DivElmnt.scrollHeight - DivElmnt.offsetHeight;
  } else {
    ReachedMaxScroll = DivElmnt.scrollTop == 0 ? false : true;

    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop--;
  }
}

function pauseDiv() {
  clearInterval(ScrollInterval);
}

function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

ScrollRate2 = 100;

function scrollDiv_init_2() {
  DivElmnt2 = document.getElementById("MyDivName2");
  ReachedMaxScroll2 = false;

  DivElmnt2.scrollTop2 = 0;
  PreviousScrollTop2 = 0;

  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}

function scrollDiv2() {
  if (!ReachedMaxScroll2) {
    DivElmnt2.scrollTop2 = PreviousScrollTop2;
    PreviousScrollTop2++;

    ReachedMaxScroll2 =
      DivElmnt2.scrollTop2 >= DivElmnt2.scrollHeight2 - DivElmnt2.offsetHeight2;
  } else {
    ReachedMaxScroll2 = DivElmnt2.scrollTop2 == 0 ? false : true;

    DivElmnt2.scrollTop2 = PreviousScrollTop2;
    PreviousScrollTop2--;
  }
}

function pauseDiv2() {
  clearInterval(ScrollInterval2);
}

function resumeDiv2() {
  PreviousScrollTop2 = DivElmnt2.scrollTop2;
  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}
body {
  /* background-color: #ffffff; */
}
.container {
  /* background-color: #ffffff; */
  width: 600px;
}
.t-card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 23px;
  background-color: #faf7f5;
  padding: 5%;
  font-family: "Poppins", sans-serif;
}
.maintxt {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}
.name {
  color: #000;
  font-size: 18px;
  /* font-weight: bold; */
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
}
.para {
  color: #8c8c8c;
  font-size: 16px;
  position: relative;
  bottom: 3px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
}

.test-main-box {
  height: 400px;

  /* height: 400px; */
}

.test-box-1 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}

.test-box-2 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    />
  </head>
  <body onLoad="scrollDiv_init()" onLoad="scrollDiv_init_2()">
    <div class="container mt-5">
      <div class="test-main-box d-flex justify-content-center py-3">
        <div
          id="MyDivName"
          class="test-box-1 mr-2"
          onMouseOver="pauseDiv()"
          onMouseOut="resumeDiv()"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          id="MyDivName2"
          class="test-box-2 ml-2"
          onMouseOver="pauseDiv2()"
          onMouseOut="resumeDiv2()"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 

    // ScrollRate = 100;

// function scrollDiv_init() {
//   DivElmnt = document.getElementById("MyDivName");
//   ReachedMaxScroll = false;

//   DivElmnt.scrollTop = 0;
//   PreviousScrollTop = 0;

//   ScrollInterval = setInterval("scrollDiv()", ScrollRate);
// }

// function scrollDiv() {
//   if (!ReachedMaxScroll) {
//     DivElmnt.scrollTop = PreviousScrollTop;
//     PreviousScrollTop++;

//     ReachedMaxScroll =
//       DivElmnt.scrollTop >= DivElmnt.scrollHeight - DivElmnt.offsetHeight;
//   } else {
//     ReachedMaxScroll = DivElmnt.scrollTop == 0 ? false : true;

//     DivElmnt.scrollTop = PreviousScrollTop;
//     PreviousScrollTop--;
//   }
// }

// function pauseDiv() {
//   clearInterval(ScrollInterval);
// }

// function resumeDiv() {
//   PreviousScrollTop = DivElmnt.scrollTop;
//   ScrollInterval = setInterval("scrollDiv()", ScrollRate);
// }

// ScrollRate = 100;

// function scrollDiv_init() {
//   DivElmnt2 = document.getElementById("MyDivName2");
//   ReachedMaxScroll = false;

//   DivElmnt2.scrollTop = 0;
//   PreviousScrollTop = 0;

//   ScrollInterval = setInterval("scrollDiv()", ScrollRate);
// }

// function scrollDiv() {
//   if (!ReachedMaxScroll) {
//     DivElmnt2.scrollTop = PreviousScrollTop;
//     PreviousScrollTop++;

//     ReachedMaxScroll2 =
//       DivElmnt2.scrollTop >= DivElmnt2.scrollHeight - DivElmnt2.offsetHeight;
//   } else {
//     ReachedMaxScroll = DivElmnt2.scrollTop == 0 ? false : true;

//     DivElmnt2.scrollTop = PreviousScrollTop;
//     PreviousScrollTop--;
//   }
// }

// function pauseDiv() {
//   clearInterval(ScrollInterval);
// }

// function resumeDiv() {
//   PreviousScrollTop = DivElmnt.scrollTop;
//   ScrollInterval = setInterval("scrollDiv()", ScrollRate);
// }

ScrollRate = 50;

function scrollDiv_init() {
  DivElmnt = document.getElementById("MyDivName");
  DivElmntSecond = document.getElementById("MyDivName2");

  ReachedMaxScroll = false;
  ReachedMaxScrollSecond = false;

  DivElmnt.scrollTop = 0;
  DivElmntSecond.scrollTop = 0;

  PreviousScrollTop = 0;
  PreviousScrollTopSecond = 0;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop++;

    ReachedMaxScroll =
      DivElmnt.scrollTop >= DivElmnt.scrollHeight - DivElmnt.offsetHeight;
  } else {
    ReachedMaxScroll = DivElmnt.scrollTop == 0 ? false : true;

    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop--;
  }

  if (!ReachedMaxScrollSecond) {
    DivElmntSecond.scrollTop = PreviousScrollTopSecond;
    PreviousScrollTopSecond++;

    ReachedMaxScrollSecond =
      DivElmntSecond.scrollTop >=
      DivElmntSecond.scrollHeight - DivElmntSecond.offsetHeight;
  } else {
    ReachedMaxScrollSecond = DivElmntSecond.scrollTop == 0 ? false : true;

    DivElmntSecond.scrollTop = PreviousScrollTopSecond;
    PreviousScrollTopSecond--;
  }
}

function pauseDiv() {
  clearInterval(ScrollInterval);
}

function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  PreviousScrollTopSecond = DivElmntSecond.scrollTop;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}
    body {
  /* background-color: #ffffff; */
}
.container {
  /* background-color: #ffffff; */
  width: 600px;
}
.t-card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 23px;
  background-color: #faf7f5;
  padding: 5%;
  font-family: "Poppins", sans-serif;
}
.maintxt {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}
.name {
  color: #000;
  font-size: 18px;
  /* font-weight: bold; */
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
}
.para {
  color: #8c8c8c;
  font-size: 16px;
  position: relative;
  bottom: 3px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
}

.test-main-box {
  height: 400px;

  /* height: 400px; */
}

.test-box {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}

.test-box-2 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    />
  </head>
  <body onLoad="scrollDiv_init()" onLoad="scrollDiv_init()">
    <div class="container mt-5">
      <div class="test-main-box d-flex justify-content-center py-3">
        <div
          id="MyDivName"
          class="test-box mr-2"
          onMouseOver="pauseDiv()"
          onMouseOut="resumeDiv()"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          id="MyDivName2"
          class="test-box ml-2"
          onMouseOver="pauseDiv()"
          onMouseOut="resumeDiv()"
          style="overflow-y: scroll; scroll-behavior: reverse"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

    This code helped me to achieve what i was trying.


  2. 0

    There are many errors because of var names and dulpicates. But in resume, you can’t have 2 onLoad properties on body tag also you can’t set scrollTop as a var, it’s a attribute of the respective element.

    ScrollRate = 100;

function init() {
  scrollDiv_init();
  scrollDiv_init_2();
}

function scrollDiv_init() {
  DivElmnt = document.getElementById("MyDivName");
  ReachedMaxScroll = false;

  DivElmnt.scrollTop = 0;
  PreviousScrollTop = 0;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop++;

    ReachedMaxScroll =
      DivElmnt.scrollTop >= DivElmnt.scrollHeight - DivElmnt.offsetHeight;
  } else {
    ReachedMaxScroll = DivElmnt.scrollTop == 0 ? false : true;

    DivElmnt.scrollTop = PreviousScrollTop;
    PreviousScrollTop--;
  }
}

function pauseDiv() {
  clearInterval(ScrollInterval);
}

function resumeDiv() {
  PreviousScrollTop = DivElmnt.scrollTop;
  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

ScrollRate2 = 100;

function scrollDiv_init_2() {
  DivElmnt2 = document.getElementById("MyDivName2");
  ReachedMaxScroll2 = false;

  DivElmnt2.scrollTop = DivElmnt2.scrollHeight - DivElmnt2.offsetHeight;
  PreviousScrollTop2 = DivElmnt2.scrollHeight - DivElmnt2.offsetHeight;

  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}

function scrollDiv2() {
  if (!ReachedMaxScroll2) {
    DivElmnt2.scrollTop = PreviousScrollTop2;
    PreviousScrollTop2--;

    ReachedMaxScroll2 = DivElmnt2.scrollTop == 0;
  } else {
    ReachedMaxScroll2 = DivElmnt2.scrollTop >= DivElmnt2.scrollHeight - DivElmnt2.offsetHeight ? false : true;

    DivElmnt2.scrollTop = PreviousScrollTop2;
    PreviousScrollTop2++;
  }
}

function pauseDiv2() {
  clearInterval(ScrollInterval2);
}

function resumeDiv2() {
  PreviousScrollTop2 = DivElmnt2.scrollTop;
  ScrollInterval2 = setInterval("scrollDiv2()", ScrollRate2);
}
    body {
  /* background-color: #ffffff; */
}
.container {
  /* background-color: #ffffff; */
  width: 600px;
}
.t-card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 23px;
  background-color: #faf7f5;
  padding: 5%;
  font-family: "Poppins", sans-serif;
}
.maintxt {
  color: #1f1f1f;
  font-weight: 500;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}
.name {
  color: #000;
  font-size: 18px;
  /* font-weight: bold; */
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 600;
}
.para {
  color: #8c8c8c;
  font-size: 16px;
  position: relative;
  bottom: 3px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 500;
}

.test-main-box {
  height: 400px;

  /* height: 400px; */
}

.test-box-1 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}

.test-box-2 {
  /* -webkit-animation: test-box-1 36s linear infinite; */
  /* animation: test-box-1 36s linear infinite; */
  /* height: -webkit-fit-content; */
  /* height: fit-content; */
  overflow: auto;
  width: auto;
  height: 400px;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    />
  </head>
  <body onLoad="init()">
    <div class="container mt-5">
      <div class="test-main-box d-flex justify-content-center py-3">
        <div
          id="MyDivName"
          class="test-box-1 mr-2"
          onMouseOver="pauseDiv()"
          onMouseOut="resumeDiv()"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          id="MyDivName2"
          class="test-box-2 ml-2"
          onMouseOver="pauseDiv2()"
          onMouseOut="resumeDiv2()"
        >
          <div class="t-card">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>

          <div class="t-card mt-3">
            <div class="px-2 py-2">
              <span class="maintxt"
                >"Lorem ipsum dolor sit amet,consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore magna aliqua."</span
              >
              <div class="d-flex pt-3">
                <div>
                  <img
                    src="https://i.imgur.com/hczKIze.jpg"
                    width="50"
                    class="rounded-circle"
                  />
                </div>
                <div class="ml-2">
                  <span class="name">Dan Spratling</span>
                  <p class="para">Company name</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search