design2 – Comment Box Problem Set

Create the above full page hero using only HTML, CSS and one background image.

• Follow the proscribed file naming and directory structure
  • 01-comment-box/index.html
  • 01-comment-box/img/hero.jpg
  • 01-comment-box/css/style.css
• Using the proscribed methods from the Natours header tutorial, include the following in your CSS:
  • a reset
  • body element presets
  • no other element selectors, follow the tutorial’s pattern for writing classes
• attach a chosen google font and set as the default body font
• chose a background image from unsplash.com and edit the pixel dimensions so that neither the height or width exceeds 2000px.
• use the clip-path property (and the clip path generator if you want) to create the comment box shape.
• use the proscribed position properties/hierarchy as well as the top, left, and transform properties to center the comment box.
• Place default text within the comment box and the box should resize automatically. Come up with solutions to center and format the text similarly to the example