Build An HTML5 Template With Bootstrap and SASS - Part 5

Key Takeaways

hey guys welcome to I believe this is part five um of bootstrap and SAS so in the last video we did the services page all right so what we have left is the blog page and the contact page HTML and then we can finally move on to our CSS and using SAS okay so I'm going to go to our blog we basically have the the um the base structure down we have our uh columns all right so we have a main column uh eight column div and then a sidebar which is a four column div all right so we're going to start in the eight and basically we're just going to have a heading so we'll have H2 with a class oops a class of page header and I apologize I didn't know that this was going to take this long to do all the HTML um I know I could have copy and pasted but I I really want you to see um what I'm doing and how I'm structuring the website so page header this is just going to say read our blog and then we'll have a blog post which will have its own div so div class blog post and in the blog post we'll have another page header and I'm just going to give this a uh just a sample text for a name here and then we'll have the the blog image so IMG SL I think it was blog one and um actually we want to give this image some classes I'm going to give it a class of image small which will just shrink it to the correct size going to give it a class of image bordered cuz we want it to have an image and also blog featured all right now we just have our intro text let me just grab that text all right and then underneath um let's see see underneath the blog post ending div we're going to have our metadata so that the the date the author categories so div class and it's going be post meta all right so we're going to have an icon and the icon f a fa a clock actually it's clock o all right so that'll be the icon for the time or the date and the time we're just going to put August 31st 2014 all right and then we'll put another icon and this one will be a user so fa user and that'll be the author name and then we want the category so we'll say folder for the icon and we'll put graphic design web development all right so that is a post all right so we get the blog post and blog and post meta okay so we just want to copy this and this okay and then we'll go right under here put a couple of these in and that's pretty much it for the list of posts so if we save that okay so we have our post the images are aren't showing let me just see why image blog one jpeg let me just check that oh it's a it's a PNG file so we need to change those to PNG okay so for the sidebar let's check out the blog sidebar we have tabs then we have this featured video and then we have this recent comments okay so we want to go to the the four column sidebar so we're going to have a heading here and I'm going to paste in the tab code okay so we'll start here or tab widget whatever you want to call it we have a class of tab and tab light because we want to have that light background um we get a UL then we have the tab panes okay you want to make sure that your href for the tab matches the ID of your div down here all right and then we have the featured video so we want to go under the tab div which starts here and ends here okay so we want to go right here and this is going to be a block and we're going to have block primary and we want no pad here as well so we're going to give it the class no pad no padding and then we have an H3 and we'll have an icon here okay so f8 a fa a play circle featured video and then we need to block content and then inside here I'm going to just paste in a YouTube iframe embed code all right so whenever if we have no padding we usually use this when we want there to be a actually you know what this shouldn't be block primary it should be block primary head whenever we use this block primary head we should have no padding because if you look at it you don't want the head this this header to have padding on the sides and the top so you want no padding and then you want to set the padding to the block content div which is this because you don't want this up against the edges all right so let's see next we have the recent comment again it's going to be uh block primary head so I'm just actually going to copy this and let me see okay so we'll change this here to recent comments and change the icon to uh fa comment all right and then block content get rid of the video and for the block content we're going to have an unordered list and this will have a class of list comments and then we'll have Lis and inside the LI we want an image and we want our head shots headshot one do JPEG and we want to make sure we give us a class and we want it to pull left because we want the image to float to the left and we also want to give it a class of image Circle which will turn it into a circle all right then we want paragraph and I'm just going to grab some text okay so that's that's good so we'll just just copy this a couple more times change the headshot image all right and there we go let's take a look uh where are we blog where is it did that not save oh it didn't save all right so you can see the images are very very big okay so we're going to fix all that so that's it for the blog now we want the contact page okay so we'll go to contact we already have our columns okay we have our eight column div and our four column div let's see we'll have a a heading page heading contact us all right so we're going to have a form and I'm going to paste that in just to save a little time so we have a form um and then we wrap our fields in a a class called form Group which is standard bootstrap markup uh we have a name a phone number an email address and a message basically the same that we have on that little form that we created on the services page all right and then the the sidebar we're going to put an address and this is going to be a block so we want div class block and again this is going to be block primary head and notepad all right and then we're just going to have some address info I'm going to paste that in okay so we have an H3 our location which has an uh home icon then we have our block content unordered list has the company name and the address info okay so the contact form we also want a Google map so we want a section above the main section section class and this is going to have a a section I mean a class called section map and I'm just going to paste in my iframe for my map okay basically it's going to be width I want it to take up the whole page so I did 1,600 height 400 okay so if we save that and there's our map and our form all right so that is the HTML okay we have absolutely no CSS right now so that's what we'll do in the next video