<div class="tavsiyekutusu cmf">
<span style="color: white;">CodeMareFi</span>
</div>
<div class="tavsiyekutusu cmf2">
<span style="color: white;">CodeMareFi</span>
</div>
<div class="tavsiyekutusu cmf3">
<span style="color: white;">CodeMareFi</span>
</div>
<div class="tavsiyekutusu cmf4">
<span style="color: white;">CodeMareFi</span>
</div>
<span style="color: #ec0707;">
<i aria-hidden="true" class="fa fa-heart fa-lg fa-beat"></i>
</span>
<a href="https://codemarefi.blogspot.com" target="_blank">
<b>
<span style="color: #1a81f3;">C</span>
<span style="color: #ec0707;">o</span>
<span style="color: #f4ce0b;">d</span>
<span style="color: #1a81f3;">e</span>
<span style="color: #01b80d;">M</span>
<span style="color: #ec0707;">a</span>
<span style="color: #1a81f3;">r</span>
<span style="color: #f4ce0b;">e</span>
<span style="color: #ec0707;">F</span>
<span style="color: #ec0707;">i</span>
</b>
</a>
/* cmf - kutu */
.tavsiyekutusu {
overflow: hidden;
position: relative;
margin: 1.5rem 0 1rem;
transition: box-shadow .25s;
border-radius: 2px;
color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
padding: 30px;
font-size: 18px
}
.tavsiyekutusu.cmf {
background: linear-gradient(-50deg, #c0392b, #d35400, #f39c12, #2980b9, #8e44ad, #e84393);
background-size: 320% 200%;
animation: Gradient 5s ease infinite;
position: relative;
overflow: hidden;
font-color: #fff
}
.tavsiyekutusu.cmf2 {
background: linear-gradient(-50deg, #00b894, #00cec9, #0984e3, #6c5ce7, #fdcb6e, #e17055);
background-size: 320% 200%;
animation: Gradient 15s ease infinite;
position: relative;
overflow: hidden;
font-color: #fff
}
.tavsiyekutusu.cmf3 {
background: linear-gradient(-50deg, #4b6584, #3867d6, #4b7bec, #2d98da, #45aaf2, #fc5c65);
background-size: 320% 200%;
animation: Gradient 15s ease infinite;
position: relative;
overflow: hidden;
font-color: #fff
}
.tavsiyekutusu.cmf4 {
background: linear-gradient(-50deg, #2c3e50, #34495e, #222f3e, #576574, #0c2461, #1e3799);
background-size: 320% 200%;
animation: Gradient 15s ease infinite;
position: relative;
overflow: hidden;
font-color: #fff
}
.fa-beat {
animation: fa-beat 3.5s ease infinite
}
.fa-lg {
font-size: 1.33333333em;
line-height: .75em;
margin-left: 90%;
vertical-align: -15%;
}
a {
/* color: #ff1100; */
text-decoration: none;
outline: none;
transition: all 0.15s;
}
b {
font-weight: 700;
padding: 0;
transition: color 1.2s;
}
@keyframes fa-beat {
0% {
transform: scale(1)
}
5% {
transform: scale(1.25)
}
20% {
transform: scale(1)
}
30% {
transform: scale(1)
}
35% {
transform: scale(1.25)
}
50% {
transform: scale(1)
}
55% {
transform: scale(1.25)
}
70% {
transform: scale(1)
}
}
@keyframes Gradient {
0% {
background-position:0 50%
}
50% {
background-position:100% 50%
}
100% {
background-position:0 50%
}
}
This Pen doesn't use any external JavaScript resources.