Original subtitles

0 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.