How did it go? Were you successful?
Let's solve this challenge together now. And for this,
I want to get started with the layout of
the elements in the right part of our card here.
Our goal was to add space between certain elements.
Specifically, space should be added between our
description of the city and between this link.
The link should be pushed down to
the bottom and then to the right.
So it should be somewhere here.
I told you that you can achieve
this with Flexbox once again.
You know that we use Flexbox already
for our list item here to position the elements
so the image and the diff of the
class item content next to each other
but we cannot use Flexbox also inside
this item content class. But why Flexbox here?
Didn't we use Flexbox so far to
weld position items next to each other?
For example, here in the header.
Yes we did. But you remember
that we can change the default behavior of
how items should be positioned
this was the flex direction with
a default value of row which we have right here
in the header, or right here in our card
we can change this value to column
which would basically bring back the initial style we have.
But then with our justify content logic
that we used, for example here
in the header, if we open this down there,
so justify content space between
which allowed us to add gaps between elements.
So it's the gap between the logo and the navigation items.
Well, this gap could be added then
into our flex container we create right here.
Let's give this a try and let's see how this might work.
For this we have to add display flex
to our item content class.
So let's do this in the code down here.
So we add display flex.
With this change in place.
Yeah, the items, the elements
are positioned next to each other.
But, as I said, with our flex direction property,
so flex direction, you know the default value is row
but we can change this to column
which will then position all flex items below each other.
Let's see if this works. Yes. This looks okay.
And now we only have to add our justify content property.
Here, this one with the value of space between
and then we'll see what this looks like.
So let's implement this. Justify content space between,
so let's see. Yeah. And we are not there yet.
We added space between our description and the link,
but we also added space between
the city name and the description.
Do you know what's wrong here?
Well, our problem is that space between
adds space, between all flex items that we have,
and here we have the flex container.
And as you see it indicated in the dev tools
we have three flex items. One two three.
but if we would be able to turn the
h2 element and the paragraph into one element,
well then space between would work
because, well, then we would have
the space between these two elements.
So the element containing the name
and the description and the link.
for that, we can simply use our
non semantic block element as a wrapper.
And this is a diff therefore let's go back
to our HTML code and replace this HTML file
and in here I'd simply add a diff
now inside our item content class,
and this diff now should hold the
paragraph and the h2 element.
Let's move this up a bit and let's quickly format the text.
And with this change in place, don't forget to save it.
We should have, yeah, an almost perfectly styled card here.
Now, if we check the flex logic,
we see we have the first diff and
the second diff and the space between.
So this was the most complex part about this challenge.
I hope you were able to solve it.
Otherwise you now saw it, how it works.
However, we are not done yet because
the explore link here is at the bottom.
It's okay, but it should be at the bottom right here.
This is an easy task now though,
because no, you know, we have our diff with
the class actions and we know that we
can position the content, the text content of
elements easily with our text align property.
So if we refer to our actions class back in the
place a CSS file here and now
we refer to our actions class with the dot notation here
and use the text align property.
Typically, in the course we use,
we often use our center value,
which of course would also work to center
the content of this class, text content of this class.
But here we use a value of right now
to position this text to the right
if that this goal is also achieved
Talking about this text now. This link text in here, now.
We could also remove the text decoration.
Maybe add some space, because it's
kind of well closely positioned to the
container here and also change the color.
So three steps to apply here. Let's get started.
First by referring to the anchor tag here
and for this I'll again, use the actions class
and refer to the anchor tag inside of this actions class.
First, we'll remove the text decorations so this
underlining of the link with texts decoration, none.
Then we'll add a bit of padding to
all directions, because as I said, it sits
a bit too close here in the right bottom corner.
Therefore with some padding of maybe six pixels should help.
We'll check this in a few seconds
and let me scroll down a bit.
Finally, I would like to change the color
of this link with the color property
and this property has another RGB color code I prepared.
We use 22 for red, 211 for green and 228 for blue.
With these changes in place. Yeah,
this looks a lot better. Now we are almost there.
What's missing now is our hover effect
though we can quickly implement this
with our hover pseudo selector.
This pseudo selector works as follows.
We also did this quite often throughout the course.
I'll again use our descendant Combinator actions,
a hover, so the pseudo selector of the anchor tag
whenever we hover over this element with our mouse
and here to add this hover effect,
I'll simply add a background color to it,
to change the color of the entire element.
And here we'll use an RGB code of 235, 253 and 255
So it's a slightly brighter color tone than
the one we have for the link up here.
So let's see if we hover now this looks good.
If we zoom in a bit closer, we see
that our rounded corners are missing.
We can quickly fix this with border radius and
as always we applied as property,
not to the hover rule here, but
to the default rule of the element
to avoid any kind of glitches in the styling Because
if you have a default styling and then hover
which kind of breaks this default styling,
This can sometimes lead to elements jumping around a bit.
So we want to avoid this. Therefore
we add this property border radius
to the general elements style,
and here we'll use a radius of maybe five pixels.
Let's see if you hover now and zoom in.
Yeah. Now this looks all right.
With this, this challenge is almost solved.
You had one last task though, and this was
to change the text color of the
city name and city description.
This can be done quite easily because the
only thing we have to do right here is, well,
we have to add a different color to the body
because in our current place, a CSS file,
we don't have any color property applied for the text.
And also in the shared CSS file,
there is no specific color applied
only here for the anchor tag. We'll fix this later
but generally for the text,
we don't have any color property.
Therefore, we can just go to our body selector up here
and change the color with the color property
to an RGB code of 68, 68 and 68.
And as you learned, color is a property
with which gets inherited by other elements.
Therefore jumping back to our page.
Well, we now have the great text color right here.
It's not that easy to see though
But if we, for example, select the
h2 element and scroll down,
we see that we inherited the color from the body.
So if I would unselect it, you'll see it's getting black.
So this is this slight grayish tone
we had to implement here.
This was the challenge. I hope you had fun.
I hope you could apply your knowledge in this challenge.
In the next lecture we'll now add
more cards because we don't only have one
single card. And then we'll explore one big issue though.
This issue will be the last big task.
The last big problem we have to tackle in this module.
Looking forward to this. So see you in the next lecture.