7. Section “Hero”

Créez maintenant la première section “À propos”, qui contiendra plus tard votre photo, votre nom, votre profession et une brève description. Pour cela, vous avez besoin d’une “section” et de plusieurs balises “div”.

Pour que vous sachiez plus tard quel élément a quel contenu et que vous puissiez les manipuler indépendamment les uns des autres, vous ajoutez une “classe” à chacune de ces balises “div”. La “section” reçoit un “id”, car elle n’apparaîtra qu’une seule fois dans le document. Vous aurez besoin de ces identifiants plus tard pour que la navigation fonctionne.

# Balisage

    <!-- Insérer à l'intérieur <main> -->
    <!-- A propos de la section -->
<section id="hero" class="flex items-centre justify-between">
	<div class="left flex-1 justify-center">
		<img src="./images/portrait.png" alt="Profile">
	</div>
	<div class="right flex-1">
		<h1>Pierre-André Vullioud</h1>
		<h2>Je suis un<br> <span>Developeur</span></h2>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque illum nam nobis, minima
			laudantium fugit sequi nostrum quod impedit, beatae necessitatibus praesentium optio labore
			nemo!</p>
		<div>
			<a href="">
				<button class="btn btn-secondary">Télécharger mon CV</button>
			</a>
		</div>
	</div>
</section>

# Première image

Dans le chapitre Démarrer, vous avez créé la structure des dossiers pour votre portefeuille. Vous devez également avoir créé un dossier “img”. Vous aurez besoin de ce dossier pour insérer des images et des icônes dans votre HTML. Pour une meilleure vue d’ensemble, vous devez diviser le dossier “img” en d’autres sous-dossiers portant le nom des zones respectives. Nous recommandons les sous-dossiers suivants pour ce portefeuille: “social”, “environ”, “expertise”, “travail”.

Une fois que vous avez créé ces dossiers, vous pouvez placer une photo de vous ou une photo de votre choix dans le dossier “about”. Dans le dossier “social”, vous pouvez placer des icônes de réseaux et de plateformes sociales où vous avez un profil.

Télécharger les icônes des médias sociaux

Nous avons sélectionné pour vous des icônes de la bonne taille pour différentes plateformes. Vous pouvez les télécharger icônes ici et les placer dans votre dossier “social”. Plus tard dans le cours, vous travaillerez également avec vos propres icônes.

Attention au droit d’auteur

N’utilisez que des médias (images, vidéos, icônes, etc.) dont vous détenez les droits d’auteur ou dont l’utilisation libre a été explicitement autorisée. Vous pouvez trouver des images gratuites sur unsplash , pixabay ou encore pexels