Skip to content

Issue12 #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Issue12 #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c55484
new headerTemplate.js with header & navbar code
mmt456 Dec 5, 2024
9226e37
new footerTemplate.js with footer code
mmt456 Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 5 additions & 84 deletions aboutUs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,56 +9,13 @@
<script src="bootstrap-5.0.1-dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="style.css">

<script src="js/headerTemplate.js" type="text/javascript" defer></script>
<script src="js/footerTemplate.js" type="text/javascript" defer></script>
</head>

<body>
<!--nav bar with header and tabs-->
<!-- nave bar should have click able drop downs-->
<header>
<a href = "index.html">
<img class = "img-logo" src = "assets/logo.png" alt = "Local Connectivity Lab Logo">
</a>
<h1>
<a id = "landing-link" href = "index.html"> Seattle Community Network </a>
</h1>
</header>

<!--NAV BAR CODE-->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="aboutUs.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ourSites.html">Get Connected</a>
</li>
<li class="nav-item">
<a class = "nav-link" href="https://coverage.seattlecommunitynetwork.org/">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/community/space/">Visit Our Space</a>
</li>
<li class="nav-item">
<a class="nav-link" href="donate.html">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://seattlecommunitynetwork.square.site/">Merch!</a>
</li>
</ul>
</div>
</div>
</nav>
<!--nav bar with header and tabs-->
<header-component></header-component>

<!-- "About Us" Section-->
<div class = "section-min-sizer">
Expand Down Expand Up @@ -168,43 +125,7 @@ <h2> Follow us on social media! </h2>
</button></a>
</div>
<!-- FOOTER -->
<div class = "footer">
<div class = "flex-container">
<div class = "flex-item-left">
<h3> Address </h3>
<p class = "footer-text">
3800 E Stevens Way NE, Seattle, WA 98195
<br>
[email protected]
</p>
<a href = "https://www.instagram.com/seattlecommnet/"><img class = "logo" src = "assets/IG_icon_circle.png" alt = "Instagram logo"></a>
<a href = "https://twitter.com/SeattleCommNet"><img class = "logo" src = "assets/twitter_icon_circle.png" alt = "twitter logo"></a>
<a href = "https://www.facebook.com/SeattleCommNet"><img class = "logo" src = "assets/facebook_icon_circle.png" alt = "Facebook logo"></a>
<br><br>
</div>

<div class = "flex-item-left">
<h3> Mission </h3>
<p class = "footer-text">
To facilitate community focused technology development and
research in support of low-income, marginalized populations
and groups.
</p>
</div>

<div class = "flex-item-left">
<div class = "flex-item-left">
<button onclick="location.href='https://discord.gg/gn4DKF83bP'" id = "subscribe-button">
&nbsp; Join our Discord &nbsp;
</button>
<br><br>
<button onclick="location.href='https://groups.google.com/a/seattlecommunitynetwork.org/g/local-connectivity-lab/'" id = "subscribe-button">
Subscribe to Mailing List
</button>
</div>
</div>
</div>
</div>s
<footer-component></footer-component>
</body>

</html>
95 changes: 7 additions & 88 deletions donate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,58 +21,15 @@
<script src="js/bootstrap.js"></script>

<script src="js/donate.js"></script>

<script src="js/headerTemplate.js" type="text/javascript" defer></script>
<script src="js/footerTemplate.js" type="text/javascript" defer></script>

</head>

<body>
<!--nav bar with header and tabs-->
<!-- nave bar should have click able drop downs-->

<header>
<a href = "index.html">
<img class = "img-logo" src = "assets/logo.png" alt = "Local Connectivity Lab Logo">
</a>
<h1>
<a id = "landing-link" href = "index.html"> Seattle Community Network </a>
</h1>
</header>

<!--NAV BAR CODE-->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ourSites.html">Get Connected</a>
</li>
<li class="nav-item">
<a class = "nav-link" href="https://coverage.seattlecommunitynetwork.org/">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/community/space/">Visit Our Space</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="donate.html">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://seattlecommunitynetwork.square.site/">Merch!</a>
</li>
</ul>
</div>
</div>
</nav>

<!--nav bar with header and tabs-->
<header-component></header-component>

<div class = "donate-tan flex-container">
<img class = "flex-wave"src = "assets/upsidedown wave.png" alt = "wave graphic upside down">
Expand Down Expand Up @@ -179,44 +136,6 @@ <h3>Donate with Paypal</h3>
-->

<!-- FOOTER -->
<div class = "footer">
<div class = "flex-container">
<div class = "flex-item-left">
<h3> Address </h3>
<p class = "footer-text">
3800 E Stevens Way NE, Seattle, WA 98195
<br>
[email protected]
</p>
<a href = "https://www.instagram.com/seattlecommnet/"><img class = "logo" src = "assets/IG_icon_circle.png" alt = "Instagram logo"></a>
<a href = "https://twitter.com/SeattleCommNet"><img class = "logo" src = "assets/twitter_icon_circle.png" alt = "twitter logo"></a>
<a href = "https://www.facebook.com/SeattleCommNet"><img class = "logo" src = "assets/facebook_icon_circle.png" alt = "Facebook logo"></a>
<br><br>
</div>

