Simple Literature
created by:BigGayFish
Custom ColorsHTMLMiscellaneous
Copy
<!--SIMPLE LITERATURE PAGE CODE
What it says on the tin, it's a simple lit page with a carasoul that I made for my friend. Each "page" scrolls so you can in theory make it as long as you need, and you can insert as many "pages" as you need. The carousal buttons have two versions, a desktop/lg screen mode and a mobile/small screen mode so that there's no conflictions with either version. If you're editing the buttons (like colors etc) in anyway, remember to edit the other set as well.
COLOR KEY: #000 - Text, I suggest not changing it unless you change the actual paper bg image
#c10000 - Carousal buttons
#FFFBE2 - Carousal buttons text color
-->
<div class="container">
<center>
<!--CAROUSAL / PAPER BG-->
<div class="carousel slide m-3 p-3 text-left" id="FORMS" data-ride="false" data-pause="true" style="background: url(
https://images.unsplash.com/photo-1707134657472-51902d2854a4?q=80&w=1970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
) center; background-size: cover; color: #000; max-width: 500px; z-index:50;">
<!--END OF PAPER BG-->
<!--IMG CREDIT-->
<a class="p-2 text-secondary tooltipster" title="BG CREDIT - UNSPLASH" href="https://unsplash.com/photos/a-piece-of-white-paper-with-some-writing-on-it-OIKBzKrTdxA" style="opacity:.6;"><i class="fas fa-image"></i></a>
<div class="carousel-inner" style="height:600px; overflow-y: scroll;">
<!--PAGE ONE-->
<div class="carousel-item active">
<div class="card-text">
<p>1.Lorem ipsum odor amet, consectetuer adipiscing elit. Ornare nunc sem cubilia morbi dictumst vestibulum. Aliquam velit nostra aenean penatibus varius aenean. Faucibus laoreet tempor iaculis massa augue. Aetiam libero habitant nullam auctor arcu amet consectetur vel. Quis consequat efficitur pulvinar vulputate fusce. Nisl laoreet elementum taciti nostra nisi in mattis. Eros eget rhoncus felis metus taciti natoque. Egestas sodales netus tellus sed rhoncus integer cras.</p>
<p>Non ex nunc et velit elit. Hendrerit sagittis sit aenean nostra posuere inceptos amet diam. Ligula phasellus purus platea habitasse litora libero. Mi dui sed curae; class mus diam adipiscing maecenas facilisis! Hac ad nullam volutpat dapibus elementum parturient. Aliquam sapien diam odio tempor etiam rutrum. Vehicula cras cubilia laoreet libero quisque tortor iaculis. Habitasse vestibulum conubia maximus augue ipsum litora. Efficitur ullamcorper faucibus eleifend; elit tempus augue porttitor vestibulum.</p>
<p>Maximus congue diam ultrices tincidunt suspendisse efficitur risus id. Habitasse fermentum penatibus enim urna netus; aenean nibh tempus. Tristique enim volutpat porttitor est nec vitae platea. Sed aliquet posuere sem viverra amet elit. Proin tempus molestie ante consectetur nullam at sed. Himenaeos torquent lacus et eleifend venenatis suscipit. Fermentum platea primis vel accumsan a nulla porta. Ligula dui tellus risus euismod nostra semper. Pretium tellus lacus eleifend nascetur facilisis.</p>
<p>Habitant torquent proin amet erat; quis volutpat nulla. Suscipit maximus venenatis volutpat nibh habitasse natoque a nulla. Interdum lacinia senectus vivamus donec vitae cras finibus nibh. Porta sociosqu ultricies morbi, laoreet libero cras. Elementum litora ante posuere ut ante blandit. Aliquet eu condimentum vestibulum at sociosqu. Praesent primis semper ultricies sem himenaeos vel etiam.</p>
<p>Eget sollicitudin suscipit platea blandit felis. Suspendisse natoque libero consequat himenaeos nec ante mollis. Nec malesuada diam lectus vitae maecenas. Amet turpis ipsum morbi scelerisque fames. Eros penatibus dis vel fames ultrices curabitur. Parturient quisque eu sodales posuere condimentum. Diam porta nullam habitasse id ipsum.</p>
</div>
</div>
<!--END OF PAGE ONE-->
<!--PAGE TWO-->
<div class="carousel-item">
<div class="card-text">
<p>2.Lorem ipsum odor amet, consectetuer adipiscing elit. Ornare nunc sem cubilia morbi dictumst vestibulum. Aliquam velit nostra aenean penatibus varius aenean. Faucibus laoreet tempor iaculis massa augue. Aetiam libero habitant nullam auctor arcu amet consectetur vel. Quis consequat efficitur pulvinar vulputate fusce. Nisl laoreet elementum taciti nostra nisi in mattis. Eros eget rhoncus felis metus taciti natoque. Egestas sodales netus tellus sed rhoncus integer cras.</p>
<p>Non ex nunc et velit elit. Hendrerit sagittis sit aenean nostra posuere inceptos amet diam. Ligula phasellus purus platea habitasse litora libero. Mi dui sed curae; class mus diam adipiscing maecenas facilisis! Hac ad nullam volutpat dapibus elementum parturient. Aliquam sapien diam odio tempor etiam rutrum. Vehicula cras cubilia laoreet libero quisque tortor iaculis. Habitasse vestibulum conubia maximus augue ipsum litora. Efficitur ullamcorper faucibus eleifend; elit tempus augue porttitor vestibulum.</p>
<p>Maximus congue diam ultrices tincidunt suspendisse efficitur risus id. Habitasse fermentum penatibus enim urna netus; aenean nibh tempus. Tristique enim volutpat porttitor est nec vitae platea. Sed aliquet posuere sem viverra amet elit. Proin tempus molestie ante consectetur nullam at sed. Himenaeos torquent lacus et eleifend venenatis suscipit. Fermentum platea primis vel accumsan a nulla porta. Ligula dui tellus risus euismod nostra semper. Pretium tellus lacus eleifend nascetur facilisis.</p>
<p>Habitant torquent proin amet erat; quis volutpat nulla. Suscipit maximus venenatis volutpat nibh habitasse natoque a nulla. Interdum lacinia senectus vivamus donec vitae cras finibus nibh. Porta sociosqu ultricies morbi, laoreet libero cras. Elementum litora ante posuere ut ante blandit. Aliquet eu condimentum vestibulum at sociosqu. Praesent primis semper ultricies sem himenaeos vel etiam.</p>
<p>Eget sollicitudin suscipit platea blandit felis. Suspendisse natoque libero consequat himenaeos nec ante mollis. Nec malesuada diam lectus vitae maecenas. Amet turpis ipsum morbi scelerisque fames. Eros penatibus dis vel fames ultrices curabitur. Parturient quisque eu sodales posuere condimentum. Diam porta nullam habitasse id ipsum.</p>
</div>
</div>
<!--END OF PAGE TWO-->
<!--PAGE THREE-->
<div class="carousel-item">
<div class="card-text">
<p>3.Lorem ipsum odor amet, consectetuer adipiscing elit. Ornare nunc sem cubilia morbi dictumst vestibulum. Aliquam velit nostra aenean penatibus varius aenean. Faucibus laoreet tempor iaculis massa augue. Aetiam libero habitant nullam auctor arcu amet consectetur vel. Quis consequat efficitur pulvinar vulputate fusce. Nisl laoreet elementum taciti nostra nisi in mattis. Eros eget rhoncus felis metus taciti natoque. Egestas sodales netus tellus sed rhoncus integer cras.</p>
<p>Non ex nunc et velit elit. Hendrerit sagittis sit aenean nostra posuere inceptos amet diam. Ligula phasellus purus platea habitasse litora libero. Mi dui sed curae; class mus diam adipiscing maecenas facilisis! Hac ad nullam volutpat dapibus elementum parturient. Aliquam sapien diam odio tempor etiam rutrum. Vehicula cras cubilia laoreet libero quisque tortor iaculis. Habitasse vestibulum conubia maximus augue ipsum litora. Efficitur ullamcorper faucibus eleifend; elit tempus augue porttitor vestibulum.</p>
<p>Maximus congue diam ultrices tincidunt suspendisse efficitur risus id. Habitasse fermentum penatibus enim urna netus; aenean nibh tempus. Tristique enim volutpat porttitor est nec vitae platea. Sed aliquet posuere sem viverra amet elit. Proin tempus molestie ante consectetur nullam at sed. Himenaeos torquent lacus et eleifend venenatis suscipit. Fermentum platea primis vel accumsan a nulla porta. Ligula dui tellus risus euismod nostra semper. Pretium tellus lacus eleifend nascetur facilisis.</p>
<p>Habitant torquent proin amet erat; quis volutpat nulla. Suscipit maximus venenatis volutpat nibh habitasse natoque a nulla. Interdum lacinia senectus vivamus donec vitae cras finibus nibh. Porta sociosqu ultricies morbi, laoreet libero cras. Elementum litora ante posuere ut ante blandit. Aliquet eu condimentum vestibulum at sociosqu. Praesent primis semper ultricies sem himenaeos vel etiam.</p>
<p>Eget sollicitudin suscipit platea blandit felis. Suspendisse natoque libero consequat himenaeos nec ante mollis. Nec malesuada diam lectus vitae maecenas. Amet turpis ipsum morbi scelerisque fames. Eros penatibus dis vel fames ultrices curabitur. Parturient quisque eu sodales posuere condimentum. Diam porta nullam habitasse id ipsum.</p>
</div>
</div>
<!--END OF PAGE THREE-->
<!--INSERT MORE PAGES ABOVE HERE-->
</div>
</div>
</center>
<!--DESKTOP LB BUTTON-->
<div class="card bg-transparent hidden-sm-down border-0 p-3" style="z-index: 1; position: absolute; left: 15%; top: 50%; width: 65%;">
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0 border-0" style="font-size:30px; background-color: #c10000; color: #FFFBE2; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);" data-slide="prev" href="#FORMS"></a>
</div>
</div>
</div>
<!--DESKTOP LB BUTTON END-->
<!--DESKTOP RB BUTTON-->
<div class="card bg-transparent hidden-sm-down border-0 p-3" style="z-index: 1; position: absolute; left: 66%; top: 50%; width: 65%;">
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0 border-0" style="font-size:30px; background-color: #c10000; color: #FFFBE2; clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0; clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);" data-slide="next" href="#FORMS"></a>
</div>
</div>
</div>
<!--DESKTOP RB BUTTON END-->
<!--MOBILE BUMPER BUTTONS-->
<div class="row no-gutters w-100 d-lg-none">
<!--LB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0 border-0" style="font-size:30px; background-color: #c10000; color: #FFFBE2; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);"> <i class="fas fa-angle-left"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);" data-slide="prev" href="#FORMS"></a>
</div>
</div>
<!--LB BUTTON END-->
<!--RB BUTTON-->
<div class="col-sm-3 p-2">
<div class="col-md card m-1 text-center font-weight-bold p-1 rounded-0 border-0" style="font-size:30px; background-color: #c10000; color: #FFFBE2; clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);"> <i class="fas fa-angle-right"></i>
<!--TOGGLE-->
<a class="btn btn-outline-secondary rounded-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0; clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);" data-slide="next" href="#FORMS"></a>
</div>
</div>
<!--RB BUTTON END-->
</div>
<!--MOBILE BUMPER BUTTONS END-->
<div class="bg-primary mx-2" style="height: 3px;">
<a href="https://toyhou.se/BigGayFish" class="pull-right"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>