In this lesson we'll explore how this theme was developed.
Once you understand how all the components come together you can easily see why bootstrap has become
so popular with developers in our HCM l document.
Inside the head tag we can see that the HDMI AML code starts with defining the character set UTF 8 in
the viewport.
Remember that setting the viewport is important to keep the page responsive on all mobile devices
underneath the title.
We also have several links to external files that are needed for the layout.
This includes the bootstrap DOD MIN DOT CSX style sheet and also the custom freelancer Nazi SS style
sheet which is specific to this theme.
The next block of code sets links to funds that are used in this theme so the font dash awesome dot
MIN DOT CSI style sheet and also certain fonts taken from the Google API.
So there's two links to that
and so that's it for the inclusions.
Most of this will look very familiar as we've worked with quite a few times now
inside the body tag.
We start with the navigation elements so this top navigation bar here that contains our buttons
the NAV element uses the three classes we took a look at earlier nav bar nav bar default and nav bar
fixed top these ensure that the nav bar stays fixed at the top.
Even when the user screws down the page
the navigation elements are all contained within a container.
Did the first code block starting with this div is used to collapse the nav bar for smaller screens
so remember when we string the size of the browser it collapses the nav bar
so you can see that the nav bar toggle pass was used the data toggle attribute is set to collapse.
You can also see the different span classes that define
each icon bar inside this little button here.
The second block of code inside this div contains each one of these buttons and they're structured inside
an unordered list
with a nav bar right class.
And that's why they'll stick to the right each individual button is contained within the list item in
each list item has an attribute a link attribute set to a different value the attribute is set to the
named anchor corresponding to the content that matches the button so the portfolio goes to the portfolio
section about goes to about and so on so that's why we see the numbers sign in front of the portfolio
about in contact links and you can see that the page is very well organized and well commented as well
which is common with bootstrap themes.
They also are separated in terms of sections.
So for example if we wanted to take out the entire navigation bar we could just delete this entire block
of code and that would get rid of the navigation bar for us.
So it's very easy to work with I just undid that to bring the code back.
Now next we have our header and the header is contained within the header tags and inside the header
tags.
We have a container and inside the container we have a row and a column so it's a large column that
spans 12 of the cells in our bootstrap grid layout inside the column.
We have this image which has the image responsive CLOs attached to it.
That means the image will be responsive to any device regardless of the screen size.
We have the source of the image and then we have a span with the start bootstrap text.
And if you're working with this team of course you would change all this you'd probably change your
image source to something else you change this text to the name of your website perhaps and so on and
so that's it for the header.
It's fairly simple and then we go into the portfolio section this entire section is contained within
a container div
so we have the portfolios we have.
First we have this section tag inside that we have the container and I'd have to scroll down quite a
bit just to see the closing div tag.
You can see all each one of these code blocks
is contained inside the container.
The first code block is is a role that contains this portfolio text and also this year the line with
the star in the middle so that's this entire code block here
and inside another row we have each of the code blocks for these six images here.
So one two three four five and six now each one of these six code blocks are almost identical just a
few minor differences let's start with the first item here we can see that they're contained within
the column small for column size and the link is set to portfolio model 1 with a no sign in front of
it.
And the reason for that is because these links will open up a modal with additional content pertaining
to that link.
Each one of them does that.
Now the code for the modal and the content inside the model is a lot lower down on the page.
So will We'll get to that as we progressed through this script but just for now know that each one of
these images links to its own model.
And that's why we have the data to toggle attribute set to modal as well.
And then we have the icon when you hover your mouse over you'll see the magnifying glass.
And so that's contained within this div with the class set to caption content and then the image source
for this cabin image
and then just an image responsive class to make sure that the images shrink if the browser window gets
smaller and on mobile devices we can see that because of the grid layout they do stack on top of one
another
so they'll shrink to a certain point and then they'll just stack on top of one another
so each one of these is almost identical the only the only thing that changes is of course the image
source but also the link each link opens a separate model.
So the second button here opens portfolio model 2 and then portfolio motor modal three four five and
six.
And so that's that's it for that section.