No site found for codelikethis.herokuapp.com; using CodeLikeThis content.
Sriracha
Huy Fong Foods makes a very popular hot sauce. In this project you will do your best to replicate its iconic label in HTML+CSS.
Stories
Grid
Use empty boxes of different colors to replicate the grid layout of the label.
Use whatever layout system makes most sense to you (Grid, Flexbox, Absolute, Float...)
Horizontal English Text
Horizontal Chinese Text
Curved Thai and Chinese Text
The Rooster
Finishing Touches
What label design elements did you miss?
References
- https://fontsinuse.com/uses/11193/huy-fong-sriracha-hot-sauce-label
- Curved text:
- with CSS: https://css-tricks.com/set-text-on-a-circle/ -- make sure to read Viswanathan’s comment and jsfiddle too
- with SVG: https://css-tricks.com/snippets/svg/curved-text-along-path/
- https://youtu.be/OwHosscUPAk
- https://youtu.be/tXOAx58LBDo