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 thetop
,left
, andtransform
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