The CEO of Buzzfeed asked you to redesign their boring navigation bar!
You are provided the HTML and you must use your CSS skills to present 3 new designs! See if you can match the designs here:
You will need to use different values for the justify-content CSS property to get the nav items to be spaced out correctly!
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>04.3 Flexbox Practice</title> | |
| <link rel="stylesheet" href="https://rawgit.com/outoftime/c0b5a5927ed0a72f3ad7be29ff552336/raw/01842fe10e5a337cf83a8596872445fa939135ca/mild.css"> | |
| </head> | |
| <body> | |
| <h2>Sample 1:</h2> | |
| <div id="sample1"> | |
| <div class="item">News</div> | |
| <div class="item">Videos</div> | |
| <div class="item">Quizzes</div> | |
| <div class="item">Tasty</div> | |
| <div class="item">More</div> | |
| </div> | |
| <h2>Sample 2:</h2> | |
| <div id="sample2"> | |
| <div class="item">News</div> | |
| <div class="item">Videos</div> | |
| <div class="item">Quizzes</div> | |
| <div class="item">Tasty</div> | |
| <div class="item">More</div> | |
| </div> | |
| <h2>Sample 3:</h2> | |
| <div id="sample3"> | |
| <div class="item">News</div> | |
| <div class="item">Videos</div> | |
| <div class="item">Quizzes</div> | |
| <div class="item">Tasty</div> | |
| <div class="item">More</div> | |
| </div> | |
| </body> | |
| </html> |
| {"hiddenUIComponents":["editor.javascript"]} |
