2 files changed, 56 insertions, 0 deletions
diff --git a/src/pages/app-about/about-styles.ts b/src/pages/app-about/about-styles.ts
new file mode 100644
index 0000000..001bd3f
--- /dev/null
+++ b/src/pages/app-about/about-styles.ts
@@ -0,0 +1,11 @@
+import { css } from 'lit';
+
+// these styles can be imported from any component
+// for an example of how to use this, check /pages/about-about.ts
+export const styles = css`
+  @media(min-width: 1000px) {
+    sl-card {
+      max-width: 70vw;
+    }
+  }
+`;
+\ No newline at end of file
diff --git a/src/pages/app-about/app-about.ts b/src/pages/app-about/app-about.ts
new file mode 100644
index 0000000..1e148d8
--- /dev/null
+++ b/src/pages/app-about/app-about.ts
@@ -0,0 +1,45 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// You can also import styles from another file
+// if you prefer to keep your CSS seperate from your component
+import { styles } from './about-styles';
+
+import { styles as sharedStyles } from '../../styles/shared-styles'
+
+import '@shoelace-style/shoelace/dist/components/card/card.js';
+
+@customElement('app-about')
+export class AppAbout extends LitElement {
+  static styles = [
+    sharedStyles,
+    styles
+  ]
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+      <app-header ?enableBack="${true}"></app-header>
+
+      <main>
+        <h2>About Page</h2>
+
+        <sl-card>
+          <h2>Did you know?</h2>
+
+          <p>PWAs have access to many useful APIs in modern browsers! These
+            APIs have enabled many new types of apps that can be built as PWAs, such as advanced graphics editing apps, games,
+            apps that use machine learning and more!
+          </p>
+
+          <p>Check out <a
+              href="https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files">these
+              docs</a> to learn more about the advanced features that you can use in your PWA</p>
+        </sl-card>
+  </main>
+    `;
+  }
+}