Exercice 1
Créer une carte de profil personnelle
Objectif :
Créer une carte de profil personnelle de base en utilisant
HTML et CSS. Cette carte affichera la photo, le nom, une courte biographie et
les coordonnées d'une personne. L'objectif est de pratiquer la structure HTML
et le style CSS pour la mise en page et la conception.
Instructions :
Structure HTML :
- Créez un fichier HTML (index.html).
- À l'intérieur de <body>, créez un élément div avec une classe de profile-card.
- À l'intérieur de la profile-card, incluez les éléments suivants :
- Une image avec une classe de profile-pic.
- Un titre (par exemple, <h2>) pour le nom de la personne.
- Un paragraphe (par exemple, <p>) pour la biographie.
- Une liste non ordonnée (<ul>) pour les coordonnées, avec des éléments de liste (<li>) pour l'e-mail et le numéro de téléphone.
Style CSS :
- Créez un fichier CSS (style.css).
- Liez ce fichier CSS à votre document HTML à l'aide de la balise <link> dans <head>.
- Donnez un style à la carte de profil pour qu'elle ait :
- Une largeur maximale de 300 px.
- Une couleur d'arrière-plan de votre choix (par exemple, gris clair).
- Un peu de remplissage (padding) (par exemple, 20 px) et des coins arrondis (par exemple, 10 px).
- Centrez la carte sur la page à l'aide de la marge automatique.
- Donnez un style à la photo de profil :
- Faites-en un cercle.
- Ajoutez une bordure autour.
- Définissez une taille spécifique (par exemple, 150 px x 150 px).
- Donnez un style au nom (<h2>) pour qu'il soit en gras et que la taille de police soit plus grande.
- Donnez un style à la bio pour qu'elle ait un style de police différent (par exemple, en italique) et une taille de police plus petite.
- Donnez un style à la liste de contacts pour :
- Supprimer les puces.
- Ajoutez un peu d'espacement entre les éléments.
- Donnez un style aux liens sans soulignement et avec un effet de survol.
****************************************
Exercice 2:
Créer une barre de navigation simple
Objectif :
Apprenez à créer une barre de navigation réactive à l'aide
de HTML et de CSS. L'objectif est de vous entraîner à structurer un menu de
navigation et à le styliser pour qu'il ait un aspect professionnel.
Instructions :
Structure HTML :
- Créez un fichier HTML (index.html).
- À l'intérieur du <body>, créez un élément nav.
- À l'intérieur du nav, créez une liste non ordonnée (<ul>).
- À l'intérieur de la liste, créez 5 éléments de liste (<li>) avec des liens (<a>) qui représentent différentes sections d'un site Web :
- Accueil
- À propos
- Services
- Portfolio
- Contact
Style CSS :
- Créez un fichier CSS (style.css).
- Liez ce fichier CSS à votre document HTML à l'aide de la balise <link> dans le <head>.
- Stylez l'élément nav pour qu'il ait :
- Une couleur d'arrière-plan de votre choix (par exemple, bleu foncé ou noir).
- Remplissage (padding) pour donner à la barre de navigation une certaine hauteur (par exemple, 10 px).
- Stylisez l'ul de la manière suivante :
- Supprimez les puces et le remplissage des éléments de liste.
- Affichez les éléments de liste horizontalement (à l'aide de display: inline-block ou flexbox).
- Stylez les éléments li et a :
- Espacez les liens horizontalement (par exemple, en utilisant margin ou padding).
- Réglez la couleur du texte sur blanc.
- Ajoutez un effet de survol pour modifier la couleur d'arrière-plan ou souligner les liens lorsqu'ils sont survolés.
- Assurez-vous que les liens occupent toute la hauteur de la barre de navigation.
- Conception réactive :
- Faites en sorte que les éléments de la liste s'empilent verticalement au lieu d'horizontalement.
- Centrez les liens sur les écrans plus petits.
Aucun commentaire:
Enregistrer un commentaire