RELACIONES - DUA

/******************** RELACIONES CON DESCRIPCIÓN *****************/
<div class="profb1" style="border-color:#eee"><div class="portb1" style="background:url(https://placehold.jp/400x210.png); background-size:cover;"><div class="picprofb1"><img src="https://placehold.jp/100x100.png"/></div></div><div class="tringb2"></div><div class="titb1"><span style="color:#F99B7E">Maeve A. Sullivan</span><br/><span class="chtitb1">adventures</span></div><div class="modul-relb1"><div class="imgprofb1"><img src="https://placehold.jp/100x100.png"/></div><div class="descpb1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec justo libero. Quisque a ligula at quam ornare dictum. Mauris ac augue nec orci porttitor tincidunt. Nulla ac pellentesque turpis, a tempor mauris. Ut ac pretium massa, nec interdum magna. Phasellus lobortis tincidunt finibus. Sed blandit est eu eros cursus molestie. In hac habitasse platea dictumst. Ut risus eros, porta et egestas fringilla, iaculis eget magna. Sed rutrum augue at orci mattis, ac vehicula ex placerat. Vivamus at felis enim.</div></div><div class="modul-relb1"><div class="imgprofb1"><img src="https://placehold.jp/100x100.png"/></div><div class="descpb1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec justo libero. Quisque a ligula at quam ornare dictum. Mauris ac augue nec orci porttitor tincidunt. Nulla ac pellentesque turpis, a tempor mauris. Ut ac pretium massa, nec interdum magna. Phasellus lobortis tincidunt finibus. Sed blandit est eu eros cursus molestie. In hac habitasse platea dictumst. Ut risus eros, porta et egestas fringilla, iaculis eget magna. Sed rutrum augue at orci mattis, ac vehicula ex placerat. Vivamus at felis enim.</div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,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"><style>.profb1{width:400px; font-family: 'Lora', serif; font-size:14px; border:15px solid #f4f4f4; margin: 10px auto; background:#fff; padding-bottom:10px;} .portb1{height:210px; background:#000; display:flex; align-items:center; justify-content:center; width:400px;} .portb1 img{width:100px; height:100px; border-radius:180px; border:6px solid #fff; top:60px; position:relative;} .tringb2{ width: 0; height: 0; border-right: 400px solid #fff; border-top: 100px solid transparent; border-bottom: 0px solid transparent; margin-top:-100px; margin-bottom:50px;} .picprofb1{display:flex; align-items:center; justify-content:center;} .nmbb1{line-height:18px; padding-left:20px; color:#fff; font-family: 'Playfair Display', serif; font-style:italic; font-size:18px; border-bottom:0px solid #fff; margin-left:-2px; padding-bottom:5px;} .titb1{font-family: 'Playfair Display', serif; font-size:28px; font-style:italic; text-align:right; color:#444; padding:0px 20px 20px; line-height:18px; font-weight:900;} .chtitb1{font-size:12px;font-family: 'Lora', serif; font-weight:500; } .cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;} .imgprofb1 img{width:100px; height:100px; border-radius:190px; padding:5px; border:1px solid #ccc;} .modul-relb1{margin:10px auto 40px; display:flex; align-items:center; justify-content:center;} .descpb1{max-height:120px; overflow:auto; font-size:12px; text-align:justify; padding-right:10px; width:210px; } .imgprofb1{margin-right:25px;}</style>



/*********************************** SIN DESCRIPCION ***********************************/
<div class="profb1" style="border-color:#eee"><div class="portb1" style="background:url(https://placehold.jp/400x210.png); background-size:cover;"><div class="picprofb1"><img src="https://placehold.jp/100x100.png"/></div></div><div class="tringb2"></div><div class="titb1"><span style="color:#F99B7E">Maeve A. Sullivan</span><br/><span class="chtitb1">adventures</span></div><div class="cont-relb12"><div class="modul-relb12"><div class="imgprofb12"><img src="https://placehold.jp/100x100.png"/></div><div class="descpb123"><i class="fas fa-ghost" style="color:#F99B7E"></i>ex pareja</div></div><div class="modul-relb12"><div class="imgprofb12"><img src="https://placehold.jp/100x100.png"/></div><div class="descpb123"><i class="fas fa-ghost" style="color:#F99B7E"></i>ex pareja</div></div><div class="modul-relb12"><div class="imgprofb12"><img src="https://placehold.jp/100x100.png"/></div><div class="descpb123"><i class="fas fa-glass-cheers" style="color:#F99B7E"></i>amigos de fiesta.</div></div><div class="modul-relb12"><div class="imgprofb12"><img src="https://placehold.jp/100x100.png"/></div><div class="descpb123"><i class="fas fa-ghost" style="color:#F99B7E"></i>ex pareja</div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,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"><style>.profb1{width:400px; font-family: 'Lora', serif; font-size:14px; border:15px solid #f4f4f4; margin: 10px auto; background:#fff; padding-bottom:10px;} .portb1{height:210px; background:#000; display:flex; align-items:center; justify-content:center; width:400px;} .portb1 img{width:100px; height:100px; border-radius:180px; border:6px solid #fff; top:60px; position:relative;} .tringb2{ width: 0; height: 0; border-right: 400px solid #fff; border-top: 100px solid transparent; border-bottom: 0px solid transparent; margin-top:-100px; margin-bottom:50px;} .picprofb1{display:flex; align-items:center; justify-content:center;} .nmbb1{line-height:18px; padding-left:20px; color:#fff; font-family: 'Playfair Display', serif; font-style:italic; font-size:18px; border-bottom:0px solid #fff; margin-left:-2px; padding-bottom:5px;} .titb1{font-family: 'Playfair Display', serif; font-size:28px; font-style:italic; text-align:right; color:#444; padding:0px 20px 20px; line-height:18px; font-weight:900;} .chtitb1{font-size:12px;font-family: 'Lora', serif; font-weight:500; } .cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;} .imgprofb12 img{width:100px; height:100px; border-radius:190px; padding:5px; border:1px solid #ccc;} .cont-relb12{margin:10px auto 30px; display:grid; grid-template-columns:auto auto; width:300px;} .modul-relb12{text-align:center; width:160px; margin: 0 auto 20px;} .imgprofb12{margin: 0px auto 10px;} .descpb123 i{font-size:15px; margin-right:10px;} .descpb123{font-size:13px;text-align:center;} </style>