Heroines Project: Pocahontas

<link href="https://fonts.googleapis.com/css?family=Kurale|Didact+Gothic|Scheherazade" rel="stylesheet">
<div id="marco"><div id="imagenfondohp1"></div><div id="fotoperfil"><img src="http://via.placeholder.com/150x150" style="width:150px; height:150x;border-radius: 100%;"><div id="nombrehp1">NOMBRE APELLIDO</div><div id="separacionhp1"></div><div id="rangohp1">RANGO</div></div><div id="basehp1"><table><td valign="top"><img src="http://via.placeholder.com/250X250" style="width:250px; height:250px; border:5px solid #FAFAFA;"></td><td valign="top"><div id="datoshp1">DATO</div><div id="datoshp1">DATO</div><div id="datoshp1">DATO</div><div id="datoshp1">DATO</div><div id="campotextohp1">TEXTO TEXTO TEXTO
</div><div id="tituloseccionhp1">NOMBRE</div></td></table>
</div></div><center><a href="http://angelheartcreations.tumblr.com/" id="creditohp1">Angel♥ </a></center>

<style type="text/css"> #marco{height: auto; overflow: hidden;} #imagenfondohp1{margin: 0 auto; width: 510px;height: 260px;background-size: cover;background-position:center;background: url(http://via.placeholder.com/550x300);padding: 20px;filter: grayscale(100%);-webkit-filter: grayscale(100%);-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;} #fotoperfil{border:5px solid #fff;width:150px;height:150px;border-radius: 100%;margin:0 auto;position:relative;top:-280px;} #creditohp1{margin: 0 auto; width: 510px;font-size:10px; text-align: center;} #nombrehp1{font-family:kurale;font-size:50px;text-align:left;color: #E27718;text-shadow: -2px 0 #ffffff, 0 2px #ffffff, 2px 0 #ffffff, 0 -2px #ffffff;font-weight: bold;width:490px;margin-left:-170px;margin-top:+35px;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;}#rangohp1{font-family: Scheherazade;text-align:right;width:480px;padding:5px;margin-left:-170px;color:#000;background: rgba(255,255,255,.6);margin-top:+2px;font-size:14px;text-transform:uppercase;font-weight: bold;line-height: 12px;letter-spacing: 1px;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;} #separacionhp1{width:490px;margin-left:-170px;background:#ffffff;height:1px;margin-top:15px;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;} #basehp1{height: 0px; background: #F0F0F0;width: 510px;padding: 0px 20px;margin: auto;margin-top:-160px;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;} #datoshp1{display: inline-block;width:116px;padding:2px;background: #000;font-family: Didact Gothic;text-align:center;color: #FAFAFA;font-size:10px;text-transform: uppercase;} #tituloseccionhp1{width:230px;padding:5px;background: #E27718;font-family: Didact Gothic;text-align:center;color: #FAFAFA;font-size:14px;text-transform: uppercase;} #campotextohp1{overflow: auto;height: 185px;background: #FAFAFA;padding: 5px;width:230px;font-family: Didact Gothic;text-align:justify;font-size: 12px;} #marco:hover #basehp1{height:auto;padding: 20px 20px;border-bottom: 5px solid #E27718;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;} #marco:hover #imagenfondohp1{filter: grayscale(0%);-webkit-filter: grayscale(0%);-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;} #marco:hover #separacionhp1{width:0px;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;} #marco:hover #nombrehp1{font-size: 60px;text-align:center;margin-top:+70px;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;}#marco:hover #rangohp1{color:#ffffff; background:none;text-align:center;margin-top:-70px;-webkit-transition: all 1.2s ease; -moz-transition: all 1.2s ease;-ms-transition: all 1.2s ease;-o-transition: all 1.2s ease; transition: all 1.2s ease;}</style>