Topics

• How to make text flow around shapes with shape-outside MDN property
  • We use the value circle(50% at 50% 50%); basic shape MDN
  • passing three arguments to the function circle([radius] at [positionX] [positionY]).
  • must have a defined width and height;
  • and a float is required.
  • This causes the floated text to wrap around a circle shape, but we still need to make the element itself a circle using the clip-path property and the same circle function value.
  • And create space between the circle and the floated text, it’s best to create space with transform: translateX()
• Note that the transform property is inherited, but a second declaration will take prcedence. So when we skewX(-8deg) and then attempt to deskew with the & > * all children selector. It doesn’t work on the &__shape child because it has it’s own transform property. So it needs to be edited directly with the skew(8deg) added as a second value.
• How to apply a filter to images;
• How to create a background video covering an entire section;
• How to use the <video> HTML element;
  • Uses free video found at coverr.co;
  • Inside the <video> element are nested two <source> elements.
• How and when to use the object-fit property.

Tutorials

• Section05 Natours Project with Sass Part 4, videos 042-044
• natours/v5-7/this-is-stories-version-all-the-usual-files-folders

Problem Set

Presenting your HTML template

Here’s a sample presentation which models what should be covered. Please use Google slides and please make sure the link you share in accessible to everyone with the link (test this in a private browser).

When making your slides, use your website Google fonts and color palette style your presentation.

Here is an enumerated listed of slides and requirements:

• Cover slide with the template name and your name (username)
• Screen shots that showcase your Elements and Generic pages. Divide your screenshots across multiple slides to improve legibility. Make an effort to match scale across slides.
• Typography and Palette slide – name and exemplify each color and font used.
• Sass/CSS example Presentation across multiple slides choose a piece of Sass code to explain. Limit screenshots to the relevant bit of code to describe your example (look at my model for reference). Be sure to name the files where the Sass code is saved and where the CSS code is compiled.
  • Layout and Sass
  • Sass Variable definitions used in Sass Typography
  • Sass Typography compiled to CSS

For the blog

• Link your Google slide presentation, make sure it is viewable by everyone with the link – test the link in a private browsing window to ensure no password required.
• Describe your choice of a Sass/CSS example. How did you come to choose this example? Give a written explanation of how your Sass/CSS works.