Portada basica

<link href="https://fonts.googleapis.com/css?family=Domine|Kanit:600&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="chrono"><div class="fotchro"><img src="http://via.placeholder.com/200"></div><div class="titchro"><span class="tiit">Nombre &</span><br/><span class="tiit">Apellido</span></div><div class="datdat"><div class="dts"><div class="tida"><i class="fas fa-birthday-cake"></i></div><div class="cont">20 de diciembre <br/>de 1995</div></div><div class="dts"><div class="tida"><i class="fas fa-snowflake"></i></div><div class="cont">23<br/>inviernos</div></div><div class="dts"><div class="tida"><i class="fas fa-graduation-cap"></i></div><div class="cont">Estudiante<br/>Medicina</div></div><div class="dts"><div class="tida"><i class="fas fa-headphones"></i></div><div class="cont">The Weeknd</div></div><div class="dts"><div class="tida"><i class="fas fa-map-marked-alt"></i></div><div class="cont">Griega</div></div><div class="dts"><div class="tida"><i class="fas fa-paw"></i></div><div class="cont">Sin mascotas</div></div></div><div class="moreph"><img src="http://via.placeholder.com/110"><img src="http://via.placeholder.com/110"></div><div class="contac"><div class="conn"><a href="#"><i class="fab fa-twitter"></i></a></div><div class="conn"><a href="#"><i class="fas fa-id-badge"></i></a></div><div class="conn"><a href="#"><i class="fas fa-envelope"></i></a></div></div></div><div class="cred"><a href="https://bettyleg.tumblr.com/">bettyleg</a></div>

<style>.chrono{width:340px; height:auto; border:1px solid #ddd; margin:0 auto; overflow:hidden; padding-bottom:30px; border-radius: 100px 0px; background:#fff; } .fotchro{width:200px; height:200px; position:relative; margin:0 auto; border-radius:180px; padding:10px; border:1px solid #ddd; top:-34px; right:-105px;} .fotchro img{width:200px; height:200px; border-radius:180px; } .titchro{font-family: 'Kanit', sans-serif; font-weight:900; text-transform:uppercase; line-height:25px; text-align:center; width:240px; font-size:30px; color:#629480; margin:-40px auto;} .datdat{height:169px; margin:65px auto 0px; width:237px; display:grid; grid-template-columns:auto auto auto; line-height:12px;} .moreph{height:116px; margin:0px auto 0px; width:230px;} .contac{height:35px; width:121px; margin:20px auto 0px; border-top:1px solid #ddd; padding-top:5px; padding-left:20px; padding-right:20px;} .dts{padding:0px; margin:2px; width:65px; height:70px; padding:5px;} .tida{font-size:27px; color:#ddd; text-align:center;} .cont{font-family: 'Domine', serif; font-size:10px; top:5px; position:relative; text-align:center; color:#629480;} .dts:hover .tida{color:#629480; opacity:0.6;} .moreph img{width:110px; height:113px; border:1px solid #ddd; border-radius:15px 0px;} .conn a{float:left; margin:5px 10px; color:#629480; font-size:20px; } .cred{margin: 0 auto; width:340px; text-align:center; } .cred a{font-family: 'Domine', serif; color:#ccc; text-decoration:none; font-size:8px; text-transform:uppercase; letter-spacing:2px;} </style>