Eyes Up, Guardian
created by:dragon-heist
Mixed ColorsHTMLCharacter
Copy
<div class="col-12 p-0 text-white">
<!-- EMBLEM BANNER -->
<div class="col-12 bg-dark d-flex flex-wrap p-0 rounded-top" style="min-height:90px; z-index:1;
background:url('https://www.bungie.net/common/destiny2_content/icons/28c276f000e32d4970a4926c94895c91.jpg');
background-position:center; background-size:cover; background-repeat:no-repeat;">
<div class="col-lg-8 d-flex">
<!-- EMBLEM ICON -->
<div class="ml-md-5 mt-3 mt-md-4" style="width:96px; height:96px">
<img src="https://www.bungie.net/common/destiny2_content/icons/66c6bef5e245c20fa74391e1178d684b.png">
</div>
<div class="ml-3 mt-3 mt-md-4">
<!-- CHARACTER NAME -->
<div class="display-4" style="font-family: Trebuchet MS, sans-serif;">
Name
</div>
<!-- SEASON RANK / POWER LEVEL / TRIUMPH SCORE -->
<div class="d-flex flex-wrap" style="text-transform: uppercase; font-weight:500; font-family: Trebuchet MS, sans-serif;">
<i class="fa-regular fa-slash-forward pt-1"></i><i class="fa-regular fa-slash-forward pt-1 mr-1"></i>
<!-- SEASON RANK -->
<div>Season Rank 114</div>
<i class="fa-regular fa-slash-forward pt-1 mx-1"></i> <i class="fa-regular fa-sparkle pt-1 mr-1"></i>
<!-- POWER LEVEL -->
<div>335</div>
<i class="fa-regular fa-slash-forward pt-1 ml-1 mr-2"></i>
<i class="fa-regular fa-bookmark pt-1 mr-1"></i>
<!-- TRIUMPH SCORE -->
<div>10,000</div>
</div>
</div>
</div>
<div class="col-lg-4 d-flex justify-content-end my-auto">
<ul class="nav nav-tabs border-bottom-0 mx-4 mb-2 mb-md-0 mr-md-4 mr-lg-5 d-flex flex-wrap justify-content-center" style="text-transform: uppercase; font-weight:500; font-family: Trebuchet MS, sans-serif; letter-spacing:1px; font-weight:600;
filter: drop-shadow(1px 1px 0 #1E1F21) drop-shadow(-1px -1px 0 #1E1F21) drop-shadow(-1px 1px 0 #1E1F21) drop-shadow(1px -1px 0 #1E1F21);">
<li class="nav-item">
<a class="nav-link border-0 rounded" data-toggle="tab" href="#LORE">Lore</a>
</li>
<li class="nav-item">
<a class="nav-link border-0 rounded active" data-toggle="tab" href="#JOURNEY">Journey</a>
</li>
<li class="nav-item">
<a class="nav-link border-0 rounded" data-toggle="tab" href="#CHARACTER">Character</a>
</li>
<li class="nav-item">
<a class="nav-link border-0 rounded" data-toggle="tab" href="#TIMELINE">Timeline</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<!-- LORE SECTION -->
<div class="tab-pane fade rounded-bottom" id="LORE" style="background:linear-gradient(0deg, rgba(17,16,21,1) 0%, rgba(33,33,33,1) 26%, rgba(46,47,52,1) 60%, rgba(56,56,64,1) 100%);">
<div class="col-12 d-flex flex-wrap justify-content-center py-0 px-4">
<!-- LORE BOOK COLUMN -->
<div class="col-7 col-sm-5 col-lg-3 order-md-0 order-1 mt-3 my-lg-4 p-0 align-content-center d-flex flex-wrap">
<div class="text-center col-12" style="text-transform:uppercase; font-weight:600; letter-spacing:1px;">Lore</div>
<!-- LORE BOOK IMAGE -->
<div class="col-12 col-md-8 mx-auto p-0 my-2 my-sm-3">
<img src="https://static.ishtar-collective.net/books/book-becoming-legend.png">
</div>
<!-- LORE BOOK PAGE COUNT -->
<div class="mb-4 mb-md-0 mt-md-4 text-center col-12" style="position:relative;">
<i class="fa-duotone fa-file fa-xl fa-flip-horizontal" style="opacity:0.4;"></i>
<div style="position:absolute; top:0; bottom:0; left:0; right:0; font-weight:600; font-size:1.1em;">3<span class="mx-2">/</span>3</div>
</div>
</div>
<!-- LORE CONTENT COLUMN -->
<div class="col-lg-7 order-md-1 order-0 p-0 my-3">
<div class="tab-content">
<!-- BACKSTORY -->
<div class="tab-pane fade show active" id="BACKSTORY">
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Backstory</div>
<div class="pr-4 pb-4" style="height:400px; border-bottom:1px solid rgba(255,255,255,0.4); overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
</div>
</div>
<!-- PERSONALITY -->
<div class="tab-pane fade" id="PERSONALITY">
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Personality</div>
<div class="pr-4 pb-4" style="height:400px; border-bottom:1px solid rgba(255,255,255,0.4); overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
</div>
</div>
<!-- RELATIONSHIPS -->
<div class="tab-pane fade" id="RELATIONSHIPS">
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Relationships</div>
<div class="pr-4 pb-4" style="height:400px; border-bottom:1px solid rgba(255,255,255,0.4); overflow-x:hidden; overflow-y:auto; scrollbar-width:thin;">
<!-- RELATIONSHIPS CHARACTER 1-->
<div class="col-12 p-0 mb-3">
<div class="col-12 p-0 d-flex flex-wrap">
<img src="https://i.imgur.com/duO51OA.png" class="mx-auto" style="max-width:130px;">
<div class="col-md-10">
<p class="mb-2" style="font-weight:500; font-size:1.4em;">Character // <span class="text-secondary">Relationship</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium.</p>
</div>
</div>
</div>
<!-- RELATIONSHIPS CHARACTER 2-->
<div class="col-12 p-0 mb-3">
<div class="col-12 p-0 d-flex flex-wrap">
<img src="https://i.imgur.com/duO51OA.png" class="mx-auto" style="max-width:130px;">
<div class="col-md-10">
<p class="mb-2" style="font-weight:500; font-size:1.4em;">Character // <span class="text-secondary">Relationship</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium.</p>
</div>
</div>
</div>
<!-- RELATIONSHIPS CHARACTER 3-->
<div class="col-12 p-0 mb-3">
<div class="col-12 p-0 d-flex flex-wrap">
<img src="https://i.imgur.com/duO51OA.png" class="mx-auto" style="max-width:130px;">
<div class="col-md-10">
<p class="mb-2" style="font-weight:500; font-size:1.4em;">Character // <span class="text-secondary">Relationship</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium.</p>
</div>
</div>
</div>
<!-- RELATIONSHIPS CHARACTER 4-->
<div class="col-12 p-0 mb-3">
<div class="col-12 p-0 d-flex flex-wrap">
<img src="https://i.imgur.com/duO51OA.png" class="mx-auto" style="max-width:130px;">
<div class="col-md-10">
<p class="mb-2" style="font-weight:500; font-size:1.4em;">Character // <span class="text-secondary">Relationship</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LORE NAVIGATION -->
<div class="mt-3">
<ul class="nav nav-pills">
<li class="nav-item mx-1">
<a class="nav-link text-light active" data-toggle="pill" href="#BACKSTORY"><i class="fa-light fa-book display-4"></i></a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-light" data-toggle="pill" href="#PERSONALITY"><i class="fa-light fa-pen display-4"></i></a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-light" data-toggle="pill" href="#RELATIONSHIPS"><i class="fa-light fa-heart display-4"></i></a>
</li>
</ul>
</div>
</div>
<!-- GHOST FLOATING COLUMN -->
<div class="col-5 col-sm-3 col-lg-2 order-2 pl-4 align-items-center">
<!-- GHOST SHELL IMAGE -->
<img class="fa-bounce" style="--fa-bounce-height: -50px; --fa-bounce-rebound:0px; --fa-bounce-start-scale-x:1; --fa-bounce-start-scale-y:1; --fa-bounce-jump-scale-x:1; --fa-bounce-jump-scale-y:1; --fa-bounce-land-scale-x:1; --fa-bounce-land-scale-y:1; --webkit-animation: fa-bounce; animation-duration: 5s; animation-iteration-count: infinite; animation-timing: ease-in-out;"
src="https://i.imgur.com/duO51OA.png">
</div>
</div>
</div>
<!-- JOURNEY SECTION -->
<div class="tab-pane fade rounded-bottom show active" id="JOURNEY" style="background:linear-gradient(0deg, #15191F 0%, #3C5569 60%, #657D8F 100%);">
<div class="col-12 d-flex flex-wrap justify-content-center py-0 px-4">
<div class="col-xl-6 order-xl-0 order-1 align-items-end justify-content-center">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/73134224_YBWKWxRqUttS3Jq.png" class="w-75">
</div>
<div class="col-xl-6 order-xl-1 order-0 d-flex flex-wrap align-items-stretch">
<!-- BASICS -->
<div class="col-sm-6 my-2 pl-0">
<div class="card bg-dark pb-2">
<div class="text-center mt-1" style="text-transform:uppercase; font-weight:600; letter-spacing:4px;">Basics</div>
<hr class="w-100 my-2" style="border-width:2px;">
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Name</div>
<div class="col-6 text-right">Name</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Age</div>
<div class="col-6 text-right">Age</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Species</div>
<div class="col-6 text-right">Species</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Gender</div>
<div class="col-6 text-right">Gender</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Pronouns</div>
<div class="col-6 text-right">Pronouns</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Height</div>
<div class="col-6 text-right">Height</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Sexuality</div>
<div class="col-6 text-right">Sexuality</div>
</div>
</div>
</div>
<!-- GUARDIAN STATS -->
<div class="col-sm-6 my-2 pl-0">
<div class="card bg-dark pb-2">
<div class="text-center mt-1" style="text-transform:uppercase; font-weight:600; letter-spacing:4px;">Guardian Stats</div>
<hr class="w-100 my-2" style="border-width:2px;">
<div class="" style="height:220px; scrollbar-width:thin; overflow-x:hidden; overflow-y:auto;">
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Status</div>
<div class="col-6 text-right">Active</div>
</div>
<hr class="w-75 my-2">
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Fireteam</div>
<div class="col-6 text-right">Fireteam Name</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Location</div>
<div class="col-6 text-right">The Tower</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Rez Date</div>
<div class="col-6 text-right">Date</div>
</div>
<hr class="w-75 my-2">
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Class</div>
<div class="col-6 text-right">Hunter</div>
</div>
<div class="col-12 d-flex flex-wrap p-0 my-1">
<div class="col-6 text-left" style="text-transform:uppercase; font-weight:600;">Subclasses</div>
<div class="col-6 text-right">
<p class="mb-1">Gunslinger <img class="ml-1" src="https://d2.destinygamewiki.com/mediawiki/images/thumb/2/25/Solar.png/20px-Solar.png"></p>
<p class="mb-1">Bladedancer <img class="ml-1" src="https://d2.destinygamewiki.com/mediawiki/images/thumb/3/35/Arc.png/20px-Arc.png"></p>
</div>
<!-- Element icons here: https://d2.destinygamewiki.com/wiki/Elements -->
</div>
</div>
</div>
</div>
<!-- ABOUT -->
<div class="col-12 d-flex mb-2 pl-0">
<div class="col-12 card bg-dark p-0">
<div class="text-center mt-1" style="text-transform:uppercase; font-weight:600; letter-spacing:4px;">About</div>
<hr class="w-100 my-1" style="border-width:2px;">
<div class="py-2 pl-3 pr-4" style="height:150px; scrollbar-width:thin; overflow-x:hidden; overflow-y:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
</div>
</div>
</div>
<!-- TITLE -->
<div class="col-sm-4 col-md-5 col-lg-4 d-flex mb-2 pl-0">
<div class="col-12 card bg-dark p-0">
<div class="text-center mt-1" style="text-transform:uppercase; font-weight:600; letter-spacing:4px;">Title</div>
<hr class="w-100 my-1" style="border-width:2px;">
<div class="text-center">
<img src="https://fbi.cults3d.com/uploaders/25083751/illustration-file/8730cf2c-0205-42d7-af67-97a9d310e3fb/30th-Anniversary-Seal-Vidmaster.png" class="w-75">
</div>
<div class="text-center mb-2" style="font-size:1.1em; letter-spacing:1px;">Title</div>
</div>
</div>
<!-- GHOST -->
<div class="col-sm-8 col-md-7 col-lg-8 d-flex mb-2 pl-0">
<div class="col-12 card bg-dark p-0">
<div class="text-center mt-1" style="text-transform:uppercase; font-weight:600; letter-spacing:4px;">Ghost</div>
<hr class="w-100 my-1" style="border-width:2px;">
<div class="w-100 p-0 d-flex flex-wrap">
<div class="col-4 align-items-center">
<div class="text-center">
<img src="https://i.imgur.com/duO51OA.png">
<p class="font-italic mt-1">Name, trusted companion</p>
</div>
</div>
<div class="col-8 py-2 pl-3 pr-4" style="max-height:200px; scrollbar-width:thin; overflow-x:hidden; overflow-y:auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper faucibus risus eu lobortis. Maecenas a congue erat. Vivamus hendrerit ullamcorper leo. Suspendisse potenti. Sed ornare lectus non tortor placerat pretium. Sed fringilla turpis et mauris varius rhoncus. Aenean sit amet urna id lorem volutpat euismod eget at dolor. Cras at gravida massa. Maecenas malesuada justo lorem, sit amet auctor mauris ullamcorper sit amet. Quisque venenatis ultricies massa, vitae facilisis mauris interdum vel. Donec id urna sed mauris cursus tempus. Nulla at congue nisi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CHARACTER SECTION -->
<div class="tab-pane fade rounded-bottom" id="CHARACTER" style="background:radial-gradient(circle, rgba(114,113,109,1) 0%, rgba(151,150,144,1) 51%, rgba(145,143,138,1) 66%, rgba(140,131,121,1) 72%, rgba(135,123,112,1) 76%, rgba(109,95,89,1) 80%, rgba(62,50,47,1) 90%, rgba(35,35,35,1) 100%);">
<div class="col-12 d-flex flex-wrap justify-content-center px-5 py-3">
<!-- LEFT-SIDE GEAR / WEAPONS -->
<div class="col-lg-2 d-flex flex-wrap justify-content-center">
<!-- SUBCLASS -->
<div class="col-12 mx-auto d-flex flex-wrap align-items-center" data-toggle="tooltip" title="Gunslinger">
<div class="col-12 p-0 text-center" style="filter:drop-shadow(2px 2px 0 white) drop-shadow(-2px -2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(2px -2px 0 white);">
<div class="col-12 mx-auto my-3" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); min-width:75px; min-height:75px;max-width:150px; max-height:150px;">
<img src="https://www.bungie.net/common/destiny2_content/icons/fedcb91b7ab0584c12f0e9fec730702b.png">
</div>
</div>
<div class="col-12 text-center d-block d-lg-none">
<h1>Gunslinger</h1>
</div>
</div>
<div class="col-12 p-0 d-flex flex-wrap justify-content-center order-0">
<!-- PRIMARY WEAPON -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Quicksilver Storm">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
PRIMARY WEAPON
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #f4ce42;
background:url('https://www.bungie.net/common/destiny2_content/icons/06ec3d22c69944f6755bf75f07cd83bd.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- SPECIAL WEAPON -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Adored">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
SPECIAL WEAPON
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/320ea9ac0e54173a0aa4f120dedd79c3.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- HEAVY WEAPON -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Commemoration">
<div class="flex-fill col-6 d-block d-lg-none" style="font-weight:600;">
HEAVY WEAPON
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/9820c9c3714bdd7f6fb7c2b83143041b.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- GHOST SHELL -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Razorscale Shell">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
GHOST SHELL
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #f4ce42;
background:url('https://www.bungie.net/common/destiny2_content/icons/7725d5def6754f18e79f987fddef9a8e.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- ARTIFACT -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Hunter's Journal">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
ARTIFACT
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/564591352b31aab76307d09689d8c6f3.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
</div>
</div>
<!-- GUARDIAN IMAGE -->
<div class="col-lg-5 p-4 order-lg-1 order-2">
<div class="text-center" style="position:relative; z-index:1;">
<img style="max-height:610px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/71706312_1pSjHjyTuoZdxrI.png">
</div>
<div class="mx-auto rounded-circle" style="position:absolute; width:60%; height:30px; background: black; bottom:10px; left:0; right:0; filter:blur(10px); opacity:0.5;"></div>
</div>
<!-- RIGHT-SIDE GEAR / ARMOR -->
<div class="col-lg-2 d-flex flex-wrap align-items-center order-1 order-lg-2">
<div class="col-12 p-0 d-flex flex-wrap justify-content-center">
<!-- HELMET -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Celestial Nighthawk">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
HELMET
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #f4ce42;
background:url('https://www.bungie.net/common/destiny2_content/icons/a7c3ee955c5e8b1c20122206d1bf60ff.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- GAUNTLETS -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Wyrmguard Grips">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
GAUNTLETS
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/bb11dd37855b46eac80368e1ea1de398.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- CHEST ARMOR -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Wyrmguard Tunic">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
CHEST ARMOR
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/91f1aeba988f0495593a38ebf28f11b9.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- LEG ARMOR -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Wyrmguard Strides">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
LEG ARMOR
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/93b48f8337c14d352257491a0ab5889b.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- CLASS ITEM -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Wyrmguard Cloak">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
CLASS ITEM
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/0e8f32562528a35bd7fa00ba0fe3a8c1.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
<!-- CLAN BANNER -->
<div class="col-12 p-0 mx-0 mx-sm-2 mx-lg-5 d-flex flex-wrap justify-content-between align-items-center" data-toggle="tooltip" title="Clan Name">
<div class="col-6 d-block d-lg-none" style="font-weight:600;">
CLAN BANNER
</div>
<div class="mx-lg-auto card rounded-0 my-2" style="width:75px; height:75px; border:3px solid #ffffff;
background:url('https://www.bungie.net/common/destiny2_content/icons/1c411cbe5e5dd9b44a45bf8873bd98a8.jpg'); background-position:center; background-size:cover; background-repeat:no-repeat;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE SECTION -->
<div class="tab-pane p-0 fade rounded-bottom" id="TIMELINE">
<div class="col-12 p-0 d-flex flex-wrap">
<!-- TIMELINE NAVIGATION -->
<div class="col-md-3 pt-4" style="background:rgba(11,15,18,1);">
<div class="nav flex-column nav-pills">
<a class="nav-link active" data-toggle="pill" href="#ORIGINS">Origins</a>
<a class="nav-link" data-toggle="pill" href="#RED-WAR">The Red War</a>
<a class="nav-link" data-toggle="pill" href="#FORSAKEN">Forsaken</a>
<a class="nav-link" data-toggle="pill" href="#SHADOWKEEP">Shadowkeep</a>
<a class="nav-link" data-toggle="pill" href="#BEYOND-LIGHT">Beyond Light</a>
<a class="nav-link" data-toggle="pill" href="#WITCH-QUEEN">The Witch Queen</a>
<a class="nav-link" data-toggle="pill" href="#LIGHTFALL">Lightfall</a>
<a class="nav-link" data-toggle="pill" href="#FINAL-SHAPE">The Final Shape</a>
</div>
</div>
<!-- TIMELINE TABS/CONTENT -->
<div class="tab-content col-md-9 p-0" style="background:rgba(11,15,18,1);">
<!-- TIMELINE CONTAINER 1 -->
<div class="tab-pane fade show active" id="ORIGINS">
<!-- TIMELINE IMAGE 1 -->
<div class="col-12" style="height:600px; background:url('https://cdnb.artstation.com/p/assets/images/images/014/624/023/4k/mark-goldsworthy-cit2-00000.jpg?1544736726'); background-size:cover; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 2 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Origins</div>
<!-- TIMELINE CONTENT 2 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE CONTAINER 2 -->
<div class="tab-pane fade" id="RED-WAR">
<!-- TIMELINE IMAGE 2 -->
<div class="col-12" style="height:600px; background:url('https://destiny.wiki.gallery/images/c/cd/Db_012_liberation_sketch.jpg'); background-size:cover; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 2 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">The Red War</div>
<!-- TIMELINE CONTENT 2 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE CONTAINER 3 -->
<div class="tab-pane fade" id="FORSAKEN">
<!-- TIMELINE IMAGE 3 -->
<div class="col-12" style="height:600px; background:url('https://i.imgur.com/FtvKeqs.jpeg'); background-size:cover; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 3 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Forsaken</div>
<!-- TIMELINE CONTENT 3 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE CONTAINER 4 -->
<div class="tab-pane fade" id="SHADOWKEEP">
<!-- TIMELINE IMAGE 4 -->
<div class="col-12" style="height:600px; background:url('https://i.imgur.com/nswVk5M.jpeg'); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 4 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Shadowkeep</div>
<!-- TIMELINE CONTENT 4 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE CONTAINER 5 -->
<div class="tab-pane fade" id="BEYOND-LIGHT">
<!-- TIMELINE IMAGE 5 -->
<div class="col-12" style="height:600px; background:url('https://i.imgur.com/Cf5I2YA.jpeg'); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 5 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Beyond Light</div>
<!-- TIMELINE CONTENT 5 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE CONTAINER 6 -->
<div class="tab-pane fade" id="WITCH-QUEEN">
<!-- TIMELINE IMAGE 6 -->
<div class="col-12" style="height:600px; background:url('https://www.pcgamesn.com/wp-content/sites/pcgamesn/2022/01/destiny-2-savathuns-throne-world.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 6 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">The Witch Queen</div>
<!-- TIMELINE CONTENT 6 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE CONTAINER 7 -->
<div class="tab-pane fade" id="LIGHTFALL">
<!-- TIMELINE IMAGE 7 -->
<div class="col-12" style="height:600px; background:url('https://wallpapercave.com/wp/wp11488683.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 7 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">Lightfall</div>
<!-- TIMELINE CONTENT 7 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
<!-- TIMELINE CONTAINER 8 -->
<div class="tab-pane fade" id="FINAL-SHAPE">
<!-- TIMELINE IMAGE 8 -->
<div class="col-12" style="height:600px; background:url('https://images.alphacoders.com/136/thumb-1920-1364600.jpeg'); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative;">
<div class="p-1 p-sm-4 px-lg-5" style="background: radial-gradient(circle, rgba(11,15,18,0.8) 35%, rgba(11,15,18,1) 80%); position:absolute; top:0; bottom:0; left:0; right:0;">
<div class="p-0 p-4">
<!-- TIMELINE TITLE 8 -->
<div class="col-12 mb-4 py-1 px-0" style="font-size:1.5em; font-weight:bold; border-bottom:1px solid rgba(255,255,255,0.4);">The Final Shape</div>
<!-- TIMELINE CONTENT 8 -->
<div class="pb-4" style="border-bottom:1px solid rgba(255,255,255,0.4); overflow:auto; scrollbar-width:thin; scrollbar-color: #7D7D80 #1E1F21; max-height:420px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare sem quis nunc molestie, id pellentesque ipsum condimentum. Aliquam interdum, dolor id congue pellentesque, orci nisl sagittis odio, sit amet lacinia lorem odio sed elit. Morbi dapibus tortor urna, non hendrerit libero commodo vulputate. Ut sem tortor, iaculis id ligula vitae, sollicitudin venenatis justo. Sed rhoncus diam orci, tincidunt iaculis nisi porta id. Etiam placerat tempus sagittis. Vivamus porta odio gravida, volutpat purus vel, bibendum felis. In accumsan erat non orci eleifend egestas. Aenean eget rutrum sem. Morbi elementum arcu eu metus consectetur, at convallis metus scelerisque. </p>
<p>Vestibulum at mi id nisl venenatis dictum non fermentum magna. Vivamus felis ligula, luctus quis eros sed, fringilla fringilla magna. Quisque libero quam, elementum at aliquet eu, elementum vitae felis. Aenean scelerisque quam lacinia, viverra quam ac, ullamcorper nunc. Nunc eget facilisis est. Etiam eleifend efficitur urna dapibus malesuada. Aenean laoreet mollis blandit. </p>
<p>Nunc pulvinar gravida iaculis. Proin sagittis nec velit ut varius. Nam turpis enim, posuere at ex ac, tristique semper neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ac mi ac dignissim. Maecenas eleifend commodo ex a laoreet. Praesent non sollicitudin enim. Pellentesque id elementum justo. Nulla ornare sapien a volutpat fermentum. Curabitur rhoncus metus justo, in fringilla metus dictum suscipit. Suspendisse eu odio lorem. Nam eu dui id nibh dignissim fringilla in vitae diam. In ut ligula feugiat ligula faucibus euismod eget vel purus. Mauris non accumsan nunc, vitae tristique nisi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDITS; DO NOT REMOVE -->
<div class="col-12 text-right mt-1 px-1">
<a href="https://toyhou.se/dragon-heist" data-toggle="tooltip" title="code by dragon-heist"><i class="fa-solid fa-code"></i></a>
</div>