Template for table-top campaigns.

HTML and CSS template to record campaign activity.

Completed:

• Nav bar. ✔️
• All link pages. ✔️
• Image on home page. ✔️

To do:

• Home Page:
  Add H1 to homepage. ✔️
  Add H3 to homepage. ✔️
  Align items in column. ✔️
  Add a short about summing up the world.
  Decorate the page.
  Sort background colours.
  Responsive too 600 px. ✔️


• Link pages to secondary pages (from maps to specific maps or from a character list to a single character. ✔️


• About us page. ✔️


• Character page:
  Images displaying in grid pushed to the left. ✔️
  Descriptions on right hand side of image. ✔️
  Image is clickable and redirects to a page about that character. ✔️
  Whole container is clickable. ✔️
  Make Responsive to 600 px. ✔️


• Campaign page:
  Elipses leading betweeen images of campaign. ✔️
  Images of campaign displaying in a circle. ✔️
  Images clickable and redirect to info on that event. ✔️
  Description for campaign items set to right side. ✔️
  Main title centred at top of page. ✔️
  Campaign session number to right side of campaign picture. ✔️
  Make page responsive - make dots smaller and images keep 50% border radius and stay a circle shape on re-size up to 600 px. ✔️
  Media breaks to re-size dots. ✔️
  Media breaks to keep images in circles. ✔️
  
• Maps page:
  Map images displaying in a list pushed to the left. ✔️
  Clickable images that redirect to information on said map. ✔️
  Header for each map with name of location. ✔️
  Make page responsive. maps changing size and images not overlapping up to 600 px.✔️
  Media breaks to re-size images. ✔️
  Media breaks to re-size text. ✔️
  


• NPC page:
  Npc images displaying on left side. ✔️
  Header for Npc name. ✔️
  List item for some basic info - race, class, age etc. ✔️
  clickable images and texts that will redirect to a page about that Npc. ✔️
  Make page responsive up to 600 px. ✔️


• Added secondary pages all linked to nav. ✔️


• Nav links back from all secondary pages. ✔️


• ***** SECONDARY PAGES *****


• Player Profile page
  Image of player on left. ✔️
  Name, Title and Statistics on right. ✔️
  Quote opaque and centred below image and statistics. ✔️
  Biography below quote.✔️
  Responsive to 600 px. ✔️
  Add links to character attributes.
  Add links for character equipped gear.


• Detailed Map page.
  Header top of screen and centre above map. ✔️
  Map in centre of screen. ✔️
  Full map image shown, no distortion. ✔️
  List of details about area pushed to left.✔️
  Paragraph about map area below details.✔️
• Detailed Campaign page. Header at top in centre. ✔️
  Image below header in centre.✔️
  Key events pushed to left below map. ✔️
  Main paragraph about this part of the campaign.✔️
  Fine tune.
  Make responsive.


• NPC Profile page.
  NPC Image on left. ✔️
  NPC Name and title on right, same height as pic. ✔️
  NPC stats in a list to the right of the pic below title and name. ✔️
  NPC quote in grey and slight opaque below image and stats. ✔️
  NPC BIO at bottom of page below quote. ✔️
  Page responsive down to 600 px. ✔️
  
• Get good responsivity for width of 280px
  Main area's of issue:
  Nav Bar. (not displaying all links)
  Home Page. (whole page Does not fit to screen okay at 375px width not at 280px)
  Character page. (text overlap at 412 px width)
  NPC page. (text overlap at 412 px width
  Campaign page. (text too long images not fitting well in box at 280px width)
  Map page. (text too long images not fitting well in box at 280px width, h1 needs making smaller and centering)
  HAVE NOT CHECKED SECONDARY PAGES. (PLAYER PROFILES, NPC PROFILES ETC)
• Try using DVH.