Friends [Búsquedas]

/********************* BUSQUEDA DE TRAMAS **********************/
<div class="bt2busq-tramas" style="border-color:#fafafa; background:#fff; color:#777; outline-color:#ddd; box-shadow:0 0 1px #000;"><div class="bt2bt-titulo" style="border-bottom-color:#eee; background:#fcfcfc;"><i class="cp cp-beer-o" style="color:#92B8CA;"></i><span style="color:#92B8CA;">The one when they<br/>got back together</span></div><div class="bt2bt-descrpt" style="border-color:#92B8CA90;">Aqui descripción.</div><div class="bt2bt-modultrama"><i class="cp cp-check-mark" style="border-color:#fff; background:#92B8CA; color:#fff; box-shadow:0 0 1.5px #000;"></i><div style="border-left-color:#92B8CA;"><div class="bt2bt-mtti"><b style="color:#92B8CA;">Motive</b><span>indef <i class="cp cp-chevron-right" style="color:#92B8CA;"></i> +18 años <i class="cp cp-chevron-right" style="color:92B8CA;"></i> libre</span><div class="bt2bt-lin" style="background:#eee;"></div></div>Aqui trama</div></div><div class="bt2bt-modultrama"><i class="cp cp-check-mark" style="border-color:#fff; background:#92B8CA; color:#fff; box-shadow:0 0 1.5px #000;"></i><div style="border-left-color:#92B8CA;"><div class="bt2bt-mtti"><b style="color:#92B8CA;">The one when<br/>everybody finds out</b><span>indef <i class="cp cp-chevron-right"style="color:#92B8CA;"></i> +18 años <i class="cp cp-chevron-right" style="color:#92B8CA;"></i> libre</span><div class="bt2bt-lin"style="background:#eee;"></div></div>Aqui trama</div></div></div><a class="bettycred" style="margin-top:-5px;width:500px;" href="https://bettyleg.tumblr.com/">bettyleg</a>

<link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>.bt2busq-tramas{width:470px; border:15px solid #ddd; margin:20px auto; padding:0px; box-sizing:content-box; font-family:'Hind'; padding-bottom:50px; outline:1px solid #ddd; outline-offset:-15px;} .bt2bt-modultrama{display:flex; margin:0px 15px;} .bt2bt-modultrama > span{min-width:30px; margin-top:10px; align-self:center;} .bt2bt-modultrama > i{width:30px; height:30px; min-width:30px; margin:0px 20px; display:flex; align-items:center; justify-content:center; border-radius:180px; border:5px solid #fff; padding:5px; position:relative; font-size:15px;} .bt2bt-modultrama > div{border-left:4px solid #ddd; padding-left:60px; margin-left:-48px; font-size:12.5px; line-height:18px; text-align:justify; min-width:305px; width:305px} .bt2bt-modultrama:not(:last-child) > div{padding-bottom:40px;}.bt2bt-titulo{text-align:center; padding:70px 30px 30px; border-bottom:1px solid #ddd; margin-bottom:50px; line-height:25px;} .bt2bt-titulo > i{display:block; font-size:50px; margin:0px auto 30px; border-radius:130px; } .bt2bt-titulo > span{font-family:'Hammersmith One'; font-size:30px; text-transform:uppercase; font-weight:900; letter-spacing:-0.5px;}.bt2bt-mtti{line-height:20px; text-align:center; margin-bottom:10px;}.bt2bt-modultrama > div > .bt2bt-mtti > b{display:block; font-family:'Hammersmith One'; font-size:22px; margin-bottom:5px;}.bt2bt-lin{width:150px; border-radius:10px; height:5px; margin:10px auto 15px;}.bt2bt-mtti > span{font-size:12px;}.bt2bt-modultrama > div > .bt2bt-mtti > span > i{font-size:6px; padding:2px 4px;}.bt2bt-descrpt{width:300px; margin:30px auto 50px; font-size:12.5px; line-height:18px; padding:20px; border:1px solid #ddd; border-radius:10px; text-align:justify;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>

/***************************** BUSQUEDA DE PJ ***************************************/

<div class="bt2busq-pj" style="background:#fff; border-color:#fafafa; outline-color:#ddd; box-shadow:0px 0px 1px #222; color:#777;"><div class="bt2bpj-portada" style="border-bottom-color:#ddd; background:#fcfcfc;"><img src="https://placehold.jp/170x170.png" style="background:#fff;"/><div class="bt2bpj-datos"><div style="background:#92B8CA; color:#fff"><span>Nombre completo</span></div><div style="background:#92B8CA; color:#fff"><span>Nacionalidad</span></div><div style="background:#92B8CA; color:#fff"><span>25 años</span></div><div style="background:#92B8CA; color:#fff"><span>Nombre del PB</span></div><div style="background:#92B8CA; color:#fff"><span>Grupo</span></div></div></div><div class="bt2bpj-contenido"><div class="bt2bpj-texto"><div class="bt2bpj-tit"><i class="cp cp-beer-o" style="color:#92B8CA"></i><b style="color:#ccc;">they know<br/>that we know</b></div>Aqui trama.</div></div></div><a class="bettycred" style="margin-top:-5px;width:500px;" href="https://bettyleg.tumblr.com/">bettyleg</a>

<link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>.bt2busq-pj{width:470px; border:15px solid #ddd; margin:20px auto; padding:0px; box-sizing:content-box; font-family:'Hind'; padding-bottom:0px; outline:1px solid #ddd; outline-offset:-15px;} .bt2bpj-portada{height:250px; border-bottom:1px solid #ddd; display:flex; align-items:center; justify-content:space-between; padding:0px 30px;} .bt2bpj-portada > img{width:170px; height:170px; border-radius:30px; display:block; padding:10px; border:1px solid #ddd; position:relative;}.bt2bpj-datos{width:260px; height:150px;margin-left:-20px;} .bt2bpj-datos>div{height:26px; display:flex; align-items:center; justify-content:flex-start; padding:0px 10px; background:#ddd; border-radius:0px 20px 20px 0px; margin:4px 0px 0px; padding-left:40px;} .bt2bpj-datos>div >span{font-size:12px;}.bt2bpj-contenido{display:flex;}.bt2bpj-texto{margin:40px; text-align:justify; font-size:12.5px; line-height:18px; box-sizing:border-box;} .bt2bpj-tit > b{display:block; font-size:20px; font-family:'Hammersmith One'; font-weight:800; margin:10px;} .bt2bpj-tit{text-align:center; margin:0px 30px 40px;} .bt2bpj-tit > i{font-size:40px;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>