Above is a screenshot of how the website currently appears. You can see that in the footer, the contact information is repeated twice in the same space. As well as the text awkwardly framing the image on the bottom portion of the footer.
To better utilize the space and create a more efficient webpage, I will remove the repeated information, move the social media handles up a section so they share space with the contact information, and expand the yellow line so it is stretched along the website which will also create a difference of spaces.
So first, let's get rid of the repeated information. In the highlighted section of the HTML code, we went in and deleted the body text that had the repeated information in it.
By deleting this line of HTML code in the image above, it removes an empty container which allows the ability to move the information to the right giving a balanced feel as you can see in the example to the right.
Above on the right you can see what the original line weights were which was causing the yellow line to stop in the middle of the webpage but by increasing them to the values shown below it made the yellow line start on the left and end on the right of the webpage without a space in between. This now sections-off the two div boxes and creates the illusion that the contact information and the social media/copyright information are all in one container.
Above is the current values before we add anything to the CSS. We want to take the container holding the social media handles and make them line up evenly with the container on the left that holds the contact information.
So to do that we first increase the space between the social media handles and the copyright information. We do this by selecting the container in the CSS and add margin-bottom so we can increase the space.
So to do that we first increase the space between the social media handles and the copyright information. We do this by selecting the container in the CSS and add margin-bottom so we can increase the space.
Next we select the container holding both the social media handles and the copyright information and we add and increase margin-top so we can bump it down till it lines up with the bottom line in the contact information container.
And here is the finished product. We cleaned up the 2 pieces of information, made the yellow line longer so it'll stretch from side to side, and deleted any unnecessary repeated information.
