Counters

Hi,

I want to implementate the counters from the Quark module like this:


I have copied:

Code: Select all

.gk-big-text + .gk-counters {
  margin: -50px 0 100px 0;
}
.gk-counters {
  color: #323232;
  text-align: center;
}
.gk-counters > .gk-counter {
  display: inline-block;
  line-height: 1.2;
  min-width: 220px;
  position: relative;
}
.gk-counters > .gk-counter:after {
  background: rgba(255,255,255,0.3);
  content: "";
  height: 72px;
  position: absolute;
  right: 0;
  top: 20px;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  width: 2px;
}
.gk-counters > .gk-counter:last-child:after {
  display: none;
}
.gk-counters > .gk-counter > span {
  font-size: 72px;
}
.gk-counters > .gk-counter > small {
  display: block;
  font-size: 20px;
}

to overide.css and used the following code on my module:

Code: Select all

<div class="gk-counters">
<div class="gk-counter"><span data-sr="enter bottom" data-count="69">0</span><small>projects</small></div>
<div class="gk-counter"><span data-sr="enter bottom" data-count="467">0</span><small>clients</small></div>
<div class="gk-counter"><span data-sr="enter bottom" data-count="865">0</span><small>coffee cups</small></div>
</div>

But it doesn't count.

link

Because it requires JavaScript to work

and I can find this piece of code where...?

in gk.scripts.js ?

You need scrollreveal.js and js that is attached to default.php of quark template.