info@freetimelearning.com
Facebook
Twitter
Linkedin
Google
HOME
TUTORIALS
BASICS OF COMPUTER SCIENCE
HTML
HTML5
CSS
CSS3
BOOTSTRAP
BOOTSTRAP 4
MATERIALIZE CSS
JAVASCRIPT
JQUERY
AJAX
ANGULARJS
C - LANGUAGE
JAVA
PHP
PYTHON
SEO
REFERENCES
PRACTICE TEMPLATES
Bootstrap Templates
PHP PROJECTS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
PLUGINS
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
Examples
HTML
HTML5
CSS
CSS3
BOOTSTRAP3
JAVASCRIPT
JQUERY
ANGULARJS
INTERVIEW QUESTIONS
New
QUIZ
New
MORE
Online HTML Editor
New
GENERAL KNOWLEDGE
New
SCHOOL MATHEMATICS
Blog
EXECUTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap 3 Presentation Cards Design </title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <style type="text/css"> body{ padding:20px 0px; } .mg-top-10{ margin-top:10px;} .cards { overflow: hidden; border-radius: 3px; margin-bottom: 30px; padding:10px 0px; -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .cards .cards-heading .controls { position: absolute; top: 10px; right: 30px; } .cards .cards-body { margin-top: 20px; position: relative; z-index: 3; } .cards .cards-image { font-size: 90px; line-height: 90px; position: absolute; top: 20px; right: 30px; z-index: 1; color: rgba(0, 0, 0, 0.15); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .cards.cards-solid { color: #FFF; } .cards:hover .cards-image { font-size: 60px; } .cards-gray { background-color: gray; color: #FFF; } .cards-blue { background-color: #2980b9; color: #FFF; } .cards-light-blue { background-color: #3498db; color: #FFF; } .cards-green { background-color: #27ae60; color: #FFF; } .cards-light-green { background-color: #2ecc71; color: #FFF; } .cards-orange { background-color: #e82c0c; color: #FFF; } .cards-light-orange { background-color: #ff530d; color: #FFF; } .cards-purple { background-color: #8e44ad; color: #FFF; } .cards-light-purple { background-color: #9b59b6; color: #FFF; } .mini-profile-widget .image-container .avatar { width: 180px; height: 180px; display: block; margin: 0 auto; border-radius: 50%; background: white; padding: 4px; border: 1px solid #dddddd; } .btn-blue { background-color: #3498db; border-color: #3498db; color: white; } .btn-blue:hover, .btn-blue:visited { background-color: #2980b9; color: #FFF; } .btn-green { background-color: #2ecc71; border-color: #27ae60; color: white; } .btn-green:hover, .btn-green:visited { background-color: #27ae60; color: white; } .btn-orange { background-color: #ff530d; border-color: #e82c0c; color: white; } .btn-orange:hover, .btn-orange:visited { background-color: #e82c0c; color: white; } .btn-red { background-color: #ff1d23; border-color: #d40d12; color: white; } .btn-red:hover, .btn-red:visited { background-color: #d40d12; color: white; } .btn-purple { background-color: #9b59b6; border-color: #8e44ad; color: white; } .btn-purple:hover, .btn-purple:visited { background-color: #8e44ad; color: white; } .btn-pink { background-color: #fd32c0; border-color: #fe31ab; color: white; } .btn-pink:hover, .btn-pink:visited { background-color: #fe31ab; color: white; } </style> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="cards cards-gray mini-profile-widget"> <div class="col-md-6"> <div class="image-container"> <img src="http://www.freetimelearning.com/images/avatar.png" class="avatar img-responsive" alt="avatar"> </div> </div> <div class="col-md-6"> <div class="details"> <h4>Lorem Ipsum</h4> <hr> <div><i class="fa fa-star"></i> Works at <b>Free Time Learn</b></div> <div><i class="fa fa-desktop"></i> Web Designer</div> <div><i class="fa fa-phone-square"></i> +91-9963XXXX68</div> <div><i class="fa fa-envelope"></i> freetimelearn@gmail.com</div> <p class="mg-top-10"> <a href="javascript:void(0);" class="btn btn-blue"> <i class="fa fa-facebook fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-info"> <i class="fa fa-twitter fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-red"> <i class="fa fa-google-plus fa-fw"></i> </a> </p> </div> </div> </div> </div> <div class="col-md-6"> <div class="cards cards-blue mini-profile-widget"> <div class="col-md-6"> <div class="image-container"> <img src="http://www.freetimelearning.com/images/avatar.png" class="avatar img-responsive" alt="avatar"> </div> </div> <div class="col-md-6"> <div class="details"> <h4>Lorem Ipsum</h4> <hr> <div><i class="fa fa-star"></i> Works at <b>Free Time Learn</b></div> <div><i class="fa fa-desktop"></i> PHP Developer</div> <div><i class="fa fa-phone-square"></i> +91-9963XXXX68</div> <div><i class="fa fa-envelope"></i> freetimelearn@gmail.com</div> <p class="mg-top-10"> <a href="javascript:void(0);" class="btn btn-blue"> <i class="fa fa-facebook fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-info"> <i class="fa fa-twitter fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-red"> <i class="fa fa-google-plus fa-fw"></i> </a> </p> </div> </div> </div> </div> <div class="col-md-6"> <div class="cards cards-purple mini-profile-widget"> <div class="col-md-6"> <div class="image-container"> <img src="http://www.freetimelearning.com/images/avatar.png" class="avatar img-responsive" alt="avatar"> </div> </div> <div class="col-md-6"> <div class="details"> <h4>Lorem Ipsum</h4> <hr> <div><i class="fa fa-star"></i> Works at <b>Free Time Learn</b></div> <div><i class="fa fa-desktop"></i> Angular Developer</div> <div><i class="fa fa-phone-square"></i> +91-9963XXXX68</div> <div><i class="fa fa-envelope"></i> freetimelearn@gmail.com</div> <p class="mg-top-10"> <a href="javascript:void(0);" class="btn btn-blue"> <i class="fa fa-facebook fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-info"> <i class="fa fa-twitter fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-red"> <i class="fa fa-google-plus fa-fw"></i> </a> </p> </div> </div> </div> </div> <div class="col-md-6"> <div class="cards cards-green mini-profile-widget"> <div class="col-md-6"> <div class="image-container"> <img src="http://www.freetimelearning.com/images/avatar.png" class="avatar img-responsive" alt="avatar"> </div> </div> <div class="col-md-6"> <div class="details"> <h4>Lorem Ipsum</h4> <hr> <div><i class="fa fa-star"></i> Works at <b>Free Time Learn</b></div> <div><i class="fa fa-desktop"></i> Python Developer</div> <div><i class="fa fa-phone-square"></i> +91-9963XXXX68</div> <div><i class="fa fa-envelope"></i> freetimelearn@gmail.com</div> <p class="mg-top-10"> <a href="javascript:void(0);" class="btn btn-blue"> <i class="fa fa-facebook fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-info"> <i class="fa fa-twitter fa-fw"></i> </a> <a href="javascript:void(0);" class="btn btn-red"> <i class="fa fa-google-plus fa-fw"></i> </a> </p> </div> </div> </div> </div> </div> </div> </div> </body> </html>
×
Close
Bootstrap 3 Presentation Cards Design
Sample Data
