A Tribute to Public Libraries

A Tribute to Public Libraries
0

#1

Hi,

I recently completed the tribute page project. I devoted it to the public library. You can view the project on CodePen and GitHub:

CodePen full page view: https://codepen.io/bardandron/full/pOqpPR/
GitHub: https://github.com/bardandron/tribute-page

Would appreciate any comments.

Thanks,

Bard Andron


#2

I would suggest moving the main down to the center more.

There is too much space in between where the main resizes and where ti doesn’t


#3

Hi @bardandron,

HTML

Error: The id ‘footer’ appears more than once in the document:

  • line : 42
      <p id="footer">Coded and written by <a href="https://github.com/bardandron" target="_blank">Bard Andron</a>, 2018</p>

  • line : 43
      <p id="footer">Photo copyright by <a href="https://github.com/bardandron" target="_blank">Bard Andron</a>, 2017</p>

  • line : 44
      <p id="footer"><a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by Dotstudio - Freepik.com</a></p>


MDN documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

The id global attribute defines a unique identifier (ID) which must be unique in the whole document.


Cheers and happy coding :slight_smile:

Note:
Tools used:


#4

So basically he showed have used classes.

Also make sure to use less confusing classes. Footer is the whole bottom of the document, so using it as the name for links that are in a footer is very confusing.


#5

Thank you for all the feedback! I have updated the pen except centering the main vertically; I don’t know how to do that yet, but I’ll try to figure it out.


#6

margin: 0 auto;


#7

@michaelnicol thank you - does it look better now? I don’t have a big enough screen to check it


#8

Add some padding to the text.

The text is close to edge of window and or screen on smaller screens. 10 - 20px padding would fix it.


#9

I defined the padding in percentage for smaller screens, because when I defined it in pixels and the width was given in percents, the left edge of the div (along with a bit of text) jutted out of the viewport.


#10

Looks better now :slight_smile:


#11

I like the background texture. I couldn’t see the photo, but that might be a problem on my end. I also like to put id and class designations at the front of img and href, but that’s probably a personal preference too.