| <!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> |
| <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" style="background: #3b5998;"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="btn" style="background: #00acee;"> |
rocket SVG modified from freepik
A Pen by Stan Williams on CodePen.
