Untitled

index.html

<canvas></canvas>

<div class="fixed-header">
  <h1 class="header-text">Bruce Family Farms</h1>
  <div class="fixed-footer">
    <p>
      <a href="#">Home</a> | 
      <a href="#">About</a> | 
      <a href="#">Contact</a> | 
      <a href="#">Privacy</a>
    </p>
  </div>
</div>

<div class="container">
  <img src="https://i5.walmartimages.com/seo/Fresh-Navel-Orange-Each_a134f2a1-2bb0-4e5c-a594-f84b63ab5928.22241f295458186b2ba0e4ed7d460d52.jpeg?odnHeight=640&odnWidth=640&odnBg=FFFFFF" class="orange small-image"/>

  <p class="text-block">
   Oranges are one of the most popular and widely consumed fruits in the world, known for their vibrant color, refreshing flavor, and high vitamin C content. Belonging to the citrus family, oranges are typically grown in warm climates and harvested in abundance across countries like the United States, Brazil, and Spain. Their sweet, tangy juice and easy-to-peel skin make them a convenient and healthy snack enjoyed by people of all ages.

Beyond being a tasty treat, oranges offer a wide array of nutritional benefits. They are packed with antioxidants, fiber, potassium, and essential nutrients that support immune function, heart health, and skin vitality. The natural sugars in oranges provide a quick energy boost, while their high water content helps keep the body hydrated. Whether eaten whole, juiced, or used as a zest or flavoring, oranges are a versatile ingredient in both sweet and savory dishes.
    
    1. History and Origin
Oranges are believed to have originated in Southeast Asia, particularly in regions of southern China, India, and Vietnam. They have been cultivated for thousands of years, with evidence suggesting that oranges were grown as early as 2500 BC. The fruit gradually spread westward through trade routes and exploration, eventually reaching the Mediterranean and Europe. Today, oranges are grown worldwide, thriving in warm climates and becoming one of the most popular fruits globally.

2. Cultivation and Varieties
Orange trees require a subtropical to tropical climate with plenty of sunshine and well-drained soil. Major orange-producing countries include Brazil, the United States (especially Florida and California), Spain, and Mexico. There are several varieties of oranges, each with unique characteristics. The most common types include Navel oranges, prized for their seedless sweetness; Valencia oranges, famous for juicing; and Blood oranges, known for their distinctive reddish flesh and tart flavor.

3. Nutritional Benefits
Oranges are renowned for their rich vitamin C content, which supports the immune system and helps the body fight infections. They are also a good source of dietary fiber, potassium, and antioxidants, which contribute to heart health, digestive health, and skin vitality. Oranges contain natural sugars and water, making them a hydrating and energizing snack option. Their low calorie count combined with nutrient density makes them a popular choice for health-conscious individuals.

4. Cultural Significance
Throughout history, oranges have held symbolic meanings in many cultures. In Chinese culture, oranges symbolize good luck and prosperity, often exchanged during Lunar New Year celebrations. In Mediterranean countries, orange blossoms are associated with purity and fertility, making them a traditional element in wedding ceremonies. Oranges also feature prominently in art, literature, and folklore, celebrated for their vibrant color and refreshing scent.
  </p>
<p class="text-block"> In agriculture, orange farming plays a crucial role in many local economies and food supply chains. Farmers carefully manage irrigation, pest control, and harvesting techniques to ensure a high yield and quality fruit. Popular varieties include Navel, Valencia, and Blood Oranges, each with unique characteristics in flavor, texture, and best use. From orchards to grocery stores, the journey of an orange reflects a combination of natural growth and human care, making it a staple in diets around the globe.
  
Oranges also have deep cultural and symbolic significance around the world. In many Asian cultures, they are considered symbols of luck, prosperity, and happiness—often exchanged during festivals like Lunar New Year. In the Mediterranean, oranges are woven into local traditions and festivals, celebrating both the harvest and the beauty of the orange blossom. Their vibrant hue and refreshing scent have made them a source of artistic inspiration and a staple in natural fragrances.

From a sustainability perspective, orange farming is evolving with the help of modern techniques. Growers are adopting eco-friendly practices such as drip irrigation, organic pest control, and crop rotation to reduce environmental impact and increase efficiency. Additionally, parts of the orange that were once discarded—like peels and pulp—are now being repurposed for use in essential oils, cleaning products, and even biofuels. This makes the orange not only a nutritional powerhouse, but also a fruit with growing environmental and economic importance.

5. Culinary Uses
Oranges are versatile in the kitchen, used in both sweet and savory dishes. The juice is a staple in beverages, from fresh-squeezed drinks to cocktails. Zest from the peel adds flavor to baked goods, sauces, and marinades. Orange segments can be eaten fresh or incorporated into salads and desserts. Beyond food, orange peels are also used to create essential oils, natural cleaners, and fragrant products.

6. Sustainability and Innovation
Modern orange farming is embracing sustainable practices to reduce environmental impact. Techniques like drip irrigation, organic pest control, and integrated crop management help conserve water and minimize chemical use. Additionally, byproducts such as orange peels and pulp are increasingly repurposed for biofuels, animal feed, and eco-friendly products. These innovations ensure that orange cultivation can continue to thrive while protecting natural resources and supporting local economies.



  </p>
  <p> All Credits of this website go to 
    </p>
  <p> Jake Bogart,
</p><p> Jake Bogart,
</p><p> and, Jake Bogart
</p></div>

<div class="image-footer">
  <img src="https://i.pinimg.com/736x/2b/d7/05/2bd705d2edd56ddf319e7cea7b942e8d.jpg" alt="Footer image" class="footer-image">
</div>

script.js

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
//set up

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = document.documentElement.scrollHeight;
}
//full page size
resizeCanvas();
window.addEventListener('resize', () => {
  resizeCanvas();
  initializeCircles();
});
//command runs when resize happens
const radius = 10;
const speed = 2;
const numCircles = 7;
//circle stats
let circles = [];
//start
function getMiddleYPosition() {
  const blocks = document.querySelectorAll('.text-block');
  if (blocks.length < 2) {
    return canvas.height / 2;
  }

  const scrollY = window.scrollY || document.documentElement.scrollTop;
  const rect1 = blocks[0].getBoundingClientRect();
  const rect2 = blocks[1].getBoundingClientRect();

  const bottom1 = rect1.bottom + scrollY;
  const top2 = rect2.top + scrollY;

  return (bottom1 + top2) / 2;
}
//end, gets vert position

function initializeCircles() {
  const y = getMiddleYPosition();
  circles = [];

  const horizontalSpacing = canvas.width / numCircles;

  for (let i = 0; i < numCircles; i++) {
    circles.push({
      x: horizontalSpacing * i + horizontalSpacing / 2,
      y: y
    });
  }
}

initializeCircles();
//start animation
function cycle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Keep y updated in case of scroll/layout changes
  const y = getMiddleYPosition();
  for (let circle of circles) {
    circle.y = y;
  }

  circles.forEach(circle => {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, radius, 0, Math.PI * 2);
    ctx.fillStyle = "orange";
    ctx.fill();

    circle.x -= speed;

    if (circle.x < -radius) {
      const rightmostX = Math.max(...circles.map(c => c.x));
      circle.x = rightmostX + (canvas.width / numCircles);
    }
  });

  requestAnimationFrame(cycle);
}

cycle();

style.css

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  text-align: center;
  color: black;
  min-height: 100vh;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 10px 0;
  z-index: 1000;
  border-bottom: 2px solid black;
}

.header-text {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px black, -1px -1px 2px black,
               1px -1px 2px black, -1px 1px 2px black;
}

.container {
  width: 600px;
  margin: 0 auto;
  padding-top: 90px;
}

.small-image {
  width: 250px;
  height: auto;
}

.orange {
  animation: spin 240s linear infinite;
  border-radius: 50%;
  transition: border-radius 0.2s;
}

img:not(.orange) {
  animation: none;
  border-radius: 0;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(9800deg);
  }
}


img {
  animation: spin 240s linear infinite;
  /*     animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate; */
  transition: border-radius 0.2s;
  border-radius: 50%;
}

.text-block {
  background-color: #fee;
  border-radius: 20px;
  padding: 15px;
  margin-top: 25px;
}

.image-footer {
  position: relative; /*base position*/
  width: 100%;
  height: 200px;
  background-color: #fff;
  box-sizing: border-box; /* this makes it so that basically the height and width effect everything not just image footer also its padding and stuff*/
  margin-top: 40px;
}

.footer-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /*fits aspect ratio*/
}

untitled.markdown

Untitled

A Pen by MiniSlowFall on CodePen.

License.