I completed the website style guide project as part of the full stack engineer course but could not work out two things.
- How can I allign the text in the rectangles in the colors section so that they are about 20px from the bottom?
- 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:
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.
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?
the problem is the padding of .container
you set it to 10px
try
padding: 20px 10px;
even
padding: 30px 10px;
to notice the difference
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
.rectangle *{
styles all the children of something that has a class of “rectangle”
2 Likes