All right. 1
So how did you get on with that challenge? 2
Well, if you managed to style your web site to look more or less like what we've got here, then you win. 3
Ding ding ding ding ding. 4
But if you struggled, or if there was anything that was unclear, then I'm going to walk you through the 5
solution, so that you can do it along with me. 6
Now you can see that to turn this into this there's still a little bit of work that we have to do in 7
terms of styling, and the first thing is to change the call to action section to a different background 8
color. 9
So let's go ahead and do that now. So, you can see that we've got this call to action or CTA section, and 10
this is the id that we can use to target that section. 11
So if we scroll all the way down, 12
but just before the media queries, we can add in a new section called the CTA section and we're going 13
to comment it out and this is our new section. 14
Now I'm going to target the cta id, and I'm going to change the background color to that pinkish red 15
color that we had before, which is ff4c68. 16
So let's hit save and check it out. 17
All right. 18
Looks good. 19
Now we mentioned previously that whenever a background is colored we want the text to be white and not 20
black because it doesn't look contrasty enough. 21
So let's go ahead and add some text color and we're going to make it fff. 22
And now we have white text instead of black text. 23
Now currently our content of this section is pretty much stuck to the left and the top and the bottom 24
and it's all too squished together. 25
So let's give this section some padding like what we've done for all the previous sections. So we're 26
going to use the same amount of padding as we had in, say, the carousel, or in the features section, which 27
is 7 percent top and bottom and 15 percent left and right. 28
So now we’ve got a little bit of padding. Looking nice, 29
right? 30
So the next thing that you might want to address is the heading. 31
It's far too small for a call to action. 32
I mean as a call to action you want to grab people's attention, right, 33
not be like an afterthought. 34
So let's go ahead and change the style of that heading. So we've got an h3 here. 35
But you can see we've already styled the h3 for the feature titles up here, so we can't really override 36
this. 37
So what do we do? 38
Let's give it a custom class. 39
Now the class I'm going to give it is cta-heading, and I'm just going to copy that over to here so that 40
I can target it down here, 41
cta-heading, and remember this is a class whereas this is an id. So I know I'm getting repetitive but 42
it's really important you don't mess this up. 43
All right so now we've got our cta-heading and we want to change our font-family to probably the 44
heaviest Montserrat that we can find which is Montserrat-Black. 45
And this is the same font as the one that we've got up here as our heading, 46
so Montserrat-Black. And also we're going to change the font-size to maybe 3.5rem 47
and the line-height to 1.5. 48
So let's hit save, let's refresh. 49
Massive call to action. 50
Looks pretty good. 51
So you'll notice that this looks very awkward being left aligned. 52
So let's go ahead and fix that and go into the parent section and change text-align inside the parent 53
container to be center. 54
And now we have centered items and centered text. Next. 55
What's the next thing that looks weird? 56
Well the download buttons look pretty weird. 57
So let's apply some Bootstrap styles. 58
So let's add a class and let's give it the btn style and then btn-lg, then bth-dark, and then we 59
will just simply copy and paste this icon from up here which is the Apple icon and we're going to put 60
it here. 61
And then again I'm going to copy the Google Play icon. 62
Now of course you can go on to Font Awesome and get all of this fresh, 63
but it's exactly the same so why not just reuse the code that we've already got? 64
So now let's hit save and let's add a class to the second button. 65
And this again is going to be btn, btn-lg, btn-light. 66
So hit save and refresh. 67
Nice. 68
We've got some nice buttons now. 69
They're a little bit too close to each other and too close to the heading. 70
So we need to give it some custom CSS styles. 71
Now you would notice that we've already applied some styles up at the top to give it a nice amount of 72
separation and a bit of margin away from anything else. 73
So, what if we just borrowed the class that we used up here which was download-button, and we simply 74
straight up just applied it over here as is? Now let’s hit save, refresh, and that looks pretty good. 75
So now we're pretty much done with the CTA section. 76
All we have is the footer that's left. 77
So the footer of course again needs a whole load of padding and we're going to use the same amount of 78
padding as we had before to give the content the same amount of separation from the edges. 79
So let's go ahead and check that we've got the footer with an id called footer so we can target it down 80
here. 81
And I'm just going to add the footer section comment and then I'm going to target the footer id and 82
I'm going to give it a padding of, you got it, 7 percent and 15 percent. 83
All right. So we now actually have a footer, which is pretty sweet. 84
Again content needs to be centered. 85
So let's add text-align center, centering our text. 86
And finally we need to add some social icons from Font 87
Awesome. 88
So let's head over to Font 89
Awesome 90
/ Icons, 91
and we're going to grab Facebook, Twitter, 92
Instagram and envelope. 93
All right. 94
Nice. 95
So let's copy Facebook and put it in here into the footer. Then next one is Twitter. 96
All right. 97
Next one is Instagram. 98
And finally our mailing option. 99
All right. Cool. 100
So now let's refresh our web site, and we now have icons. 101
Pretty cool. 102
Now the icons are a little bit too close to each other at the moment so we need a little bit of margin 103
around each of them just to give it a bit of separation and not look so bunched up, 104
and it’ll be difficult to click on individual ones at the moment. 105
So let's give each of these icons another class. So I’m holding down the option button to engage the Sublime 106
like selection, 107
and I'm going to call this social-icon. 108
All right. 109
So now I can go into my styles.css and I can target the social-icon and give it a margin of, say, 110
20 pixels top and bottom, 10 pixels left and right. 111
All right. 112
Now let's hit refresh and sweet. 113
We have a footer. 114
Now, if you look through your web site, this is a beauty of a startup web site. 115
You could probably launch TinDog right now and start using this beautiful web site. 116
It does not look out of place compared to any of the other startup web sites 117
that you see these days. 118
So I think we did a pretty good job. 119
Now just to finish off the last thing I want to enable is to make these navigation buttons work and 120
I want to show you why it is that we gave each section an id. 121
So one of the things that you can do is you can use a href that's not a URL and it's not a page but 122
it's an id. 123
So because ids are unique, then what you can do here in the href for that button, 124
so all the way at the top here in the button for Contact, you see that we left the href for the anchor 125
tag blank. 126
But what I'm going to put here now is I'm going to put in the id. So, remember, ids have to start with 127
the pound sign. 128
So you can see that for our footer section we've got an id that's unique, called footer. 129
So if I head back to that anchor tag where I've got the href, if I want to target that section all 130
I have to do is just to put in the pound sign to say that this is an id for an href and then put 131
in the name of the id which is footer. 132
And now if you hit save and refresh then, if I click on Contact, it will scroll all the way down to the 133
footer section where the user can contact me. 134
So let's go ahead and put in the other ones for pricing. 135
So pricing was called pricing. 136
Okay that's easy. 137
So we're going to put in hash tag or pound sign pricing, and then download is of course going to be 138
the cta section, Call To Action. 139
So let's hit save and refresh. 140
Now if we click on Pricing, it goes to pricing, Download, it goes to download, and it's pretty cool. 141
So this is one of the reasons why you would want to use ids sparingly, because they can be really useful 142
when you're trying to set up the navigation of your web site. 143
And if you take a look at GitHub, and if you scroll through the documentation, you can see that each 144
of the headings have a id. 145
So if I right click on this and I hit Inspect, you can see that this one has an id of product-features. 146
So you can see that this is the URL of the web page, 147
and if you put in that pound sign, which stands for, of course, go to this particular id, and then you 148
put in the name on the heading, that it navigates you straight there. 149
So this works in the URL level as well as in the href. 150
So that's yet another reason for why sometimes you see people use ids across their web pages. 151
So in the next lesson we're going to be tidying up this mess that we've made around here in our CSS 152
file. 153
You might have noticed along the way that there's been a lot of code duplication, 154
and, remember that, as a programmer, we're always trying to stay dry, 155
right? 156
Do not repeat yourself. 157
So in the next lesson we're going to look at why we need to refactor our code on a regular basis, 158
and what is the best way of doing that 159
in our case. So for all of that and more, I'll see you on the next lesson.