https://github.com/fatihycan/product-card
https://github.com/fatihycan/product-card
css3 font-awesome google-fonts html5 media-queries responsive-web-design
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fatihycan/product-card
- Owner: FatihYcan
- Created: 2024-07-29T13:58:23.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-11T13:50:49.000Z (9 months ago)
- Last Synced: 2025-01-16T04:26:32.929Z (4 months ago)
- Topics: css3, font-awesome, google-fonts, html5, media-queries, responsive-web-design
- Language: CSS
- Homepage: https://fatihycan.github.io/Product-Card/
- Size: 207 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product Card
This project is an example of a product board designed to accommodate different screen sizes. The design presents a card showing the features and price of a product and includes style changes for various screen widths.
## Project Features
- **Responsive Design**: Automatically adapts to screen width.
- **Media Queries**: Style and layout changes based on different device sizes.
- **Font Awesome Usage**: Font Awesome library is used for icons.
- **Use of Google Fonts**: Poppins from Google Fonts was used for fonts.
## Technologies
- HTML5
- CSS3
- Media Query
- Font Awesome
- Google Fonts
# Product Card
Bu proje, bir ürün kartının farklı ekran boyutlarına uyum sağlayacak şekilde tasarlanmış bir örneğidir. Tasarım, bir ürünün özelliklerini ve fiyatını gösteren bir kart sunar ve çeşitli ekran genişliklerine göre stil değişiklikleri içerir.
## Proje Özellikleri
- **Duyarlı Tasarım**: Ekran genişliğine göre otomatik olarak uyum sağlar.
- **Medya Sorguları**: Farklı cihaz boyutlarına göre stil ve düzen değişiklikleri.
- **Font Awesome Kullanımı**: İkonlar için Font Awesome kütüphanesi kullanılmıştır.
- **Google Fonts Kullanımı**: Yazı tipleri için Google Fonts'tan Poppins kullanılmıştır.
## Teknolojiler
- HTML5
- CSS3
- Medya Query
- Font Awesome
- Google Fonts
https://github.com/user-attachments/assets/b43c715f-31ce-494d-b21a-0542fab6500d
[Canlı Demo'yu Deneyin](https://fatihycan.github.io/Product-Card/)