Welcome to Furry Friends, a fictional business landing page. This project was designed and developed to practice UI/UX design principles using Figma and then brought to life with HTML and CSS.
Here’s a preview of the Furry Friends landing page design (created in Figma):
Figma Workflow
The Furry Friends design was fully conceptualized and prototyped in Figma using reusable components, variants, auto-layout, grids for alignment, and interaction prototyping.
Design Fundamentals
- Typography: Clean, readable fonts.
- Color Scheme: Playful, cohesive palette.
- White Space: Minimal, uncluttered layout.
- Visual Hierarchy: Clear emphasis on important elements.
- Contrast: Readable, accessible text.
HTML & CSS
The landing page was built using semantic HTML and CSS with the following key techniques:
- Flexbox & CSS Grid: TFor responsive layouts.
- Transitions & Animations: Added for smooth user interactions.
- Responsive Design: Seamless across screen sizes.
- Interactive Elements: Hover states and transitions.
- Semantic HTML: Accessibility and SEO optimized.
To view the landing page in your browser, follow these steps:
- Clone the repository: git clone https://github.com/miriamsahle/furry-friends-landing.git
- Navigate into the project directory: cd Furry_Friends
- Open the index.html file in your browser.