| <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=" |
| <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> |
| <!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> |
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.
| svg(class="toggle-scene" xmlns='http://www.w3.org/2000/svg' preserveaspectratio='xMinYMin' viewBox='0 0 197.451 481.081') | |
| defs | |
| marker#e(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') | |
| marker#d(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') | |
| marker#c(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') | |
| marker#b(orient='auto' overflow='visible' refx='0' refy='0') | |
| path.toggle-scene__cord-end(fill-rule='evenodd' stroke-width='.2666' d='M.98 0a1 1 0 11-2 0 1 1 0 012 0z') |
A Pen by Stan Williams on CodePen.
| <head> | |
| <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Vidaloka&family=Yesteryear&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet"> | |
| </head> | |
| <div class="frame"> | |
| <p><i class="fas fa-star" style="font-size: 15px;"></i> Premie Yum <i class="fas fa-star" style="font-size: 15px;"></i></p> | |
| <h2>Coffee</h2> | |
| <div class="ribbon"> |
| <head> | |
| <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class ="frame"> | |
| <a href="#" class="btn"> | |
| <i class="fab fa-facebook-f" style="color: #3b5998;"></i> | |
| </a> | |
| <a href="#" class="btn"> |
| <head> | |
| <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class ="frame"> | |
| <a href="#" class="btn"> | |
| <i class="fas fa-backward"></i> | |
| </a> |
