0.1.38

chamber phase one
EDU-MDAnderson · Sep 25, 2023 · effe2c4 · effe2c4
1 parent 2d2b788
commit effe2c4
Show file tree

Hide file tree

Showing 8 changed files with 425 additions and 0 deletions.
diff --git a/chamber/chamber.html b/chamber/chamber.html
@@ -0,0 +1,55 @@
+<!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" />
+        <meta property="og:url" content="https://edu-mdanderson.github.io/wdd230/" />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="Matthew Anderson - WDD 230 - Web Frontend Development"/>
+        <meta property="og:description" content="Web Frontend Development - Matthew Anderson - WDD230 Course Assignment Portal"/>
+        <!-- <meta property="og:image" content="https://photo.byui.edu/eclipse/e93f52517"/> -->
+        <meta name="description" content="Chamber Phase One"/>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="stylesheet" type="text/css" href="styles/smaller.css" media="screen and (max-width: 37.5em)">
+        <link rel="stylesheet" type="text/css" href="styles/base.css">
+        <link rel="stylesheet" type="text/css" href="styles/larger.css">
+        <link rel="icon" href="images/favicon.ico" />
+        <meta name="author" content="Matthew Anderson"/>
+        <script src="scripts/responsivemenu.js"></script>
+        <title>Idaho Falls Chamber</title>
+    </head>
+<body>
+    <header>
+        <h1>Idaho Falls Chamber of Commerce</h1>
+    </header>
+    <nav>
+        <ul class="navigation">
+            <button id="menu"></button>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About Us</a></li>
+            <li><a href="#">Membership</a></li>
+            <li><a href="#">Events</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+    </nav>
+    <main>
+        <section class="intro">
+            <h2>About Our Chamber</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lobortis turpis.</p>
+        </section>
+        <section class="membership">
+            <h2>Membership Benefits</h2>
+            <ul>
+                <li>Networking opportunities</li>
+                <li>Business resources</li>
+                <li>Community involvement</li>
+            </ul>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2023 Chamber of Commerce. All rights reserved.</p>
+    </footer>
+</body>
+</html>
diff --git a/chamber/images/favicon.ico b/chamber/images/favicon.ico
diff --git a/chamber/images/favicon.webp b/chamber/images/favicon.webp
diff --git a/chamber/images/favicon_io.zip b/chamber/images/favicon_io.zip
diff --git a/chamber/scripts/responsivemenu.js b/chamber/scripts/responsivemenu.js
@@ -0,0 +1,10 @@
+const hamButton = document.querySelector('#menu');
+const navigation = document.querySelector('.navigation');
+
+hamButton.addEventListener('click', () => {
+	navigation.classList.toggle('open');
+	hamButton.classList.toggle('open');
+});
+
+
+// tutorcommit
diff --git a/chamber/styles/base.css b/chamber/styles/base.css
@@ -0,0 +1,188 @@
+/* Reset some default styles */
+body, h1, h2, p, ul {
+    margin: 0;
+    padding: 0;
+}
+
+/* Basic styling for the body */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+}
+
+/* Header styling */
+header {
+    background-color: #00447c;
+    color: white;
+    text-align: center;
+    padding: 20px;
+}
+
+/* Navigation menu styling */
+nav {
+    background-color: black;
+    text-align: center;
+}
+
+nav a {
+    color: white;
+    display: block;
+    padding: .5rem;
+    font-size: 2rem;
+}
+nav a {
+    text-decoration: none;
+    color: white;
+    transition: color 0.3s;
+}
+
+
+
+nav a:hover {
+    color: #ff9900;
+}
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+}
+
+nav li {
+    margin: 10px;
+}
+
+/* Main content styling */
+main {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Section styling */
+.intro {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.intro h2 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.membership {
+    margin-top: 20px;
+}
+
+.membership h2 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.membership ul {
+    list-style-type: disc;
+    margin-left: 20px;
+}
+
+.membership li {
+    margin: 5px 0;
+}
+
+/* Footer styling */
+footer {
+    background-color: #00447c;
+    color: white;
+    text-align: center;
+    padding: 10px;
+}
+
+/* Additional Styles */
+a.button {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #ff9900;
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+a.button:hover {
+    background-color: #ff6600;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1200px;
+    padding: 20px;
+}
+
+.image {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    display: block;
+    margin: 20px auto;
+}
+
+/* Incorporate provided styles below */
+/* Site Plan Specific Styles */
+
+/* Site Name */
+main h2 {
+    font-size: 32px;
+    color: #00447c;
+}
+
+/* Site Purpose */
+main p {
+    font-size: 18px;
+    line-height: 1.6;
+}
+
+/* Scenarios */
+main h2 + p {
+    margin-top: 10px;
+}
+
+/* Color */
+main .color1, main .color2 {
+    margin-top: 20px;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+/* Typography */
+main a {
+    color: #ff9900;
+    text-decoration: underline;
+}
+
+main .font-example, main .header-example {
+    font-family: 'Gupter', sans-serif;
+}
+
+/* Wireframes */
+main .wireframes img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin-top: 10px;
+}
+
+@media (max-width: 768px) {
+    nav ul {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    nav li {
+        margin: 5px;
+    }
+}
diff --git a/chamber/styles/larger.css b/chamber/styles/larger.css
@@ -0,0 +1,136 @@
+/* Reset some default styles */
+body, h1, h2, p, ul {
+    margin: 0;
+    padding: 0;
+}
+
+/* Basic styling for the body */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f2f2;
+}
+
+/* Header styling */
+header {
+    background-color: #00447c;
+    color: white;
+    text-align: center;
+    padding: 20px;
+}
+
+/* Navigation menu styling */
+nav {
+    background-color: #333;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+}
+
+nav li {
+    margin: 10px;
+}
+
+nav a {
+    text-decoration: none;
+    color: white;
+    transition: color 0.3s;
+}
+
+nav a:hover {
+    color: #ff9900;
+}
+
+/* Main content styling */
+main {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Section styling */
+.intro {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.intro h2 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.membership {
+    margin-top: 20px;
+}
+
+.membership h2 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.membership ul {
+    list-style-type: disc;
+    margin-left: 20px;
+}
+
+.membership li {
+    margin: 5px 0;
+}
+
+/* Footer styling */
+footer {
+    background-color: #00447c;
+    color: white;
+    text-align: center;
+    padding: 10px;
+}
+
+/* Additional Styles */
+a.button {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #ff9900;
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+a.button:hover {
+    background-color: #ff6600;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1200px;
+    padding: 20px;
+}
+
+.image {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    display: block;
+    margin: 20px auto;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    nav ul {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    nav li {
+        margin: 5px;
+    }
+}