Skip to content

Commit

Permalink
first pass of adding pipe free america website.
Browse files Browse the repository at this point in the history
  • Loading branch information
Max Gelman committed Aug 27, 2024
0 parents commit 9c12282
Show file tree
Hide file tree
Showing 3 changed files with 262 additions and 0 deletions.
80 changes: 80 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
126 changes: 126 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!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>Pipe Free America - Advocacy for Sustainable Alternatives</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="styles.css" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Pipe Free America</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#advocacy">Advocacy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#research">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<button class="btn btn-outline-primary ml-2">Act Now</button>
</li>
<li class="nav-item">
<button class="btn btn-primary ml-2">Donate</button>
</li>
</ul>
</div>
</div>
</nav>

<!-- Fake News Ticker -->
<div class="news-ticker">
<div class="container">
<marquee behavior="scroll" direction="left" scrollamount="8">
Breaking: Lawmakers push for nationwide ban on indoor plumbing. &nbsp;&nbsp;|&nbsp;&nbsp;
New Study: Chimneys linked to environmental decline, advocates call for removal. &nbsp;&nbsp;|&nbsp;&nbsp;
Sewer Lines: A thing of the past? Experts suggest alternatives to traditional waste systems. &nbsp;&nbsp;|&nbsp;&nbsp;
Pipe Free America celebrates victory in local council vote to eliminate mandatory plumbing codes.
</marquee>
</div>
</div>

<!-- Hero Section -->
<div class="hero-section d-flex align-items-center">
<div class="container text-left">
<h1 class="display-4 font-weight-bold">We Are Pipe Free America</h1>
<p class="lead">Advocating for sustainable alternatives and challenging the necessity of indoor plumbing in the US.</p>
</div>
<img src="hero-image-placeholder.jpg" alt="White House" class="hero-image img-fluid">
</div>

<!-- Themed Separator -->
<div class="themed-separator"></div>

<!-- Advocacy Section -->
<div class="container mt-5 text-center" id="advocacy">
<div class="row">
<div class="col-md-4">
<h4>Community Outreach</h4>
<p>Organize local events and workshops to educate your community about the environmental and economic benefits of alternative plumbing solutions.</p>
</div>
<div class="col-md-4">
<h4>Lobbying for Policy Change</h4>
<p>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.</p>
</div>
<div class="col-md-4">
<h4>Join Our Campaigns</h4>
<p>Get involved in our national campaigns that aim to raise awareness and gather support for alternative plumbing solutions that are sustainable and cost-effective.</p>
</div>
</div>
</div>

<!-- Main Content -->
<div class="container mt-5">
<div id="about" class="p-5">
<h2>About Pipe Free America</h2>
<p>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.</p>
</div>

<div id="research" class="my-5">
<h2>Research and Insights</h2>
<p>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.</p>
<button class="btn btn-primary">Explore Our Research</button>
</div>

<div id="contact" class="my-5">
<h2>Contact Us</h2>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="3" placeholder="Your message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>

<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
56 changes: 56 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 9c12282

Please sign in to comment.