Help with website styleguide project - alligning objects and text

Get Help
#1

I completed the website style guide project as part of the full stack engineer course but could not work out two things.

  1. How can I allign the text in the rectangles in the colors section so that they are about 20px from the bottom?
  2. How can I have the Monsterrat font section align beside the other 2 fonts like in this example (see fonts section how 2 are on the left and 1 is on the right )

Here is the link to the project and my code:

#2

for 1, here’s a possible way of doing that:

.rectangle{
  display: inline-block;
  width: 150px;
  height: 300px;
  text-align: center;
  margin-bottom: 3px;
}
.rectangle *{
  position: relative;
  top: 200px;  
}

The only stuff I can think of for 2 would require creating an html element (for each font) to contain all the elements for that font.

#3

Hello

Thank you for your help. Unfortunately when I try that it removes all the color from the rectangles, but it does allign them the way I want (I think, hard to tell when theres no color).

What does '.rectangle *{ ’ do?

#4

the problem is the padding of .container
you set it to 10px
try
padding: 20px 10px;

#5

even
padding: 30px 10px;
to notice the difference

#6

for the 2. point, you have to create divs to separate the fonts, first of all.
after, .fonts container has to be flex.

1 Like
#7

.rectangle *{
styles all the children of something that has a class of “rectangle”

2 Likes