diff --git a/chamber/chamber.html b/chamber/chamber.html new file mode 100644 index 0000000..fe5bf0c --- /dev/null +++ b/chamber/chamber.html @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + Idaho Falls Chamber + + +
+

Idaho Falls Chamber of Commerce

+
+ +
+
+

About Our Chamber

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lobortis turpis.

+
+
+

Membership Benefits

+ +
+
+ + + diff --git a/chamber/images/favicon.ico b/chamber/images/favicon.ico new file mode 100644 index 0000000..c777094 Binary files /dev/null and b/chamber/images/favicon.ico differ diff --git a/chamber/images/favicon.webp b/chamber/images/favicon.webp new file mode 100644 index 0000000..afceeb0 Binary files /dev/null and b/chamber/images/favicon.webp differ diff --git a/chamber/images/favicon_io.zip b/chamber/images/favicon_io.zip new file mode 100644 index 0000000..d58b5d0 Binary files /dev/null and b/chamber/images/favicon_io.zip differ diff --git a/chamber/scripts/responsivemenu.js b/chamber/scripts/responsivemenu.js new file mode 100644 index 0000000..74b7d8c --- /dev/null +++ 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 \ No newline at end of file diff --git a/chamber/styles/base.css b/chamber/styles/base.css new file mode 100644 index 0000000..d4993d9 --- /dev/null +++ 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 new file mode 100644 index 0000000..cb542e9 --- /dev/null +++ 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; + } +} diff --git a/chamber/styles/smaller.css b/chamber/styles/smaller.css new file mode 100644 index 0000000..7d2a01e --- /dev/null +++ b/chamber/styles/smaller.css @@ -0,0 +1,36 @@ +/* Existing CSS styles here */ + +/* Mobile menu styles */ +.mobile-menu-toggle { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 30px; + height: 3px; + background-color: #333; + margin: 3px 0; + transition: 0.4s; +} + +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; +} + +/* Add more CSS styles as needed for the mobile menu */