Modelo para biografia

 Modelo pronto de biografia perfeito para inicio de site.

<div class='homemestre2'>

<div class='cxhome'>

<div class='iam'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4RnXvYEEPbDMdNa0BfiElv98AqFp20yOZny1orCw22tycORN1U-66W4jAFVCscmhf5ObHjXHZhy8BscZVTF6YXGcWoCcOc0ByN23G0IkqjvINewg849kUA3kM733DbU1vbMlx52MD4YRJ/s1600/cover.jpg'/>

</div>

<div class='resumo2'>

<div class='heart'>Desing: Andréa Alark</div>

<div class='heart'>Ativa desde: 2010</div>

<div class='heart'>Blog: A Peculiar</div>

<div class='heart'>Blog CSS: Bunny Crazy</div>

<div class='heart'>Intragram: @Andrea.Alark</div>

<div class='heart'>Contato: dricea@gmail.com</div>

</div>

<div class='resumo'>

description. link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non condimentum eros. Donec hendrerit finibus porttitor.Cras <b>sit amet lectus sit ame</b>t leo sodales dictum eget non libero. Nulla feugiat elementum <i>sem at suscipit</i>. Vivamus a metus id <u>felis cursus viverra pretium </u>non est. Suspendisse potenti. Sed efficitur vulputate libero eu luctus. Suspendisse vel.justo.

</div>

</div>

</div>

<!-- CAIXA DE BIO -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType!= &quot;item&quot;'>

<style>

/* Pagina do Home Bio

----------------------------------------------- */

.homemestre2{

width: 98.5%;

height: 600px;

padding: 10px;

background:#f6f6f6; 

border-bottom: solid 7px #FF4500;

margin-top:-2px;

margin-bottom:-350px;

}

.cxhome{

margin-top:120px;

margin-left: 440px;

width: 490px;

height: 310px;

padding: 10px;

background:; 

border:none;

}

.resumo{

width:472px;

max-height:500px;

margin-top:20px;

padding:5px;

background:#fff; /*description background color*/

border:solid 1px #dbdbdb; /*description border color*/

box-shadow:7px 7px #eee; /*description shadow color*/

text-align:justify;

position:relative;

font-size: 12px;

font-family: &#39;Poppins&#39;, sans-serif;

font-weight: Light; 

}

.resumo2{

width:290px;

height:150px;

margin-top:-165px; 

margin-left:180px; 

padding:5px;

background:#fff; /*info box background color*/

border:solid 1px #dbdbdb; /*info box border color*/

box-shadow:7px 7px #eee; /*info box shadow color*/

position:relative;

}

.iam img {

width:150px;

height:150px;

padding:5px;

object-fit:cover;

background:#fff; /*icon box background color*/

border:solid 1px #dbdbdb; /*icon box border color*/

box-shadow:7px 7px #eee; /*icon box shadow color*/

}

.heart {

display : block;

font-size: 11px;

font-family: &#39;Poppins&#39;, sans-serif;

letter-spacing : 0;

border-bottom : 1px solid #eee;

background-repeat : no-repeat;  

text-indent : 5px;

vertical-align : middle;

text-decoration : none;

line-height : 20px;

margin-bottom : 1px;

padding-left : 3px;

padding-top : 3px;

 -webkit-transition: all 0.9s ease-out;

-moz-transition: all 0.9s ease-out;

border-left: solid #8EDBE5;

background: #F7F7F7;

color: #666 !important;

}

.heart:hover {

display : block;

text-decoration: none;

vertical-align: middle;

line-height : 20px;

background: #C7F9FF;

border-left: solid #C7F9FF;

padding-left: 15px;}

</style>

</b:if>

</b:if>