Voiceover: So welcome back to Part 2
of Building the cities section.
Without further ado, let's go back to our website,
and this is where we left.
Now formatting this shouldn't be so hard, right?
We will start with the images now.
And, yeah, you should probably do this
on your own now.
So I will give you some time to do that.
All right.
So maybe you paused the video and did it by yourself.
So now let's see how I would do it.
Okay,
so this is a box class,
and I want to select the image inside of the box.
Now this could be a problem if we had other boxes
with images inside of them,
but, as you know, the other box that we have
is this image up here.
Sorry, it's this box up here,
and there is no image inside of this.
So we can just use
the selector that we're already used to.
Okay.
Let's add another code section here.
This one is the cities.
I really like some consistency here.
And now, box and image.
And what we want here is the image
to be exactly as wide as the box.
So what we say is
width, 100%.
And obviously the height will then be set automatically.
And we can maybe have some margin
between the box and H3 heading.
So let's just add some margin to the bottom here
of maybe 15 pixels.
And let's check this out.
Okay, cool, this is great.
And now let's add some
margin to
these lines here.
And if you remember each of those is a DIV element called
city-feature.
All right,
city-feature.
And maybe a margin to the bottom of each
of them of five pixels.
Okay, great.
And now comes the most difficult part
which is to format those icons right here.
I would like to make them a little bigger
and maybe aligned
to one each other
and have an orange color.
So let's try to do that.
So if you remember the other icons that we used,
we actually gave them a class name.
As you can see here we called them
icon-big.
So now let's call these ones icon-small.
I should have done this before I started to copy
but, all right.
Now we have to copy it all, in all classes here,
in all icons,
but it doesn't take so long, so...
Person, star, and twitter.
Right.
So let's go back here to
the reusable section where we have our icons.
So, icon-small.
All right, so the first thing is
to make them kind of aligned to each other.
So what I will start doing
is to say that I want to see these as inline-blocks
so that I can assign them some width
which I will say should be 30 pixels.
And this way, I can now say text-align
and then I can center them
inside of this inline-block,
and this should work.
Now I will also want to
give them this nice orange color that we used before.
We get it here.
and
paste it right here,
and we obviously also want those
icons to be a little bigger.
And if you remember, this is an icon font.
So I can just adjust the font-size
and let's say for instance 120% here.
So let's see what it looks like.
Okay, so you can see that these icons
are not quite aligned with the text, right?
So what can we do about this?
Let me use a nice technique,
and I will say that the line-height
should also be 120%
and that the vertical-align should be to the middle.
And maybe that solves our problem.
Okay, this doesn't quite look like I would like to
because now it's the other way.
They are now too way down here, right?
They're still not aligned.
So let me tell you another technique you can use.
So there are three secrets essentially to align those.
Let me write it here so you can remember it.
Secrets
to align text and icons.
So comments are a great way to do exactly that, right,
to comment our code.
So we can now set another margin
to the top, and this is a new thing
because now we will set a negative margin.
So negative margin does exactly
the opposite thing than a positive margin.
So a positive margin gives us space,
and a negative margin is kind of, takes space away.
So this will pull our icons
to the top two pixels, hopefully.
Well, let's see if this works.
Two was maybe not enough.
Let me use four pixels
and four pixels actually looks great.
So this is nicely aligned here,
and I think this looks quite good.
Maybe five pixels would also be okay.
And another thing we can do is
to add some margin to the right,
so we have some space between icon and the text, right?
So let me do that as well.
So five pixels here can be better
and the margin to the right of, let's say, 10 pixels,
and, with this, I think we're good to go.
Yeah, that's it.
This looks cool, right?
Now there's only one thing left to do in this section,
which is to turn this Twitter user names here into links
and then format those links with CSS.
So let's do that.
So back here in the HTML file,
let me just go here.
So we want a want an A-element
for a link right?
Href,
and once again we have nowhere to point.
this thing.
So we just use the hash symbol
and let's do the same thing
for each
of the four cities.
So, Berlin is next.
Nowhere,
and now
the last one here.
So, what does it look like?
Okay, these are just some normal links
as you are used to seeing.
So what I want to do now is to have links
in the orange color,
and I also want a more beautiful underlining than this one.
So, first of all, I will change the color
and I will get rid of this underlining,
and we have already done this before.
So this will be not different
from the last time.
So I will just open a new
code section here
for generic links because we will use these links
in more places, maybe.
So now I have to format all links at the same time,
and so I just use the A
because that's for the most generic links,
and I will here, such as I did the last time,
specify the link
and the active state.
So I want the color to be orange.
So orange,
and I want no text underlined.
So, it's text-decoration, none.
Simple as that.
And now what I want
is instead of this underline,
I actually want an underline
because that's what most users are used to
when they see a link,
but we will do that in a more beautiful way
and that's with a border-bottom.
So a border at the bottom.
The simple one pixel and solid
and, also, this orange.
And to make it even more stand out,
we'll add a padding at the bottom.
One pixel, maybe.
So we have some space between the text and the border.
So let's see what it looks like.
Have to get rid of these blue boxes
what comes every time we select an element.
Okay, this is what it looks like.
Cool, right?
And now one thing left to do is to say what should happen
when we hover this link, right?
Okay, so let's do that.
And as you already know,
we now say a, hover
and a, active,
and up here its actually not active.
Of course, it is visited.
So what we want to happen when we hover a link,
we want it to become the color of the normal text
which is, if you remember from the beginning,
was like the first thing we set.
Color is this,
grey.
And we also want the border to disappear,
and do you remember how we do that?
So, instead of saying we want it to zero pixels,
we simply make it transparent,
because that's a much cleaner solution.
Transparent.
Oh, and, again, we want this to happen
with a nice transition.
So, like an animation.
So we choose transition,
border-bottom
and, again, an interval of 0.2 seconds
and we also want to animate the color.
So
0.2 seconds,
and that should do the job.
What it looks like?
Okay, great.
This is exactly what we wanted the links to do here, right?
Now one thing, what did we notice here is this one,
because this is also a link.
This now also have this
annoying underline which we actually don't want.
This one don't have it.
And it's, of course, not because in this ones
we specified the border specifically
which we didn't do on this images.
Actually, on this links.
So, we need to fix that
and it's quite easy.
We just have to go down here to the
How it Works section, right?
And where is it?
So down here we just create some code
for the button-app,
because, as you remember,
this here is the class
of the links button-app.
So button-app link
and button-app visited
should have no border at all.
So, border is zero.
And this will solve our problem.
Yeah, so the border disappeared.
All right, so now we have five
of our nine sections designed.
So we already have more than half
of our website completely built.
All right, this is great.
So, next up we have a customer testimonial section
which will also be very beautiful as you will see.