"Untitled"
Bootstrap 4.1.1 Snippet by conhariki

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Cards</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/fontawesome.min.css"> <style> * { margin: 0; padding: 0; } body { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 400; color: #777; } h1 { font-size: 36px; color: #555; font-weight: bold; } h3 { font-size: 24px; color: #333; font-weight: bold; } #team img { margin-top: -50px; } #team i { font-size: 26px; color: #555; } #team p { font-weight: 500; } #team .card { border-radius: 0; box-shadow: 5px 5px 15px #e74c3c; transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; } #team .card:hover { background: #e74c3c; color: #fff; border-radius: 5px; border: none; box-shadow: 5px 5px 10px #9e9e9e; } #team .card:hover h3, #team .card:hover i { color: #fff; } </style> </head> <body> <section id="team"> <div class="container my-3 py-5 text-center"> <div class="row mb-5"> <div class="col"> <h1>Our Team</h1> <p class="mt-3">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p> </div> </div> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="card"> <div class="card-body"> <img src="https://github.com/HackerBCI.png" alt="" class="img-fluid rounded-circle w-50 mb-3"> <h3>Johny Lesh</h3> <h5>Co-Writer</h5> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit assumenda, rerum autem doloribus velit ipsum</p> <div class="d-flex flex-row justify-content-center"> <div class="p-4"> <a href="#"> <i class="fa fa-facebook"> </i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-twitter"></i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card"> <div class="card-body"> <img src="https://github.com/HackerBCI.png" alt="" class="img-fluid rounded-circle w-50 mb-3"> <h3>Susan Williams</h3> <h5>Lead Writer</h5> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi corporis est sed at vitae illo illum odio nisi.</p> <div class="d-flex flex-row justify-content-center"> <div class="p-4"> <a href="#"> <i class="fa fa-facebook"></i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-twitter"> </i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card"> <div class="card-body"> <img src="https://github.com/HackerBCI.png" alt="" class="img-fluid rounded-circle w-50 mb-3"> <h3>Kastro Lenova</h3> <h5>Editor</h5> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit assumenda, rerum autem doloribus velit ipsum</p> <div class="d-flex flex-row justify-content-center"> <div class="p-4"> <a href="#"> <i class="fa fa-facebook"> </i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-twitter"></i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="card"> <div class="card-body"> <img src="https://github.com/HackerBCI.png" alt="" class="img-fluid rounded-circle w-50 mb-3"> <h3>Erick Delga</h3> <h5>Author</h5> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit assumenda, rerum autem doloribus velit ipsum</p> <div class="d-flex flex-row justify-content-center"> <div class="p-4"> <a href="#"> <i class="fa fa-facebook"> </i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-twitter"></i> </a> </div> <div class="p-4"> <a href="#"> <i class="fa fa-instagram"></i> </a> </div> </div> </div> </div> </div> </div> </div> </section> </body> </html>

Related: See More

Navbar With Icons

Questions / Comments: