Bootstrap snippet: V card presentation

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: bootstrap,snippet,v card,presentation,image,vitae



<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="v-card"> <!-- Header --> <header> <ul class="list-inline"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li class=""><a href="#qualification" data-toggle="tab">Qualification</a></li> </ul> </header> <!-- tab Content --> <div class="tab-content"> <!-- Tab Pane - Home --> <div class="tab-pane fade active in" id="home"> <!-- Home Image --> <div class="vcard-img"> <a href="#"><img src="http://bootdey.com/img/Content/image_site_girl_write.jpg" alt="" class="img-responsive img-thumbnail"></a> </div> <div class="vcard-content"> <!-- Name --> <h4>Peter Frank <small>Web Designer</small></h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua quis nostrud exercitation ullamco laboris.</p> <!-- Social media links --> <div class="brand-bg"> <a href="#" class="facebook b-tooltip" title="" data-original-title="Facebook"><i class="fa fa-facebook square-2 rounded-1"></i></a> <a href="#" class="twitter b-tooltip" title="" data-original-title="Twitter"><i class="fa fa-twitter square-2 rounded-1"></i></a> <a href="#" class="google-plus b-tooltip" title="" data-original-title="Google Plus"><i class="fa fa-google-plus square-2 rounded-1"></i></a> <a href="#" class="linkedin b-tooltip" title="" data-original-title="LinkedIn"><i class="fa fa-linkedin square-2 rounded-1"></i></a> <a href="#" class="pinterest b-tooltip" title="" data-original-title="PInterest"><i class="fa fa-pinterest square-2 rounded-1"></i></a> </div> <hr> <!-- Skills --> <h4>Skills <small>Stuffs I Know</small></h4> <span class="label label-red">HTML 5</span> <span class="label label-green">CSS 3</span> <span class="label label-lblue">JQUERY</span> <span class="label label-blue">.NET</span> <span class="label label-orange">JAVA</span> <span class="label label-yellow">Testing</span> <span class="label label-purple">JavaScript</span> <span class="label label-rose">Photoshop</span> <span class="label label-brown">PHP</span> <span class="label label-red">C#.net</span> </div> <!-- Clearfix --> <div class="clearfix"></div> </div> <!-- Tab Pane - Education & Experience --> <div class="tab-pane fade" id="qualification"> <div class="education"> <h4><i class="fa fa-graduation-cap color"></i> Education</h4> <hr> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="education-item"> <!-- Eudcation detail and year --> <h5>B.E (Computer Science) <small>2006-2010</small></h5> <p>At vero eos et accusamus odio dignissimos voluptatum et iusto odio dignissimos voluptatum deleniti atque corrupti quos.</p> </div> </div> <div class="col-md-6 col-sm-6"> <div class="education-item"> <h5>MCA (Computer Application) <small>2010-2012</small></h5> <p>At vero eos et accusamus odio dignissimos voluptatum et iusto odio dignissimos voluptatum deleniti atque corrupti quos.</p> </div> </div> </div> </div> <hr> <div class="experience"> <h4><i class="fa fa-database color"></i> Experience</h4> <hr> <div class="row"> <div class="col-md-6 col-sm-6"> <!-- Experience Detail --> <div class="experience-item"> <!-- Experience detail and year --> <h5>Programmer - AshoApps <small>2012-2013</small></h5> <p>At vero eos et accusamus odio dignissimos voluptatum et iusto odio dignissimos voluptatum deleniti atque corrupti quos.</p> </div> </div> <div class="col-md-6 col-sm-6"> <!-- Experience Detail --> <div class="experience-item"> <h5>Developer - Rage Solution <small>2013-2014</small></h5> <p>At vero eos et accusamus odio dignissimos voluptatum et iusto odio dignissimos voluptatum deleniti atque corrupti quos.</p> </div> </div> </div> </div> </div> </div> </div>
body{ background: url(http://www.bootdey.com/img/Content/flores-amarillas-wallpaper.jpeg) 0 0/cover fixed,url(http://ashobiz.asia/brave15/demo/img/backgrounds/1.jpg) 0 0/cover fixed; } .color { color: #32c8de !important; } .v-card header ul li.active a { background: #32c8de; border-color: #1faabe; } .v-card header ul li.active a:hover { background: #32c8de; } .v-card header ul li a:hover { background: #32c8de; border-color: #1faabe; color: #ffffff; } a { color: #1faabe; } a:hover { color: #32c8de; } .v-card { max-width:700px; margin:0 auto; margin-top:100px; background:#fff; padding:30px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2); border-radius:4px; margin-bottom:50px; } @media (max-width: 767px){ .v-card { max-width:500px; margin-top:50px; } .v-card header ul{ text-align:center; } } .v-card header ul.list-inline, .v-card header ul li{ margin:0px; padding:0px; } .v-card header ul li a{ display:inline-block; padding:6px 15px; color:#999; background:#fff; border:1px solid #f3f3f3; border-radius:2px; font-size:13px; } @media (max-width: 541px){ .v-card header ul li a{ padding:5px 8px !important; margin-bottom:10px !important; } } @media (max-width: 767px){ .v-card header ul li a{ padding:5px 10px; } } .v-card header ul li.active a{ color:#fff; } .v-card hr{ margin:7px 0px; } .v-card .tab-content{ margin-top:5px; } .v-card .vcard-img{ float:left; max-width:200px; margin-top:8px; } @media (max-width: 767px){ .v-card .vcard-img{ float:none; max-width:150px; margin:0 auto; margin-bottom:20px; } } .v-card .vcard-content { margin-left:220px; } @media (max-width: 767px){ .v-card .vcard-content { margin-left:0px; text-align:center; } } .v-card .brand-bg{ margin:10px 0px; } .v-card .label{ display:inline-block; margin-right:4px; margin-bottom:4px; } .v-card .education-item, .v-card .experience-item{ margin:5px 0px; } .v-card .portfolio{ margin:5px 0px; } @media (max-width:767px){ .v-card .portfolio{ text-align:center; } } .v-card .portfolio img{ max-width:150px; margin-right:7px; margin-bottom:5px; margin-top:5px; } .v-card form{ margin-top:10px; } .v-card .map iframe{ width:100%; height:170px; padding:3px; border:1px solid #ddd; margin-bottom:5px; border-radius:3px; } @media (max-width: 767px){ .v-card .map{ margin-top:30px; } } .v-card .contact-detail p{ line-height:40px; } .v-card .contact-detail p i{ width:30px; height:30px; line-height:30px; text-align:center; border-radius:100px; font-size:13px; color:#fff; margin-right:10px; }
Dey-Dey

V card presentation

Dey-Dey
  Jan 13th 2015, 09:53
3.8K Views