memberlist / relaciones

<div class="btlist-mbls"><div class="bttit-listmiembros" style="background:#779794"><i class="fa fa-users"></i><div><b>Memberlist</b><span>we're so proud</span></div></div><div class="btlist-miembros"><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap" rel="stylesheet"><style>.btlist-miembros{width:498px; margin:5px auto; display:grid; grid-template-columns:166px 166px 166px; grid-auto-rows:166px;} .btlist-miembro{width:150px; height:150px; background:#fafafa; margin:10px auto 0px; overflow:hidden; border:1px solid #ddd;} .btlist-miembro img{width:150px; height:150px; display:block;webkit-transition: 1s;-o-transition: 1s;transition: 1s;} .btlist-mcontact{height:40px; background:#ccc;} .btlist-miembro:hover img{margin-top:-40px;webkit-transition: 1s;-o-transition: 1s;transition: 1s;} .btlist-mcontact{display:flex; align-items:center; justify-content:center;} .btlist-mcontact i{padding:0px 10px; font-size:16px; color:#fff;} .btlist-mcontact a{text-decoration:none; color:#fff;} .btlist-mbls{width:500px; margin:10px auto; border:15px solid #fafafa; outline:1px solid #ddd; outline-offset:-15px; padding:10px;} .bttit-listmiembros{padding:25px 10px; height:55px; background:#ddd; display:flex; align-items:center; justify-content:flex-start;} .bttit-listmiembros i{font-size:50px; color:#fff; padding: 0px 20px;} .bttit-listmiembros div{display:block; line-height:17px; font-size:12px;} .bttit-listmiembros div b{display:block; font-size:25px;font-family: 'Domine', serif; } .bttit-listmiembros div{padding-right:30px; text-align:left;right; color:#fff;} .bttit-listmiembros div span{font-family:calibri;}.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;}</style>


/********************************** relaciones ****************************************/
<div class="btlist-mbls"><div class="bttit-listmiembros" style="background:#779794"><i class="fa fa-users"></i><div><b>My favorite people</b><span>bueno, casi todos</span></div></div><div class="btlist-miembros"><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><i class="fa fa-user"></i><i>mejor amigo</i></div></div><div class="btlist-miembro"><img src="https://placehold.jp/150x150.png"/><div class="btlist-mcontact" style="background:#779794"><a href=""><i class="fa fa-user"></i></a><a href=""><i class="fa fa-envelope-open-text"></i></a></div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap" rel="stylesheet"><style>.btlist-miembros{width:498px; margin:5px auto; display:grid; grid-template-columns:166px 166px 166px; grid-auto-rows:166px;} .btlist-miembro{width:150px; height:150px; background:#fafafa; margin:10px auto 0px; overflow:hidden; border:1px solid #ddd;} .btlist-miembro img{width:150px; height:150px; display:block;webkit-transition: 1s;-o-transition: 1s;transition: 1s;} .btlist-mcontact{height:40px; background:#ccc;} .btlist-miembro:hover img{margin-top:-40px;webkit-transition: 1s;-o-transition: 1s;transition: 1s;} .btlist-mcontact{display:flex; align-items:center; justify-content:center;} .btlist-mcontact i{padding:0px 5px; font-size:13px; color:#fff;} .btlist-mcontact a{text-decoration:none; color:#fff;} .btlist-mbls{width:500px; margin:10px auto; border:15px solid #fafafa; outline:1px solid #ddd; outline-offset:-15px; padding:10px;} .bttit-listmiembros{padding:25px 10px; height:55px; background:#ddd; display:flex; align-items:center; justify-content:flex-start;} .bttit-listmiembros i{font-size:50px; color:#fff; padding: 0px 20px;} .bttit-listmiembros div{display:block; line-height:18px; font-size:12px;} .bttit-listmiembros div b{display:block; font-size:25px;font-family: 'Domine', serif; } .bttit-listmiembros div{padding-right:30px; text-align:left;right; color:#fff;} .bttit-listmiembros div span{font-family:calibri;}.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;}</style>