Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!------------------------------------------------
- 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 3px #787878; text-align: center; border-color:#000; background-color:#FFF">
- <p>Open</p>
- </div>
- <!------------->
- <!--- CONTROL BUTTONS --->
- <div class="card d-block rounded-0" style="box-shadow: 5px 3px #787878; border-top-width:0px;border-color:#000; background-color:#FFF">
- <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:#000; background-color:#FFF">
- <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:#000; background-color:#FFF">
- <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:#000; background-color:#FFF">
- <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:#000; background-color:#FFF">
- <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:#000; 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:#000"/>
- <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:#000; background-color:#FFF">
- <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:#000; background-color:#FFF">
- <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:#000; background-color:#FFF">
- <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:#000; 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 #000; 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:#000; background-color:#FFF">
- 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:#000; background-color:#FFF">
- 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:#787878; border-color:#787878; background-color:#FFF">
- 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 --->
Add Comment
Please, Sign In to add comment