Advertisement
BettyLeg

Wait a minute!

Jul 26th, 2020 (edited)
1,364
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.60 KB | None | 0 0
  1. /**************************************** RELACIONES ***********************************************************/
  2. <div class="w-timeline-b1"><div class="portadawait" style="background:#C57A71;"><div class="imgwait" style="background:url(https://placehold.jp/220x160.png)center; background-size:cover; "></div><div class="w-titgrand">wait a<br/><span class="w-tittim">Minute</span></div></div><div class="w-titcorto">datos importantes</div><div class="w-datosb1rela"><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Maeve</b><br/>mejor amiga</span></div><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Nick</b><br/>no me agrada</span></div><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Dato</b><br/>descripcion</span></div><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Dato</b><br/>descripcion</span></div><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Maeve</b><br/>mejor amiga</span></div><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Nick</b><br/>no me agrada</span></div><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Dato</b><br/>descripcion</span></div><div class="modul-relacion"><img src="https://placehold.jp/60x60.png"/><span><b>Dato</b><br/>descripcion</span></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
  3. <link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&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"><style>.w-timeline-b1{width:500px; background:#fff; outline:1px solid #ddd; margin:10px auto;} .portadawait{height:160px; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:center;} .portadawait .imgwait{width:220px; height:160px; background:#ddd; border-right:1px solid #fff;} .w-titgrand{width:279px; text-align:center; line-height:19px; font-size:10px; font-family: 'Lora', serif; text-transform:uppercase; color:#fff;} .w-tittim{font-family: 'Playfair Display', serif; font-style:italic; text-transform:initial; font-size:40px; position:relative;left:-10px; letter-spacing:3px; top:-5px; border-bottom:4px solid #fff; padding:0px 20px 4px;} .w-datosb1rela{border-bottom:1px solid #ddd;display:grid; grid-template-columns: auto auto auto auto; margin:35px 25px 0px; border-bottom:0;} .w-datosb1rela .modul-relacion{border:1px solid #ddd; width:100px; height:110px; margin:4px 4px 30px; font-size:8px; text-transform:uppercase; text-align:center; line-height:15px;} .w-titcorto{border-bottom:1px solid #ddd; padding:10px 20px; font-size:11px;font-family: 'Lora', serif; text-align:right; text-transform:uppercase; color:#444;} .w-datosb1rela .modul-relacion b{font-family: 'Playfair Display', serif; font-style:italic; font-size:18px; text-transform:initial; color:#C57A71} .w-datosb1rela .modul-relacion img{width:60px; height: 60px; border-radius:180px; padding:2px; background:#fff; border:1px solid #ddd; position:relative; top:-25px; margin-bottom:-15px;} .w-datosb1rela .modul-relacion span{display:block;}.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>
  4.  
  5.  
  6.  
  7. /**************************************** CRONOLOGÍA Y DATOS ***********************************************************/
  8. <div class="wb-timeline-b1"><div class="wb-portada"style="background:#C57A71;"><div class="wb-img" style="background:url(https://placehold.jp/220x160.png)center; background-size:cover; "></div><div class="wb-titgrand">wait a<br/><span class="wb-tittim">Minute</span></div></div><div class="wb-titcorto">datos importantes</div><div class="wb-datosb1"><div class="modul-datos"><i class="fas fa-users"></i><span><b>23</b><br/>años</span></div><div class="modul-datos"><i class="fas fa-users"></i><b>Lima</b><br/> Peru</div><div class="modul-datos"><i class="fas fa-users"></i><b>Dato</b><br/>descripcion</div><div class="modul-datos"><i class="fas fa-users"></i><b>Dato</b><br/>descripcion</div></div><div class="wb-titcorto"><a href="#">expediente</a><a href="#">relaciones</a><a href="#">mp</a><a href="#">movil</a></div><div class="wb-contenidob1"><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div><link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&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">
  9.  
  10. <style>.wb-timeline-b1{width:500px; background:#fff; outline:1px solid #ddd; margin:10px auto;} .wb-portada{height:160px; border-bottom:1px solid #eee; background:#C57A71; display:flex; align-items:center; justify-content:center;} .wb-portada .wb-img{width:220px; height:160px;} .wb-titgrand{width:279px; text-align:center; line-height:19px; font-size:10px; font-family: 'Lora', serif; text-transform:uppercase; color:#fff;} .wb-tittim{font-family: 'Playfair Display', serif; font-style:italic; text-transform:lowercase; font-size:40px; position:relative;left:-10px; letter-spacing:3px; top:-5px; border-bottom:4px solid #fff; padding:0px 20px 4px;} .wb-datosb1{height:160px; border-bottom:1px solid #ddd; display:flex; align-items:center; justify-content:center; letter-spacing:1px;} .wb-datosb1 .modul-datos{border:1px solid #ddd; width:100px; height:80px; margin:4px; font-size:10px; text-transform:uppercase; text-align:center; line-height:15px;} .wb-datosb1 .modul-datos i{position:relative; display:flex; align-items:center; justify-content:center; width:50px; height:30px; font-size:18px; margin-left:25px; margin-top:-12px; background:#fff; color:#C57A71; margin-bottom:10px;} .wb-titcorto{border-bottom:1px solid #ddd; padding:10px 20px; font-size:11px;font-family: 'Lora', serif; text-align:right; text-transform:uppercase; color:#444;} .wb-datosb1 .modul-datos b{font-family: 'Playfair Display', serif; font-style:italic; font-size:18px; text-transform:initial; letter-spacing:0px; color:#C57A71} .wb-titcorto a{text-decoration:none; padding:0px 10px; color:#444;} .wb-titcorto a:hover {color:#C57A71;} .wb-contenidob1{display:grid; grid-template-columns:auto auto auto; letter-spacing:1px; margin:20px 35px; padding-bottom:20px;} .wb-contenidob1 .modul-fecha{border:1px solid #ddd; width:130px; height:80px; margin:4px; font-size:10px; text-transform:uppercase; text-align:center; line-height:15px; margin-top:12px;} .wb-contenidob1 .modul-fecha i{position:relative; display:flex; align-items:center; justify-content:center; width:50px; height:30px; font-size:18px; margin-left:40px; margin-top:-12px; background:#fff; color:#C57A71; margin-bottom:5px;} .wb-contenidob1 .modul-fecha a{text-decoration:none; color:#C57A71; font-family: 'Playfair Display', serif; font-style:italic; text-transform:initial; font-size:14px; letter-spacing:0;} .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>
  11.  
  12.  
  13. /**************************************** CRONOLOGÍA ***********************************************************/
  14. <div class="wb-timeline-b1"><div class="wb-portada" style="background:#C57A71;"><div class="wb-img" style="background:url(https://placehold.jp/220x160.png)center; background-size:cover; "></div><div class="wb-titgrand">wait a<br/><span class="wb-tittim">Minute</span></div></div><div class="wb-titcorto">Julio</div><div class="wb-contenidob1"><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div></div><div class="wb-titcorto" style="border-top:1px solid #ddd;">Agosto</div><div class="wb-contenidob1"><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div><div class="modul-fecha"><i class="fas fa-users"></i><a href="">titulo tema</a><br/>Maeve</div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
  15. <link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&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"><style>.wb-timeline-b1{width:500px; background:#fff; outline:1px solid #ddd; margin:10px auto;} .wb-portada{height:160px; border-bottom:1px solid #eee; background:#C57A71; display:flex; align-items:center; justify-content:center;} .wb-portada .wb-img{width:220px; height:160px; border-right:1px solid #fff;} .wb-titgrand{width:279px; text-align:center; line-height:19px; font-size:10px; font-family: 'Lora', serif; text-transform:uppercase; color:#fff;} .wb-tittim{font-family: 'Playfair Display', serif; font-style:italic; text-transform:lowercase; font-size:40px; position:relative;left:-10px; letter-spacing:3px; top:-5px; border-bottom:4px solid #fff; padding:0px 20px 4px;}.wb-contenidob1{display:grid; grid-template-columns:auto auto auto; letter-spacing:1px; margin:20px 35px; padding-bottom:20px;} .wb-contenidob1 .modul-fecha{border:1px solid #ddd; width:130px; height:80px; margin:4px; font-size:10px; text-transform:uppercase; text-align:center; line-height:15px; margin-top:12px;} .wb-contenidob1 .modul-fecha i{position:relative; display:flex; align-items:center; justify-content:center; width:50px; height:30px; font-size:18px; margin-left:40px; margin-top:-12px; background:#fff; color:#C57A71; margin-bottom:5px;} .wb-contenidob1 .modul-fecha a{text-decoration:none; color:#C57A71; font-family: 'Playfair Display', serif; font-style:italic; text-transform:initial; font-size:14px; letter-spacing:0;}.wb-titcorto{border-bottom:1px solid #ddd; padding:10px 20px; font-size:11px;font-family: 'Lora', serif; text-align:right; text-transform:uppercase; color:#444;} .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;}
  16. </style>
  17.  
  18.  
  19. /**************************************** PORTADA ***********************************************************/
  20. <div class="wb-timeline-b1"><div class="wb-portada" style="background:#C57A71;"><div class="wb-img" style="background:url(https://placehold.jp/220x160.png)center; background-size:cover; "></div><div class="wb-titgrand">wait a<br/><span class="wb-tittim">Minute</span></div></div><div class="wb-titcorto">datos importantes</div><div class="wb-datosb1"><div class="modul-datos"><i class="fas fa-users"></i><span><b>23</b><br/>años</span></div><div class="modul-datos"><i class="fas fa-users"></i><b>Lima</b><br/> Perú</div><div class="modul-datos"><i class="fas fa-users"></i><b>Dato</b><br/>descripcion</div><div class="modul-datos"><i class="fas fa-users"></i><b>Dato</b><br/>descripcion</div></div><div class="wb-titcorto wb-contactob1"><a href="#">expediente</a><a href="#">Cronología</a><a href="#">Relaciones</a><a href="#">Movil</a></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
  21. <link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&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"><style>.wb-timeline-b1{width:500px; background:#fff; outline:1px solid #ddd; margin:10px auto;
  22. ;} .wb-portada{height:160px; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:center;} .wb-portada .wb-img{width:220px; height:160px; background:#ddd; border-right:1px solid #fff;} .wb-titgrand{width:279px; text-align:center; line-height:19px; font-size:10px; font-family: 'Lora', serif; text-transform:uppercase; color:#fff;} .wb-tittim{font-family: 'Playfair Display', serif; font-style:italic; text-transform:initial; font-size:40px; position:relative;left:-10px; letter-spacing:3px; top:-5px; border-bottom:4px solid #fff; padding:0px 20px 4px;} .wb-datosb1{height:160px; border-bottom:1px solid #ddd; display:flex; align-items:center; justify-content:center; letter-spacing:1px;} .modul-datos{border:1px solid #ddd; width:100px; height:80px; margin:4px; font-size:10px; text-transform:uppercase; text-align:center; line-height:15px;} .wb-datosb1 .modul-datos i{position:relative; display:flex; align-items:center; justify-content:center; width:50px; height:30px; font-size:18px; margin-left:25px; margin-top:-12px; background:#fff; color:#C57A71; margin-bottom:10px;} .wb-titcorto{border-bottom:1px solid #ddd; padding:10px 20px; font-size:11px;font-family: 'Lora', serif; text-align:right; text-transform:uppercase; color:#444;} .wb-datosb1 .modul-datos b{font-family: 'Playfair Display', serif; font-style:italic; font-size:18px; text-transform:initial; letter-spacing:0px; color:#C57A71} .wb-titcorto a{text-decoration:none; padding:0px 5px; color:#444;} .wb-titcorto a:hover {color:#C57A71;} .wb-contactob1{border-bottom:0px;}.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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement