[WEEK #6] – 05 Natours Project with Sass Part 3 + Problem Set + Blog Question

Hello everyone. I posted a breif explanation of the problem set below. I don’t quite remeber these tutorials because it was about 3 weeks ago. I just never posted it. I believe it was the two sections with the cards. I really enjoyed creating these sections. I also love the fact that each tutorial is basically one section that we are completing. This is coming out to be a great end project to complete.


Problem Set

My presentation will be located here. I tried my best to make it look good!

Even though this problem set took me a while to complete, I am pretty satisfied with it. I started the problem set before the Academic Recess and never got around to completing it. I am very satisfied of how it looks. The only thing I could have improved was the color palette. But then again, I am not that creative to come up with a good color palette. I just chose my favorite color which is red (if you didn’t know) and chose sometime similar to it. I hope you like it 🙂 .

I chose this font pair from Reliablepsd. I used the same font pair for my web design 1 final project.

My color paletee is very basic. I tried to stick with 2 colors which was red and an light orange. I used different variations of it with the light and dark version of them.

Blog Question

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.

We use the clip path to give skew path. We skew the entire section using “transform: skewY(-7deg);”. This is one way of using skew. This will skew all the items in one direction. When we skew the entire section we have to unskew the items so all the items are not skewed. The direct child selector is when we want to select all of the items but only everything that is a direct child of that item.

transform: skewY(-7deg);

direct child selector
& > *

.section-features > *

If we did....
.section-features *
We would select all the child of the class. Not only the direct child but simply all the children element.

So the direct child will only select the first child it comes across and then apply the styles we put in..

I really hope you understood what I was trying to say. I struggled with this question but I gave it my best shot at it.

Leave a comment

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