"Resume header"
Bootstrap 3.3.0 Snippet by shineblue30

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <script src="https://use.fontawesome.com/bfdd1d98a1.js"></script> <div class="container"> <div class="row"> <section id="about" class="section section-about wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;"> <div class="profile"> <div class="row"> <div class="col-sm-4"> <div class="photo-profile"> <img src="https://pbs.twimg.com/profile_images/513213616514797568/Y18umDg7.jpeg" alt="Hassan Raza"> </div> <a href="cv/cv-1.pdf" target="cv"> <div class="download-resume"> <i class="fa fa-check" aria-hidden="true"></i> <span class="text-download">DOWNLOAD RESUME</span> </div> </a> <div class="available"> <i class="fa fa-check" aria-hidden="true"></i> <span class="text-available">available on freelance</span> </div> </div> <div class="col-sm-8"> <div class="info-profile"> <h2><span>HI I'M</span> Hassan Raza</h2> <h3>web developer & web designer</h3> <p align="justify">Hello! I’m Hassan Raza. Web Developer with over 8 years of experience. Experienced with all stages of the development cycle for dynamic web projects. Having an in-depth knowledge including advanced HTML5, CSS3, JavaScript, jQuery, Angular JS. Strong background in management and leadership.</p> <div class="row"> <div class="col-sm-6"> <ul class="ul-info"> <li class="li-info"> <span class="title-info">Age</span> <span class="info">31</span> </li> <li class="li-info"> <span class="title-info">Address</span> <span class="info">11912, Riyadh, Saudi Arabia</span> </li> <li class="li-info"> <span class="title-info">Email</span> <span class="info">shineblue30@yahoo.com</span> </li> </ul> </div> <div class="col-sm-6"> <ul class="ul-info"> <li class="li-info"> <span class="title-info">Phone</span> <span class="info">+966 531 184 434</span> </li> <li class="li-info"> <span class="title-info">Website</span> <span class="info">www.shineblue.com</span> </li> <li class="li-info"> <span class="title-info">Nationality</span> <span class="info">Pakistani</span> </li> </ul> </div> <div class="col-sm-12"> <span class="title-links">Social Links</span> <ul class="ul-social-links"> <li class="li-social-links"> <a href="www.facebook.com/shineblue30" data-tootik="Facebook" data-tootik-conf="square"><i class="fa fa-facebook" aria-hidden="true"></i></a> </li> <li class="li-social-links"> <a href="www.twitter.com/shineblue30" data-tootik="Twitter" data-tootik-conf="square"><i class="fa fa-twitter" aria-hidden="true"></i></a> </li> <li class="li-social-links"> <a href="#" data-tootik="Google Plus" data-tootik-conf="square"><i class="fa fa-google-plus" aria-hidden="true"></i></a> </li> <li class="li-social-links"> <a href="https://www.linkedin.com/in/shineblue30/" data-tootik="Linkedin" data-tootik-conf="square"><i class="fa fa-linkedin" aria-hidden="true"></i></a> </li> <li class="li-social-links"> <a href="#" data-tootik="Dribbble" data-tootik-conf="square"><i class="fa fa-dribbble" aria-hidden="true"></i></a> </li> <li class="li-social-links"> <a href="#" data-tootik="Pinterest" data-tootik-conf="square"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a> </li> <li class="li-social-links"> <a href="#" data-tootik="Vimeo" data-tootik-conf="square"><i class="fa fa-vimeo" aria-hidden="true"></i></a> </li> <li class="li-social-links"> <a href="#" data-tootik="Behance" data-tootik-conf="square"><i class="fa fa-behance" aria-hidden="true"></i></a> </li> </ul> </div> </div> </div> </div> </div> </div> </section> </div> </div>
.section-about .profile { padding: 33px 33px 22px; } img { display: block; width: 100%; box-shadow: 0 0 5px rgba(0,0,0,.4); } .section-about .download-resume { margin-bottom: 25px; padding: 17px 5px; text-align: center; box-shadow: 0 0 5px rgba(0,0,0,.4); transition: all .3s; } .section-about .available { text-align: center; } .section-about h2 { padding-bottom: 4px; } f1febac….css:14 .section h2, .section-about .download-resume { font-family: Oswald,sans-serif; } f1febac….css:14 .section h2, .section-pricing .pricing-price .number { font-size: 40px; } f1febac….css:14 .section h2 { display: inline-block; font-weight: 400; text-transform: uppercase; } .section-about h3 { padding-bottom: 20px; } f1febac….css:14 .section h3 { font-size: 20px; } .section-about p { padding-bottom: 27px; } f1febac….css:14 .section p { line-height: 28px; } ul { list-style: none; } .section-about .li-info { padding-bottom: 10px; } section-about .title-info { width: 65px; } .content { font-family: 'PT Sans Narrow',sans-serif; font-size: 16px; } .section-about .title-info { display: inline-block; width: 80px; } .section-about .photo-profile { margin-bottom: 20px; } .section-about .photo-profile img { display: block; width: 100%; box-shadow: 0 0 5px rgba(0,0,0,.4); } f1febac….css:5 img { vertical-align: middle; } f1febac….css:5 img { border: 0; } .section h2, .section-about .available i, .section-blog .blog-detail ul, .section-contact-us h3, .section-experience .specialty-name, .section-skills .other-skills i, .section-testimonials h3, .single-blog .archive h3, .single-blog .comments .name, .single-blog .comments h3, .single-blog .leave-comment h3, .single-blog .load-more-comments h3, .single-blog .populaire-posts h3, .single-blog .tags h3 { color: #0487cc; } f1febac….css:14 .section-about h2 { padding-bottom: 4px; } f1febac….css:14 .section h2, .section-about .download-resume { font-family: Oswald,sans-serif; } f1febac….css:14 .section h2, .section-pricing .pricing-price .number { font-size: 40px; } f1febac….css:14 .section h2 { display: inline-block; font-weight: 400; text-transform: uppercase; } .section-about .ul-social-links { margin-top: 10px; } .section-about .li-social-links { display: inline-block; margin: 0 5px 12px; } .section-about .li-social-links a { border: 1px solid #757575; } .section-about .li-social-links a { display: inline-block; width: 34px; height: 34px; line-height: 34px; text-align: center; transition: all .2s; } .section-about .li-social-links a, .section-blog .blog-detail .ul-detail, .section-blog .load-more span, .section-blog .read-more, .section-blog h4, .section-pricing .most-populaire span, .single-blog .populaire-posts ul { font-size: 14px; } .container .jumbotron, .container-fluid .jumbotron { margin-top: 60px; } .section h2, .section-pricing .pricing-price .number { font-size: 40px; } .section h2 { font-weight: 400; text-transform: uppercase; } a { color: #0487cc; text-decoration: none; } .jumbotron p { margin-bottom: 15px; font-size: 16px; font-weight: 200; }

Related: See More


Questions / Comments: