Boutique en ligne de vente de clés dématérialisées de jeux vidéo
Projet e-commerce réalisé dans le cadre de la première année à SUPINFO - HTML/CSS uniquement.
✦ ━━━━━━━━━━━━━━━ ✦ ━━━━━━━━━━━━━━━ ✦
Dans le cadre du premier projet à SUPINFO, PixelKeys est une plateforme de vente de clés de jeux vidéo dématérialisées, similaire à Instant-Gaming. Ce site e-commerce complet a été développé individuellement en HTML et CSS, en mettant l'accent sur la qualité du code, le design visuel et l'accessibilité.
- Concevoir un site web complet (HTML + CSS)
- Respecter les critères d'accessibilité RGAA
- Créer un design responsive (Mobile, Tablette, Desktop)
- Optimiser la qualité et la clarté du code
✦ ━━━━━━━━━━━━━━━ ✦ ━━━━━━━━━━━━━━━ ✦
- Barre de navigation fonctionnelle
- Section "Catégories" avec catégories mises en avant
- Produits mis en avant
- Nom de la catégorie de produits
- Grille de prévisualisation comprenant : · Image du produit · Nom du produit · Prix du produit
- Liens vers les pages produits
- Au moins 3 images par produit
- Titre du produit
- Description complète
- Caractéristiques du produit
- Boîte d'achat (En stock, acheter, etc.)
- Section "Produits recommandés"
- Formulaire de contact fonctionnel
- Site responsive pour Mobile, Tablettes et Desktop
- Respect des critères d'accessibilité RGAA
- Aucun lien mort sur le site
✦ ━━━━━━━━━━━━━━━ ✦ ━━━━━━━━━━━━━━━ ✦
Le site est entièrement responsive et testé sur plusieurs formats :
· Format smartphone (1px à 800px de largeur)
→ testé sur iPhone 14 Pro MAX (depuis Brave), avec une résolution de 430px x 932px
· Format tablette (800px à 1200px de largeur)
→ testé sur iPad Air (depuis Brave), avec une résolution de 820px x 1180px
· Format desktop (1200px à ♾️px de largeur)
→ testé depuis Brave
✦ ━━━━━━━━━━━━━━━ ✦ ━━━━━━━━━━━━━━━ ✦
· index.html
· categories.html
· checkout-market.html
· panier.html
· support.html
· trending.html
· upcoming.html
· /categories/
· adventure.html
· sport.html
· story.html
· survival.html
· /games/
· ClairObscur.html
· Cyberpunk 2077.html
· Elden Ring.html
· F1 25.html
· GTA6.html
· Mafia.html
· Minecraft.html
· Subnautica.html
· TLOU-PART1.html
✦ ━━━━━━━━━━━━━━━ ✦ ━━━━━━━━━━━━━━━ ✦
· /categories/
· categorieDetailsPage.css
· categories.css
· categoriesPage.css
· contact.css
· footer.css
· header.css
· index.css
· panier.css
· productPage.css
· style.css
· trending.css
· upcoming.css
· variables.css
✦ ━━━━━━━━━━━━━━━ ✦ ━━━━━━━━━━━━━━━ ✦
· Afin d'illustrer les pages du site, des assets sont utilisés et sont tous présents dans le dossier /assets/
✦ ━━━━━━━━━━━━━━━ ✦ ━━━━━━━━━━━━━━━ ✦
· trending.html, qui est une page mettant en avant les produits tendances
· upcoming.html, qui est une page se présentant sous la forme d'une timeline,
avec un délimiteur pour mettre en avant les produits bientôt disponibles
· checkout-market.html, qui est une page de confirmation d'ajout d'un produit
au panier de l'utilisateur
· panier.html, qui est une page de visualisation d'un exemple de panier
· Les onglets du site sont tous personnalisés, avec le logo du site
─────────────── ✦ PixelKeys ✦ ───────────────