website refresh

This commit is contained in:
Gary 2026-03-14 00:12:25 -07:00
parent 8953659370
commit 8123a8578f
19 changed files with 319 additions and 200 deletions

BIN
assets/BACKGROUND.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 KiB

BIN
assets/WEB HEADER 1.3.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

BIN
assets/ap-collective1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/aprilmills1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
assets/carltompkins.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
assets/details.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/horse-riding.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
assets/marcusroe.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
assets/mg1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
assets/mg2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
assets/pettingzoo.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

BIN
assets/shilohechologo.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/tony1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/web-header.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

BIN
assets/william-toll1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -42,7 +42,6 @@ main {
.flex-column {
-webkit-flex: 100%;
flex: 100%;
-webkit-flex-direction: row;
flex-direction: column;
display: -webkit-flex;
display: flex;
@ -70,6 +69,11 @@ main {
justify-content: space-evenly;
padding: 10px;
}
.flex-row-header {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.min-flex {
position: fixed;
bottom: 0;
@ -153,12 +157,24 @@ video {
background-color: #212b38;
transition: box-shadow 0.2s, -webkit-box-shadow 0.2s;
}
.bg-alt {
background: #43786b;
}
.container {
display: flex;
flex-wrap: wrap;
}
.column1 {
flex: 1;
padding: 1rem;
}
footer {
color: var(--text-color);
background-color: #43786b;
text-align: center;
padding: 1rem;
margin-bottom: 90px;
-webkit-flex: 1;
flex: 1;
display: -webkit-flex;
@ -180,7 +196,7 @@ h2 {
text-align: center;
position: relative;
z-index: 1;
font-size: 5rem;
font-size: 4vw;
font-weight: 100;
}
h3,
@ -189,11 +205,11 @@ h4 {
text-align: center;
position: relative;
z-index: 1;
font-size: 2rem;
font-size: 2vw;
font-weight: 100;
}
.header-large {
font-size: 3rem;
font-size: 5vw;
}
p,
ul,
@ -207,6 +223,7 @@ cite {
max-width: 1000px;
margin: 15px;
line-height: 35px;
font-size: 1vw;
}
.break-all {
@ -232,6 +249,9 @@ a {
.page-link:hover {
color: #45e3ff;
}
.lighter {
color: #90776f;
}
.header {
font-size: larger;
@ -311,14 +331,20 @@ a {
width: 55px;
height: 55px;
}
.bg-img {
background: url("/assets/last_hour_hosting_logo_blue.png") center/cover
no-repeat;
height: 300px;
color: #fff;
text-align: center;
padding: 20px;
background: url("/assets/BACKGROUND.webp") center no-repeat;
width: 100%;
display: flex;
flex-direction: column;
height: 800px;
align-items: center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-vid {
position: relative;
overflow: hidden;
@ -348,6 +374,7 @@ a {
z-index: -1;
filter: blur(7px);
}
/* Styles for the navigation bar */
.nav-bar {
display: flex;
@ -421,7 +448,21 @@ a {
.hievents-widget {
width: 100%;
}
.shadow {
box-shadow: 6.4px 12.8px 12.8px hsl(0deg 0% 0% / 0.3);
}
.italic {
font-style: italic;
}
.bold {
font-weight: 900;
}
.thin {
font-weight: 100;
}
.underline {
text-decoration: underline;
}
.card {
max-width: 300px;
text-align: center;
@ -439,7 +480,7 @@ div.card > a {
color: black;
}
div.card > img {
border-radius: 35px;
border-radius: 35px 5px 5px 5px;
}
.responsive-iframe {
@ -467,6 +508,9 @@ div.card > img {
padding: 5px;
}
.bg-img {
height: 50%;
}
.menu {
display: none; /* hide the menu on mobile */
position: absolute;
@ -499,7 +543,8 @@ div.card > img {
}
.flex-column {
padding: 10px 5px;
padding: 0px;
margin: 0px;
}
h1,
h2 {
@ -510,7 +555,6 @@ div.card > img {
font-size: 2rem;
font-weight: 400;
word-break: break-word;
padding: 5px;
}
h3 {
font-size: 1.5rem;
@ -543,4 +587,8 @@ div.card > img {
.p-button {
display: none;
}
.column1 {
width: 100%;
flex: none;
}
}

View File

@ -52,7 +52,7 @@
</head>
<body>
<header id="header"></header>
<header id="header" class="shadow"></header>
<main>
<div class="min-flex">
@ -71,72 +71,122 @@
});
</script>
</div>
<div class="flex-column bg-vid">
<div>
<h1 class="white">3-Day Christian Family Retreat in Idaho!</h1>
<div class="flex-row">
<h3 class="white">
North Idaho's annual 3-day Christian family retreat featuring fun
talks, tons of outdoor activities, and live music!
</h3>
</div>
<h3 class="white">SEPTEMBER 11-13TH</h3>
<h3 class="white">At Boulder Creek Retreat</h3>
<div class="flex-row">
<a
class="p-button"
target="_blank"
role="button"
href="https://app.hi.events/event/6507/3-day-christian-family-event-concert-in-idaho-shiloh-echo-26"
>Get Tickets</a
>
</div>
</div>
<video autoplay loop muted poster="/assets/bcr.jpg">
<source src="s" type="video/webm" />
</video>
<div class="bg-img">
<img
src="./assets/shiloh-echo-2026-header.webp"
style="max-height: 100%; max-width: 100%"
/>
</div>
<div class="container">
<div class="column1">
<div>
<h1 class="">
3-Day <span class="bold">Christian Family Retreat</span> in
<span class="italic">Idaho!</span>
</h1>
<h3 class="lighter bold">SEPTEMBER 11-13TH, 2026</h3>
<h3 class="lighter">Boulder Creek Retreat, Bonners Ferry, ID</h3>
<div class="flex-row">
<h3 class="lighter">
North Idaho's annual
<span class="bold">3-day Christian family retreat</span>
featuring <span class="bold">fun talks</span>, tons of
<span class="bold">outdoor activities</span>, and
<span class="bold">live music!</span>
</h3>
</div>
<div id="about" class="flex-column">
<h2>LIVE MUSIC</h2>
<h3>Encouraging Daily Praise & Worship by:</h3>
<div class="flex-row">
<div class="card">
<img src="./assets/Apcollective.webp" style="width: 100%" />
<h3>AP Collective</h3>
<p class="title">
Folk/Pop Duo | A couple vanlifers making music 🚐
</p>
<a
target="_blank"
href="https://www.instagram.com/apcollectivemusic/"
><i class="fa-brands fa-instagram"></i
></a>
<a target="_blank" href="https://linktr.ee/apcollectivetheband"
><i class="fa-solid fa-link"></i
></a>
</div>
<div class="card">
<img src="./assets/william-toll.webp" style="width: 100%" />
<h3>William Toll</h3>
<p class="title">Folk Singer | Folk songs for the true flock</p>
<a
target="_blank"
href="https://www.instagram.com/williamtollmusic/"
><i class="fa-brands fa-instagram"></i
></a>
<a target="_blank" href="https://linktr.ee/williamtoll"
><i class="fa-solid fa-link"></i
></a>
<div class="flex-row">
<a
class="p-button"
target="_blank"
role="button"
href="https://app.hi.events/event/6507/3-day-christian-family-event-concert-in-idaho-shiloh-echo-26"
>Get Tickets</a
>
</div>
</div>
</div>
<p>
Don't miss this affordable opportunity to worship alongside these
upcoming artists
</p>
<h3>Secure Your Spot Today!</h3>
<div class="column1">
<div>
<h3>Watch This!</h3>
<div class="flex-row">
<iframe
class="rumble"
width="100%"
height="500"
src="https://rumble.com/embed/v72225a/?pub=3xx9jx"
frameborder="0"
allowfullscreen
></iframe>
</div>
</div>
</div>
</div>
<div>
<p>Brought to you by:</p>
<div class="flex-row">
<a
href="https://uschristianchamber.com/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/us-christian-chamber-logo.png" height="100px"
/></a>
<a
href="https://www.azurestandard.com/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/azure-lockup-stack-tag-rgb.jpg" height="100px"
/></a>
<a
href="https://loreroasters.com/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/lore-coffee.webp" height="100px"
/></a>
<a href="https://9b.news/" target="_blank" rel="noopener noreferrer"
><img src="./assets/9b-logo.webp" height="100px"
/></a>
<a
href="https://shilohcode.com/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/shiloh-logo-white-1.png" height="50px"
/></a>
<a
href="https://lasthourhosting.org/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/last_hour_hosting_logo_blue.png" height="50px"
/></a>
</div>
<div class="flex-row"></div>
</div>
<div id="details" class="bg-vid flex-column">
<h2 class="white">Location</h2>
<img
src="./assets/Bouldercreekretreatoptimized.webp"
alt="boulder creek retreat logo"
width="20%"
/>
<div>
<p class="white">
100+ Acre Boulder Creek Retreat | 372 Denali Ln, Bonners Ferry,
Idaho, 83805
</p>
</div>
<video
autoplay
loop
muted
poster="https://lasthourcloud.b-cdn.net/echo/coalition-background.png"
>
<source
src="https://lasthourcloud.b-cdn.net/echo26/bouldercreekretreatshort.webm"
type="video/webm"
/>
</video>
<a
class="p-button"
target="_blank"
@ -144,16 +194,99 @@
href="https://app.hi.events/event/6507/3-day-christian-family-event-concert-in-idaho-shiloh-echo-26"
>Get Tickets</a
>
</div>
<div id="about" class="flex-column bg-alt">
<h2 class="white italic">LIVE MUSIC</h2>
<h3 class="white">
Encouraging Daily <span class="bold">Praise & Worship</span> by:
</h3>
<div class="flex-row">
<div>
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/oFJYHkopZWM?si=VNHWSv7Ni3Jv2bYw"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div>
<div class="card">
<img src="./assets/william-toll1.webp" style="width: 109%" />
<h3 class="white">William Toll</h3>
<p class="white">Folk Singer | Folk songs for the true flock</p>
<a
target="_blank"
href="https://www.instagram.com/williamtollmusic/"
><i class="fa-brands fa-instagram"></i
></a>
<a target="_blank" href="https://linktr.ee/williamtoll"
><i class="fa-solid fa-link"></i
></a>
</div>
</div>
<h2>SPEAKERS</h2>
<h3>Get Equipped. Be Encouraged. Find Community.</h3>
<div>
<div class="card">
<img src="./assets/ap-collective1.webp" style="width: 100%" />
<h3 class="white">AP Collective</h3>
<p class="white">
Folk/Pop Duo | A couple vanlifers making music 🚐
</p>
<a
target="_blank"
href="https://www.instagram.com/apcollectivemusic/"
><i class="fa-brands fa-instagram"></i
></a>
<a target="_blank" href="https://linktr.ee/apcollectivetheband"
><i class="fa-solid fa-link"></i
></a>
</div>
</div>
<div>
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/q6elG6IvtjU?si=vLF5l5DLDmmLWR8L"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
</div>
<h3 class="white">
Don't miss this affordable opportunity to worship alongside these
upcoming artists
</h3>
<h2 class="white bold">Secure Your Spot Today!</h2>
<a
class="p-button"
target="_blank"
role="button"
href="https://app.hi.events/event/6507/3-day-christian-family-event-concert-in-idaho-shiloh-echo-26"
>Get Tickets</a
>
</div>
<div class="flex-column">
<h2 class="italic">FUN TALKS</h2>
<h3 class="lighter">
Get <span class="bold">Equipped</span>. Be
<span class="bold">Encouraged</span>. Find
<span class="bold">Community</span>.
</h3>
<p>
Shiloh Echo 2026 Features Family Friendly Topics from Christian
Experts on Privacy, Freedom, Off-Grid Homesteading, & Simple Living.
</p>
<div class="flex-row">
<div class="card">
<img src="./assets/drmarcus.webp" style="width: 100%" />
<img src="./assets/marcusroe.webp" style="width: 100%" />
<h3>Dr. Marcus Roe</h3>
<p class="title">
Host of "Touch Grass", Author, Computer Scientist, Teacher, &
@ -164,7 +297,8 @@
></a>
</div>
<div class="card">
<img src="./assets/tony.webp" style="width: 100%" />
<img src="./assets/tony1.webp" style="width: 100%" />
<h3>Tony</h3>
<p class="title">
Co-founder, CEO Shiloh Code. Bachelor of Science. Tech therapist.
@ -177,7 +311,7 @@
<div class="card">
<img
src="./assets/aprilmills.webp"
src="./assets/aprilmills1.webp"
alt="John"
style="width: 100%"
/>
@ -192,10 +326,8 @@
><i class="fa-solid fa-link"></i
></a>
</div>
</div>
<div class="flex-row">
<div class="card">
<img src="./assets/drmichael.webp" style="width: 100%" />
<img src="./assets/drmichaellehmann.webp" style="width: 100%" />
<h3>Dr. Michael Lehman, ND</h3>
<p class="title">
Naturopathic Doctor specializing in Lyme, Mold, Chronic
@ -209,7 +341,7 @@
></a>
</div>
<div class="card">
<img src="./assets/carl.webp" style="width: 100%" />
<img src="./assets/carltompkins.webp" style="width: 100%" />
<h3>Carl Tompkins</h3>
<p class="title">
Author & Founder of the non-profit ministry "The Way of Business".
@ -222,16 +354,30 @@
</div>
<div class="card">
<img src="./assets/anon.webp" style="width: 100%" />
<h3>TBA</h3>
<img src="./assets/mg1.webp" style="width: 100%" />
<h3>Mystery Guest 1</h3>
<p class="title"></p>
</div>
<div class="card">
<img src="./assets/mg2.webp" style="width: 100%" />
<h3>Mystery Guest 2</h3>
<p class="title"></p>
</div>
</div>
<h2>FOOD & FUN</h2>
<h3>FRESH LOCAL FOOD. 11 Outdoor Activities</h3>
</div>
<div class="flex-column">
<h2>
<span class="underline">FOOD</span> &
<span class="bold">OUTDOORS</span>
</h2>
<h3 class="lighter">
<span class="italic">FRESH</span> LOCAL FOOD.
<span class="italic">12 OUTDOOR ACTIVITIES</span>
</h3>
<p>
Enjoy Locally Sourced Food and Over 11 Outdoor Activities Across 100+
Acres over 3 Unforgettable Days
Enjoy Locally Sourced Food While You Stay! Explore over 13 Outdoor
Activities Across 100+ Acres over 3 Unforgettable Days
</p>
<div class="flex-row">
<div class="card">
@ -265,13 +411,21 @@
Enjoy this inspiring evening fireworks show up close!
</p>
</div>
</div>
<div class="flex-row">
<div class="card">
<img src="./assets/canoe.webp" style="width: 100%" />
<h3>Canoeing</h3>
<p class="title"></p>
</div>
<div class="card">
<img src="./assets/pettingzoo.webp" style="width: 100%" />
<h3>Petting Zoo</h3>
<p class="title"></p>
</div>
<div class="card">
<img src="./assets/horse-riding.webp" style="width: 100%" />
<h3>Horse Back Riding</h3>
<p class="title"></p>
</div>
<div class="card">
<img src="./assets/hiking.webp" style="width: 100%" />
<h3>Hiking</h3>
@ -282,8 +436,6 @@
<h3>Swimming</h3>
<p class="title"></p>
</div>
</div>
<div class="flex-row">
<div class="card">
<img src="./assets/fishing.webp" style="width: 100%" />
<h3>Fishing</h3>
@ -299,8 +451,6 @@
<h3>Volleyball</h3>
<p class="title"></p>
</div>
</div>
<div class="flex-row">
<div class="card">
<img src="./assets/pickleball.webp" style="width: 100%" />
<h3>Pickleball</h3>
@ -318,84 +468,6 @@
</div>
</div>
</div>
<div id="about" class="flex-column">
<div>
<h2>Sponsors:</h2>
<div class="flex-row">
<a
href="https://uschristianchamber.com/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/us-christian-chamber-logo.png" height="200px"
/></a>
<a
href="https://www.azurestandard.com/"
target="_blank"
rel="noopener noreferrer"
><img
src="./assets/azure-lockup-stack-tag-rgb.jpg"
height="150px"
/></a>
<a
href="https://loreroasters.com/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/lore-coffee.webp" height="150px"
/></a>
<a
href="https://shilohcode.com/"
target="_blank"
rel="noopener noreferrer"
><img src="./assets/shiloh-logo-white-1.png" height="70px"
/></a>
<a
href="https://lasthourhosting.org/"
target="_blank"
rel="noopener noreferrer"
><img
src="./assets/last_hour_hosting_logo_blue.png"
height="50px"
/></a>
<a href="https://9b.news/" target="_blank" rel="noopener noreferrer"
><img src="./assets/9b-logo.webp" height="150px"
/></a>
</div>
</div>
</div>
<div id="details" class="bg-vid flex-column">
<h2 class="white">Location</h2>
<img
src="./assets/Bouldercreekretreatoptimized.webp"
alt="boulder creek retreat logo"
width="30%"
/>
<div>
<p class="white">
100+ Acre Boulder Creek Retreat | 372 Denali Ln, Bonners Ferry,
Idaho, 83805
</p>
</div>
<video
autoplay
loop
muted
poster="https://lasthourcloud.b-cdn.net/echo/coalition-background.png"
>
<source
src="https://lasthourcloud.b-cdn.net/echo26/bouldercreekretreatshort.webm"
type="video/webm"
/>
</video>
<a
class="p-button"
target="_blank"
role="button"
href="https://app.hi.events/event/6507/3-day-christian-family-event-concert-in-idaho-shiloh-echo-26"
>Get Tickets</a
>
</div>
<div id="schedule" class="flex-column">
<div>
<h2>About</h2>
@ -436,31 +508,30 @@
</ul>
</div>
</div>
<h2>Last Year</h2>
<iframe
class="rumble"
width="100%"
height="360"
src="https://rumble.com/embed/v72225a/?pub=3xx9jx"
frameborder="0"
allowfullscreen
></iframe>
<div class="flex-column">
<h2>Event Map</h2>
<iframe
width="100%"
height="350"
src="https://www.openstreetmap.org/export/embed.html?bbox=-116.23447716236116%2C48.662933161005576%2C-116.23318970203401%2C48.665976618923416&amp;layer=mapnik&amp;marker=48.66445420002481%2C-116.233833"
style="border: 1px solid black"
></iframe
><br /><small
><a
href="https://www.openstreetmap.org/?mlat=48.664454&amp;mlon=-116.233833#map=19/48.664454/-116.233833"
>View Larger Map</a
></small
>
<img src="./assets/BCR-activities-map.avif" alt="Map" width="100%" />
<div class="container">
<div class="column1">
<iframe
width="100%"
height="350"
src="https://www.openstreetmap.org/export/embed.html?bbox=-116.23447716236116%2C48.662933161005576%2C-116.23318970203401%2C48.665976618923416&amp;layer=mapnik&amp;marker=48.66445420002481%2C-116.233833"
style="border: 1px solid black"
></iframe
><br /><small
><a
href="https://www.openstreetmap.org/?mlat=48.664454&amp;mlon=-116.233833#map=19/48.664454/-116.233833"
>View Larger Map</a
></small
>
</div>
<div class="column1">
<img
src="./assets/BCR-activities-map.avif"
style="max-height: 100%; max-width: 90%"
/>
</div>
</div>
</div>
<div class="flex-column">
<h2>FAQ</h2>
@ -511,7 +582,7 @@
<div>
<h2>Contact</h2>
<div class="flex-row">
<div class="flex-container">
<div class="flex-row">
<a
class="button-4"
role="button"