API tools faq
paste
BettyLeg

Baul navideño.

BettyLeg
Dec 21st, 2020 (edited)
597
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.23 KB | None | 0 0
raw download clone embed print report
  1. <div class="bt1b-fondo" style="background:#c83926;"><div class="bt1-baul" style="background:url(https://placehold.jp/400x400.png)center; background-size:cover;"><div class="bt1baul-barra"><a bt-title="Expediente" href="#"><i class="fas fa-user-tie"></i></a><a bt-title="MP" href="#"><i class="fas fa-envelope"></i></a><a bt-title="Relaciones" href="#"><i class="fas fa-users"></i></a><a bt-title="Moodboard" href="#"><i class="fas fa-camera-retro"></i></a> <a bt-title="Playlist" href="#"><i class="fas fa-compact-disc"></i></a><a bt-title="Instagram" href="#"><i class="fab fa-instagram"></i></a><a bt-title="Twitter" href="#"><i class="fab fa-twitter"></i></a> </div><div class="bt1baul-titulo"> <div><b>Nombre</b> <span>A Apellido</span></div></div></div><div class="bt1baul-imagenredonda"><img src="https://placehold.jp/120x120.png"/></div></div><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet"><a class="bettycred" href="http://bettyleg.tumblr.com/">bettyleg</a>
  2.  
  3. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&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>@font-face {font-family: 'Goldie Rainbow'; src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf');src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf') format('truetype'); font-weight: normal;font-style: normal;} .bt1b-fondo{margin:30px auto; width:400px; background:#ddd; padding-bottom:40px; overflow:hidden; outline:1px solid #ddd;}.bt1-baul{width:400px; height:400px; border-bottom:1px solid #fff; overflow:hidden;}.bt1baul-imagenredonda{width:120px; height:120px; background:#fff; border-radius:180px; margin:0 auto; margin-top:-60px; border:1px solid #fff; display:flex; align-items:center; justify-content:center; } .bt1baul-imagenredonda img{width:120px; height:120px; border-radius:180px;} .bt1b-titulom{border-bottom:1px solid #ddd; height:80px; display:flex; align-items:center; justify-content:center; background:#fafafa;font-family: 'Goldie Rainbow'; font-size:40px; font-weight:700; letter-spacing:2px; } .bt1baul-barra{height:60px; border-bottom:1px solid #888; backdrop-filter:grayscale(1) blur(4px); display:flex; align-items:center; justify-content:center; position:relative; top:-61px; webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .bt1baul-titulo{height:150px; margin-top:160px; display:flex; align-items:center; justify-content:center; line-height:28px; text-align:center;} .bt1baul-titulo span{color:#fafafa; text-transform:uppercase; font-weight:700; font-size:12px; letter-spacing:2px; font-family:'Lato', sans-serif;} .bt1baul-barra a {color:#fff; font-size:16px; padding:0px 12px;} .bt1baul-barra a i{transform:rotate(0deg);webkit-transition: 1s; -o-transition: 1s;transition: 1s;}.bt1-baul:hover .bt1baul-barra{top:0px; webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .bt1baul-barra a:hover i{color:#c83926;webkit-transition: 1s; -o-transition: 1s;transition: 1s; transform:rotate(10deg)} .bt1baul-imagenredonda{width:120px; height:120px; background:#fff; border-radius:180px; margin:0 auto; margin-top:-60px; border:1px solid #fff; display:flex; align-items:center; justify-content:center; } .bt1baul-imagenredonda img{width:120px; height:120px; border-radius:180px;} .bt1baul-titulo b{display:block; font-family: 'Goldie Rainbow'; font-size:60px; color:#fff; letter-spacing:1px; text-shadow:2px 2px #333;} .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>
  4.  
  5. /************************************ CRONOLOGIA *****************************************/
  6. <div class="bt1b-fondo" style="background:#c83926; heigth:auto;"><div class="bt1-baul" style="background:#eee; height:auto"><div class="bt1b-titulom" style="color:#c83926">Cronologia</div><div class="bt1b-cronologia"> <div class="bt1b-cmodul"> <i class="fas fa-candy-cane"></i> <div><a href="#">That's definitely girl cursive right there.</a><span><b>Boomer</b> <i class="fas fa-chevron-right"></i> Diciembre</span></div></div><div class="bt1b-cmodul"><i class="fas fa-gifts"></i><div><a href="#">It's the most detestable time of the year</a><span><b>Dash</b> <i class="fas fa-chevron-right"></i> Diciembre</span></div></div><div class="bt1b-cmodul"> <i class="fas fa-sleigh"></i> <div><a href="#">Christmas is all about love.</a><span><b>Lily</b><i class="fas fa-chevron-right"></i> Diciembre</span></div></div></div></div><div class="bt1baul-imagenredonda" style="background:#64A365"><img src="https://placehold.jp/120x120.png"/></div></div><a class="bettycred" href="http://bettyleg.tumblr.com/">bettyleg</a>
  7.  
  8. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&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>@font-face {font-family: 'Goldie Rainbow'; src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf');src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf') format('truetype'); font-weight: normal;font-style: normal;} .bt1b-fondo{margin:30px auto; width:400px; background:#ddd; padding-bottom:40px; overflow:hidden; outline:1px solid #ddd;}.bt1-baul{width:400px; height:400px; border-bottom:1px solid #fff; overflow:hidden;}.bt1baul-imagenredonda{width:120px; height:120px; background:#fff; border-radius:180px; margin:0 auto; margin-top:-60px; border:1px solid #fff; display:flex; align-items:center; justify-content:center; } .bt1baul-imagenredonda img{width:120px; height:120px; border-radius:180px;} .bt1b-titulom{border-bottom:1px solid #ddd; height:80px; display:flex; align-items:center; justify-content:center; background:#fafafa;font-family: 'Goldie Rainbow'; font-size:40px; font-weight:700; letter-spacing:2px; }.bt1b-cronologia{max-height:400px; overflow-y:auto; overflow-x:hidden; padding:0px 10px 20px; margin:20px 0px 60px;} .bt1b-cmodul{display:flex; margin:0px 20px 5px; padding:10px 15px; align-items:center; justify-content:flex-start; font-family: 'Lato', sans-serif;} .bt1b-cmodul > i{padding-right:20px; font-size:24px; color:#862619; transform:rotate(0deg);webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .bt1b-cmodul div > a{display:block; font-size:14px; line-height:15px; font-weight:900; text-decoration:none; color:#888;} .bt1b-cmodul div i{font-size:10px; color:#777; padding:0px 4px;}.bt1b-cmodul div{font-size:12px; line-height:18px;} .bt1b-cmodul i:hover{transform:rotate(-10deg); webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .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>
  9.  
  10. /******************************** RELACIONES ************************************/
  11. <div class="bt1b-fondo" style="background:#c83926; heigth:auto;"><div class="bt1-baul" style="background:#eee; height:auto"><div class="bt1b-titulom" style="color:#c83926;">Relaciones</div><div class="bt1b-relaciones"><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/><div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/> <div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/> <div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/> <div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/> <div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/> <div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/><div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/><div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div><div class="bt1b-rmodul"> <img src="https://placehold.jp/100x100.png"/><div class="bt1b-rmdes"><div><i class="fas fa-candy-cane"></i><span>mejor amiga</span></div></div></div></div></div><div class="bt1baul-imagenredonda" style="background:#64A365"><img src="https://placehold.jp/120x120.png"/></div></div>
  12.  
  13. <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet"><style>@font-face {font-family: 'Goldie Rainbow'; src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf');src: url('https://dl.dropbox.com/s/vy3ql8rmyhe42au/Goldie%20Rainbow.ttf') format('truetype'); font-weight: normal;font-style: normal;} .bt1b-fondo{margin:30px auto; width:400px; background:#ddd; padding-bottom:40px; overflow:hidden; outline:1px solid #ddd;}.bt1-baul{width:400px; height:400px; border-bottom:1px solid #fff; overflow:hidden;}.bt1b-titulom{border-bottom:1px solid #ddd; height:80px; display:flex; align-items:center; justify-content:center; background:#fafafa;font-family: 'Goldie Rainbow'; font-size:40px; font-weight:700; letter-spacing:2px; } .bt1baul-imagenredonda{width:120px; height:120px; background:#fff; border-radius:180px; margin:0 auto; margin-top:-60px; border:1px solid #fff; display:flex; align-items:center; justify-content:center; } .bt1baul-imagenredonda img{width:120px; height:120px; border-radius:180px;} .bt1baul-titulo b{display:block; font-family: 'Goldie Rainbow'; font-size:60px; color:#fff; letter-spacing:1px; text-shadow:2px 2px #333;}.bt1b-relaciones{max-height:400px; overflow-y:auto; overflow-x:hidden; padding:0px 20px 10px; margin:20px 0px 60px; display:grid; grid-template-columns:120px 120px 120px; grid-auto-rows:120px;} .bt1b-rmodul{width:100px; height:100px; overflow:hidden; margin:1px auto; border:6px solid #fafafa; outline:1px solid #ddd;} .bt1b-rmodul img{width:100px; height:100px; display:block; }.bt1b-rmdes{width:100px; height:100px; position:relative; top:0; display:flex; align-items:center; justify-content:center; text-align:center; backdrop-filter:grayscale(1) blur(1px); top:-100px; opacity:0; webkit-transition: 1s; -o-transition: 1s;transition: 1s; line-height:18px; box-sizing:border-box; padding:10px; font-size:12px; color:#fff;font-family: 'Lato', sans-serif; font-weight:400;} .bt1b-rmodul:hover .bt1b-rmdes{opacity:1; webkit-transition: 1s; -o-transition: 1s;transition: 1s;} .bt1b-rmdes i{display:block; font-size:18px; color:#fff;}</style>
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!