PSD to HTML 3.10) Styling the Feature Section

Previous: PSD to HTML 3.9)  Preparing the Background Image

Next: PSD to HTML 3.11)  Preparing the Portfolio Images

PSD to HTML Complete Course

Transcription of PSD to HTML 3.10)  Styling the Feature Section

hello and welcome back to the PSD to HTML responsive portfolio build in thislesson we’re going to move forward with our feature section we’re gonna havethree columns laid out we can see what we’ve got so far here but if we jumpinto Photoshop we can see what it’s supposed to look like so we have threecolumns separated by these very thin white borders and we have our icons andour text centered within those sections so lets go back into text me here andlet’s get started so moved everything into the site 15 folderol the changes wemake in this lesson will be saved there and we’re gonna come down to our featuresection here and let’s get started with our list items within our feature listunordered list and if we go back to reach team will review how that is allput together so we have this unordered list for the class of feature list andinside that we have three list items each list item is going to represent onecolumn in that set up that we looked at the Photoshop file so each column has ananchor tag inside that anchor tags in image and in h3 tag so our image as aclassic feature icon I reached three has a class of future titles we need to keepthose classes in mind because we’re going to be using those class names aswe move forward so let’s jump back into our CSS file and let’s point to thoseindividual list items which if you remember are going to serve as thecolumns for this feature section we’re going to point to the feature list classbut I dot feature heightened list space in the list items within that class sofar in his list items let’s go ahead and start by setting the width of theseitems so we’re gonna set the width here to 33.3 3 33 percent and that is goingto be roughly one-third of the width since we have three columns each columnneeds to be onechart also I’m gonna set the height here to 300 pixels which is the same heightthat we gave the feature list itself so we’re just making sure that the listitems themselves are as tall as the feature list itself then I want theseitems to flow to the left because by default these lists items areblock-level element so in order to change that behavior we’re going tofloat these items to the left see what that does so far force will save thatcame back into chrome and refresh and now we can see that they’re all leftaligned in their own column and it’s a pretty good start now let’s go ahead andgive these lists items a border so welcomed into the same ListItem rulethat we’ve been working with and we’re gonna give it a left border by creatinga border hyphen left property of 1 pixel solid in white and it looks like saverefresh and there we go so we have these borders on the left but we see that ourthird item seems to have disappeared will then disappear just jumped downhere because remember when you’re creating a box any kind of box ofcontent in CSS that box starts with a certain with when you add padding andborders and things like that to the item the net with gets larger so suddenlythis 33.33% times three which adds up to almost 100% when you add these threeborders to the right edge that’s adding three more pixels and suddenly that’stoo wide for the containing area so there’s a couple of ways we can fix thatit’ll be really difficult if we tried to fix it by changing the width insteadwe’re going to change the box sizing property the box sizing property if weset that to a value of border hyphen boxand that will take that 33% and set that as the final with of that item evenafter we add padding and borders and things like that so let’s do that we’regoing to come to this list item rule again and for our next property we’regoing to add box hyphen sizing and set it equal to any value of border hisandbox see if that works save it refresh your page and there we go now wehave all three on the same lane again because again that border box and valuesets the width of our items33% with that we applied to these items it says that as the final with evenafter adding in borders are played now we have a small problem we’ve got threeleft borders but we need a border over here as well so what I’m gonna do isapply or right border to this last list item we were going to do that is we’regoing to create a new rule for the feature list class and this is gonna beidentical to the rule we just created with one exception we’re going to addsomething to itLi Poland last hyphen child that will take the very last list item of thatunordered list and we can set certain properties for just that last item inhere we’re gonna said border hyphen right to a value of 1 pixel solid andwhite would save them and refresh and doesn’t look like it applied that letsgo back to her CSS everything looks fine they’re sometimes when you have aproblem like this what I like to do is play around with other items like thetext so we can come over here and said our text color to read and see if thatworks for fresh and they didn’t work so let’s let’s point to the anchor tagwithin thatlast I don’t get rid of that border and center color to read here save it freshand it’s not working either so it’s not targeting this last child and a sitcomin Z a few times get back to the point where we had that border in place andlet’s come to this last child here and inspect the element right click on itand click to inspect and if we go to that list item itself we can come overhere and we can see a border left applied to it but if we scroll down wesee it’s not applying that border right anywhere we can come over heresaver file refresh and then highlight that I know McGinn we can see a borderleft here but for some reason that item is not being targeted we don’t see theborder right property so let’s jump back into our file and we might have aproblem with the index HTML file itself and yet sure enough I see it we have ouropening unordered list tank here this should be a closing an ordered list Iguess that’s an opening tag so forgive me for that mistake let’s go ahead andsavor file and then try to refresh your page and that’s still not working let’scome back over here we need to get rid of that anchor tag so it’s just Licolumn last child and now that rule should work refresh area of now we havethat final border in place so now let’s go back into our CSS and let’s get ourtext looking right to go back into her page we can see our texts is great and Iwant it to be white and I don’t want to have an underlying sales go back overhereand let’s point to feature hyphen lists face Li space a and let’s set the colorto white and will set the text decoration to none and refresh and thatdoesn’t get your text where we wanted our texts still isn’t white but the textdecoration has gone and remember if we go back to index HTML sometimes it justrequires us to be a little bit more specific we have this anchor tag andwe’re trying to set the color for that two white but we have another level ofnesting here we have the h3 tag inside that so instead of setting the color forthe anchor tag to white let’s set it for this feature title class so we’ll goback into our CSS will get rid of this color white I’m gonna cut that based injust a second to skip couple lines and will create a role for feature hyphentitle which is that h3 that contains that text and will pace colorway theresave it and refresh and there we go we just had to get a little bit morespecific you know it’s and it this text a little bit let’s get it looking alittle bit betterfirst of all I’m gonna set its opacity 0.5% that and refresh and now it’s semitransparent looks pretty cool and we’ll come back over here and said a few moreproperties let’s change the font size here 220 pixels to make it a little bitcloser to the sides were looking for an asset fought wait to normal so it’s notas blocky as it currently looks and see how it looks a bit refresh and looksbetter now I want to center aligned everything they’re so let’s go let’s dothat for the list item itself so for this list item we set the width andinside that list item I’m gonna set text online to center save it and refreshthere we go then we’ll come back to a little more space between the text andthe icon so I’m gonna come back to her feature title here and let’s set the topmargin so margin hikes and topple make it just five pixels not very much andthat should take care of thatsave it refresh again a little more breathing room between the icon in thetax then I’m gonna put a hundred pixels of padding on the top of our list itemsso we’ll go back to the list item rule here and we’ll set padding hyphen top to100 pixels and that should know all of our text and icons down and it looksgood so then I want to do one more thing whenever we hover over this text Iwanted to brighten up a little bit so we’re gonna take away the opacity thatwe applied to it whenever we created the initial feature title role here so we’regonna point to future hyphen list space Li space a colon hover so the Harvardpseudo class of the anchor tag there and we’re going to point to the future titleincited feature hyphen title so when we hover over that anchor tag whichincludes the icon or the text the future title within it we’re going to set itsopacity back to one save it refresh and now we have a rumor that we see the textbrightens up it’s just a nice little subtle effect and i like it so there’sour feature section with just a little bit and CSS we’re able to make this lookreally nice so thank you for watching and I’ll see you in the next video