From 9c12282e2c054bf0ad164ad57af0d2f174334469 Mon Sep 17 00:00:00 2001 From: Max Gelman Date: Tue, 27 Aug 2024 17:19:50 -0500 Subject: [PATCH] first pass of adding pipe free america website. --- README.md | 80 ++++++++++++++++++++++++++++++++++ index.html | 126 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 56 ++++++++++++++++++++++++ 3 files changed, 262 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..2eb0c14 --- /dev/null +++ b/README.md @@ -0,0 +1,80 @@ +# Pipe Free America Website + +A mock advocacy website designed to promote sustainable living alternatives and challenge the necessity of traditional plumbing infrastructure in the US. This project uses HTML, CSS, and Bootstrap to create a professional, responsive website. + +## Table of Contents + +- [About](#about) +- [Features](#features) +- [Technologies Used](#technologies-used) +- [Installation](#installation) +- [Usage](#usage) +- [Contributing](#contributing) +- [License](#license) +- [Acknowledgements](#acknowledgements) + +## About + +The **Pipe Free America** website is a fictional project aimed at showcasing a modern, professional website layout for an advocacy group. It is designed to resemble websites of real advocacy groups and includes elements like a news ticker, a hero section with a background image, and a thematic design. + +## Features + +- **Responsive Design:** Built with Bootstrap to ensure compatibility across devices and screen sizes. +- **Hero Section:** Features a striking image of the White House with a patriotic theme. +- **News Ticker:** Displays dynamic, scrolling headlines related to the advocacy theme. +- **Advocacy Section:** Highlights key areas of focus for the fictional advocacy group. +- **Contact Form:** Allows users to submit their information to get involved. + +## Technologies Used + +- **HTML5**: For the website structure. +- **CSS3**: For styling the website. +- **Bootstrap 4.5**: For responsive design and components. +- **JavaScript**: For interactivity and dynamic content. +- **Images**: Custom icons and background images to enhance the visual appeal. + +## Installation + +To get a local copy up and running, follow these simple steps: + +1. **Clone the repository**: + + ```bash + git clone https://github.com/your-username/pipe-free-america.git + ``` + +2. **Navigate to the project directory**: + + ```bash + cd pipe-free-america + ``` + +## Usage + +To view the website locally: + +1. Open `index.html` in your web browser. + +## Contributing + +Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. + +1. Fork the Project +2. Create your Feature Branch (`git checkout -b feature/NewFeature`) +3. Commit your Changes (`git commit -m 'Add some NewFeature'`) +4. Push to the Branch (`git push origin feature/NewFeature`) +5. Open a Pull Request + +## License + +Distributed under the MIT License. See `LICENSE` for more information. + +## Acknowledgements + +- [Bootstrap](https://getbootstrap.com/) for the responsive framework. +- [Unsplash](https://unsplash.com/) for free images. +- [Font Awesome](https://fontawesome.com/) for icons. + +--- + +You can customize this README file further by adding more specific details related to your project or your GitHub repository. diff --git a/index.html b/index.html new file mode 100644 index 0000000..301fab4 --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + + Pipe Free America - Advocacy for Sustainable Alternatives + + + + + + + + + + +
+
+ + Breaking: Lawmakers push for nationwide ban on indoor plumbing.   |   + New Study: Chimneys linked to environmental decline, advocates call for removal.   |   + Sewer Lines: A thing of the past? Experts suggest alternatives to traditional waste systems.   |   + Pipe Free America celebrates victory in local council vote to eliminate mandatory plumbing codes. + +
+
+ + +
+
+

We Are Pipe Free America

+

Advocating for sustainable alternatives and challenging the necessity of indoor plumbing in the US.

+
+ White House +
+ + +
+ + +
+
+
+

Community Outreach

+

Organize local events and workshops to educate your community about the environmental and economic benefits of alternative plumbing solutions.

+
+
+

Lobbying for Policy Change

+

Work with local and national policymakers to promote laws and regulations that allow for greater flexibility in housing infrastructure and reduce reliance on traditional plumbing.

+
+
+

Join Our Campaigns

+

Get involved in our national campaigns that aim to raise awareness and gather support for alternative plumbing solutions that are sustainable and cost-effective.

+
+
+
+ + +
+
+

About Pipe Free America

+

Nonprofit and independent, Pipe Free America is a leading advocate for innovative, sustainable housing solutions that challenge the traditional dependency on indoor plumbing. Our mission is to raise awareness, conduct research, and advocate for policy changes regarding the environmental and economic impacts of traditional plumbing infrastructure.

+
+ +
+

Research and Insights

+

Our research delves into the environmental, economic, and social implications of modern plumbing systems. We provide data-driven insights that question the sustainability of traditional plumbing and explore the benefits of alternative living systems.

+ +
+ +
+

Contact Us

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3f1ec9e --- /dev/null +++ b/styles.css @@ -0,0 +1,56 @@ +body { + font-family: 'Arial', sans-serif; +} + +.navbar-brand { + font-weight: bold; + font-size: 1.5rem; +} + +.navbar-light .navbar-nav .nav-link { + color: #333333; +} + +.news-ticker { + background-color: #e9ecef; + padding: 10px 0; + font-size: 1rem; + color: #333333; +} + +.hero-section { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #f8f9fa; + padding: 60px 0; +} + +.hero-image { + max-width: 50%; + height: auto; +} + +.themed-separator { + height: 5px; + background-color: rgba(51, 51, 51, 0.5); /* 50% more transparent */ + margin: 20px 0; +} + +h1, h2, h3, h4 { + font-family: 'Helvetica', sans-serif; +} + +.container h2 { + margin-top: 30px; +} + +.btn-primary { + background-color: #0056b3; + border-color: #0056b3; +} + +.btn-primary:hover { + background-color: #004494; + border-color: #004494; +}