Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /********************************** SIN IMAGEN DE FONDO ******************************/
- <div class="bsqb1"><div class="titB2"><span style="color:#B89F78">Surprise!</span></div><div class="bettyleg1" style="background:#B89F78"><div class="fondB2" style="background:rgba(0,0,0,.4);"></div><div class="portadaB2"><div class="imagenB2" style="border-color: #fff;"><img src="https://placehold.jp/140x140.png"/></div></div><div class="textpB2"><div class="aqtexB2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit, nisi non sodales porttitor, erat arcu lacinia quam, et efficitur erat tortor id augue. Nullam placerat, elit euismod egestas pharetra Vivamus molestie, massa in aliquet luctus, dolor enim gravida nulla, ut efficitur felis augue nec felis. Nulla non consequat ante. Mauris dolor sapien, sodales imperdiet eleifend eu, rutrum nec massa. Phasellus ex mi, pulvinar vel ex eu, sagittis sodales lorem. Integer eget vehicula purus.<br/><br/>Nulla eu nisi odio. Quisque eget fermentum diam, vel rutrum sapien. Maecenas risus erat, laoreet at tincidunt a, volutpat aliquet velit. Aliquam nec volutpat dui, eget suscipit purus. Praesent vitae ante et mauris lobortis blandit. Ut viverra lobortis libero, id tempor leo elementum at. Suspendisse potenti.</div></div></div><div class="fottB2"><i class="fas fa-leaf" style="color:#D7B678"></i> libre <i class="fas fa-leaf" style="color:#D7B678"></i> pb a elección <i class="fas fa-leaf" style="color:#D7B678"></i> 25 años <i class="fas fa-leaf" style="color:#D7B678"></i> indef</div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
- <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=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&display=swap" rel="stylesheet"><style>.bsqb1{width:280px; border:1px solid #ddd; margin:10px auto; background:#fff;}.bettyleg1{width:280px; height:300px; background:#ddd; overflow:hidden;} .fondB2{width:280px; height:300px; background:#ccc;} .portadaB2{width:280px; height:300px; background:rgba(0,0,0,.4); top:-465px; left:110px; transform:rotate(-40deg); position:relative;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; padding:80px 0px;} .bettyleg1:hover .portadaB2{top:-300px; left:300px; transform:rotate(0deg);webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .portadaB2 .imagenB2{width:140px; height:140px; padding:10px; background:transparent; border:1px solid; border-radius:180px; position:relative; left:-80px; top:70px;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .bettyleg1:hover .imagenB2{left:100px; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .textpB2{width:280px; height:300px; background:rgba(0,0,0,.4); margin-top:-760px; transform:rotate(-65deg); position:relative; top:364px; left:-63px; ;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s} .bettyleg1:hover .textpB2 {transform:rotate(0deg); top:0px; left:0px;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .aqtexB2{width:200px; overflow: auto; height:240px; position:relative; top:32px; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; left:0px; padding-right:10px; font-family: 'Lora', serif; font-size:12px; color:#fafafa; text-align:justify; line-height:16px;} .bettyleg1:hover .aqtexB2{left:41px;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .imagenB2 img{width:140px; height:140px; border-radius:180px; transform:rotate(40deg);} .fottB2{padding:20px 10px;font-family: 'Lora', serif; font-size:10px; text-align:center;} .fottB2 i{padding:0px 3px;} .titB2{padding:20px 10px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:19px;} .titB2 span{font-family: 'Playfair Display', serif; font-size:22px; font-style:italic; }.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>
- /***************************************** CON IMAGEN DE FONDO *************************************************/
- <div class="bsqb1"><div class="titB2"><span style="color:#D7B678">Surprise!</span></div><div class="bettyleg1" style="background:url(https://placehold.jp/280x300.png)center; background-size:cover;"><div class="fondB2" style="background:rgba(0,0,0,.4);"></div><div class="portadaB2"><div class="imagenB2" style="border-color: #fff;"><img src="https://placehold.jp/140x140.png"/></div></div><div class="textpB2"><div class="aqtexB2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit, nisi non sodales porttitor, erat arcu lacinia quam, et efficitur erat tortor id augue. Nullam placerat, elit euismod egestas pharetra Vivamus molestie, massa in aliquet luctus, dolor enim gravida nulla, ut efficitur felis augue nec felis. Nulla non consequat ante. Mauris dolor sapien, sodales imperdiet eleifend eu, rutrum nec massa. Phasellus ex mi, pulvinar vel ex eu, sagittis sodales lorem. Integer eget vehicula purus.<br/><br/>Nulla eu nisi odio. Quisque eget fermentum diam, vel rutrum sapien. Maecenas risus erat, laoreet at tincidunt a, volutpat aliquet velit. Aliquam nec volutpat dui, eget suscipit purus. Praesent vitae ante et mauris lobortis blandit. Ut viverra lobortis libero, id tempor leo elementum at. Suspendisse potenti.</div></div></div><div class="fottB2"><i class="fas fa-leaf" style="color:#D7B678"></i> libre <i class="fas fa-leaf" style="color:#D7B678"></i> pb a elección <i class="fas fa-leaf" style="color:#D7B678"></i> 25 años <i class="fas fa-leaf" style="color:#D7B678"></i> indef</div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>
- <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=Lora:wght@500&family=Playfair+Display:ital,wght@0,500;1,600&display=swap" rel="stylesheet"><style>.bsqb1{width:280px; border:1px solid #ddd; margin:10px auto; background:#fff;}.bettyleg1{width:280px; height:300px; background:#ddd; overflow:hidden;} .fondB2{width:280px; height:300px; background:#ccc;} .portadaB2{width:280px; height:300px; background:rgba(0,0,0,.4); top:-465px; left:110px; transform:rotate(-40deg); position:relative;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; padding:80px 0px;} .bettyleg1:hover .portadaB2{top:-300px; left:300px; transform:rotate(0deg);webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .portadaB2 .imagenB2{width:140px; height:140px; padding:10px; background:transparent; border:1px solid; border-radius:180px; position:relative; left:-80px; top:70px;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .bettyleg1:hover .imagenB2{left:100px; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .textpB2{width:280px; height:300px; background:rgba(0,0,0,.4); margin-top:-760px; transform:rotate(-65deg); position:relative; top:364px; left:-63px; ;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s} .bettyleg1:hover .textpB2 {transform:rotate(0deg); top:0px; left:0px;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .aqtexB2{width:200px; overflow: auto; height:240px; position:relative; top:32px; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; left:0px; padding-right:10px; font-family: 'Lora', serif; font-size:12px; color:#fafafa; text-align:justify; line-height:16px;} .bettyleg1:hover .aqtexB2{left:41px;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .imagenB2 img{width:140px; height:140px; border-radius:180px; transform:rotate(40deg);} .fottB2{padding:20px 10px;font-family: 'Lora', serif; font-size:10px; text-align:center;} .fottB2 i{padding:0px 3px;} .titB2{padding:20px 10px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:19px;} .titB2 span{font-family: 'Playfair Display', serif; font-size:22px; font-style:italic; }.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>
Add Comment
Please, Sign In to add comment