About Us

Okay, I can help you set up the HTML and CSS structure for an "About Us" page inspired by the Pinch of Yum 'About' page, including a simple scroll animation effect. About Us

Welcome!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Our Philosophy

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.

Meet the Team

Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede.

Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales.

Get In Touch

Want to collaborate or just say hi? We'd love to hear from you!

/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Lato', sans-serif; line-height: 1.6; color: #333; background-color: #fdfdfd; overflow-x: hidden; /* Prevent horizontal scroll */ } /* Typography */ h1, h2, h3 { font-weight: 700; margin-bottom: 1rem; color: #222; } h1 { font-size: 2.5rem; text-align: center; } h2 { font-size: 2rem; } p { margin-bottom: 1rem; color: #555; font-weight: 300; } a { color: #e67e22; /* Example orange color */ text-decoration: none; } a:hover { text-decoration: underline; } .handwritten { font-family: 'Pacifico', cursive; font-weight: 400; font-size: 2.8rem; color: #e67e22; /* Example orange color */ margin-bottom: 1.5rem; } /* Layout */ .site-header { background-color: #f8f8f8; padding: 3rem 1rem; border-bottom: 1px solid #eee; margin-bottom: 3rem; } .site-content { max-width: 800px; margin: 0 auto; padding: 0 1rem; } .content-section { margin-bottom: 4rem; padding: 2rem 0; border-bottom: 1px solid #eee; } .content-section:last-child { border-bottom: none; margin-bottom: 2rem; } .text-center { text-align: center; } .section-image { max-width: 100%; height: auto; display: block; margin: 0 auto 2rem auto; border-radius: 5px; } .cta-button { display: inline-block; background-color: #e67e22; color: #fff; padding: 0.8rem 1.5rem; border-radius: 5px; text-decoration: none; font-weight: 700; transition: background-color 0.3s ease; } .cta-button:hover { background-color: #d35400; text-decoration: none; } .site-footer { text-align: center; padding: 2rem 1rem; margin-top: 3rem; background-color: #f8f8f8; border-top: 1px solid #eee; font-size: 0.9rem; color: #777; } /* Scroll Animation */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 600px) { h1 { font-size: 2rem; } h2 { font-size: 1.8rem; } .handwritten { font-size: 2.2rem; } .site-content { padding: 0 0.5rem; } .content-section { padding: 1rem 0; margin-bottom: 3rem; } } const animatedElements = document.querySelectorAll('.animate-on-scroll'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); // Optional: Unobserve after animation to save resources // observer.unobserve(entry.target); } else { // Optional: Remove class if you want animation to repeat on scroll up/down // entry.target.classList.remove('is-visible'); } }); }, { threshold: 0.1 // Trigger when 10% of the element is visible }); animatedElements.forEach(element => { observer.observe(element); }); This sets up the basic HTML structure, applies CSS for layout and typography inspired by the reference site (using Google Fonts for similar styles), and includes a simple JavaScript snippet using `IntersectionObserver` to add a class (`is-visible`) to sections when they scroll into view. The CSS then handles the fade-in and slide-up animation.