0.0.20

EDU-MDAnderson · Sep 17, 2023 · cd15742 · cd15742
1 parent 67898e8
commit cd15742
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 2 deletions.
diff --git a/cyberchamber.html b/cyberchamber.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Idaho Falls Chamber of Commerce Site Plan</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <meta name="description" content="Chamber of Commerce for Idaho Falls, Idaho"/>
+    <meta name="author" content="Matthew Anderson"/>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+    />
+    <link rel="stylesheet" href="styles/cyberchamber.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Idaho Falls Chamber of Commerce Site Plan</h1>
+    </header>
+    <main>
+      <section>
+        <h2>Site Name</h2>
+        <p>
+          The site name will be "Idaho Falls Chamber".
+        </p>
+      </section>
+      <section>
+        <h2>Site Purpose</h2>
+        <p>
+          This site is in development to express Idaho Falls' unique blend in commerce.
+          We will want to express some key aspects of the cities variety as well as it's primary employers and trades
+          We also want to express our ability to grow and expand our city.
+        </p>
+      </section>
+      <section>
+        <h2>Scenarios</h2>
+        <p>Scenario1: What would be the general life experience of those doing business in this city?</p>
+        <p>Scenario2: Does Idaho Falls possess the resources we need to expand and build out our business?</p>
+        <p>Scenario3: How broad is the economic diversity of this city?</p>
+      </section>
+      <section>
+        <h2>Color Schema</h2>
+        <div class="color1">
+            <p> Cyan | #00eeff</p>
+        </div>
+        <div class="color2">
+            <p>Grey | #fcde9d</p>
+        </div>
+      </section>
+      <section>
+        <h2>Typography</h2>
+        <p>Font 1: <a href="https://fonts.google.com/specimen/Sunflower">Sunflower</a> - We will use Sunflower as our leading header font. This is what the main chamber page uses already.</p>
+        <p>Font 2: <a href="https://fonts.google.com/specimen/Gupter">Gupter</a> - We will use Gupter. The US government uses Gupter for their Cyber Chamber and Idaho Falls is an important cyber security hub.</p>
+        <div>
+            <h4 class="header-example">Example: The quick brown fox jumps over the lazy dog.</h4>
+            <p class="font-example">Example: The quick brown fox jumps over the lazy dog.</p>
+        </div>
+      </section>
+      <section class="wireframes">
+        <h2>Wireframe</h2>
+        <div>
+            <p>Desktop Version</p>
+            <img src="images/wireframe01.PNG" alt="Desktop Website Wireframe Image">
+        </div>
+        <div>
+            <p>Mobile Version</p>
+            <img src="images/wireframe02.PNG" alt="Desktop Website Wireframe Image">
+        </div>
+      </section>
+    </main>
+    <footer>
+      <p>&copy; <span id="copyright-year"></span> | Matthew Anderson | Utah</p>
+      <p id="lastModified"></p>
+    </footer>
+    <script src="scripts/get-dates.js" defer></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <link rel="stylesheet" type="text/css" href="styles/base.css">
     <link rel="stylesheet" type="text/css" href="styles/larger.css">
     <meta charset="UTF-8">

diff --git a/lesson1/holygrail.html b/lesson1/holygrail.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles/holygrail.css">
+</head>
+<body>
+    <header>
+        <h1 contenteditable>Header.com</h1>
+      </header>
+      <nav>Main Navigation</nav>
+      <main contenteditable></main>
+      <div class="right-sidebar" contenteditable>Right Sidebar</div>
+      <footer contenteditable>Footer Content — Header.com</footer>
+</body>
+</html>
diff --git a/lesson1/styles/holygrail.css b/lesson1/styles/holygrail.css
@@ -0,0 +1,36 @@
+body {
+    display: grid;
+    height: 100vh;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto 1fr auto;
+  }
+
+  header {
+    background: lightpink;
+    padding: 2rem;
+    grid-column: 1 / 3;
+  }
+
+  nav {
+    grid-column: 1 / 3;
+    background-color: #bed;
+    padding: 1rem;
+  }
+
+  main {
+    background: coral;
+    height: 100%;
+    padding: 1rem;
+  }
+
+  .right-sidebar {
+    background: yellow;
+    grid-column: 2 / 3;
+    padding: 1rem;
+  }
+
+  footer {
+    background: wheat;
+    padding: 2rem;
+    text-align: center;
+    grid-column: 1 / 3;}
diff --git a/styles/cyberchamber.css b/styles/cyberchamber.css
@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Gupter&display=swap');
+/*Id Selectors */
+
+/* Class Selectors */
+.color1 {
+    background-color: #ffa500;
+}
+.color1 p {
+    padding-top: 1rem;
+    text-align: center;
+}
+.color2 {
+    background-color: #808080;
+}
+.color2 p {
+    padding-top: 1rem;
+    text-align: center;
+}
+.font-example {
+    font-family: 'Sunflower';
+    width: 100%;
+}
+.header-example {
+    background-color: white;
+    font-family: 'Gupter';
+    width: 100%;
+}
+.wireframes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+}
+.wireframes h2 {
+    grid-column: 1/3;
+}
+/* Element Selectors */
+body {
+    width: 100%;
+}
+footer p {
+    padding-top: 1rem;
+}
+h1 {
+    padding-top: 1rem;
+}
+img {
+    display: block;
+    margin: auto;
+}
+main {
+    margin: 1rem auto;
+    width: 90%;
+}
+section h2 {
+    background-color: orange;
+}
+/* MultiElement Selectors*/
+.color1,
+.color2 {
+    height: 50px;
+}
+footer,
+header {
+    background-color: grey;
+    height: 100px;
+    margin: auto;
+    text-align: center;
+}
+section div,
+section p {
+    margin: 1rem auto;
+    width: 90%;
+}
diff --git a/styles/larger.css b/styles/larger.css
@@ -81,7 +81,7 @@ main {
 }
 
 .principle {
-    background-color: rgb(236, 236, 236);
+    background-color: #5ac0cf;
     display: flex;
     flex-direction: column;
     border: 1px black solid;
@@ -95,7 +95,7 @@ main {
 }
 
 .principle h3 {
-    background-color: #8db3b9;
+    background-color: #68a6af;
     margin: 0;
     padding-bottom: 5px;
     padding-left: 10px;