So next up, we need to work on this two column layout below our heading still within the main container
we made called Hero Content because it all has this padding on the left and the right.
How am I going to accomplish this?
Basically, I'm going to have two elements.
Let's call this a paragraph and this a paragraph.
Let's just put them in there to start.
So I'm going to make a single paragraph that says my mission and then another paragraph that has some
Lorem ipsum text.
Well, the first line is this is my mission.
And then it's just Latin.
Lorem ipsum, it doesn't matter.
Just some text in there.
And of course, this is what we see at the beginning.
Each of those paragraphs is a block element.
What I want them to do is actually share the space.
Right.
So this guy here, if I inspect.
And I hover.
It takes up 50% of the container.
And this one there takes up 50% of the container.
And there side by side.
So we have a couple of choices for how we accomplish this.
But what I'm going to do is wrap them in some sort of basically a parent, a div, and then I can then
assign this one to B 50% of the div and this one to B 50% of the div.
So let's wrap them in a div.
I'm going to give it a class of two columns, maybe two column section, and just put them both in there.
And that doesn't really make a difference at all.
But I'm now going to write some basic styles.
So what do I need to do?
The first thing I'm going to do is change the font size on everything in here so I could do it to the
paragraphs, or I could select the two column section that I put an SE in there to call no single singular
column.
I can change their font size and I'm still using REM.
So two REMS and they inherit that font size, right?
I'm not styling them directly.
Those are paragraphs, but they inherit it from the parent.
And then what I can do is take each paragraph in there.
Like this and give them a width of 50%.
And does that work for me?
Kind of.
They are both 50%, but they are not sharing the space.
So how do I get them to share the space?
One option, as we've seen before, is to do display inline block.
But then we run into issues where they have margin or padding.
I can do box sizing.
Forwarder box.
They're still not sharing the space, even though they're both 50%.
Now, if I shrink this down to like 48%, then they share the space.
But then we run into issues with alignment.
So there are ways around this.
And the easiest way is to use greater Flexbox once we get there.
But what I'm going to do instead is get rid of that, get rid of the display of inline block and instead
add in float.
So remember, float is not really made to do this, but if I set float to left, they now are going
to well float and content will flow around them.
So go back and watch the video on floats if you need to.
But as you can see, our content is now side by side, sharing the space.
Even though both of these elements are by default.
BLOCK elements of now said float is left.
I can also do right here and we get obviously the opposite.
But they still share the space.
They're both 50%.
So I'm going to do float left and that's just going to put this guy first on the left and then this
guy on the left and then make room for this one.
So we need to change the color.
That's simple enough as well.
And if we look at the text in here, everything is white.
So instead of just styling the paragraphs or even just the two column section, I'm going to style our
whole hero to have a color of white.
And that should be inherited by everything inside.
And it is.
Okay, so that's the first piece done.
Then we basically repeat the pattern down here, except we then have two 50% columns within our 50%
column on the right.
So let's duplicate this another two column section.
Just like that.
But this first piece, that first paragraph is going to say special specialty specialties.
There we go.
Spelling is not my strong suit.
And then instead of a corresponding paragraph, I mean, I can leave it as a paragraph and we're close,
but I don't want a paragraph.
I want a whole bunch of individual specialties, public speaking, user interviews, analytics and data.
And that's basically a list of items, right?
So I'm going to use a list.
There's no order to the list, so I'm going to use an unordered list.
I'm going to delete this paragraph, change it to a UL and put a bunch of lies in there.
So we have public speaking and then strategic planning.
And just to save you the time, I'm just going to fast forward as I do these.
Okay, So there we are.
I have a bunch of allies, all the different specialties that Hazel has on her resume, public speaking
data analysis and so on.
And this is what we see at the moment.
It's not looking great.
Our content is over on the right, but it's a single column, right?
This UL here is a single column.
So what I can do is write some styles to change that single column into two columns.
So it's a ul and then I can select that.
So inside the two column section we have an element with the class of skills.
And then what I want to do here is make this thing take up 50% of the width, just like we did with
our two paragraphs, right?
We had a paragraph here, a paragraph here.
They both get the exact same styles right here with this 50% float is left.
I want to do the same thing for this ul it's just not a paragraph so this won't apply to it.
But I'm going to say you're width is 50%.
All right, and then I'm going to float it.
And then I'm going to do the same thing where I set box sizing to border box because lies by default
or ULS rather.
If we'll fix this in a moment too.
But if I inspect, Where are you?
Where's my you?
Well, when I hover, you could see that green right in there.
That's padding that Uls have by default.
So by setting box sizing to border box, I'm just making sure that it truly is 50% wide.
If I add padding, then that will be taken into account.
Right?
So now I can say actually I want ten pixels of padding and that is all factored in to the 50% width.
However, I'm just going to remove the padding because it comes with default padding and I don't want
it.
I also don't want these bullet points.
So how do I do that list style?
None.
OC So now we have our two columns, but recall that what I actually want is two columns on that right
side.
I basically want to repeat the same process on my allies inside the UL.
I'm going to float them and make them 50% wide each.
So if we inspect the original.
Here is the container that they're in the UL.
And then each ally takes up 50% of that ul.
And then I use float to make them wrap.
So I need to select the allies inside of the skill set or the skills ul select the allies and give them
a width of 50%.
And then the same thing with float.
We're just repeating what we've already done basically on a new level, a smaller scale.
And there we are now we have two columns over there.
But there's some other changes I want to make If we look at the original.
It looks like there's more spacing between them.
And the font, I think is smaller than what we have going on right now.
So I'm going to change the font size instead of having them be two REMS, which is what everything in
the two column section is inheriting.
I'm going to make them 1,25 rems OC, but then I'm also going to add some margin on the top and the
bottom to get that space in there that we're missing.
So margin, I think eight pixels on the top of the bottom, nothing on the left and the right and that
looks good to me.
We're pretty much done with this section.
But there is one annoying thing that happens when I refresh the page.
Let's say open the devtools here.
Remember, our viewport is this visible area and I'm setting that coral background to be 90% of the
viewport.
But our content doesn't fit in that on a lot of smaller screens, on shorter screens, right?
It fits fine here, but if my window is smaller or shorter, less tall, then our content gets cut off.
Well, it's not actually being cut off.
It starts overflowing onto this white background and we can't see it because it's white on white.
Now, if I highlight it, you can see right there it does continue down.
But to fix this, I can make a change to my markup.
Instead of saying the height has to be 90 fps, I'm going to say it has to have a minimum of 98 and
I'm going to give it a display of in line block.
So now if I open up my dev tools and I shrink that so our viewport is much smaller, the coral area
is still as big as it needs to be to accommodate the content.
It's not hardcoded to always be exactly 90 fps, it's just at least 90 FPS and then take up as much
as we need to fill or to have the content fill it out.
And I believe that's it for this first section here.
Next, we get to move on to this section.