<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.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"> <!-- Card 1 --> <div class="four wide column red card"> <div class="ui raised card" style="background-color: #FF5733; color: #FFFFFF; border: 3px solid #FFC300;"> <div class="content"> <div class="header" style="font-size: 1.5em; font-weight: bold;">Santosh Jadagoudar</div> <div class="meta"> <span class="category" style="color: #FFC300;">Trainer</span> </div> <div class="description" style="margin-top: 10px;"> <p>Santosh J is a web developer and a trainer with 17 years of experience.</p> </div> </div> <div class="extra content" style="background-color: #C70039; color: #FFC300;"> <div class="right floated author"> <img class="ui avatar image" src="https://i.ibb.co/ZJ8k3FY/santosh-jadagoudar.jpg" style="border: 2px solid #FFC300; border-radius: 50px;"> Santosh </div> </div> </div> </div> <!-- Card 2 --> <div class="four wide column red card"> <div class="ui raised card" style="background-color: #33FF57; color: #FFFFFF; border: 3px solid #FF5733;"> <div class="content"> <div class="header" style="font-size: 1.5em; font-weight: bold;">Santosh Jadagoudar</div> <div class="meta"> <span class="category" style="color: #FF5733;">Trainer</span> </div> <div class="description" style="margin-top: 10px;"> <p>Santosh J is a web developer and a trainer with 17 years of experience.</p> </div> </div> <div class="extra content" style="background-color: #900C3F; color: #FFC300;"> <div class="right floated author"> <img class="ui avatar image" src="https://i.ibb.co/ZJ8k3FY/santosh-jadagoudar.jpg" style="border: 2px solid #FF5733; border-radius: 50px;"> Santosh </div> </div> </div> </div> <!-- Card 3 --> <div class="four wide column red card"> <div class="ui raised card" style="background-color: #33C7FF; color: #FFFFFF; border: 3px solid #FFC300;"> <div class="content"> <div class="header" style="font-size: 1.5em; font-weight: bold;">Santosh Jadagoudar</div> <div class="meta"> <span class="category" style="color: #FFC300;">Trainer</span> </div> <div class="description" style="margin-top: 10px;"> <p>Santosh J is a web developer and a trainer with 17 years of experience.</p> </div> </div> <div class="extra content" style="background-color: #001F3F; color: #FFC300;"> <div class="right floated author"> <img class="ui avatar image" src="https://i.ibb.co/ZJ8k3FY/santosh-jadagoudar.jpg" style="border: 2px solid #FFC300; border-radius: 50px;"> Santosh </div> </div> </div> </div> <!-- Card 4 --> <div class="four wide column red card"> <div class="ui raised card" style="background-color: #FFC300; color: #000000; border: 3px solid #FF5733;"> <div class="content"> <div class="header" style="font-size: 1.5em; font-weight: bold;">Santosh Jadagoudar</div> <div class="meta"> <span class="category" style="color: #FF5733;">Trainer</span> </div> <div class="description" style="margin-top: 10px;"> <p>Santosh J is a web developer and a trainer with 17 years of experience.</p> </div> </div> <div class="extra content" style="background-color: #FF5733; color: #FFFFFF;"> <div class="right floated author"> <img class="ui avatar image" src="https://i.ibb.co/ZJ8k3FY/santosh-jadagoudar.jpg" style="border: 2px solid #FF5733; border-radius: 50px;"> Santosh </div> </div> </div> </div> </div> </div>

body { background-color: #2F4073; color: #A663D3; font-family: Arial, sans-serif; } .ui.raised.card { transition: transform 0.3s; margin: 20px; } .ui.raised.card:hover { transform: scale(1.05); } .header { text-shadow: 1px 1px #900C3F; }