🚗 CSS Cards – Toyota Motors Edition

Welcome to CSS Cards – Toyota Motors Edition, a modern front-end showcase featuring responsive, brand-themed card components built with semantic HTML5 and CSS3. This project is a tribute to the sleek design language of Toyota Motors, combining clean layout, elegant typography, and rich imagery to deliver a visually compelling user interface.

---

🧰 Technologies Used

• HTML5 – Semantic structure for accessibility and SEO
• CSS3 – Flexbox, box shadows, border-radius, and responsive styling
• Web Fonts – Helvetica Neue via CDN for a premium, automotive-inspired look
• Image Formats – .jpg, .png, .svg, and .webp for optimized performance and clarity

---

📦 Project Structure

├── index.html
├── style.css
├── /images
│   ├── card_01.jpg
│   ├── card_2.png
│   ├── card_03.webp
│   ├── background.svg
├── linelogo.svg

---

🖼️ Card Highlights

Each card is designed to reflect a unique aspect of Toyota’s brand and offerings:

🔧 Card 01 – Genuine Parts & Accessories

• Background: card_01.jpg
• Theme: Seasonal promotion for Toyota lifestyle products
• CTA: “Shop Now” button

🛒 Card 02 – SmartPath Online Buying

• Background: card_2.png
• Theme: Digital car buying experience
• CTA: “Learn More” button

💳 Card 03 – Toyota Rewards Visa Signature

• Image: card_03.webp
• Theme: Credit card benefits and rewards
• CTA: “Learn More” button
  (Note: typo in HTML – currently says "Learm More")

---

🎨 Design Features

• Responsive layout using Flexbox
• Clean, readable typography with Helvetica Neue
• Semantic HTML structure (<header>, <main>, <footer>)
• Brand elements like Toyota logo and footer graphics
• Interactive buttons and visual hierarchy

---

🛠️ How to Use

1. Clone the repository

   git clone https://github.com/Aashir-Shaikh/CSS-Cards-Toyota.git
   cd CSS-Cards-Toyota

2. Open index.html in your browser

3. Customize

   • Replace images in /images with your own
   • Modify text content and button actions
   • Tweak styles in style.css to match your brand or theme

---

🚀 Live Demo

Want to see it in action?
👉 Click here to view the live demo

---

🤝 Contributing

Pull requests are welcome! If you’d like to add new card templates, improve responsiveness, or enhance accessibility, feel free to fork and submit your ideas.