Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <!--Rules:
- Folder Feature
- For the Coders Quarters August 2023 challenge
- Layout provided by Togo: https://toyhou.se/Togo
- You may
- -frankenstein with other codes (as long as the creator of said code allows it)
- -edit/change as much as you need (example: making character codes into user codes, vice-versa)
- You may not
- -Redistribute, resell, and/or claim its yours
- -Remove credit (you're allowed to move & edit it though, just keep it visible)
- Misc Notes:
- -When editing, remember to turn WYSIWYG off! My codes may break otherwise
- -Some basic html knowledge is recommended for editing
- Default Colors:
- - background div: bg-dark
- - Image backgrounds: bg-secondary
- - Accents: bg-primary
- Change the colors: Ctrl+f and search for the color you want to change.
- -->
- <div class="mx-auto" style="max-width:1000px;">
- <!-- /// MAIN BODY /// -->
- <div class="p-2 mb-1 bg-dark" style="box-shadow:2px 2px 3px rgba(0,0,0,0.5)">
- <div class="row no-gutters">
- <!-- /// RIGHT IMAGE /// -->
- <div class="col-lg-3 d-sm-none d-lg-block">
- <!--image
- Note - this section hides on mobile -->
- <div class="" style="height:375px;box-shadow:inset 0px 0px 7px rgba(0,0,0,0.5);
- background-image:url( );
- background-size:cover;
- background-position:center">
- <!--image credit-->
- <div style="position:relative;left:5px;">
- <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);font-size:20px" target="_blank">
- <i class="fa-solid fa-image"></i>
- </a>
- </div>
- </div>
- </div>
- <!-- /// END RIGHT IMAGE /// -->
- <!-- /// MAIN TEXT /// -->
- <div class="col-sm-8 col-lg-6">
- <div class="card border-0 rounded-0 p-2" style="height:375px">
- <!--header-->
- <h1 style="font-size:3em">
- <i class="fa-duotone fa-folder-open"></i> Folder Title
- </h1>
- <div class="bg-primary mb-2" style="height:5px"></div>
- <!--genres, content warnings, misc. tags-->
- <div class="mb-2 text-primary" style="font-size:1.25em">
- Genre /
- <i class="fa-duotone fa-triangle-exclamation"></i> Content warnings /
- etc.
- </div>
- <!--info-->
- <div class="card-body p-2 table-responsive">
- <p>This section scrolls</p>
- <p>Folder/story info: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
- </div>
- </div>
- </div>
- <!-- /// END MAIN TEXT /// -->
- <!-- /// FEATURED CHARACTER /// -->
- <div class="col-sm-4 col-lg-3">
- <!--header-->
- <div class="bg-primary text-white p-2 d-flex align-items-center justify-content-center" style="min-height:50px;text-align:center">
- <h2>Featured character</h2>
- </div>
- <!--character image-->
- <div class="bg-secondary" style="min-height:275px;box-shadow:inset 0px 0px 7px rgba(0,0,0,0.5);
- background-image:url( );
- background-size:cover;
- background-position:center">
- <!--image credit-->
- <div style="position:absolute;right:5px;">
- <a href="#" data-toggle="tooltip" title="img - credit" style="color:#ffffff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);font-size:20px" target="_blank">
- <i class="fa-solid fa-image"></i>
- </a>
- </div>
- </div>
- <!--Character link-->
- <div class="bg-primary p-2 d-flex align-items-center justify-content-center" style="min-height:50px;text-align:center">
- <a href="#" class="text-white">
- <h2>Character Name</h2>
- </a>
- </div>
- </div>
- <!-- /// FEATURED CHARACTER /// -->
- </div>
- </div>
- <!-- /// END MAIN BODY /// -->
- <!--Credit. You may move it, but please do not delete/remove-->
- <p>HTML by <a href="#"><i class='fa-solid fa-heart'></i> Jade-Everstone</a> // Layout by <a href="https://toyhou.se/Togo">Togo</a></p>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
