API tools faq
paste
BettyLeg

Heart of glass [paquete baul]

BettyLeg
Apr 10th, 2021 (edited)
1,430
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.97 KB | None | 0 0
raw download clone embed print report
  1. /*************** INDICE ******************/
  2. <div class="b21baul" style="border-color:#fff;"><div class="b21b-portada"><img src="https://placehold.jp/350x350.png" style="border-color:#fff;"/></div><div class="b21b-wave"><svg class="svgabaj" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#fff" fill-opacity="1" d="M0,32L80,37.3C160,43,320,53,480,85.3C640,117,800,171,960,192C1120,213,1280,203,1360,197.3L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z" style="margin-top:4px;"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="var(--acento-4)" fill-opacity="1" d="M0,32L80,37.3C160,43,320,53,480,85.3C640,117,800,171,960,192C1120,213,1280,203,1360,197.3L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg></div><div class="b21b-datos"><div class="b21b-nombre"><span>Nombre</span>A. Apellido</div><div class="b21bd-da"><a href="#" bt-title="Expediente"><span class="fa fa-user-circle"></i></a><a href="#" bt-title="Teléfono"><span class="fa fa-mobile"></i></a><a href="#" bt-title="Moodboard"><span class="fa fa-camera-retro"></i></a><a href="#" bt-title="Relaciones"><span class="fa fa-users"></i></a><a href="#" bt-title="Cronologia"><span class="fa fa-calendar-alt"></i></a></div></div></div><a class="bettycred" style="margin-top:-5px;width:540px;" href="https://bettyleg.tumblr.com/">bettyleg</a>
  3.  
  4. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"/><style>.b21baul{--acento-1: #d4f7be;--acento-2: #ede5aa;--acento-3: #dcc29c;--acento-4: #d3b7a3;}.b21baul{width:500px; border:1px solid #ddd; border-radius:35px; margin:10px auto; overflow:hidden; border:20px solid #fafafa; box-shadow:0 0 1px #333;font-family: 'Hind', sans-serif;} .b21b-wave{margin-bottom:-10px; position:relative;} .b21b-wave > svg{width:500px;} .b21b-portada{height:350px; margin-bottom:-90px; display:flex; align-items:center; justify-content:center; padding-top:70px; background:linear-gradient(30deg, var(--acento-1), var(--acento-2), var(--acento-3));} .b21b-datos{height:60px; background:var(--acento-4); position:relative; } .b21b-portada > img{width:350px; height:350px; display:block; background:#fff; border:20px solid #fafafa; border-radius:40px;}.b21bd-da{width:400px; background:#fff; border-radius:20px 20px 0px 0px; height:50px; margin:0px auto 0px; position:relative; top:20px; display:flex; align-items:center; justify-content:center;}.b21bd-da > a{font-size:18px; color:var(--acento-4); padding:0px 10px;text-decoration:none;} .b21bd-da > a[bt-title]:hover:after{content:attr(bt-title); font-size:12.5px; font-family:arial; padding:0px 5px; font-weight:700;}.b21b-nombre{position:absolute;top:-50px; left:40px; text-align:center; line-height:24px; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:2px; font-size:15px;} .b21b-nombre>span{display:block; font-size:40px; font-family:'Hammersmith One'; text-transform:none!important; letter-spacing:0!important;} .b21b-wave .svgabaj{margin-bottom:-100px;}.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>
  5.  
  6.  
  7. /*************** CRONOLOGIA *************/
  8. <div class="b21b-paquete" style="border-bottom-color:#dcc29c; background:#fff;"><div class="b21br-tit"><div style=" background:linear-gradient(50deg, #d4f7be, #ede5aa, #dcc29c);"><img src="https://placehold.jp/100x100.png" style="background:#fff;"/></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#fff" fill-opacity="1" d="M0,160L40,149.3C80,139,160,117,240,117.3C320,117,400,139,480,170.7C560,203,640,245,720,240C800,235,880,181,960,138.7C1040,96,1120,64,1200,74.7C1280,85,1360,139,1400,165.3L1440,192L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg></div>
  9. <div class="b21bp-titul"><b style="color:#dcc29c">Abril</b></div><div class="b21bp-listatemas">
  10. <div class="b21bp-tema"><i style="background:transparent; color:#dcc29c;">12</i><div><a href="#" style="color:#dcc29c;">Plastic Heart</a><span>con Miley Cyrus</span></div></div>
  11. <div class="b21bp-tema"><i style="background:transparent; color:#dcc29c;">16</i><div><a href="#" style="color:#dcc29c;">Teach me how to love</a><span>con Shawn Mendes</span></div></div>
  12. <div class="b21bp-tema"><i style="background:transparent; color:#dcc29c;">20</i><div><a href="#" style="color:#dcc29c;">Put me out of my misery</a><span>con Josh M. Rusell</span></div></div>
  13. <div class="b21bp-tema"><i style="background:transparent; color:#dcc29c;">28</i><div><a href="#" style="color:#dcc29c;">Please, don't forget about me</a><span>con Marie S. Stevens</span></div></div>
  14. </div></div><a class="bettycred" style="margin-top:-5px;width:450px;" href="https://bettyleg.tumblr.com/">bettyleg</a>
  15.  
  16. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"/><style>.b21b-paquete br{display:none!important;} .b21b-paquete{width:450px; border:1px solid #ddd; margin:10px auto; min-height:400px; border-radius:25px; overflow:hidden; border-bottom:40px solid #ddd; font-family: 'Hind', sans-serif;}.b21br-tit > div{height:130px; margin-bottom:-80px; display:flex; align-items:center; justify-content:center;}.b21br-tit > svg{width:450px;} .b21br-tit > div img{width:100px; height:100px; display:block; border-radius:200px; background:#fff; padding:15px; border:0px solid #ddd; position:relative; left:-5px; top:20px;} .b21bp-titul{margin: 0px 0px 20px;text-align: center;font-style: italic;font-size: 24px;border-bottom: 0px solid #ddd;color: #777;padding: 20px 20px 10px;letter-spacing: 2px;text-transform: uppercase;} .b21bp-listatemas{max-height:500px; overflow:auto; padding:0px 20px 30px;} .b21bp-tema {display:flex; align-items:center; height:60px;}.b21bp-tema > i{font-size:22px; font-weight:900; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:15px; background:#ddd; margin-right:10px; font-family:'Hammersmith One';} .b21bp-tema > div a{display:block; text-decoration:none; font-size:18px; font-family:'Hammersmith One'; font-weight:600;} .b21bp-tema > div{line-height:18px;} .b21bp-tema > div span{font-size:14px; color:#555; font-weight:500;}.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>
  17.  
  18.  
  19.  
  20.  
  21. /*************** RELACIONES ************/
  22. <div class="b21b-paquete" style="border-bottom-color:#ede5aa; background:#fff;"><div class="b21br-tit"><div style=" background:linear-gradient(50deg, #d4f7be, #ede5aa, #dcc29c);"><img src="https://placehold.jp/100x100.png" style="background:#fff;"/></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#fff" fill-opacity="1" d="M0,160L40,149.3C80,139,160,117,240,117.3C320,117,400,139,480,170.7C560,203,640,245,720,240C800,235,880,181,960,138.7C1040,96,1120,64,1200,74.7C1280,85,1360,139,1400,165.3L1440,192L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path></svg></div><div class="b21br-lista">
  23. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  24. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  25. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  26. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  27. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  28. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  29. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  30. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div>
  31. <div class="b21br-modulo" style="background:url(https://placehold.jp/122x122.png)"><div class="b21brm-des">Mejor<br/> amiga</div></div></div></div><a class="bettycred" style="margin-top:-5px;width:450px;" href="https://bettyleg.tumblr.com/">bettyleg</a>
  32.  
  33. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"/><style>.b21b-paquete br{display:none!important;} .b21b-paquete{width:450px; border:1px solid #ddd; margin:10px auto; min-height:400px; border-radius:25px; overflow:hidden; border-bottom:40px solid #ddd;}.b21br-tit > div{height:130px; margin-bottom:-80px; display:flex; align-items:center; justify-content:center;}.b21br-tit > svg{width:450px;} .b21br-tit > div img{width:100px; height:100px; display:block; border-radius:200px; background:#fff; padding:15px; border:0px solid #ddd; position:relative; left:-5px; top:20px;} .b21br-lista{backgrou nd:#ddd; display:flex; flex-wrap:wrap; width:450px; padding-bottom:30px;} .b21br-modulo{width:122px; height:122px; border:1px solid #ddd; margin:20px 0px 0px 20px; border-radius:15px; display:flex; align-items:flex-end; justify-content:center;}.b21brm-des{position:relative; top:-10px; color:#fff; background:#00000041; text-align:right; font-size:12px; border-radius:10px; height:0; overflow:hidden; webkit-transition: 1s; -o-transition: 1s;transition: 1s; display:flex; align-items:center; justify-content:center; width:100px;font-family: 'Hind', sans-serif; line-height:13px; font-size:12px;} .b21br-modulo:hover .b21brm-des{webkit-transition: 1s; -o-transition: 1s;transition: 1s; height:45px; }.b21brm-des br{display:block!important;}.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>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!