"Untitled"
Bootstrap 4.1.1 Snippet by saikrishna99666

Post to Facebook Tweet this

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Card Design</title> <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container main-section"> <div class="row"> <div class="col-lg-12 text-center"> <div class="row"> <div class="col-lg-4 col-md-12 mb-4 card-main"> <div class="card-section card-section-third border rounded"> <div class=" card-header-third rounded"> <img src="https://www.accenture.com/t20200214T074215Z__w__/in-en/_acnmedia/Accenture/Redesign-Assets/DotCom/Images/Global/Thumbnail768x432/14/Accenture-AI-Scale-768x432.jpg" class="img-fluid"> </div> <div class="card-body text-center mb-2"> <p class="card-text">Lorem ipsum dolor sit amet, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p> <hr> <span><a href="#"><i class="fa fa-instagram rounded-circle" aria-hidden="true"></i></a></span> <span><a href="#"><i class="fa fa-facebook rounded-circle" aria-hidden="true"></i></a></span> <span><a href="#"><i class="fa fa-twitter rounded-circle" aria-hidden="true"></i></a></span> </div> </div> </div> <div class="col-lg-4 col-md-12 mb-4 card-main"> <div class="card-section card-section-third border rounded"> <div class=" card-header-third rounded"> <img src="https://www.accenture.com/t20200214T074215Z__w__/in-en/_acnmedia/Accenture/Redesign-Assets/DotCom/Images/Global/Thumbnail768x432/14/Accenture-AI-Scale-768x432.jpg" class="img-fluid"> </div> <div class="card-body text-center mb-2"> <p class="card-text">Lorem ipsum dolor sit amet, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p> <hr> <span><a href="#"><i class="fa fa-instagram rounded-circle" aria-hidden="true"></i></a></span> <span><a href="#"><i class="fa fa-facebook rounded-circle" aria-hidden="true"></i></a></span> <span><a href="#"><i class="fa fa-twitter rounded-circle" aria-hidden="true"></i></a></span> </div> </div> </div> <div class="col-lg-4 col-md-12 mb-4 card-main"> <div class="card-section card-section-third border rounded"> <div class=" card-header-third rounded"> <img src="https://www.accenture.com/t20200214T074215Z__w__/in-en/_acnmedia/Accenture/Redesign-Assets/DotCom/Images/Global/Thumbnail768x432/14/Accenture-AI-Scale-768x432.jpg" class="img-fluid"> </div> <div class="card-body text-center mb-2"> <p class="card-text">Lorem ipsum dolor sit amet, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</p> <hr> <span><a href="#"><i class="fa fa-instagram rounded-circle" aria-hidden="true"></i></a></span> <span><a href="#"><i class="fa fa-facebook rounded-circle" aria-hidden="true"></i></a></span> <span><a href="#"><i class="fa fa-twitter rounded-circle" aria-hidden="true"></i></a></span> </div> </div> </div> </div> </div> </div> </div> </body> </html>
.card-header-third{ margin-top:-25px; box-shadow:1px 5px 15px #a2a2a2; background: linear-gradient(-90deg, #F2635F, #F4D00C); } .card-section-third span i{ background: linear-gradient(-90deg, #F4D00C, #F2635F); } .card-section:hover{ box-shadow:1px 1px 20px #d2d2d2; }

Related: See More

Vue Light Bootstrap Dashboard

Questions / Comments: