Advertisement
BettyLeg

Burn book.

Jul 24th, 2020 (edited)
1,117
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.74 KB | None | 0 0
  1. <div class="book-b3"><div class="portadabb3"><div class="titp">the<br/><b style="letter-spacing:10px; font-style:normmal;">burn</b><br/>book</div></div><div class="contenidob1b3" style="background:url(https://cdn130.picsart.com/295412640050211.png?type=webp&to=min&r=640); background-size:137%;"><div class="contenedorb3"><div class="modul"><img src="https://placehold.jp/100x100.png"/><div class="textb1b3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur sem nec pretium scelerisque. Etiam rutrum ornare volutpat.</div></div><div class="modul"><img src="https://placehold.jp/100x100.png"/><div class="textb1b3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur sem nec pretium scelerisque. Etiam rutrum ornare volutpat.</div></div><div class="modul"><img src="https://placehold.jp/100x100.png"/><div class="textb1b3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur sem nec pretium scelerisque. Etiam rutrum ornare volutpat.</div></div><div class="modul"><img src="https://placehold.jp/100x100.png"/><div class="textb1b3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur sem nec pretium scelerisque. Etiam rutrum ornare volutpat. </div></div></div>
  2. </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">
  4. <style>.book-b3{width:400px; height:500px; background:#fff;outline:1px solid #ddd; margin:10px auto; overflow:hidden;} .portadabb3{height:500px; width:400px; background:#222; display:flex; align-items:center; justify-content:center; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; position:relative;left:00px; transition-delay:2s;} .titp{font-family: 'Lora', serif; color:#fff; font-size:15px; text-transform:uppercase; text-align:center; line-height:30px; letter-spacing:1px; border:1px solid #fff; padding:30px; background:#222; height:100px;} .titp b, .titt b{font-family: 'Playfair Display', serif; font-weight:600; font-size:30px; text-transform:initial; font-style:italic; color:#F99B7E} .book-b3:hover .portadabb3{webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; left:-500px; } .titp:after{width:70px; height:15px; background:#F99B7E; position:absolute; content:""; display:block; opacity:.8; top:162px; left:162px;} .contenidob1b3{background:#fff; width:400px; height:500px; margin-top:-510px;} .modul{ height:130px; margin-bottom:10px; display:flex; align-items:center; justify-content:center;} .modul img{width:100px; height:100px; border:4px solid #fff; outline:1px solid #ddd; transform:rotate(-5deg); position:none; opacity:0; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .contenedorb3{padding:20px 10px 10px; height:450px; overflow-x:hidden; overflow-y:auto; margin-top:10px;}.textb1b3{ padding:10px 20px; width:160px; margin-left:20px; height:80px; overflow:auto; font-family: 'Lora', serif; font-size:11px; text-align:justify; line-height:16px; opacity:0; webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s;} .book-b3:hover .modul img, .book-b3:hover .textb1b3{opacity:1;webkit-transition: 1.5s;-o-transition: 1.5s;transition: 1.5s; transition-delay:1.2s;} .book-b3:hover .textb1b3{transition-delay:1.7s;}.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;} .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