xxxxxxxxxx1
<div class="wrapper d-flex">2
<div class="advantages">3
<div class="h1 d-flex">MDBootstrap is4
<div class="info-color badge text-white px-3 py-2 d-inline-block font-weight-light">5
<ul class="list-unstyled">6
<li>cool</li>7
<li>beautiful</li>8
<li>well-documented</li>9
<li>easy to use</li>10
</ul>11
</div>12
</div>13
</div>14
</div>xxxxxxxxxx1
.wrapper {2
min-height:100vh;3
justify-content: center;4
align-items: center;5
}6
7
.advantages {8
justify-content: center;9
align-items: center;10
}11
12
.advantages .h1 {13
align-items: center;14
}15
16
.advantages .badge {17
display: inline-block;18
margin-left: 8px;19
height: 45px;20
overflow: hidden;21
}22
23
.advantages .badge ul {24
display: inline-block;25
margin: 0;26
padding: 0;27
animation-name: rotator;28
animation-duration: 7s;29
animation-iteration-count: infinite;30
}31
32
.advantages .badge ul > li {33
font-size: inherit;34
height: 45px;35
}36
37
@keyframes rotator {38
0% { margin-top: 0; }39
25% { margin-top: -20%; }40
50% { margin-top: -40%; }41
75% { margin-top: -60%; }42
90% { margin-top: 0%; }43
}1
1
Console errors: 0