Events Page Template

A one-column page used for event and conference announcements.

Resize window to see mobile.

page screenshot
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  1. Section Header

    Wrap header with <header class="section-header">. Define section further with <h3> and <a id="x">, where x = section header id; color is from section header class. On scroll on desktop and tablet, JavaScript will affix header to top (with Menu and Search). (See scripts.js.)
  2. Headcrumb

    Display the headcrumb nav with a <header class="section-header"> wrapper. Style the link text with h4 and link back to parent page.
  3. Event title

    Use <h1 id="page-title">.
  4. Event info

    Create a <div id="event-info"> and show the following info in order:
    - day/date
    - time
    - location name
    - address
    - city, state, ZIP
  5. Register button

    Use blue button style <p class="register-btn">, and link to appropriate registration site.
  6. Contact

    Create a <div id="event-contacts">, style heading with <h4> and show the following info in order:
    - contact person with email link, title, department
    - company or institution
    - phone number
  7. Sponsors

    Style heading with <h3 class="event-sponsor-title">, which contains the horizontal line. Use a <ul class="sponsors"> for sponsors.

    In pages using a logo image for sponsors, use <span class="sponsor-logo">. Place "logo" in meta description to pull the image here.