[ Post de rol ] Bonfire

<link href="https://fonts.googleapis.com/css?family=Abhaya+Libre|Meddon&display=swap" rel="stylesheet"> <div class="bonfire"> <div class="bonfire-title">Bonfire</div> <hr class="bon"/> <div class="imagen-bon" style="background-image:url(https://i.imgur.com/alezITV.jpg);"></div> <div class="violent-life">fire is violent life</div> <div class="fire-text">i. Lorem ipsum. Lorem ipsum dolor sit amet consectetur adipiscing elit, consequat sem leo egestas quisque habitasse felis mus, a montes praesent viverra neque ridiculus. Massa habitasse dignissim proin habitant turpis penatibus vestibulum, sapien conubia malesuada porttitor hac vel. Porta potenti cubilia aliquam dui torquent condimentum dis ut, platea suspendisse vitae nulla penatibus pellentesque. <br> Ultricies rutrum luctus dui per penatibus convallis risus habitant tempor potenti, tempus vivamus non cras class vel interdum fringilla maecenas. Quis justo blandit euismod erat varius augue congue laoreet, litora mi penatibus malesuada sodales fusce cras, tellus elementum dignissim netus porta sagittis volutpat. Sodales velit sociosqu varius hendrerit tincidunt purus vel rutrum, in neque malesuada sagittis ultrices praesent sem tortor maecenas, quam blandit vestibulum netus cum dictumst placerat.Lorem ipsum dolor sit amet consectetur adipiscing elit, consequat sem leo egestas quisque habitasse felis mus, a montes praesent viverra neque ridiculus. Massa habitasse dignissim proin habitant turpis penatibus vestibulum, sapien conubia malesuada porttitor hac vel. Porta potenti cubilia aliquam dui torquent condimentum dis ut, platea suspendisse vitae nulla penatibus pellentesque. Ultricies rutrum luctus dui per penatibus convallis risus habitant tempor potenti, tempus vivamus non cras class vel interdum fringilla maecenas. Quis justo blandit euismod erat varius augue congue laoreet, litora mi penatibus malesuada sodales fusce cras, tellus elementum dignissim netus porta sagittis volutpat. Sodales velit sociosqu varius hendrerit tincidunt purus vel rutrum, in neque malesuada sagittis ultrices praesent sem tortor maecenas, quam blandit vestibulum netus cum dictumst placerat. <br><br> Ultricies rutrum luctus dui per penatibus convallis risus habitant tempor potenti, tempus vivamus non cras class vel interdum fringilla maecenas. Quis justo blandit euismod erat varius augue congue laoreet, litora mi penatibus malesuada sodales fusce cras, tellus elementum dignissim netus porta sagittis volutpat. Sodales velit sociosqu varius hendrerit tincidunt purus vel rutrum, in neque malesuada sagittis ultrices praesent sem tortor maecenas, quam blandit vestibulum netus cum.</div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.bonfire {background: #e9e9e9; height: 600px; width: 500px; margin: auto; position: relative; border-bottom: 15px solid #ffc222;} .bonfire-title {top: 20px; color: #AB393C; font-size: 60px; position: absolute; padding: 10px 20px; font-style:italic; font-family: 'Abhaya Libre', serif; font-weight: 800; text-shadow: 4px 4px 0px #ccc; z-index: 1;} .bon {position: absolute; width: 250px; right: 50px; top: 40px; border:0; background: #ccc; height: 1px;} .imagen-bon {height:60px; width: 60px; background: #ccc; border-radius: 100%; position: absolute; right: 10px; top: 10px; border: 5px solid #fff; background-size: cover;} .violent-life {font-family: 'Meddon', cursive; font-size: 25px; position: absolute; top: 48px; left: 80px; z-index:1; color: #fff;} .fire-text {color: #666; background: #eee; height: 445px; width: 420px; margin: auto; position: absolute; top: 100px; left: 25px; font-family: 'Abhaya Libre', serif; font-size: 12px; padding: 15px; text-align: justify; line-height: 17px; overflow: auto;} .fire-text::-webkit-scrollbar { width: 4px; } .fire-text::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .fire-text::-webkit-scrollbar-thumb { background: #ffc222!important;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 2px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;}</style>