<div class=”container-fluid” style=”background:black;width:100%;position:absolute;overflow:hidden;z-index:-1;top:0;bottom:0;left:0;”></div>
<h2 class=”m-2 text-left pb-3 p-1″ style=”color:#eeeeee;width:100%;border-bottom:1px solid #fff;font-family:monospace;font-size:1.5rem;”><i class=”fa-light fa-terminal”> directory</i></h2>
<!—- COLLAPSE BUTTON TEXT —–>
<div style=”width:100%;”>
<!—- COLLAPSE BUTTON ONE—–>
<a class=”btn btn-primary” data-toggle=”collapse” href=”#programONE” role=”button” aria-expanded=”false” aria-controls=”programONE” style=”background:transparent;border:none;”>
<p class=”text-left ml-5 font-italic” style=”color:#fff;font-family:monospace;”>
<i class=”fa-light fa-terminal”></i> …program alpha <i class=”fa-light fa-chevron-down”></i></p></a>
</div>
<!— COLLAPSED FOLDERS ONE—->
<div class=”collapse” id=”programONE”>
<div class=”d-flex flex-wrap justify-content-center p-1″>
<!—– FOLDER ONE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER ONE</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>this is a folder code based on the lovers code bc who doesn’t love this faux terminal shit?</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”https://electronicartist.net/virocene/the-lovers/index.html” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!—– FOLDER TWO —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER TWO</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!—– FOLDER THREE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER THREE</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!—– FOLDER FOUR —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER FOUR</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>hey there delilah</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!—– FOLDER FIVE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER FIVE</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!— FOLDER END, you can add more if you want! just copypaste the folder code above this
or create a new collapse group by copying EVERYTHING from the collapse button text to down here + the two divs BELOW like i’ve done —>
</div>
</div>
<!—- COLLAPSE BUTTON TEXT —–>
<div style=”width:100%;”>
<!—- COLLAPSE BUTTON ONE—–>
<a class=”btn btn-primary” data-toggle=”collapse” href=”#programTWO” role=”button” aria-expanded=”false” aria-controls=”programTWO” style=”background:transparent;border:none;”>
<p class=”text-left ml-5 font-italic” style=”color:#fff;font-family:monospace;”>
<i class=”fa-light fa-terminal”></i> …program theta <i class=”fa-light fa-chevron-down”></i></p></a>
</div>
<!— COLLAPSED FOLDERS ONE—->
<div class=”collapse” id=”programTWO”>
<div class=”d-flex flex-wrap justify-content-center p-1″>
<!—– FOLDER ONE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER ONE</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!—– FOLDER TWO —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER TWO</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!—– FOLDER THREE —–>
<div class=”m-4″>
<div class=”container mx-auto p-1″ style=”border:1px solid #fff;color:#fff;font-family:ms gothic;width:18rem;background:black;”>
<p class=”m-0 text-right mb-2″></i><i class=”fa-regular fa-window-minimize” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-window-restore” style=”border:1px solid #fff;opacity:0.8;padding:2px;”></i><i class=”fa-regular fa-xmark” style=”border:1px solid #fff;opacity:0.8;padding:2px 4px;”></i></p>
<p class=”p-1 text-left” style=”font-size:large;”><i class=”fa-light fa-terminal”> FOLDER THREE</i></p>
<p class=”p-1 ml-2″ style=”border-left:.4rem solid #fff;”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!— LINK —>
<span class=”p-1 justify-content-center mb-1″>
<a href=”#” style=”color:#fff;text-decoration:none;font-family:monospace;text-align:center;text-shadow:0px 0px 3px #36bd3e;text-transform:uppercase;”>
<i class=”fa-regular fa-chevron-up”></i> link <i class=”fa-regular fa-chevron-down”></i></a></span>
</div></div>
<!— FOLDER END, you can add more if you want! just copypaste the folder code above this
or create a new collapse group by copying EVERYTHING from the collapse button text to down here + the two divs BELOW like i’ve done. remember to change collapse id names! —>
</div></div>
