<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <section> <div class="container"> <div class="row"> <h2 class="text-center"><span>Bootstrap 4 Cards</span></h2> <div class="col-md-4"> <h3 class="text-center">Simple Card</h3> <div class="card card-01"> <img class="card-img-top" src="https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Card image cap"> <div class="card-block"> <span class="badge-box"><i class="fa fa-check"></i></span> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-default text-uppercase">Explore</a> </div> </div> </div> <div class="col-md-4"> <h3 class="text-center">Card with Slider</h3> <div class="card card-01"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://images.pexels.com/photos/534164/pexels-photo-534164.jpeg?h=350&auto=compress&cs=tinysrgb" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="card-block"> <span class="badge-box"><i class="fa fa-user-circle-o"></i></span> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-default text-uppercase">Explore</a> </div> </div> </div> <div class="col-md-4"> <h3 class="text-center">Profile Card</h3> <div class="card card-01"> <div class="profile-box"> <img class="card-img-top rounded-circle" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Card image cap"> </div> <div class="card-block text-center"> <span class="badge-box"><i class="fa fa-check"></i></span> <h4 class="card-title">Mike Parker</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <span class="social-box"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a> <a href="#"><i class="fa fa-behance"></i></a> </span> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Kumar+One'); h2{float:left; width:100%; color:#14594d; margin-bottom:60px; font-size: 14px; position:relartive; z-index:3;} h2 span{font-family: 'Kumar One', cursive; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px;} h2 a{color:#fff; font-weight:bold;} section{float:left;width:100%;padding:30px 0; position:relative; overflow:hidden; background:#6F8D8A;} section:before{content:"";position:absolute; width:110%; height:100%; background:url("https://static.pexels.com/photos/247599/pexels-photo-247599.jpeg") no-repeat 0 0; background-size:cover; filter: blur(10px); z-index:0; transform: scale(2);-ms-transform: scale(2); -webkit-transform: scale(2);} h3{margin-bottom:20px; font-weight:bold; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,0.2);} .btn-default{background:#DFC717; color:#fff; font-weight:700; text-shadow:1px 1px 0 rgba(0,0,0,0.2); font-size:14px;} .card{box-shadow:2px 2px 20px rgba(0,0,0,0.3); border:none; margin-bottom:30px;} .card-01 .card-block{position:relative; padding-top:40px;} .card-01 .badge-box{position:absolute; top:-20px; left:50%; width:100px; height:100px;margin-left:-50px; text-align:center;} .card-01 .badge-box i{background:#DFC717; color:#fff; border-radius:50%; width:50px; height:50px; line-height:50px; text-align:center; font-size:20px;} .profile-box{background-size:cover; float:left; width:100%; text-align:center; padding:30px 0; position:relative; overflow:hidden;} .profile-box:before{filter: blur(10px);background:url("https://images.pexels.com/photos/195825/pexels-photo-195825.jpeg?h=350&auto=compress&cs=tinysrgb") no-repeat; background-size:cover; width:120%; position:absolute; content:""; height:120%; left:-10%;top:0;z-index:0;} .profile-box img{width:170px; height:170px; position:relative; border:5px solid #fff;} .social-box i {border:1px solid #DFC717; color:#DFC717; width:30px; height:30px; border-radius:50%;line-height:30px;} .social-box i:hover{background:#DFC717; color:#fff;} .social-box a{margin: 0 5px;} .video-foreground{float:left;width:100%; height:500px;} /*flipper-card*/ .card-flipper { position: relative; float: left; width: 100%; text-align: center; } .card__front, .card__back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card__back .card{ width:100%; height:65vh; } .card__front, .card__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .card__front { background-color: #ff5078; } .card__back { background-color: #1e1e1e; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card-flipper.effect__hover:hover .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card-flipper.effect__hover:hover .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); } .card-flipper.effect__random.flipped .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card-flipper.effect__random.flipped .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); }