Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400&family=Roboto:wght@400;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="rel"><div class="titcrnt"><div class="portconst"><div class="imd1"><img src="https://placehold.jp/100x100.png"></div><i class="fas fa-users"></i></div></div><div class="titmsr">Relaciones</div><div class="rela"><div class="modul-des"><img src="https://placehold.jp/140x140.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-user-times"></i></div><div class="nomdes"><b>BettyLeg</b><br/>enemiga mortal.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/140x140.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-heart"></i></i></div><div class="nomdes"><b>BettyLeg</b><br/><i>amor, amor, amor</i>.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/140x140.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-user-times"></i></div><div class="nomdes"><b>BettyLeg</b><br/>enemiga mortal.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/140x140.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-heart"></i></i></div><div class="nomdes"><b>BettyLeg</b><br/><i>amor, amor, amor</i>.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/140x140.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-heart"></i></i></div><div class="nomdes"><b>BettyLeg</b><br/><i>amor, amor, amor</i>.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/140x140.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-heart"></i></i></div><div class="nomdes"><b>BettyLeg</b><br/><i>amor, amor, amor</i>.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra.</div></div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
- <style>.rel{width:500px; height:auto; margin:10px auto; outline:1px solid #eee; background:#fff;} .cred{margin:0px auto; margin-top:-10px; 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;} .titcrnt{height:100px;background:#fafafa; padding:20px 30px; display:flex; justify-content:center; align-items:center; margin-bottom:5px; border-bottom:1px solid #eee;} .portconst{height:120px; float:left; width:120px;} .imd1{width:100px; height:100px; background:#eee; border-radius:180px; float:left; border:10px solid #fff;} .imd1 img{width:100px; height:100px; border-radius:180px;} .portconst .fas{display:block; font-size:17px; padding:10px; background:#F99B7E; width:20px; height:20px; float:left; margin-left:-125px; position:relative; border-radius:180px; text-align:center; top:70px; border:4px solid #fff; color:#fff;} .titmsr{font-family: 'Roboto', sans-serif; text-transform:uppercase; font-size:14px; color:#F99B7E; font-style:italic; text-align:right; padding:8px 30px; font-weight:700; background:#fff; border-bottom:1px solid #eee;} .modul-des{width:140px; outline:1px solid #eee; outline-offset:5px; overflow:hidden; height:140px; margin-left:px; margin-bottom:15px;} .modul-des img{width:140px; height:140px;} .rela{display:grid; grid-template-columns:auto auto auto; margin:25px auto; width:465px; margin-left:24px;} .des-r{position:relative; background:#fff; height:30px; color:#fff; margin-bottom:5px;} .icdes{float:left; padding:8px 7px 0px 10px; color:#F99B7E; font-size:12px; } .nomdes{font-size:10px; text-align:left; position:relative; float:left; margin-top:4px; color:#444; font-family:'Merriweather', serif; line-height:12px;} .nomdes b{color:#F99B7E; font-size:10px;font-family: 'Roboto', sans-serif; text-transform:uppercase; } .desar{ width 120px; background:#fff; top:0; position:relative; padding:6px; outline-offset:1px; height: auto;webkit-transition: 1s;-o-transition:1s;transition: 1s; height:170px;} .desar .des-r{ padding-top:4px; top:0; border-bottom:1px solid #eee; padding-bottom:5px;} .desar .pa{text-align:justify; margin:8px 0px; font-size:10px; font-family:'Merriweather', serif; max-height:80px; overflow:auto; line-height:12px; padding:0px 6px;} .desar .pa i, .desar .pa b{color:#F99B7E} .modul-des:hover .desar {top:-144px;webkit-transition: 1s;-o-transition:1s;transition: 1s;} </style>
Add Comment
Please, Sign In to add comment
