##Resources
- [Mozilla Developers Network] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
- [A Complete Guide to Flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
##Exercise
Create a reponsive layout using flex that will behave as this webpage http://stephencaver.com/ , The content could be something about a restaurant or any other thing, instead of having the big LUCKY logo you are going to add nice carrousel showing something related to the content of your page, the behavior when resizing the page should be similar, it should have at least 3 different layouts:
- If you detect the end user's screen is smaller than 480 pixels you have to show the smartphone layout
- If the screen is larger than 480 pixels but smaller than 1024 pixels, show us the tablet layout
- If the screen is larger than 1024 show the regular desktop layout.
###Thing to be evaluated
- Style of the webpage
- Using semantic tags when necessary
- Not using properties that are redundant, for example assigning to a block element a width of 100%
- Using Flex Box
- A nice carrousel
- The movement of the logo
- The content that should be hidden when the layout is for mobile
- Use a font that your file would need to download, you can get a cool font from here
- Implement an animation for the logo
- The navbar links should have a different state when hover over them