- Read Tutorial
- Watch Guide Video
Looking through the various tasks that we have left you can see that we are almost done and a few of these are going to be even on the same page. Taking a look we have a card design for the about and the contact pages and then filling in some additional information on the about page, putting your list of skills things like that.
Let's take a look at what this is going to look like. I have the about me section up right here. If I hit refresh you can see that it's a little bit hard to read this content. This is not really ideal. I think I want to use a card that will frame all the content. Then I want to have some additional sections where we can do things such as list out our skills here with some progress bars and here put some drop downs. I think would be kind of a cool thing for people to come see.
Opening up Sublime Text. Let's open up our about page and let's take a look at what we could do for adding a card. The first thing I want to do is I'm going to create a wrapper div and this div is going to give me the ability to add custom classes to cards so I'm going to use something called app-card-container. This is going to be something that we will add styles to. This isn't something built into bootstrap. The next thing after we have that is the div that is actually going to have the card itself. This is going to be div with a class. This is going to be of card. We can put everything inside of these. If I grab that let's indent it. Let's go take a look and see what this gives us, hit refresh. This gives us a little bit of what we're wanting. Definitely not the ideal obviously but at least we do have the card, so we're selecting the right element and everything there looks good. Let's take a look at what we can do with our app-card-container. Open up the application CSS file and let's scroll all the way down to the bottom and add a style for app-card-container. What exactly do we want to accomplish with this? Well, one we don't want to have all this white text. We definitely want this to be black so let's come and give a color of black. Everything inside of here should now be black, hit refresh. There we go, that is working. There are some text alignment issues, I think I went the about me over on the left-hand side and I don't think that I want to have this centered. I think I want all of it to be aligned to the left and we may need to implement something a little bit more specific but we can at least take a look at this and see if this gives us what we need or at least gets us closer there. Hitting refresh now. That looks much better. Obviously, we still have some padding issues and some things like that. But let's open up the developer tools and see how we can fix that. Here we have the app-card-container and we have the elements that we just added. Let's see what happens if we add padding all around of 40px. That is going to give us something outside of what we're wanting. This is not the right selector, just so you can see what would happen if we gave margin of 40. That definitely isn't what we want. This is the reason why I like using the developer tool so we can play around with it and see exactly which items we want to select and then we can go from there. If we grab this card specifically and let's say if we do padding of pixels there, you can see that that selects the exact component that we want. That's perfect! Let's close that out and now all I want to do is grab the app-card-container and I want to select it. But if you remember how we can do this right here, remember how we have the log in card. We can say that any card class that's inside of a login wrapper. I want to apply these styles to it. I'm going to do the same thing here where I'm going to say, that any cards inside of the app-card-container. This is the syntax for saying essentially any that are inherited from or inside. Then I want to perform these various tasks. In this case, I'm going to add some padding, let's try 40px just to see how this looks. Coming back, hitting refresh. This should give us about what we're looking for. Perfect, I like the way that that looks! This is definitely easier to read. This is something that may be specific only to my picture but if your picture looks like it's running into the rest of the application a little bit or the rest of the card it might be a good idea to add a border. Let's come and do that let's see exactly which items we have to select. I'm going to add a class here for the image tag and let's say that this is going to be of class profile-image or profile-img however you want to do it. If I come down and I select this class I want to give a border of one pixel. Solid and let's try grey. I believe this is a border CSS syntax if not we can look it up. If I refresh right here, perfect now we have a little bit of a border. Like I said your picture may not need that because mine has some off-white around a decent chunk of it. I didn't really like the way that it was running into the rest of the card. I like all of this. This is definitely getting me closer to the about page I want to go with. Let's go and apply the same kind of styles to the contact page. I don't want to have them completely identical because I like the way that this separates from the left and the right-hand side. I like this being centered but I do want to wrap it all in a card and I want to borrow these kind of classes so I should be able to just grab this come to the contact and then pasting that in, indenting. Then let's give it a couple of closing divs just to match it up. Let's see if our contact page is looking good. One thing that may be an issue. If you want to center it, then we would have to override that but we'll see how we like. You know what, I actually kind of like the way that looks. I think I'm going to keep it like this. One little change where the email me link. This is going to have to have the override here. This email link here is wrapped inside. I guess I could just grab the app-card-container and then set a link on that one. You can give any colors that you want. We can give a color of blue. You can pick out anything you'd like and to go with it. This should select it and it does so now you can click on email me and it'll pop up the window. All of this is looking very good. This is a nice improvement. Let's stop our progress right here. See all the files that changed three files and that's exactly what we thought, that's good. git commit -m "Implemented style changes for about and contact pages". We can push this up and let's mark off our pivotal tracker dashboard because we have finished this and in the next guide we're going to walk through how we can add some additional information and use the collapsible class using bootstrap 4.