aeducans:

page: archetype

preview + code

this is my very humble first effort at coding something, and it was out of a need for a character page which could be a) reader-friendly, b) content-heavy, and c) adjustable to varying screen sizes (my native resolution is 2650x1440, but i also work in 1920x1080 and smaller at times). i’ve had a few people ask if I’d release it, so after spending some time cleaning up the code to the best of my ability, here it is.

some features:

• fixed topbar navigation with links to index, askbox, and 2 extras by default
  
• character stats box - removable if that’s not your thing, of course
  
• space for character name, links/tags, and character info
• black-and-white image hover effect
• custom fonts (montserrat & open sans)
• character boxes adjust through masonry

credits:

• this lovely fade-in effect and tutorial from cyantists
  
• icons from fontawesome
• tooltips script and tutorial from acuite
• tutorials and courses from w3schools and codecademy
• also, check this tag for tons of other tutorials/resources i used

notes:

• don’t like the icons i chose? notes are included on how to change them.
  
• edit your heart out. there’s tons of notation on things in the code.
• however, please leave the credit intact.
• this page was coded and tested primarily in opera and chrome browsers.