So next up let's go ahead and just duplicate this markup which is all I did here.
I did use slightly different words slightly different bacon ipsum between these paragraphs.
So I'll just copy these two over into the h t m l But again that's not the focus here.
So what we want again make sure let's just take this from scratch so it's div class equals posts.
And some of you might be wondering why I even bothered putting div a div with class equals post around
everything.
This would work fine without that.
It's really just about grouping things together.
I'd rather than having one giant mess where one blog post bleeds into another.
I like to have things contained a little bit so that I know this is one post and it ends right here
so it's more just about in my opinion keeping the code a little bit clean.
So then we wanted to have a div called date or classical date and that date is December 11 2015.
Save that.
Then we had an H2 and that H-2.
This is another article which is another terrible article.
Don't recommend that you read it.
It's just about bacon.
So I'm just going to go ahead and copy this quote again.
Which is a paragraph.
Class equals quote paste that in.
And then we have two more paragraphs here.
One and finally the last bit of markup that we need.
The second paragraph.
There we go.
So let's see how this looks.
So one thing I'm noticing is that we have a little less spacing between the posts here.
So this one just runs into this.
The date December 11th we definitely want a little spacing there as we can see in the left part of that
could be because the HRR that we're missing.
Although I think what we need to do is just add in some margin between the blog posts.
So let's start by getting this h r in.
So we haven't actually seen the H R element really in practice.
It's a very simple one to use just looks like this.
It's actually self-closing doesn't take anything it's it doesn't have any closing tag or any inner content
just a char horizontal rule.
If we refresh what you'll see.
So that gives us this line going across and that ordinarily is fine.
Most people though like to style these a little bit so this one is really faint.
I don't know if you can tell but it's basically getting a little thicker and then trailing off on the
edges and there are some great resources and things on line that you can use to style any char.
And the reason they added this in here is that I wanted to force you to look something up and to try
to find some styles that you didn't write yourself.
So I'm going to show you exactly what I would do to find some H R styles.
I would just Google HDR style and see what we get.
And you can see I've actually clicked on two of them before.
So we've got simple styles for each jars and you can see there's a few options here.
So they think this is the one that I went with right here.
But let's just try one like this.
Click on code and all we have to do is copy these.
These are two styles and copy this down and we don't.
I don't want to think that you need to understand every line here because this is some some stuff that
is pretty advanced and kind of hacky as you can see this person says.
Not really supposed to work but does the only thing that we want to do is make sure that these are going
to be selecting our H R and so what this is doing is letting HRO with class of style 7 which we don't
have.
So let's just select a char
and let's just see what this looks like.
Refresh the page.
OK so there we go.
So I personally don't care for that one.
I'm going to use this one here that kind of trails off.
Feel free to do whatever you'd like and play around with it.
But again the point was that I wanted you to try and find something external that you didn't write and
I want to show you that it's totally fine to do that.
So I'm just copying this in.
I didn't write this.
Need to get rid of these styles here and put this in.
So all they're doing is looks it looks like they're setting a border on the HRO so no border height
which is just one pixel and then this background image which is a gradient.
And so that's how they get that gradient effect.
So if we refresh Now there you go.
We have this nice gradient effect here and if we wanted to.
I actually prefer this one so I'm just going to go ahead and keep this one.
Over this.
I might change the color a little bit so that it's a lighter gray but let's just keep that for now.
But we still have this problem which is our our next blog post is starting too soon and we need to add
some space there.
So all that we need to do is add a little bit of a margin.
So this is actually a nice a nice coincidence that we have this blog post wrapper around every post
because we can just add a margin to the bottom of each post so that will add space here.
So all we need to do is select.
Let me just show you the class post.
That's one post.
So then we're just going here.
It's like post margin and let's do 20 pixels and not just margin.
Let's just do it on the bottom so only March and bottom refresh and that's looking pretty close.
So the last little issue here is that we have a little bit more space over here than we do here and
that's because this or that we added is actually outside of the post class so it's not being affected
by that margin that we added in.
So if we did that we just move the A char.
Where is that.
Here we go to the bottom of the post and we are fresh.
You can see if we get the spacing that we want it.
OK so if we wanted to experiment and get this exact one we would just go back to that H.R. styles and
try some of the other ones.
But what I really want to show again is that we can incorporate other styles in.
We don't really have to know exactly how they work although it's a good idea to be curious and to try
and figure it out.
So hopefully you enjoyed making this project to nice simple minimal blog and for now.
Obviously it doesn't actually function as a blog.
There are no comments we can't add in a new post with any sort of interface.
We have to actually edit the aged him out ourself but when we get to javascript and when in particular
and we get to the back end and we have a database and we have a server going in a framework called Express
we actually going to take this blog and turn it into a real blog where we can add a post using a form
we can comment and we can do some other things like vote.
So that's going to be really exciting.
We'll use this assess it.
It's relatively nice looking for relatively few lines.
OK I'll see you when we cover javascript