<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 ---------->
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<section id="about" class="section-content about">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<figure class="fig-profile wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<img class="img-responsive img-circle img-profile" title="Roland Maruntelu" alt="Roland Maruntelu" src="http://rolyart.ro/wp-content/uploads/2016/07/roland-maruntelu-freelancer-romania.jpg">
<figcaption>Hello !</figcaption>
</figure>
<div class="flag">
<span class="blue"></span>
<span class="yellow"></span>
<span class="red"></span>
</div>
<div class="clearfix"></div>
<h2 class="name"><b>Roland</b> Maruntelu</</h2>
<h3 class="position">Web Designer & Wordpress Theme Developer</h3>
<h4 class="text-center location">based in Bucharest, Romania</h4>
<div class="title-divider">
<span class="hr-divider col-xs-5"></span>
<span class="icon-separator col-xs-2"><i class="fa fa-star"></i></span>
<span class="hr-divider col-xs-5"></span>
</div>
</div>
<div class="col-md-8 col-md-offset-2 text-center">
<p class="caption">I'm Roland Maruntelu, webdesigner & wordpress theme developer at <a href="http://rolyart.ro">rolyart.ro.</a>I have a passion for creating challenging, clean and beautiful websit e/ wordpress themes.</p>
<h2 class="slogan">" Wordpress Theme is not just a job, it's a passion."</h2>
<a href="http://rolandtheme.com" class="btn btn-default secondary-bg btn-lg">View my passion</a>
<a href="http://rolyart.ro/contact" class="btn btn-default page-scroll primary-bg btn-lg">Request custom theme</a>
</div>
</div>
</div>
</section>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,400,700);
html, body{
height:100%;
min-height:100%;
}
h1, h2, h3, h4, h5, h6{
font-family: 'Open Sans Condensed', sans-serif, sans-serif;
}
.btn{
border-radius:0;
font-family: 'Open Sans Condensed', sans-serif, sans-serif;
margin-bottom:15px;
}
.primary-bg{
background-color:#F34336;
color:#fff;
}
.primary-bg:hover, .primary-bg:focus{
background-color:#F22C1E;
color:#fff;
}
.secondary-bg{
background-color:#20BFA9;
color:#fff;
}
.secondary-bg:hover, secondary-bg:focus{
background-color:#1CA996;
color:#fff;
}
/* About
============================================== */
.about {
background: url(http://rolyart.ro/wp-content/uploads/2016/07/bg.png) no-repeat top center;
background-size: cover;
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
padding: 100px 0;
min-height:100%;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
.about .fig-profile {
max-width: 200px;
max-height: 200px;
margin: 0 auto 0;
position: relative;
overflow: hidden !important;
border: 12px solid #fff;
border-radius: 50%;
margin-bottom: 30px;
}
.about .fig-profile:hover figcaption {
opacity: 1;
webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background-color: #20BFA9;
}
.about .fig-profile figcaption {
position: absolute;
top: 0;
width: 100%;
border-radius: 50%;
text-align: center;
vertical-align: center;
line-height: 180px;
opacity: 0;
font-family: 'Open Sans Condensed', sans-serif;
height: 100%;
webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
color: #fff;
font-size: 24px;
}
.about .name {
font-size: 48px;
text-transform: uppercase;
margin: 20px 0 0 0;
}
.about .caption{
font-size:16px;
}
.about .position {
margin: 0;
}
.about .location {
margin: 5px 0 20px 0;
}
.about .slogan {
margin-bottom: 40px;
margin-top: 40px;
font-weight: 700;
}
.about p {
font-size: 16px;
}
.flag {
width: 39px;
margin: 0 auto;
}
.flag .blue {
background-color: #002B7F;
width: 13px;
height: 26px;
float: right;
}
.flag .yellow {
background-color: #FCD116;
width: 13px;
height: 26px;
float: right;
}
.flag .red {
background-color: #CE1126;
width: 13px;
height: 26px;
float: right;
}
/* Title Divider
============================================ */
.title-divider {
margin: 0 auto;
max-width: 400px;
margin-bottom: 20px;
overflow: hidden;
padding: 10px 0;
}
.hr-divider {
border-bottom: 1px solid #ddd;
position: relative;
float: left;
bottom: -4px;
}
.icon-separator {
float: left;
text-align: center;
margin-top: -7px;
font-size: 18px;
color: #F34336;
padding: 0;
}
.heading-divider {
margin-bottom: 40px;
margin-top: 30px;
display: flex;
}
.heading-divider .title {
flex-grow: 0;
-webkit-flex-grow: 0;
margin: 0 5px 0 0;
line-height: 1px;
}
.heading-divider .line-separator {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
flex-grow: 1;
-webkit-flex-grow: 1;
height: 6px;
position: relative;
}