<div class = "flex-item-left">
<h3> Mission </h3>
<p class = "footer-text">
To facilitate community focused technology development and
research in support of low-income, marginalized populations
and groups.
</p>
</div>

<div class = "flex-item-left">
<div class = "flex-item-left">
<button onclick="location.href='https://discord.gg/gn4DKF83bP'" id = "subscribe-button">
&nbsp; Join our Discord &nbsp;
</button>
<br><br>
<button onclick="location.href='https://groups.google.com/a/seattlecommunitynetwork.org/g/local-connectivity-lab/'" id = "subscribe-button">
Subscribe to Mailing List
</button>
</div>
</div>
</div>
</div>


<footer-component></footer-component>
</body>
</html>
95 changes: 7 additions & 88 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,59 +8,17 @@
<link rel="stylesheet" href="bootstrap-5.0.1-dist/css/bootstrap.css">
<script src="bootstrap-5.0.1-dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="style.css">

<script src="js/headerTemplate.js" type="text/javascript" defer></script>
<script src="js/footerTemplate.js" type="text/javascript" defer></script>

</head>

<body>
<!--nav bar with header and tabs-->
<!-- nave bar should have click able drop downs-->
<header>
<a href="index.html">
<img class="img-logo" src="assets/logo.png" alt="Local Connectivity Lab Logo">
</a>
<h1>
<a id="landing-link" href="index.html"> Seattle Community Network </a>
</h1>
</header>

<!--NAV BAR CODE-->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutUs.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ourSites.html">Get Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://coverage.seattlecommunitynetwork.org/">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.seattlecommunitynetwork.org/community/space/">Visit Our Space</a>
</li>
<li class="nav-item">
<a class="nav-link" href="donate.html">Donate</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://seattlecommunitynetwork.square.site/">Merch!</a>
</li>
<!--dropdown-->
</ul>
</div>
</div>
</nav>

<header-component></header-component>

<!-- BANNER -->
<!--
<div class = "wave-container">
Expand Down Expand Up @@ -247,46 +205,7 @@ <h2> Our Partners </h2>
</div>

<!-- FOOTER -->
<div class="footer">
<div class="flex-container">
<div class="flex-item-left">
<h3> Address </h3>
<p class="footer-text">
3800 E Stevens Way NE, Seattle, WA 98195
<br>
[email protected]
</p>
<a href="https://www.instagram.com/seattlecommnet/"><img class="logo" src="assets/IG_icon_circle.png"
alt="Instagram logo"></a>
<a href="https://twitter.com/SeattleCommNet"><img class="logo" src="assets/twitter_icon_circle.png"
alt="twitter logo"></a>
<a href="https://www.facebook.com/SeattleCommNet"><img class="logo" src="assets/facebook_icon_circle.png"
alt="Facebook logo"></a>
<br><br>
</div>

<div class="flex-item-left">
<h3> Mission </h3>
<p class="footer-text">
To facilitate community focused technology development and
research in support of low-income, marginalized populations
and groups.
</p>
</div>

<div class="flex-item-left">
<button onclick="location.href='https://discord.gg/gn4DKF83bP'" id="subscribe-button">
&nbsp; Join our Discord server &nbsp;
</button>
<br><br>
<button
onclick="location.href='https://groups.google.com/a/seattlecommunitynetwork.org/g/local-connectivity-lab/'"
id="subscribe-button">
Subscribe to Mailing List
</button>
</div>
</div>
</div>
<footer-component></footer-component>
</body>

</html>
57 changes: 57 additions & 0 deletions js/footerTemplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
class Footer extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.innerHTML = `
<script src="bootstrap-5.0.1-dist/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="style.css">

<div class="footer">
<div class="flex-container">
<div class="flex-item-left">
<h3> Address </h3>
<p class="footer-text">
3800 E Stevens Way NE, Seattle, WA 98195
<br>
[email protected]
</p>
<a href="https://www.instagram.com/seattlecommnet/"><img class="logo" src="assets/IG_icon_circle.png"
alt="Instagram logo"></a>
<a href="https://twitter.com/SeattleCommNet"><img class="logo" src="assets/twitter_icon_circle.png"
alt="twitter logo"></a>
<a href="https://www.facebook.com/SeattleCommNet"><img class="logo" src="assets/facebook_icon_circle.png"
alt="Facebook logo"></a>
<br><br>
</div>

<div class="flex-item-left">
<h3> Mission </h3>
<p class="footer-text">
To facilitate community focused technology development and
research in support of low-income, marginalized populations
and groups.
</p>
</div>

<div class="flex-item-left">
<button onclick="location.href='https://discord.gg/gn4DKF83bP'" id="subscribe-button">
&nbsp; Join our Discord server &nbsp;
</button>
<br><br>
<button
onclick="location.href='https://groups.google.com/a/seattlecommunitynetwork.org/g/local-connectivity-lab/'"
id="subscribe-button">
Subscribe to Mailing List
</button>
</div>
</div>
</div>

`;
}
}

customElements.define('footer-component', Footer);

Loading