Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!------------------------------------------------
- 06. Directory
- Code by dashyowo on Toyhouse.
- Make sure to read my Terms of Service before using!
- Thank you for using and have fun!
- ------------------------------------------------->
- <!------------------------------------------------
- DIRECTORY
- To delete the white background, delete the whole "WHITE BACKGROUND" section!
- Copy and paste links inside: href="LINK GOES HERE"
- ------------------------------------------------->
- <!--- START --->
- <!--- WHITE BACKGROUND --->
- <div style="position:absolute; top:0; bottom:0; left:0; width:100%; z-index:-1; background-image:url(https://i.imgur.com/mG6fe76.png); background-attachment: fixed">
- </div>
- <!------------->
- <div class="container mx-auto" style="font-family:Century Gothic; color:#000; width:1000px">
- <div class="row">
- <!--- FIRST SECTION --->
- <div class="col">
- <a href="" class="justify-content-center">
- <img src="https://i.imgur.com/qKow0aN.png" style="width:150px; height:150px; object-fit:cover"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- SECOND SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/hh8xjKP.png" style="width:150px; height:150px; object-fit:cover"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#FAF1F5; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- THIRD SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/qYfrlzj.png" style="width:150px; height:150px"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- FOURTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/7rOKDdt.png" style="width:150px; height:150px; object-fit:cover"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- FIFTH SECTION SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/Z03qjaM.png" style="width:150px; height:150px"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- SIXTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/3iOgTnk.png" style="width:150px; height:150px; object-fit:cover"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- </div>
- <div class="row mt-5">
- <!--- SEVENTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/GP4IqLK.png" style="width:150px; height:150px; object-fit:cover"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- EIGHTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/GaQBAYA.png" style="width:150px; height:150px"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- NINTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/xWCjQlW.png" style="width:150px; height:150px; object-fit:cover"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- TENTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/5brtRSt.png" style="width:150px; height:150px; object-fit:cover"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- ELEVENTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/TLdghyz.png" style="width:150px; height:150px"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- <!--- TWELFTH SECTION --->
- <div class="col">
- <a href="" class=" justify-content-center">
- <img src="https://i.imgur.com/4kFqRS0.png" style="width:150px; height:150px"/>
- </a>
- <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
- Folder name
- </a>
- <hr class="my-2" style="border-color:#DFDFDE"/>
- <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
- </p>
- </div>
- </div>
- <!------------->
- </div>
- </div>
- <!------------->
- <!--- CREDIT (DO NOT DELETE) --->
- <div class="bg-white p-1 px-2 rounded fixed-bottom m-2" style="right:0; left:inherit">
- <a href="https://toyhou.se/19182655.06-directory" style="color:#EEB5D0"><i class="fas fa-code fa-xs fa-fw tooltipster" title="CODE BY dashyowo"></i></a>
- </div>
- <!------------->
- <!--- END --->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement