RWF site rewrite in simple html

master
Dustin Swan 3 years ago
commit 9302d24a41

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1010 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

@ -0,0 +1,111 @@
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
header {
position: sticky;
top: 0;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
opacity: 0.975;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
height: 100px;
}
.container {
padding: 1em max(calc(100vw - 1200px) / 2, 1em);
}
section {
max-width: 100%;
scroll-margin-top: 100px;
}
@media (max-width: 600px) {
header { height: 130px; }
section { scroll-margin-top: 130px; }
}
section:nth-child(even) {
background: #f8f8f8;
}
.logo img {
height: 60px;
}
@media (max-width: 600px) {
.logo, nav {
margin: auto;
}
}
nav ul {
padding: 0;
list-style-type: none;
display: flex;
gap: 1.5em;
}
nav a {
text-decoration: none;
}
a {
color: #355e3b;
}
p, li {
line-height: 1.6em;
}
#home {
height: 50vh;
}
#home img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center center;
}
/* PHOTOS */
#photos {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
#photos img:not(.full) {
width: calc(25% - .75em);
min-width: 120px;
max-height: 12em;
object-fit: cover;
cursor: pointer;
border: 2px solid #355e3b;
}
#photos img.full {
position: fixed;
padding: 1em;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
z-index: 2;
object-fit: contain;
cursor: pointer;
background: rgba(0,0,0,0.8);
}
/* COLUMNS */
.columns {
display: flex;
flex-wrap: wrap;
}
.column {
width: 50%;
}
@media (max-width: 720px) {
.column {
width: 100%;
}
}
/* MAP */
#map {
width: 100%;
height: 50vh;
}

@ -0,0 +1,185 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rock Wall Farm</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header class="container">
<a class="logo" href="#home">
<img src="images/logotype.png" />
</a>
<nav>
<ul>
<li><a href="#boarding-information">Boarding</a></li>
<li><a href="#fees">Fees</a></li>
<li><a href="#bale-barns">Bale Barns</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<img src="images/barn_and_sun.jpg" />
</section>
<section class="container">
<h2>About Us</h2>
<p>Bitten by the horse bug early, Melissa began riding at age 5 while growing up in Virginia. She showed local hunter shows riding school horses and her own horse until her family moved to New Mexico prior to high school. While in high school, Melissa continued her riding education and began riding low level jumpers until she attended Purdue University. At Purdue, she completed bachelors and masters degrees in Animal Science with a focus in Animal Nutrition. During her undergrad, she also joined the newly formed polo team to continue time in the saddle. After college, though, her career took her to Chicago and horses were put on hold. During this time she met Dusty, who had no idea what he was about to get himself into! After a number of years away from horses, Melissa came back to her first love and began riding at Red Coat Farm where she was first introduced to the premier hunter/jumper world. Taking her renewed excitement back to New Mexico, she and Dusty developed 10 acres to maintain their horses Roc Hudson and Doris Day while working full-time careers. A new job opportunity found the two again on the move to update New York where the horses were boarded at area facilities for a couple of years. When the hour-long commute to the barn became too much, the two decided to purchase and open Rock Wall Farm in July 2018. This endeavor is the culmination of the most important aspects of horse care honed over years of experience as horse owner, rider, boarder, competitor, barn manager, barn owner, animal scientist and overall horse advocate.</p>
</section>
<section id="photos" class="container">
<img src="images/grazing.jpeg" />
<img src="images/stalls.jpeg" />
<img src="images/indoor.jpeg" />
<img src="images/vera_and_poppy.jpeg" />
<img src="images/foggy_barn.jpg" />
<img src="images/sunrise.jpeg" />
</section>
<section id="boarding-information" class="container">
<h2>Boarding Information</h2>
<p>Our priorities for boarders are to provide a low-stress, drama-free environment. Whether a casual or competitive equestrian, we aim to provide an environment to help you achieve your riding goals.</p>
<p>For horses, we value providing plenty of hay and as much turnout as possible with herds designed to let horses be horses, thereby providing for their mental well-being.</p>
<div class="columns">
<div class="column">
<h3>Included in Full Board</h3>
<ul>
<li>Twice a day grain feeding</li>
<li>Plentiful hay free-choice when possible</li>
<li>Nutrena SafeChoice Original, Nutrena ProForce Fuel, or Nutrena Safechoice Senior</li>
<li>Feeding of supplements once daily</li>
<li>Stall and turnout</li>
<li>Daily stall cleaning</li>
<li>Regular water bucket replacement/cleaning/disinfecting</li>
<li>Applying blankets, fly sheets, and fly masks</li>
<li>Removing overnight stable wraps</li>
<li>Use of facility: indoor arena, outdoor arena, heated lounge, tack room, wash stall with hot water, etc.</li>
<li>Open area for hacking out</li>
<li>Twice yearly fecal exams</li>
<li>Administering vet-recommended dewormers (purchased by owner)</li>
<li>Scheduling routine vet and farrier visits for prefered providers</li>
<li>No additional fee for use of outside trainers</li>
<li>Once daily medication administration if needed</li>
<li>Twice daily medication administration if needed (up to three days)</li>
<li>Once or twice daily wound care if needed (up to three days)</li>
</ul>
</div>
<div class="column">
<h3>Included in Pasture Board</h3>
<ul>
<li>Twice a day feeding</li>
<li>Plentiful hay free-choice when possible</li>
<li>Nutrena SafeChoice Original, Nutrena ProForce Fuel, or Nutrena Safechoice Senior</li>
<li>Feeding of supplements once daily</li>
<li>Runin shelter (in extreme weather, horses will temporarily be brought into indoor)</li>
<li>Regular water trough cleaning/disinfecting</li>
<li>Applying fly masks</li>
<li>Use of facility: indoor arena, outdoor arena, heated lounge, tack room, wash stall with hot water, etc.</li>
<li>Open area for hacking out</li>
<li>Scheduling routine vet and farrier visits for prefered providers</li>
<li>Twice yearly fecal exams</li>
<li>Administering vet-recommended dewormers (purchased by owner)</li>
<li>No additional fee for use of outside trainers</li>
</ul>
</div>
</div>
<i>NOTE: Services are subject to change</i>
</section>
<section id="fees" class="container">
<h2>Fee Schedule</h2>
<h3>Boarding</h3>
<ul>
<li>Full board: $550 / month ($510 + sales tax)</li>
<li>Pasture board: $400 / month ($370 + sales tax)</li>
</ul>
<h3>Feeding</h3>
<ul>
<li>Requirements outside of standard provided feed service: $30 50 per month
<ul>
<li>Including but not limited to pre-soaking grain, pellets, beet pulp, soaking hay, additional grain and/or hay meal, second daily supplements, etc.</li>
</ul>
</li>
<li>Grain in excess of 6 quarts per day: $25 per month per each additional 2 quarts daily</li>
</ul>
<h3>Facility Use</h3>
<ul>
<li>Lessons
<ul>
<li>Boarders: No charge</li>
<li>Non-boarders: 15% of lesson fee</li>
</ul>
</li>
<li>Haul-in fee for no more than 3 hours on site: $20</li>
<li>Use of RWF-leased or owned horse
<ul>
<li>Lesson: $20 per lesson (in lieu of lesson fee if applicable)</li>
<li>Non-lesson: $15 no more than 2 mounted hours</li>
</ul>
</li>
<li>Other general use of facility by non-boarders or students: $15 per day</li>
<li>Non-riding guest or guest of boarders riding no more than once a month: no charge</li>
</ul>
</section>
<section id="bale-barns" class="container">
<h2>Bale Barns</h2>
<p>In our first winter, we knew we wanted the horses to have access to as close to free-choice hay as possible. The easiest solution was to put out round bales. However, as anyone who has fed round bales before knows, the horses quickly demolished the bales by spreading the hay everywhere, using it as a bedroom, bathroom and seemingly doing everything to it except eat it. Thats when we researched options to help save hay wastage. The first week we had the Bale Barns, our hay wastage dropped from about 50% to less than 10%. The hay stayed where it was supposed to and we were moving bales way less often. Our Bale Barns are still in use through the summer to help horses adjust from hay to fresh grass and to always provide roughage. Our Bale Barns are in the same shape as day 1 so we couldnt be happier!</p>
<p>When we couldnt find a distributor close to the area, we hopped on the opportunity to provide these in the Capital District and Hudson Valley region. Since we are a working farm, sales are by appointment only.</p>
<p>Please <a href="#contact">contact</a> us for availability. For more information on the benefits of Bale Barns please visit <a target="_blank" href="https://balebarns.com">balebarns.com</a>.</p>
</section>
<section id="contact" class="container">
<div class="columns">
<div class="column">
<h2>Contact Info</h2>
<h4>
<a target="_blank" href="https://www.google.com/maps/place/273+Clove+Rd,+Castleton-On-Hudson,+NY+12033/@42.503563,-73.7198043,18z/data=!4m13!1m7!3m6!1s0x89dde5b4d00979c5:0xc2c90d0c60685557!2s273+Clove+Rd,+Castleton-On-Hudson,+NY+12033!3b1!8m2!3d42.505741!4d-73.720637!3m4!1s0x89dde5b4d00979c5:0xc2c90d0c60685557!8m2!3d42.505741!4d-73.720637?hl=en-US">273 Clove Rd, Castleton-on-Hudson NY</a>
</h4>
<h4>
<a href="tel:5187325284">518 732 5284</a>
</h4>
<h4>
<a href="mailto:info@rockwall-farm.com">info@rockwall-farm.com</a>
</h4>
</div>
<div class="column">
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2941.3325262228227!2d-73.7228256845391!3d42.505740979177325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89dde5b4d00979c5%3A0xc2c90d0c60685557!2s273%20Clove%20Rd%2C%20Castleton-On-Hudson%2C%20NY%2012033!5e0!3m2!1sen!2sus!4v1610254292176!5m2!1sen!2sus" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</section>
<script>
const FULL = 'full';
[...document.querySelectorAll('#photos img')].forEach((photo) =>
photo.addEventListener('click', (e) => e.target.classList.toggle(FULL))
);
document.addEventListener('keyup', (e) => {
const img = document.querySelector('#photos img.full');
img?.classList.toggle(FULL);
e.key === 'ArrowRight' && img?.nextElementSibling?.classList.toggle(FULL);
e.key === 'ArrowLeft' && img?.previousElementSibling?.classList.toggle(FULL);
});
</script>
</body>
</html>
Loading…
Cancel
Save