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!
You will also need to use descendant selectors in CSS to properly style the navigation items.
Finally, here is a link to the picture of the cat.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>04.3 Flexbox Practice</title> | |
| </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"]} |
