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

Leave a comment

Your email address will not be published. Required fields are marked *

css.php