index.html
Card structure for flip animation
<div class="card facebook">
<div class="card-front"><i class="fa fa-facebook"></i></div>
<div class="card-back">Facebook</div>
</div>
✔ A card has two faces
✔ .card-front shows the icon
✔ .card-back shows text
✔ CSS flips between them on hover.
Feed-In icon section
<div class="feed-in">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</div>
✔ Displays circular icons that animate inward when hovered.
style.css
Two-colored sliding background
.tow-colored ul li:before {
left: -100%;
}
.tow-colored ul li:hover:before {
left: 0;
transform: scale(1);
}
✔ Background slides in from left → color reveal animation.
Half-colored rotate + overlay effect
.half-colored ul li {
transform: rotate(45deg);
}
.half-colored ul li:after {
top: 100%;
}
.half-colored ul li:hover:after {
top: 0;
}
✔ Main circle is rotated
✔ Another colored layer slides upward on hover
✔ Icon rotates back to appear upright.
