<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="circle-wrapper">
<ul class="circle-container rotate">
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-shopify.svg" alt="Shopify" data-was-processed="true"></li>
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-magento.svg" alt="Magento" data-was-processed="true"></li>
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-mailchimp.svg" alt="Mailchimp" data-was-processed="true"></li>
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-klaviyo.svg" alt="Klavio" data-was-processed="true"></li>
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-wordpress.svg" alt="WordPress" data-was-processed="true"></li>
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-zapier.svg" alt="Zapier" data-was-processed="true"></li>
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-gtm.svg" alt="Google" data-was-processed="true"></li>
<li><img class="unrotate" src="https://wisepops.com/wp-content/uploads/2019/08/icon-hubspot.svg" alt="Hubspot" data-was-processed="true"></li>
</ul>
<img src="https://wisepops.com/wp-content/uploads/2019/08/icon-wisepops.svg" alt="">
</div>
<div class="col-12 copy-right text-center">© Saturday, October 3, 2020 quanth</dv>
</div>
</div>
.circle-wrapper {
background-image: url(https://wisepops.com/wp-content/themes/wisepops/assets/dist/svg/m-bg-circle.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
margin: 51px auto;
display: block;
}
.circle-wrapper>img {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
margin: 0;
}
.circle-wrapper img {
display: block;
border-radius: 100%;
background-color: #fff;
-webkit-box-shadow: 0 8px 16px 0 rgba(31,45,61,.16);
box-shadow: 0 8px 16px 0 rgba(31,45,61,.16);
image-rendering: crisp-edges;
}
.circle-container {
position: relative;
width: 25em;
height: 25em;
padding: 0;
border-radius: 50%;
list-style: none;
margin: 0 auto;
}
.circle-container>* {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 6em;
height: 6em;
margin: -3em;
}
.circle-container>:nth-of-type(1) {
-webkit-transform: rotate(0) translate(12.5em) rotate(0);
transform: rotate(0) translate(12.5em) rotate(0);
}
.circle-container>:nth-of-type(2) {
-webkit-transform: rotate(45deg) translate(12.5em) rotate(-45deg);
transform: rotate(45deg) translate(12.5em) rotate(-45deg);
}
.circle-container>:nth-of-type(3) {
-webkit-transform: rotate(90deg) translate(12.5em) rotate(-90deg);
transform: rotate(90deg) translate(12.5em) rotate(-90deg);
}
.circle-container>:nth-of-type(4) {
-webkit-transform: rotate(135deg) translate(12.5em) rotate(-135deg);
transform: rotate(135deg) translate(12.5em) rotate(-135deg);
}
.circle-container>:nth-of-type(5) {
-webkit-transform: rotate(180deg) translate(12.5em) rotate(-180deg);
transform: rotate(180deg) translate(12.5em) rotate(-180deg);
}
.circle-container>:nth-of-type(6) {
-webkit-transform: rotate(225deg) translate(12.5em) rotate(-225deg);
transform: rotate(225deg) translate(12.5em) rotate(-225deg);
}
.circle-container>:nth-of-type(7) {
-webkit-transform: rotate(270deg) translate(12.5em) rotate(-270deg);
transform: rotate(270deg) translate(12.5em) rotate(-270deg);
}
.circle-container>:nth-of-type(8) {
-webkit-transform: rotate(315deg) translate(12.5em) rotate(-315deg);
transform: rotate(315deg) translate(12.5em) rotate(-315deg);
}
.rotate, .unrotate {
-webkit-animation: rotate 120s linear infinite;
animation: rotate 120s linear infinite;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pulse, .unrotate {
-webkit-animation: unrotate 120s linear infinite;
animation: unrotate 120s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform:rotate(.02deg) translate3d(0,0,0);
transform:rotate(.02deg) translate3d(0,0,0)
} to {
-webkit-transform:rotate(360deg) translate3d(0,0,0);
transform:rotate(360deg) translate3d(0,0,0)
}
}
@keyframes rotate {
0% {
-webkit-transform:rotate(.02deg) translate3d(0,0,0);
transform:rotate(.02deg) translate3d(0,0,0)
} to {
-webkit-transform:rotate(360deg) translate3d(0,0,0);
transform:rotate(360deg) translate3d(0,0,0)
}
}
@-webkit-keyframes unrotate {
0% {
-webkit-transform:rotate(.02deg) translate3d(0,0,0);
transform:rotate(.02deg) translate3d(0,0,0)
} to {
-webkit-transform:rotate(-360deg) translate3d(0,0,0);
transform:rotate(-360deg) translate3d(0,0,0)
}
}
@keyframes unrotate {
0% {
-webkit-transform:rotate(.02deg) translate3d(0,0,0);
transform:rotate(.02deg) translate3d(0,0,0)
} to {
-webkit-transform:rotate(-360deg) translate3d(0,0,0);
transform:rotate(-360deg) translate3d(0,0,0)
}
}
.copy-right {
display: block;
margin-top: 51px;
}
