× About Work Contact
Hero Image

⚠. THIS IS A TEST. ⚠

StubbSonic Design, is a web development, interactive media, and graphic design group located in Vancouver, BC. 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 &#9776; 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 a LinkedIn page in a new tab containing 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.
    • 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().
  6. Header:

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

⚠ THIS IS ONLY A TEST. ⚠

  1. Image:

    • There's an <img> tag inside a <figure> element, suggesting the potential presence of a banner image that could be displayed.
  2. 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.
  3. Footer:

    • The footer contains contact information, including an email address and telephone number. It also includes the current year dynamically obtained using JavaScript.
  4. 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.
  5. 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.
  6. CSS Styles Explanation:
  7. 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 (commented-out image tag).
    • 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.