/* Définit les variables personnalisées. Ces variables sont utiles tout au long du CSS pour une meilleure maintenabilité et cohérence. */ :root { /* Polices */ --font-geogrotesque: Geogrotesque; /* Tailles de police */ --font-size-2xs: 11px; --font-size-4xs: 9px; --font-size-8xs: 5px; /* Couleurs */ --color-white: #fff; --color-palevioletred-100: rgba(195, 107, 123, 0.62); --color-black: #000; --color-orchid-100: rgba(174, 90, 163, 0.47); --color-dimgray: #707070; --color-violet: #a88aa7; --color-rose: #d38cb6; --color-orange: #f2b194; --color-jaune: #f7ca9a; /* Border radius */ --br-xl: 20px; --br-smi: 13px; --br-mini: 15px; } /* Règles qui s'appliquent à l'élément (). Elles réinitialisent la marge, définissent la couleur de texte en noir, la couleur de fond en blanc et une hauteur de ligne normale. */ body { margin: 0; color: var(--color-black); background-color: var(--color-white); line-height: normal; } /* L'en-tête aura un arrière-plan blanc, les sections auront une hauteur minimale de 75% de la hauteur de la fenêtre et les titres (

) à l'intérieur des sections auront une taille de police de 24px et une couleur violette. / header { background-color: var(--color-white); } section { min-height: 75vh; } section h1 { font-size: 24px; color: var(--color-violet); } / Elles définissent le style des boutons, y compris la couleur de fond, la couleur du texte, le remplissage, l'alignement, la décoration de texte, l'affichage, la taille de police, les marges, le curseur et les rayons de bordure. / #BoutonFairstore, #BoutonContact { background-color: var(--color-violet); border: none; color: var(--color-white); padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 10% / 25%; } / Surcharge de class Bootstrap / / Eléments de la classe (.nav-button) : Elles définissent le style des boutons de navigation, y compris la position, la couleur de fond, la couleur du texte, l'absence de bordure, les rayons de bordure, la largeur, la hauteur, l'alignement du texte, la taille de police et le curseur. Classe (.nav-button:hover): définit le style lorsque la souris survole le bouton. / .nav-button { bottom: 10px; left: 50%; transform: translateX(-50%); background: var(--color-violet); color: var(--color-white); border: none; border-radius: 50%; width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 2rem; cursor: pointer; } .nav-button:hover { background: var(--color-rose); } / Règle qui définit les rayons de bordure avec une valeur pour créer une forme ovale irrégulière et ajoute une bordure orange. / .shaped { border-radius: 50% 20% / 10% 40%; / <- radius funky / / border-radius: 10%; / / <- radius au plus proche de la maquette / border: 0.5rem solid var(--color-orange); } #section4 img { height: 30vh; object-fit: contain; } / Style rond de toutes les icônes font awesome / / Classes (.fa) pour les icônes Font Awesome et (.social-btn) pour les boutons des réseaux sociaux. Définit le style des icônes et des boutons, la hauteur de ligne, la taille de la police, la largeur, la hauteur, l'alignement, la décoration de texte, les rayons de bordure, la couleur de fond et la transition de couleur de fond en survol. / .fa { line-height: 2em; font-size: 30px; width: 2em; height: 2em; text-align: center; text-decoration: none; border-radius: 50%; } / Icône Instagram / .social-btn { display: inline-block; width: 40px; height: 40px; background-color: var(--color-rose); color: var(--color-white); border-radius: 50%; text-align: center; line-height: 40px; transition: background-color 0.3s ease; } .social-btn:hover { background-color: var(--color-orange); / Couleur de fond en survol / } .social-btn .fab { font-size: 18px; / ajustement de la taille de l'icône / } / Règle qui définit la hauteur minimale de 40% de la hauteur de la fenêtre. / .scroll { min-height: 40vh; / scroll des pages / } .prix { font-style: 'Poppins',sans-serif; font-size: 25px; font-weight: 700; } / Règles qui définissent les dimensions maximales (hauteur et largeur) de ces éléments pour contrôler la taille des images. / #test { max-height: 290px; max-width: 290px; / height: 350px; width: 750%; / } #test1 { max-height: 290px; max-width: 290px; / height: 350px; width: 750%; / } #test2 { max-height: 250px; max-width: 250px; / height: 350px; width: 750%; */ }