Farandula - 2 personas

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&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="goss"><div class="partarr"><i class="fas fa-arrow-left"></i><i class="fas fa-arrow-right"></i><i class="fas fa-redo"></i><div class="linpart"><i class="fas fa-lock"></i><span class="llin">gossipgirl.com</span><i class="fas fa-star"></i></div><div class="ullin"><i class="fas fa-user-circle"></i><i class="fas fa-ellipsis-v"></i></div></div><div class="nav-gos"><span class="linav">home</span><i class="fas fa-angle-right"></i><span class="linav">about us</span><i class="fas fa-angle-right"></i><span class="linav">contact us</span><i class="fas fa-angle-right"></i><span class="linav">xoxo</span></div><div class="titcont">is this love?</div><div class="portcontg"><div class="im1g"><img src="https://66.media.tumblr.com/6ada581cc582bdd286f88b552e74919a/tumblr_pgjy7usDYi1xcbgkdo3_250.jpg"></div><div class="im2g"><img src="https://66.media.tumblr.com/bb924ed119e14426a299134ea08be231/tumblr_ptse7aJ2y01vfkzago4_r1_250.jpg"></div><i class="fas fa-grin-hearts"></i></div><div class="desarr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt laoreet massa sed luctus. Nullam pharetra imperdiet suscipit. Integer at turpis tortor. <i>Suspendisse rutrum nisl purus</i>, at ultrices nisi eleifend id. Suspendisse potenti. Maecenas mattis arcu non sodales accumsan. <b>Integer maximus semper urna at fermentum.</b> Morbi vel enim maximus, tincidunt nisi in, pharetra neque. Suspendisse potenti.<a href="#">@ Nombre del pj</a>, Donec porta at leo non volutpat.<br/><br/>Nullam ultricies semper mauris, nec fermentum magna cursus quis. Praesent dictum ac nibh eget sollicitudin. Nulla eleifend a justo accumsan venenatis. Aliquam convallis, <b>neque sed suscipit vulputate, enim ipsum viverra risus,</b> vel sollicitudin ipsum elit non eros. Nullam vel turpis ut massa aliquet consectetur. Integer enim risus, pharetra id sapien ac, aliquet auctor leo. Duis mollis bibendum massa non vehicula. Donec ullamcorper, nibh at faucibus consectetur, velit mauris laoreet erat, nec ultrices arcu diam eget neque. Espendisse vel finibus risus, sit amet euismod arcu. Quisque eleifend diam et condimentum bibendum. Aenean ut cursus diam. Sed suscipit mauris id erat dignissim pellentesque. Suspendisse eget sagittis orci. Curabitur fermentum erat ac dolor hendrerit convallis</div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<style>.goss{width:470px; height:auto; margin:10px auto; outline:1px solid #eee;} .nav-gos{height:20px; border-bottom:1px solid #eee; padding:20px; background:#fafafa;} .linav{font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size:10px; letter-spacing:1px; color:#ccc; font-style: italic; cursor:pointer;} .nav-gos .fas{font-size: 8px; padding-left:10px; padding-right:10px; color:#F99B7E;} .linav:hover {color:#F99B7E} .portd{width:470px; height:250px; background:#eee; border-bottom:1px solid #eee;}.partarr{height:13px; padding:12px; padding-left:20px; border-bottom:1px solid #eee; background:#fff;} .partarr .fas{ font-size:11px; padding-right:15px; } .partarr .fa-arrow-right{color:#ccc;} .linpart{background:#eee; margin-top:-14px; width:280px; line-height:10px; padding:5px; border-radius:19px; margin-left:80px; padding-left:15px;} .llin{font-family:arial; font-size:12px; color:#444;} .linpart .fas{font-size:10px;} .linpart .fa-star{float:right; margin-top:1px; color:#C89036;} .ullin{float:right; margin-top:-16px;} .ullin .fas{font-size:14px; color:#444;} .ullin .fa-user-circle{color:#F99B7E!important;} .cont-gos{height:220px; background:#fafafa; padding:40px;} .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;} .titcont{height:19px;background:#fff; padding:35px 30px; font-family: 'Roboto', sans-serif; text-transform:uppercase; font-size:40px; color:#F99B7E; font-style:italic; text-align:right;} .portcontg{height:170px; border-bottom:1px solid #eee; background:#fafafa; padding:30px 0px; border-top:1px solid #eee;} .im1g,.im2g{width:150px; height:150px; background:#eee; border-radius:180px; float:left; border:10px solid #fff;} .im1g{margin-left:80px;} .im2g{margin-left:-40px;} .im1g img, .im2g img{width:150px; height:150px; border-radius:180px;} .portcontg .fas{display:block; font-size:20px; padding:20px; background:#F99B7E; width:20px; height:20px; float:left; margin-left:-185px; position:relative; border-radius:180px; text-align:center; top:100px; border:4px solid #fff; color:#fff;} .desarr{background:#fff; padding:60px; font-family:arial; font-size:12px; text-align:justify; line-height:17px;} .desarr i{color:#F99B7E} .desarr b{color:#F99B7E; font-family: 'Roboto', sans-serif; text-transform:uppercase; font-size:10px;} .desarr a{font-family: 'Roboto', sans-serif; color:#6956D1; text-transform:uppercase; font-size:10px; text-decoration: none;}</style>