A Pen by Stan Williams on CodePen.
Stan Williams stanwmusic
🏠
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="imgLoader"></div> | |
| <div class="container"> | |
| <h1 class="title"> | |
| Turning pages<br>with css | |
| </h1> | |
| <div class="credit"> | |
| * Images loaded randomly from Picsum.photos |
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="wrapper"> | |
| <header class="row"> | |
| <h1 class="h h1">MoonPhase App</h1> | |
| </header> | |
| <div class="row"> | |
| <ul class="data-table h3"> | |
| <li> | |
| <strong class="label">Current Date</strong><span class="value js-current-date-value"></span> | |
| </li> |
A Pen by Stan Williams 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
| <body> | |
| <section class="nav"> | |
| <h1>FRONTEND TRENDS</h1> | |
| <h3 class="span loader"> | |
| <span class='m'>B</span> | |
| <span class='m'>E</span> | |
| <span class='m'>N</span> | |
| <span class='m'>E</span> | |
| <span class='m'>F</span> | |
| <span class='m'>I</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
| <body> | |
| <section class="nav"> | |
| <h1>FRONTEND TRENDS</h1> | |
| <h3 class="span loader"> | |
| <span class='m'>B</span> | |
| <span class='m'>E</span> | |
| <span class='m'>N</span> | |
| <span class='m'>E</span> | |
| <span class='m'>F</span> | |
| <span class='m'>I</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
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> | |
| <header><h1 align="center">HEADER </h1></header> | |
| <section> <div align="center"><iframe width="100%" height="315" src="https://www.youtube.com/embed/qQ__2DIydJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br> <strong>Music Video</strong><br>Instrumental music by Stan Williams Feat Steve Grisham (Outlaws Band) on mandolin, and Pug Baker Drums.</div></section> | |
| <aside><img src="https://placekitten.com/170/160"></img><br> | |
| Meowsum Lorem ipsum dolor sit amet, sit boy! Consectetur adipiscing elit. Aliquam efficitur at augue ac dictum. Nunc aliquam blandit nunc. Fusce dignissim libero dolor, Duis ut leo lacinia, consectetur erat eu, tempor nisl. Phasellus porttitor nulla velit, et hendrerit tortor. </aside> | |
| <nav><br> <a target="_blank" rel=" |
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
| <h1> | |
| <span class='sub-title'> | |
| Progressively-Enhanced Responsive, Accessible Tab Navigation | |
| </span> | |
| </h1> | |
| <ul class='desc'> | |
| <li>Turns into an accordion on tablet and mobile</li> | |
| <li>Works with JS disabled (content is still available and appears as headings + text, no tabs)</li> | |
| <li>ARIA works across states, dynamically updated via the JS</li> | |
| <li>Keyboard accessible</li> |
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
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta name='viewport' contents='width=device-width, initial-scale=1.0'> | |
| <meta charset='UTF-8'> | |
| <title>Fcc: Personal Portfolio</title> | |
| </head> |
stanwmusic
/ grid-auto-fill-vs-auto-fit.markdown
Created
November 20, 2020 05:40
Grid 'auto-fill' vs 'auto-fit'
How grid auto-fill and auto-fit works. auto-fill will make sure that the grid items (children) will retain their width and not stretch to fill up its parent element. On the other hand, auto-fit will make the grid-items to use up all the space of its the parent element.
A Pen by Stan Williams on CodePen.