02. Mac File Explorer (With colours)

<!------------------------------------------------
02. Mac File Explorer

Code by dashyowo on Toyhouse.
Make sure to read my Terms of Service before using!
Thank you for using and have fun!
------------------------------------------------->

<!--- START --->

<div class="my-lg-5 mx-auto" style="font-family:Helvetica Neue; font-size:.75em; color:#000; letter-spacing:.25px; max-width:350px">

<!------------->

<!--- HEADER --->
<div class="card d-block rounded-0" style="box-shadow: 5px 2px #C5C6C1; text-align: center; border-color:#B9B9B9; background: linear-gradient(#ECECEC, #D7D7D7)">
<p>Open</p>
</div>
<!------------->

<!--- CONTROL BUTTONS --->
<div class="card d-block rounded-0" style="box-shadow: 5px 2px #C5C6C1; border-top-width:0px; border-color:#B9B9B9; background-color:#F3F3F3">
<div class="container p-0">
<div class="row no-gutters">
<div class="col-4 mt-1 p-0">
<div class="container p-0 px-1">
<div class="row no-gutters">
<div class="col-2 p-0">
<div class="card d-block rounded-0" style="height:10px; border-color:#B9B9B9; background: linear-gradient(#E4E4E2, #F4F4F2)">
<p align="center" style="margin-top:-4px"><i class="fa-solid fa-xs fa-caret-left"></i></p>
</div>
</div>
<div class="col-2 p-0">
<div class="card d-block rounded-0" style="border-left-width:0px; height:10px; border-color:#B9B9B9; background: linear-gradient(#E4E4E2, #F4F4F2)">
<p align="center" style="margin-top:-4px"><i class="fa-solid fa-xs fa-caret-right"></i></p>
</div>
</div>
<div class="col-2 p-0 ml-1">
<div class="card d-block rounded-0" style="height:10px; border-color:#6A91B8; background: linear-gradient(#72B1E4, #A4DBF0)">
<p align="center" style="margin-top:-4px"><i class="fa-light fa-xs fa-bars"></i></p>
</div>
</div>
<div class="col-2 p-0">
<div class="card d-block rounded-0" style="border-left-width:0px; height:10px; border-color:#B9B9B9; background: linear-gradient(#E4E4E2, #F4F4F2)">
<p align="center" style="margin-top:-4px"><i class="fa-light fa-xs fa-list"></i></i></p>
</div>
</div>
</div>
</div>
<!------------->

<!--- TASKBAR --->
<div class="card d-block rounded-0 px-1 ml-1 mt-1 mb-1" style="border-color:#B9B9B9; background-color:#FFF">
<p class="mb-0 mt-1"><i class="fa-light fa-globe"></i> Network</p>
<p class="mt-0"><i class="fa-thin fa-hard-drive"></i> Mac OS X</p>
<hr style="width:95%; border-color:#B9B9B9"/>
<div class="mb-0">
<p class="mb-0"><i class="fa-light fa-desktop"></i> Desktop</p>
<p class="mt-0"><i class="fa-light fa-house-chimney"></i> Home</p>
</div>
<div class="mt-0">
<p class="mb-0"><i class="fa-brands fa-app-store"></i> Applications</p>
<p class="mt-0"><span style="background:#787878; color:#FFF"><i class="fa-light fa-image"></i> Pictures</span></p>
</div>
<p class="mb-0"><i class="fa-light fa-camera-movie"></i> Movies</p>
<p class="mt-0"><i class="fa-light fa-file"></i> Documents</p>
</div>
</div>
<!------------->

<!--- CONTROL BUTTONS --->
<div class="col-8 mt-1 p-0">
<div class="row no-gutters">
<div class="col-5 p-0">
<div class="card d-block rounded-0 ml-1" style="border-color:#B9B9B9; background: linear-gradient(#E4E4E2, #F4F4F2)">
<div class="container p-0 px-1">
<i class="fa-light fa-image"></i> Pictures
</div>
</div>
</div>
<div class="col-1 p-0">
<div class="card d-block rounded-0" style="border-left-width:0px; text-align: center; border-color:#6A91B8; background: linear-gradient(#72B1E4, #A4DBF0)">
<i class="fa-solid fa-caret-down"></i>
</div>
</div>
</div>
<!------------->

<!--- NAME & DATE OF IMAGE --->

<div class="row no-gutters">

<!--- NAME OF IMAGE --->
<div class="col-7 p-0">
<div class="card d-block rounded-0 px-1 mt-1 ml-1" style="border-color:#6A91B8; background: linear-gradient(#72B1E4, #A4DBF0)">
<span>Name.png</span>
<span class="pull-right"><i class="fa-solid fa-caret-up"></i></span>
</div>
</div>
<!------------->

<!--- DATE OF IMAGE --->
<div class="col-5 p-0">
<div class="card d-block rounded-0 px-1 mt-1 mr-1" style="border-left-width:0px; border-color:#A4DBF0; background-color:#FFF">
<p>Date modified</p>
</div>
</div>
<!------------->
<!------------->

<!--- IMAGE --->
<img src="https://i.imgur.com/PY0aGKJ.jpg" class="ml-1" style="border: 1px solid #6A91B8; border-top-width:0px; width:224px; height:142px; object-fit:cover"/>
</div>
<!------------------------------------------------
Copy and paste the link of your desired image inside: src="LINK GOES HERE"
------------------------------------------------->
<!------------->

</div>
</div>
</div>

<!------------->

<!--- CONTROL BUTTONS --->
<div class="row no-gutters">
<div class="col-4px mr-5 p-0">
<div class="card d-block px-1 ml-3 mt-1 mb-1" style="text-align: center; width:80px; border-radius:2em; border-color:#B9B9B9; background: linear-gradient(#E4E4E2, #F4F4F2)">
New Folder
</div>
</div>
<div class="col-4px ml-5 p-0">
<div class="card d-block px-1 ml-3 mt-1 mb-1" style="text-align: center; width:50px; border-radius:2em; border-color:#B9B9B9; background: linear-gradient(#E4E4E2, #F4F4F2)">
Cancel
</div>
</div>
<div class="col-4px p-0">
<div class="card d-block px-1 ml-3 mt-1 mb-1" style="text-align: center; width:50px; border-radius:2em; color:#B9B9B9; border-color:#D7D7D5; background: linear-gradient(#E4E4E2, #F4F4F2)">
Open
</div>
</div>
</div>
<!------------->

</div>
<!------------->

<!--- CREDITS (DO NOT DELETE) --->
<div class="faded small text-right">
<a href="https://toyhou.se/18972996.02-mac-file-explorer"><i class="fas fa-code text-muted fa-xs fa-fw tooltipster" title="Code by dashyowo"></i></a>
</div>
<!------------->

</div>

<!--- END --->