× About Work Contact
We call this a Hero Image. However, this one is transparent so we can see the background image.

⚠. THIS IS A TEST. ⚠

STUBBSONIC DESIGNis a web development, interactive media, and graphic design group located in Vancouver, BC.

This website is a testing sandbox for front-end development research and experiments utilizing HTML5, CSS3, and some jQuery. It is hand-coded and was not built with the assistance of a CMS or SaaS. Let's break down the process and functionality of this web page:

  1. HTML Structure:

    • This web document starts with the <!doctype html> declaration and contains the basic HTML structure.
    • The <head> section includes metadata such as character set, viewport settings, page title, external stylesheets, scripts, and links to external resources.

  2. Metadata:

    • Meta tags provide information about the web page, including a description, Open Graph (OG) meta tags for social media sharing, and links to various icons.

  3. Stylesheets and Scripts:

    • External stylesheets are linked to the page, including style.css, normalize.css, and menu.css.
    • style.css: Custom styles for the page layout and appearance. normalize.css: A CSS reset to ensure consistent styling across different browsers. menu.css: Styles for the navigation menu. External libraries: Font Awesome for icons.
    • The jQuery library and Font Awesome icon library are included through external CDNs (Content Delivery Networks).
    • Custom fonts (Michroma and Didact Gothic) are imported from Google Fonts.

  4. Body Content:

    • The <body> section contains the main content of the web page.
    • The page has a navigation button representing a hamburger menu "☰" that triggers a side panel with links when clicked.
    • The content is organized within a <div> with the ID "container" using CSS Grid layout.

  5. Navigation:

    • The navigation system in the provided code involves a combination of a button triggering a side panel and a top navigation menu.
    • The button, represented by the hamburger icon "☰", is used as a trigger for opening the side panel.
    • The the side panel <div> appears when the hamburger menu button is clicked. It includes links to different sections of the website: "Home," "About," "Work," and "Contact." The "Close" button "×" is included to close the side panel.
    • The navigation links include "About," "Work," and "Contact." The "About" link opens the "About" section of the about.html page, targeting the element with the ID content1. That section contains biograpical information about designer - Sean Stubbs, and the "Work" link opens a different website in a new tab with an example of web-based visual design project. A link to the "Contact" section of the contact.html page, targeting the element with the ID content1 whaich contains a page with a contact form.
    • The <nav> section represents the top navigation menu. It includes social media links to LinkedIn and Wikipedia, each represented by a corresponding icon.
    • JavaScript Functions: The functionality of opening and closing the side panel is controlled by JavaScript functions, presumably defined elsewhere in the code. The functions are called openNav() and closeNav().

⚠ THIS IS ONLY A TEST. ⚠

  1. Header:

    • The header includes the site's name STUBBSONIC DESIGN and a subtitle indicating the services offered separated with skull 💀 emojis.

  2. Image:

    • The image_block area of the contains an img tag that displays a banner image. It is wrapped in a div with the ID image. The img tag has the src attribute set to "images/banner4_foreground.png" and includes an alt attribute for accessibility. The srcset attribute is included but empty, suggesting that responsive image sources could be added for different device resolutions.

  3. Content Sections:

    • Two content sections (#content1 and #content2) display warning messages indicating that the content is a test. The descriptive text content is contained within 2 <ol> ordered list. One list is numbered 1-5 and the second is 6-12.

  4. Footer:

    • The footer contains contact information, including an email address and telephone number. It also includes the current year dynamically obtained using JavaScript.

  5. JavaScript:

    • JavaScript is used to dynamically set the current year in the footer (app.js).
    • Two additional JavaScript files (app.js and menu.js) are included for handling certain functionalities, such as showing/hiding the navigation menu links.

  6. Responsive Design:

      The page is designed to be responsive, adapting to different screen sizes, as indicated by the viewport settings and the use of a hamburger menu for smaller screens.

  7. CSS Styles Explanation:

    8. style.css:

    • Grid Layout (css_grid):
      • The container (#container) uses a grid layout (layout1).
    • Navigation Button (openbtn):
      • Styles for the hamburger menu button.
    • Side Panel (sidepanel):
      • Styles for the side panel that appears when the hamburger menu is clicked.
    • Header (site_header):
      • Styles for the site header, including text styles for the main and subheadings.
    • Image Block (image_block):
      • Styles for the image block that contains the banner image.
    • Content Blocks (content_block):
      • Styles for warning text in content sections.
    • Footer (site_footer):
      • Styles for the footer, including text styles and spacing.
    • menu.css:
    • Navigation Menu Styles:
      • Styles for the top navigation menu.

These stylesheets collectively define the layout, appearance, and responsiveness of the web page, ensuring a cohesive and visually appealing design. The JavaScript files add dynamic behavior to the page, enhancing the user experience. The use of external libraries and resources contributes to the overall functionality and aesthetic of the web page.

In summary, the web page presents information about STUBBSONIC DESIGN, offers navigation links, and includes test content. It employs external libraries, stylesheets, and scripts to enhance functionality and appearance. The use of JavaScript and jQuery adds dynamic elements to the page.