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


Salutations! For this week, we had to make a template which was not that difficult. It was pretty annoying trying to make all the grids but I figured it out. The only issue I had was at the bottom section where on side of the grid was empty. I just put multiple 1 of 2 grids and kept putting the right side empty.

Tutorials


Problem Set

For this problem set, I chose this font pair from Reliablepsd. I used this same exact font pair for my web design 1 final project.

Color wise, I had two different colors I wanted to work with. They were a variation of red and orange. Honestly I am not that creative. I focused more on the grid part and did coloring and fonts last. Red is my favorite color so I chose one based off my web design 1 final project. I did not want to use the complementary color of red so I chose a color close, which was orange-ish.

$color-primary: #FC393A;
$color-secondary: #fc9b39;

$color-primary-light: #ff7265;
$color-primary-dark: #c10012;

$color-secondary-light: #ffcc69;
$color-secondary-dark: #c46c00;

$color-grey-light-1: #f7f7f7;
$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;

Blog Question


Describe how the :not pseudo selector works. Give an example in an Enlighter code snippet to support your description.

The :not() pseudo selector, selects everything except the last child. In the example below, the vertical gutter (used in v5-3 grid tutorial) will be placed on all the rows except the last child. In a regular case, .row:last-child() would select the last child. If you put :not() in front, the last child is not selected.

.row{
    &:not(:last-child) {
        margin-bottom: $gutter-vertical;
    }
}

Leave a comment

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

css.php