"Gamification - Card Game"
Bootstrap 3.1.0 Snippet by Raul Abreu Leite

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"> </head> <body> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="panel panel-danger"> <div class="panel-heading"> <b>Learn to Program with Python</b> <p title="Popularidade Alta"><i class="fa fa-smile-o fa-lg"></i>  <a href="#"><i>Raul Abreu Leite</i></a><i class="fa fa-heart fa-4x pull-right"></i></p> <p></p> </div> <div class="panel-body"> <p class="text-center"><img src="http://psp-loc.mediagen.fr/python-0_00FA009600323183.png"></p> <p class="text-warning"><b>574</b> subscribers <span title="Rating"><i class="fa fa-star-half-empty fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i></span></p> </div> <div class="panel-heading"> <div class="row"> <div class="col-xs-4 col-md-4" title="Receba até 42 de Status"> <p class="text-center"><i class="glyphicon glyphicon-stats fa-2x "></i><span class="badge">42</span></p> </div> <div class="col-xs-4 col-md-4" title="Ganhe até 3 Badges"> <p class="text-center"><i class="glyphicon glyphicon-fire fa-2x "></i><span style class="badge"></span><span class="badge">3</span></p> </div> <div class="col-xs-4 col-md-4" title="Ganhe Certificado"> <p class="text-center"><i class="glyphicon glyphicon-file fa-2x"></i><span class="badge">1</span></p> </div> </div> <p>Curso voltado para quem ainda não conhece nenhuma linguagem de programação e deseja conhecer uma...</p> <hr> <p></p> <div title="Você já está inscrito neste curso"> <a class="btn btn-block btn3d btn-danger disabled"><i class="fa fa-check-circle fa-4x pull-right fa-fw"></i><b>   You are already enrolled in this course ;)</b></a> </div> <p></p><br> <p><span class="label label-success">Tecnologia</span><span class="label label-warning">Programação</span><span class="label label-danger">Python</span><span class="label label-info">Dinâmica</span></p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="panel panel-warning"> <div class="panel-heading"> <b>Learn to Program with Python</b> <p title="Popularidade Alta"><i class="fa fa-smile-o fa-lg"></i>  <a href="#"><i>Raul Abreu Leite</i></a><i class="fa fa-flash fa-4x pull-right"></i></p> <p></p> </div> <div class="panel-body"> <p class="text-center"><img src="http://psp-loc.mediagen.fr/python-0_00FA009600323183.png"></p> <p class="text-warning"><b>574</b> subscribers <span title="Rating"><i class="fa fa-star-half-empty fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i></span></p> </div> <div class="row"></div> <div class="panel-heading"> <div class="row"> <div class="col-xs-4 col-md-4" title="Receba até 42 de Status"> <i class="glyphicon glyphicon-stats fa-2x pull-left"></i><span class="badge">42</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe até 3 Badges"> <i class="glyphicon glyphicon-fire fa-2x pull-left"></i><span style class="badge"></span><span class="badge">3</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe Certificado"> <i class="glyphicon glyphicon-file fa-2x pull-left"></i><span class="badge">1</span> </div> </div><br> <p>Curso voltado para quem ainda não conhece nenhuma linguagem de programação e deseja conhecer uma...</p> <hr> <p></p> <div title="Veja detalhes sobre este curso"> <a class="btn btn-block btn3d btn-warning"><b><i class="fa fa-th-list fa-lg fa-fw"></i> View this course</b></a> <p></p> </div> <p></p><br> <p><span class="label label-success">Tecnologia</span><span class="label label-warning">Programação</span><span class="label label-danger">Python</span><span class="label label-info">Dinâmica</span></p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="panel panel-info"> <div class="panel-heading"> <b>Learn to Program with Python</b> <p title="Popularidade Alta"><i class="fa fa-smile-o fa-lg"></i>  <a href="#"> <i>Raul Abreu Leite</i></a><i class="fa fa-tint fa-4x pull-right"></i></p> <p></p> </div> <div class="panel-body"> <p class="text-center"><img src="http://psp-loc.mediagen.fr/python-0_00FA009600323183.png"></p> <p class="text-warning"><b>574</b> subscribers <span title="Rating"><i class="fa fa-star-half-empty fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i></span></p> </div> <div class="row"></div> <div class="panel-heading"> <div class="row"> <div class="col-xs-4 col-md-4" title="Receba até 42 de Status"> <i class="glyphicon glyphicon-stats fa-2x pull-left"></i><span class="badge">42</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe até 3 Badges"> <i class="glyphicon glyphicon-fire fa-2x pull-left"></i><span style class="badge"></span><span class="badge">3</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe Certificado"> <i class="glyphicon glyphicon-file fa-2x pull-left"></i><span class="badge">1</span> </div> </div><br> <p>Curso voltado para quem ainda não conhece nenhuma linguagem de programação e deseja conhecer uma...</p> <hr> <p></p> <div title="Veja detalhes sobre este curso"> <a class="btn btn-block btn3d btn-primary"><b><i class="fa fa-th-list fa-lg fa-fw"></i> View this course</b></a> <p></p> </div> <p></p><br> <p><span class="label label-success">Tecnologia</span><span class="label label-warning">Programação</span><span class="label label-danger">Python</span><span class="label label-info">Dinâmica</span></p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="panel panel-success"> <div class="panel-heading"> <b>Learn to Program with Python</b> <p title="Popularidade Alta"><i class="fa fa-smile-o fa-lg"></i>  <a href="#"><i>Raul Abreu Leite</i></a><i class="fa fa-leaf fa-4x pull-right"></i></p> <p></p> </div> <div class="panel-body"> <p class="text-center"><img src="http://psp-loc.mediagen.fr/python-0_00FA009600323183.png"></p> <p class="text-warning"><b>574</b> subscribers <span title="Rating"><i class="fa fa-star-half-empty fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i></span></p> </div> <div class="row"></div> <div class="panel-heading"> <div class="row"> <div class="col-xs-4 col-md-4" title="Receba até 42 de Status"> <i class="glyphicon glyphicon-stats fa-2x pull-left"></i><span class="badge">42</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe até 3 Badges"> <i class="glyphicon glyphicon-fire fa-2x pull-left"></i><span style class="badge"></span><span class="badge">3</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe Certificado"> <i class="glyphicon glyphicon-file fa-2x pull-left"></i><span class="badge">1</span> </div> </div><br> <p>Curso voltado para quem ainda não conhece nenhuma linguagem de programação e deseja conhecer uma...</p> <hr> <p></p> <div title="Veja detalhes sobre este curso"> <a class="btn btn-block btn3d btn-success"><b><i class="fa fa-th-list fa-lg fa-fw"></i> View this course</b></a> <p></p> </div> <p></p><br> <p><span class="label label-success">Tecnologia</span><span class="label label-warning">Programação</span><span class="label label-danger">Python</span><span class="label label-info">Dinâmica</span></p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="panel panel-info"> <div class="panel-heading"> <b>Learn to Program with Python</b> <p title="Popularidade Alta"><i class="fa fa-smile-o fa-lg"></i>  <a href="#"> <i>Raul Abreu Leite</i></a><i class="fa fa-tint fa-4x pull-right"></i></p> <p></p> </div> <div class="panel-body"> <p class="text-center"><img src="http://psp-loc.mediagen.fr/python-0_00FA009600323183.png"></p> <p class="text-warning"><b>574</b> subscribers <span title="Rating"><i class="fa fa-star-half-empty fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i></span></p> </div> <div class="row"></div> <div class="panel-heading"> <div class="row"> <div class="col-xs-4 col-md-4" title="Receba até 42 de Status"> <i class="glyphicon glyphicon-stats fa-2x pull-left"></i><span class="badge">42</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe até 3 Badges"> <i class="glyphicon glyphicon-fire fa-2x pull-left"></i><span style class="badge"></span><span class="badge">3</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe Certificado"> <i class="glyphicon glyphicon-file fa-2x pull-left"></i><span class="badge">1</span> </div> </div><br> <p>Curso voltado para quem ainda não conhece nenhuma linguagem de programação e deseja conhecer uma...</p> <hr> <p></p> <div title="Veja detalhes sobre este curso"> <a class="btn btn-block btn3d btn-primary"><b><i class="fa fa-th-list fa-lg fa-fw"></i> View this course</b></a> <p></p> </div> <p></p><br> <p><span class="label label-success">Tecnologia</span><span class="label label-warning">Programação</span><span class="label label-danger">Python</span><span class="label label-info">Dinâmica</span></p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <div class="panel panel-danger"> <div class="panel-heading"> <b>Learn to Program with Python</b> <p title="Popularidade Alta"><i class="fa fa-smile-o fa-lg"></i>  <a href="#"><i>Raul Abreu Leite</i></a><i class="fa fa-heart fa-4x pull-right"></i></p> <p></p> </div> <div class="panel-body"> <p class="text-center"><img src="http://psp-loc.mediagen.fr/python-0_00FA009600323183.png"></p> <p class="text-warning"><b>574</b> subscribers <span title="Rating"><i class="fa fa-star-half-empty fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i><i class="fa fa-star fa-lg pull-right"></i></span></p> </div> <div class="row"></div> <div class="panel-heading"> <div class="row"> <div class="col-xs-4 col-md-4" title="Receba até 42 de Status"> <i class="glyphicon glyphicon-stats fa-2x pull-left"></i><span class="badge">42</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe até 3 Badges"> <i class="glyphicon glyphicon-fire fa-2x pull-left"></i><span style class="badge"></span><span class="badge">3</span> </div> <div class="col-xs-4 col-md-4" title="Ganhe Certificado"> <i class="glyphicon glyphicon-file fa-2x pull-left"></i><span class="badge">1</span> </div> </div><br> <p>Curso voltado para quem ainda não conhece nenhuma linguagem de programação e deseja conhecer uma...</p> <hr> <p></p> <div title="Veja detalhes sobre este curso"> <a class="btn btn-block btn3d btn-danger"><b><i class="fa fa-th-list fa-lg fa-fw"></i> View this course </b></a> <p></p> </div> <p></p><br> <p><span class="label label-success">Tecnologia</span><span class="label label-warning">Programação</span><span class="label label-danger">Python</span><span class="label label-info">Dinâmica</span></p> </div> </div> </div> </body> </html>

Related: See More

Now UI Dashboard React
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: