Biographie
Cette page est un gabarit de biographie en ligne
(page “À propos”, ”Bio”, ”Parcours”, etc.)
Cette page est un gabarit de biographie en ligne
(page “À propos”, ”Bio”, ”Parcours”, etc.)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Design graphique
Webdesign
Photographie
Les portes de l'avenir sont ouvertes à ceux qui savent les pousser
Coluche | Citations motivantes sur canva.com
Le site flaticon.com permet de collecter des icônes aux formats PNG ou SVG. Ces icônes peuvent être utilisées de manière à animer des arrières-plans. Dans ce gabarit, des icônes sont positionnées dans des divisions superposées aux éléments concernés. La taille des divisions contenant les images d'icône et la position précise des icônes sont paramétrées en fonction de l'élément parent pour ne pas déborder de cet élément.
Pour superposer l'image PNG sur la têtière (header) de cette page “Biographie”, il a fallu paramétrer le positionnement de l'élément parent en relative et celui de l'élément enfant (division contenant l'image) en absolute.
Une opacité de 30% (0.3) a été paramétrée directement sur la division concernée.
La division a été paramétrée ainsi en utilisant une classe absolute complétée par des instructions CSS inline.
L'icône a été tournée de 10 degrés en sens inverse des aiguilles d'une montre en utilisant l'instruction CSS style="transform: rotate(-10deg);", appliquée à l'image.
Le paramétrage de la hauteur maximale de l'image a été ajouté pour éviter que l'image déborde du bandeau. Les propriétés CSS suivantes on été utilisées : style="transform: rotate(-10deg); max-height: 450px;"
Une technique similaire permet de combiner une image PNG et un motif SVG.
Examinez le code source HTML et CSS de cette page pour voir comment réaliser une combinaison de texture et d'icône comme sur cet encadré.