save file

Author: javascript-2020

html-components/html-components-list/html-components-list.html

@@ -98,7 +98,18 @@
     {font-family:arial}
 
   #center
-    {max-width:1400px;margin:0 auto;}
+    {max-width:1400px;margin:0 auto}
+    
+  .list
+    {display:flex;flex-direction:column;gap:10px;margin-top:20px}
+    
+  a
+    {display:flex;margin-bottom:10px}
+  .name
+    {width:200px}
+  .desc
+    {flex:1}
+    
             </style>
 
       </head>
@@ -116,30 +127,58 @@
             <div id=center>
 
                   <div>
-                        <a href='../list/snippet-html-console/snippet-html-console.html'>
-                              snippet-html-console
-                        </a>
+                        The current list of html components
                   </div>
 
-                  <div>
-                        <a href='../list/web-editor/web-editor.html'>
-                              web-editor
-                        </a>
-                  </div>
+                  <div class=list>
 
-                  <div>
+                        <a href='../list/dir-trere/dir-tree.html'>
+                              <span class=name>
+                                    dir-tree
+                              </span>
+                              <span class=desc>
+                                    displays a directory structure
+                              </span>
+                        </a>
+                        
                         <a href='../list/file-mod/file-mod.html'>
-                              file-mod
+                              <span class=name>
+                                    file-mod
+                              </span>
+                              <span class=desc>
+                                    the base for reading and writing various file types in javascript
+                              </span>
                         </a>
-                  </div>
-                  
-                  <div>
+                        
+                        <a href='../list/snippet-html-console/snippet-html-console.html'>
+                              <span class=name>
+                                    snippet-html-console
+                              </span>
+                              <span class=desc>
+                                    a runnable html snippet with console output
+                              </span>
+                        </a>
+                        
                         <a href='../list/web-console/web-console.html'>
-                              web-console
+                              <span class=name>
+                                    web-console
+                              </span>
+                              <span class=desc>
+                                    a dev tools like console in a webpage
+                              </span>
+                        </a>
+                        
+                        <a href='../list/web-editor/web-editor.html'>
+                              <span class=name>
+                                    web-editor
+                              </span>
+                              <span class=desc>
+                                    an editor in a web page
+                              </span>
                         </a>
+                        
                   </div>
 
-                  
             </div>
 
       </body>