# TechShop Template **Template de magazine technologique premium** Auteur : [BuyMyTemplates](https://BuyMyTemplates.dev) • Version 1.0 • 2026 --- ## Structure du Projet ``` TechShop/ ├── index.html ← Page d'accueil (home, héro, actus) ├── categories.html ← Catégories & filtres ├── article.html ← Page article ├── reviews.html ← Reviews & hardware lab ├── videos.html ← Hub vidéo / média ├── about.html ← À propos & équipe ├── contact.html ← Contact & newsletter ├── LICENCE.txt ← Licence d'utilisation (Standard) ├── LISEZ-MOI.md ← Ce fichier └── assets/ ├── styles.css ← Styles partagés (variables, helpers) ├── js/ │ └── customizer.js ← Customizer thème (palette / police) └── img/ └── *.svg / *.png ← Images & captures ``` --- ## Technologies Utilisées | Technologie | Usage | |---|---| | **HTML5** | Structure sémantique des pages | | **Tailwind CSS (CDN)** | Classes utilitaires et responsive | | **Outfit** | Police principale (Google Fonts) | | **Material Symbols** | Icônes (Google Fonts) | | **JavaScript** | Customizer de thème | --- ## Personnalisation du Design ### Couleurs Principales La couleur principale est définie via une variable CSS dans `assets/styles.css` : ```css :root { --primary: #b67a3c; } ``` Les pages utilisent ensuite `var(--primary)` dans la config Tailwind (ex. `about.html`) : ```html "primary": "var(--primary)" ``` ### Police de Caractères La police par défaut est **Outfit**. Pour la changer : 1. Modifiez `--font-display` dans `assets/styles.css` 2. Ajoutez l'import Google Fonts dans le `` de chaque page 3. La variable est déjà référencée dans Tailwind : ```html "display": ["var(--font-display)", "sans-serif"] ``` ### Icônes Le template utilise **Material Symbols Outlined**. Pour changer une icône, modifiez le contenu du `` : ```html search ``` --- ## Modifier le Contenu - **Textes** : modifiez directement le HTML. - **Images** : remplacez les URLs dans `src` ou `style="background-image: url(...)"`. - **Liens** : mettez à jour les `href` des balises ``. --- ## Ajouter une Nouvelle Page 1. Dupliquez un fichier HTML existant. 2. Conservez : - Le `` (imports, config Tailwind) - Le `

` (navigation) - Le `