Topics

• Natours project files;
• Natours heading
  • CSS reset;
  • clip-path using a clip-path generator;
  • centering an element with transform and translate;
  • @keyframes animation;
  • always using classes for selectors, accept for the reset.

Tutorials

• 01 Welcome, welcome, welcome, videos 01 & 03;
• 02 Natours project setup and first steps, videos 04 – 10;

After downloading the project files from the github repository, you find a Natours folder with three subfolders: “starter”, “after-S05”, “after-S06”. Make a copy of the “starter” folder and rename it “version01”. Once finished with the first week’s tutorials, this directory is what you’ll upload.

• Files:
  • natours01 / index.html
  • natours01 / images/ all-images-inside
  • natours01 / css / style.css

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

For the blog

Describe your understanding of how the transform: translate(-50%, -50%) centering an element CSS trick works. What other pieces of HTML/CSS are needed to make it work? Use a piece of sample code in a blog post code block to support your explanation.