Natours Features and Tours

Okay, so this week was a bit complex like I imagined. It was a lot of things to grasp all at once. I feel like when I have more time to myself without homework being in the way I would want to do this over. I want to really understand this thoroughly if I want to make something like this in the future.

Exercises for this week: features

natours/v5-5/index.html

natours/v5-5/package.json

natours/v5-5/sass

natours/v5-5/css

To accomplish the angled look of the top and bottom of the features section, the tutorial makes use of CSS selectors to skew the parent then de-skew the direct children. Why direct children vs. all children? How do both selectors work? Describe how this works using a SCSS code snippet to illustrate.

Skew is used to angle the section and features side. section-features was skewed but then the problem was that all of the cards inside got skewed as well. So we needed to de-skew to get the cards straight again. The parent and child relationships are important because of the fact they go together and it is easy to get the direct selector under the parent. The >* is a direct child and then the direct child under that. When we use just > it is selecting all the children’s elements and that is not what we wanted

transform:skewY(-7deg);
    margin-top: -10rem;
    & > *{
        transform:skewY(7deg);
    }

Exercises for this week: tours

natours/v5-6/index.html

natours/v5-6/package.json

natours/v5-6/sass

natours/v5-6/css

Leave a comment

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

css.php