<section class="marquee">
  <div class="scroll">
	  <div>
			<h3 class="category">Demo 1</h3>
      <h3 class="category">Demo 2</h3>
			<h3 class="category">Demo 3</h3>
			<h3 class="category">Demo 4</h3>
			<h3 class="category">Demo 5</h3>
      <h3 class="category">Demo 6</h3>
			<h3 class="category">Demo 7</h3>
			<h3 class="category">Demo 8</h3>
			<h3 class="category">Demo 9</h3>
      <h3 class="category"><a href="https://google.com" target="_blank">Ask Google</a></h3>
		</div>
    <!--Second equal div to ensure continuity of marquee-->
	  <div>
			<h3 class="category">Demo 1</h3>
			<h3 class="category">Demo 2</h3>
			<h3 class="category">Demo 3</h3>
			<h3 class="category">Demo 4</h3>
			<h3 class="category">Demo 5</h3>
      <h3 class="category">Demo 6</h3>
			<h3 class="category">Demo 7</h3>
			<h3 class="category">Demo 8</h3>
			<h3 class="category">Demo 9</h3>
      <h3 class="category"><a href="https://google.com" target="_blank">Ask Google</a></h3>
		</div>
	</div>
</section>

/*Default Style Page*/
body{margin:0;}

/*Marquee stile*/
.marquee{
  background: #0A532C;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.marquee .scroll{
  width: 100%;
  display: flex;
}
.marquee .scroll div{
  color: #fff;
  font-size: 35px;
  background: #0A532C;
  white-space: nowrap;
  font-weight: 500;
  animation: animate-marquee 80s linear infinite;
  animation-delay: -40s;
}
.marquee .scroll div:nth-child(2){
  animation: animate-marquee-2 80s linear infinite;
  animation-delay: -80s;
}
.marquee .scroll div .category{
  padding: 10px 30px;
}
.category{
  color: #fff;
  font-size: 35px;
  font-weight: 600!important;
  clear: both;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  line-height: 20px;
  font-family: sans-serif;
}
.category a{color:#FFF;text-decoration: none;}

/*Responsive marquee*/
@media (max-width:767px){
  .category{font-size: 25px;}
  .marquee .scroll div{font-size: 25px;}
}

@keyframes animate-marquee{
	0%{
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	100%{
		-moz-transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
}

@keyframes animate-marquee-2{
	0%{
		-moz-transform: translateX(0%);
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	100%{
		-moz-transform: translateX(-200%);
		-webkit-transform: translateX(-200%);
		transform: translateX(-200%);
	}
}

/* --------------
I didn't use any JS code for this project, just good old CSS.
---------------*/