A Pen by Patrick H. Lauke on CodePen.
CodeMyUI CodeMyUI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h3>Tree Structure using ul li</h3> | |
| <ul class="treeRoot"> | |
| <li class="hasSubMenu"><span>Root</span> | |
| <ul class="activeSubMenu"> | |
| <li class="hasSubMenu"><span>Branch1</span> | |
| <ul> | |
| <li><span>Branch1-sub2</span></li> | |
| <li><span>Branch1-sub3</span></li> | |
| <li><span>Branch1-sub4</span></li> | |
| <li><span>Branch1-sub5</span></li> |
CodeMyUI
/ ascii-art-folder-structure-diagram-in-semantic-markup-css.markdown
Created
January 12, 2020 23:12
ASCII-art folder structure diagram in semantic markup + CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button>Beach Time 🌴</button> |
A Pen by Tobias Reich on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- about --> | |
| <div class="about"> | |
| <a class="bg_links social portfolio" href="https://www.rafaelalucas.com" target="_blank"> | |
| <span class="icon"></span> | |
| </a> | |
| <a class="bg_links social dribbble" href="https://dribbble.com/rafaelalucas" target="_blank"> | |
| <span class="icon"></span> | |
| </a> | |
| <a class="bg_links social linkedin" href="https://www.linkedin.com/in/rafaelalucas/" target="_blank"> | |
| <span class="icon"></span> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // If you like this app, feel free to hit | |
| // the heart button :) | |
| #app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- markup structure | |
| article, wrapping container | |
| figure, wrapping the image | |
| div, wrapping container for a quote and the name of the testimonial | |
| --> | |
| <article> | |
| <figure> | |
| <img alt="A rather marvellous macaw, opening one of its wings to support the cause." src="https://images.pexels.com/photos/2317904/pexels-photo-2317904.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" /> | |
| </figure> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en" > | |
| <head> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-57635392-5"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'UA-57635392-5'); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="cont_principal"> | |
| <div class="cont_central"> | |
| <div class="cont_modal cont_modal_active"> | |
| <div class="cont_photo"> | |
| <div class="cont_img_back"> | |
| <img src="https://s-media-cache-ak0.pinimg.com/736x/57/98/9f/57989f2a2e186e38bf93429aa395120c.jpg" alt="" /> | |
| </div> | |
| <div class="cont_mins"> | |
| <div class="sub_mins"> | |
| <h3>50</h3> |