13 Section Expertise

Continuez avec votre portfolio. Ensuite, créez la section Services. Cela devrait donner aux visiteurs de votre site un bref aperçu de vos trois compétences et intérêts principaux. Pour chaque expertise (compétence), vous avez besoin d'une icône appropriée, d'un titre et d'un texte court.

⚒️Tâches de recherche d'icônes

Pour cette section, on ne vous donne pas d'icônes ou on ne vous en fournit pas. Réfléchissez brièvement aux compétences que vous souhaitez présenter, puis recherchez sur Internet les icônes SVG qui conviennent. Vous apprendrez plus tard dans le chapitre Graphismes, images et vidéos pourquoi le SVG est un format graphique particulièrement adapté.

Trouver des icônes gratuites sur Internet

• iconmonster

• freeicons.io

• simpleicons.org

• Nom du projet

• icons8

• flaticon

⚠️ Attention aux droits d'auteur

Comme pour les images, il en va de même ici: Faites attention aux conditions d'utilisation lorsque vous intégrez des icônes. La plupart des icônes des liens indiqués ci-dessus peuvent être utilisées sans restriction et sans nommer les auteurs. Toutefois, certaines exigent que vous mentionniez la source sur votre site web.

Vous pouvez bien sûr dessiner vos propres icônes dans Illustrator si cela vous convient. Une fois que vous avez les trois icônes, placez-les dans le dossier img/expertise.

⚒️ Expertise Markup Task

Retournez maintenant à votre fichier index.html et ajoutez le code suivant après la balise de fermeture </section> de la section About.

    <!-- Insérer après la section À propos, à l'intérieur de <main> -->
    <section id="services">
	    <div class="container">
		    <h2 class="services-head">Mes services</h2>
		    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, eligendi tempore. Eaque veniam
			    impedit quis alias, sint culpa maxime animi quibusdam necessitatibus sit ex porro architecto! Unde
			    animi corrupti fugit.</p>
		    <div class="card-grid">
			    <div class="card">
				    <img src="./images/cisor.svg">
				    <h2>Graphic Desgin</h2>
				    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
			    </div>
			    <div class="card">
				    <img src="./images/pen.svg">
				    <h2>Web Development</h2>
				    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
			    </div>
			    <div class="card">
				    <img src="./images/valise.svg">
				    <h2>Content Writing</h2>
				    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, debitis?</p>
			    </div>
		    </div>
	    </div>
    </section>

Remplacer les chemins d'accès aux fichiers par des icônes

Assurez-vous de vérifier les chemins d'accès aux icônes dans votre code. Ils ne correspondront probablement pas à notre exemple ici, puisque vous avez utilisé des icônes personnalisées avec des noms personnalisés.

Comme vous pouvez le voir, il n'y a pratiquement pas de nouveaux tags utilisés ici. Il y a encore une section qui englobe toute la section, quelques balises div, des sous-titres de quatrième niveau h4, des balises p pour afficher les paragraphes de texte et enfin la balise img pour les images. Vous avez déjà utilisé toutes ces choses dans la section à propos.

Expertise Styles Task

En plus du HTML/markup, vous avez besoin de CSS/styles pour que tout soit comme vous le souhaitez. Ouvrez votre fichier style.css et ajoutez le code suivant à la fin.

/*services section*/
#services {
	background: rgb(17, 17, 17)
}

.services-head {
	color: rgb(10, 9, 9);
	text-align: center;
	margin-bottom: 1rem;
	line-height: 0.5rem;
	color: var(--primary);
}

.services-head+p {
	color: var(--white);
	font-family: 'Lato', sans-serif;
	margin-bottom: 1rem;
	text-align: center;
	margin-bottom: 6rem;
	font-weight: 400;
}

.card img {
	width: 3rem;
	background: white;
}

#services .card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 3 colonnes de largeur égale */
	column-gap: 2rem;
	/* espace entre les colonnes */
}

#services .card-grid .card {
	background: var(--white);
	padding: 3rem 2rem;
	position: relative;
	text-align: center;
	transition: all .2s ease;
}

#services .card-grid .card img {
	position: absolute;
	top: -1.5rem;
	left: 50%;
	transform: translateX(-50%);
	color: var();
}

#services .card-grid .card h2 {
	font-weight: 600;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

#services .card-grid .card p {
	font-family: 'Lato', sans-serif;
	color: var(--seconday);
	line-height: 1.6;
}

#services .card-grid .card:hover {
	background: var(--primary);
}

#services .card-grid .card:hover h2 {
	color: var(--white);
}

#services .card-grid .card:hover p {
	color: var(--white);
}

📣 Relever les défis

• #4 SVG Color (Changez la couleur de vos SVG au survol)

• #5 SVG Mask (Masquer une image avec le SVG)

• #6 SVG Animation (Animer le chemin d'une icône SVG).