Advertisement
NecromancerCoding

Evans Wanted

Feb 18th, 2019
1,003
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.97 KB | None | 0 0
  1. <div class="evans">
  2. <div class="etitle">Nombre de la búsqueda</div>
  3. <div class="ebusquedas">
  4. <!--START caja de búsquedas-->
  5. <div class="ebusqueda" style="background-image:url(https://i.imgur.com/21MvCUV.png);">
  6. <div class="enombre">
  7. <h6>The Sister</h6>
  8. <span>Personal Nightmare</span>
  9. </div>
  10. <div class="edatos">
  11. <img src="https://i.imgur.com/r2RsXJt.png"/>
  12. <h7>PETUNIA EVANS</h7>
  13. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur venenatis porta. Integer egestas non diam a aliquam. Nullam at magna varius felis feugiat vestibulum in nec sapien. Nam sodales lacinia aliquam. In placerat consectetur dolor sed ullamcorper. Vestibulum in accumsan augue, quis aliquam dui. Cras eleifend, eros vel vehicula facilisis, orci augue ultrices arcu, ac sagittis elit neque nec leo. Sed ut massa sit amet ante dapibus scelerisque. Mauris ac porta turpis, vel dictum justo. Morbi vitae orci sed justo volutpat porttitor at in felis. Vestibulum at justo eget ligula pharetra bibendum. Praesent placerat ex sed lacus iaculis, quis egestas quam volutpat. Duis leo lorem, dictum nec est et, pharetra posuere metus. Sed pulvinar nisi ex, vitae tempus massa fermentum sed. Maecenas elementum vitae risus sit amet tincidunt.</p>
  14. </div>
  15. </div>
  16. <!--END caja de búsquedas-->
  17. <!--START caja de búsquedas-->
  18. <div class="ebusqueda" style="background-image:url(https://i.imgur.com/6MB8kHi.png);">
  19. <div class="enombre">
  20. <h6>The Bestie</h6>
  21. <span>The eternal hurricane</span>
  22. </div>
  23. <div class="edatos">
  24. <img src="https://i.imgur.com/RenGW2Y.png"/>
  25. <h7>Marlene McKinnon</h7>
  26. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur venenatis porta. Integer egestas non diam a aliquam. Nullam at magna varius felis feugiat vestibulum in nec sapien. Nam sodales lacinia aliquam. In placerat consectetur dolor sed ullamcorper. Vestibulum in accumsan augue, quis aliquam dui. Cras eleifend, eros vel vehicula facilisis, orci augue ultrices arcu, ac sagittis elit neque nec leo. Sed ut massa sit amet ante dapibus scelerisque. Mauris ac porta turpis, vel dictum justo. Morbi vitae orci sed justo volutpat porttitor at in felis. Vestibulum at justo eget ligula pharetra bibendum. Praesent placerat ex sed lacus iaculis, quis egestas quam volutpat. Duis leo lorem, dictum nec est et, pharetra posuere metus. Sed pulvinar nisi ex, vitae tempus massa fermentum sed. Maecenas elementum vitae risus sit amet tincidunt.</p>
  27. </div>
  28. <!--END caja de búsquedas-->
  29. <!--Añade mas cajas de búsquedas aquí-->
  30. </div>
  31. </div>
  32. <div class="etexto"><h6>Requisitos</h6>
  33. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur venenatis porta. Integer egestas non diam a aliquam. Nullam at magna varius felis feugiat vestibulum in nec sapien. Nam sodales lacinia aliquam. In placerat consectetur dolor sed ullamcorper. Vestibulum in accumsan augue, quis aliquam dui. Cras eleifend, eros vel vehicula facilisis, orci augue ultrices arcu, ac sagittis elit neque nec leo. Sed ut massa sit amet ante dapibus scelerisque. Mauris ac porta turpis, vel dictum justo. Morbi vitae orci sed justo volutpat porttitor at in felis. Vestibulum at justo eget ligula pharetra bibendum. Praesent placerat ex sed lacus iaculis, quis egestas quam volutpat. Duis leo lorem, dictum nec est et, pharetra posuere metus. Sed pulvinar nisi ex, vitae tempus massa fermentum sed. Maecenas elementum vitae risus sit amet tincidunt. Praesent placerat ex sed lacus iaculis, quis egestas quam volutpat. Duis leo lorem, dictum nec est et, pharetra posuere metus. Sed pulvinar nisi ex, vitae tempus massa fermentum sed. Maecenas elementum vitae risus sit amet tincidunt.</p>
  34. </div>
  35. </div>
  36. <a href="http://necromancercoding.tumblr.com" class="ncredit">NC</a>
  37.  
  38. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:900i|Roboto:400,400i,700,700i" rel="stylesheet">
  39. <style>.evans{ background:#222; width:400px; margin:0 auto; height:auto; padding:10px; } .etitle{ background:#9ba33f; margin: -10px -10px 10px -10px; font:16px playfair display; font-weight:900; font-style:italic; text-align:center; color:white; padding:10px; } .ebusqueda{ background-color:#222; background-size:cover; background-position:center; height:170px; position:relative; margin-bottom:10px; overflow:hidden; } .enombre{ position:absolute; top:50%; transform:translateY(-50%); color:white; max-width:200px; transition:ease 1s; } .ebusqueda:nth-of-type(odd) .enombre{ left:20px; } .ebusqueda:nth-of-type(even) .enombre{ right:20px; } .ebusqueda:nth-of-type(odd):hover .enombre{ left:-320px; } .ebusqueda:nth-of-type(even):hover .enombre{ right:-320px; } .ebusqueda:last-of-type{ margin-bottom:0px; } .ebusqueda h6{ margin:0; font:15px playfair display; font-weight:900; font-style:italic; } .enombre span{ font:8px roboto; text-transform:uppercase; } .edatos{ background:#333; height:170px; position:absolute; top:0px; width:400px; transition:ease 1s; } .ebusqueda:nth-of-type(even) .edatos{ left:-400px; } .ebusqueda:nth-of-type(odd) .edatos{ right:-400px; } .ebusqueda:nth-of-type(even):hover .edatos{ left:0px; } .ebusqueda:nth-of-type(odd):hover .edatos{ right:0px; } .edatos img{ float:left; position:relative; top:50%; transform:translateY(-50%); border-radius:100%; border: 5px solid white; background:white; left:20px; height:100px; width:100px; } .edatos h7{ float:right; width:235px; background:#9ba33f; color:white; height:30px; display:block; margin-right:20px; margin: 20px 20px 0px 0; font:11px roboto; font-weight:bold; text-align:center; letter-spacing:1px; text-transform:uppercase; line-height:30px; } .edatos p{ float:right; background:#444; margin:0 20px 0 0; width:212px; border:10px solid #444; color:#eee; font:10px roboto; text-align:justify; overflow:auto; padding-right:3px; height:80px; } .ebusqueda:nth-of-type(even) .edatos img{ float:right; left:0px; margin-right:20px; } .ebusqueda:nth-of-type(even) .edatos h7, .ebusqueda:nth-of-type(even) .edatos p{ float:left; margin-right:0px; margin-left:20px; } .etexto h6{ background:#9ba33f; height:30px; font:13px playfair display; font-weight:900; font-style:italic; color:white; text-align:center; line-height:28px; margin:10px auto 0; } .etexto p{ margin: 0 auto; border:10px solid #333; overflow:auto; font:10px roboto; color:#eee; background:#333; min-height:100px; max-height:150px; overflow:auto; text-align:justify; } .evans p::-webkit-scrollbar { width: 5px; height: 5px; } .evans p::-webkit-scrollbar-thumb { background: #9ba33f; border:1px solid #444; } .evans p::-webkit-scrollbar-track { background: #afb759; border:2px solid #444; } .evans p::selection, .evans h6::selection, .evans h7::selection, .evans span::selection, .evans div::selection{ background:#afb759; } .evans strong, .evans i, .evans a, .evans b, .evans em{ color:#afb759; } .ncredit{ width:420px; text-align:right; margin:0 auto; display:block; font-size:10px; text-decoration:none; font:8px verdana; } .evans+br+.ncredit{ margin-top:-15px; } .ncredit:before{ content:"©"; } .evans>br, .ebusqueda>br, .ebusquedas>br, .enombre>br, .edatos>br, .etexto>br{display:none;}</style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement