<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;
}
