Basic
-
Main
-
CSS
-
Modules
style.module.css
style.css
-
-
JS
script.js
-
image
profile.jpeg
background.png
arrow.svg
index.html
-
<ul class="treeview" id="treeviewBasicMainChild">
<li class="tv-item tv-folder">
<div class="tv-header" id="mainChildHeadingOne">
<div class="tv-collapsible" data-bs-toggle="collapse" data-bs-target="#mainChildOne" aria-expanded="true" aria-controls="mainChildOne">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="9 6 15 12 9 18"></polyline>
</svg>
</div>
<p class="title">CSS</p>
</div>
</div>
<div id="mainChildOne" class="treeview-collapse collapse show" aria-labelledby="mainChildHeadingOne" data-bs-parent="#treeviewBasicMainChild">
<ul class="treeview" id="treeviewBasicCSSChild">
<li class="tv-item tv-folder">
<div class="tv-header" id="cssChildHeadingOne">
<div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#cssChildOne" aria-expanded="false" aria-controls="cssChildOne">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="9 6 15 12 9 18"></polyline>
</svg>
</div>
<p class="title">Modules</p>
</div>
</div>
<div id="cssChildOne" class="treeview-collapse collapse" aria-labelledby="cssChildHeadingOne" data-bs-parent="#treeviewBasicCSSChild">
<ul class="treeview" id="treeviewBasicModulesChild">
<li class="tv-item"><p>style.module.css</p></li>
</ul>
</div>
</li>
<li class="tv-item"><p>style.css</p></li>
</ul>
</div>
</li>
<li class="tv-item tv-folder">
<div class="tv-header" id="mainChildHeadingTwo">
<div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#mainChildTwo" aria-expanded="false" aria-controls="mainChildTwo">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="9 6 15 12 9 18"></polyline>
</svg>
</div>
<p class="title">JS</p>
</div>
</div>
<div id="mainChildTwo" class="treeview-collapse collapse" aria-labelledby="mainChildHeadingTwo" data-bs-parent="#treeviewBasicMainChild">
<ul class="treeview" id="treeviewBasicJSChild">
<li class="tv-item"><p>script.js</p></li>
</ul>
</div>
</li>
<li class="tv-item tv-folder">
<div class="tv-header" id="mainChildHeadingThree">
<div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#mainChildThree" aria-expanded="false" aria-controls="mainChildThree">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<polyline points="9 6 15 12 9 18"></polyline>
</svg>
</div>
<p class="title">image</p>
</div>
</div>
<div id="mainChildThree" class="treeview-collapse collapse" aria-labelledby="mainChildHeadingThree" data-bs-parent="#treeviewBasicMainChild">
<ul class="treeview" id="treeviewBasicImgChild">
<li class="tv-item"><p>profile.jpeg</p></li>
<li class="tv-item"><p>background.png</p></li>
<li class="tv-item"><p>arrow.svg</p></li>
</ul>
</div>
</li>
<li class="tv-item"><p>index.html</p></li>
</ul>
Folder Structure
-
Main
-
CSS
-
Modules
-
style.module.css
-
-
style.css
-
-
JS
-
script.js
-
-
image
-
profile.jpeg
-
background.png
-
arrow.svg
-
-
index.html
-
<ul class="treeview folder-structure" id="treeviewFolderStructureEx">
<li class="tv-item">
<div class="tv-header" id="main">
<div class="tv-collapsible" data-bs-toggle="collapse" data-bs-target="#folderMainCollapse" aria-expanded="true" aria-controls="folderMainCollapse">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
</svg>
</div>
<p class="title">Main</p>
</div>
</div>
<div id="folderMainCollapse" class="treeview-collapse collapse show" aria-labelledby="main" data-bs-parent="#treeviewFolderStructureEx">
<ul class="treeview" id="treeviewFolderStructureMainChild">
<li class="tv-item">
<div class="tv-header" id="folderMainChildHeadingOne">
<div class="tv-collapsible" data-bs-toggle="collapse" data-bs-target="#folderMainChildOne" aria-expanded="true" aria-controls="folderMainChildOne">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
</svg>
</div>
<p class="title">CSS</p>
</div>
</div>
<div id="folderMainChildOne" class="treeview-collapse collapse show" aria-labelledby="folderMainChildHeadingOne" data-bs-parent="#treeviewFolderStructureMainChild">
<ul class="treeview" id="treeviewFolderCSSChild">
<li class="tv-item">
<div class="tv-header" id="folderCSSChildHeadingOne">
<div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#folderCSSChildOne" aria-expanded="false" aria-controls="folderCSSChildOne">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
</svg>
</div>
<p class="title">Modules</p>
</div>
</div>
<div id="folderCSSChildOne" class="treeview-collapse collapse" aria-labelledby="folderCSSChildHeadingOne" data-bs-parent="#treeviewFolderCSSChild">
<ul class="treeview" id="treeviewFolderModulesChild">
<li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
</svg> </span><p>style.module.css</p></li>
</ul>
</div>
</li>
<li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
</svg> </span> <p>style.css</p></li>
</ul>
</div>
</li>
<li class="tv-item">
<div class="tv-header" id="folderMainChildHeadingTwo">
<div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#folderMainChildTwo" aria-expanded="false" aria-controls="folderMainChildTwo">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
</svg>
</div>
<p class="title">JS</p>
</div>
</div>
<div id="folderMainChildTwo" class="treeview-collapse collapse" aria-labelledby="folderMainChildHeadingTwo" data-bs-parent="#treeviewFolderStructureMainChild">
<ul class="treeview" id="treeviewBasicJSChild">
<li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
</svg> </span><p>script.js</p></li>
</ul>
</div>
</li>
<li class="tv-item">
<div class="tv-header" id="folderMainChildHeadingThree">
<div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#folderMainChildThree" aria-expanded="false" aria-controls="folderMainChildThree">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
</svg>
</div>
<p class="title">image</p>
</div>
</div>
<div id="folderMainChildThree" class="treeview-collapse collapse" aria-labelledby="folderMainChildHeadingThree" data-bs-parent="#treeviewFolderStructureMainChild">
<ul class="treeview" id="treeviewBasicImgChild">
<li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
</svg> </span><p>profile.jpeg</p></li>
<li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
</svg> </span><p>background.png</p></li>
<li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
</svg> </span><p>arrow.svg</p></li>
</ul>
</div>
</li>
<li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
</svg> </span><p>index.html</p></li>
</ul>
</div>
</li>
</ul>
Copyright © 2022 DesignReset, All rights reserved.
Coded with