TP 4 - Introduction au CSS

Consignes de Travail

Copiez le code HTML fourni ci-dessous en cliquant sur le bouton "Copier le code"
Créez un nouveau fichier nommé exercice-css.html sur votre ordinateur
Collez le code copié dans ce fichier et sauvegardez-le
Complétez les propriétés CSS manquantes selon les commentaires présents dans le code
Ouvrez régulièrement le fichier dans votre navigateur pour visualiser vos modifications
Assurez-vous que le rendu final correspond aux spécifications demandées

Résultat attendu : Une carte de profil centrée sur la page, avec une mise en forme professionnelle incluant une photo circulaire, des textes stylisés et un bouton interactif.

Code Source de l'Exercice

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice CSS - Carte de Profil</title>
    <style>
        /* PARTIE 1 : Style global de la page */
        body {
            /* À compléter : 
               - Couleur de fond : #f0f0f0
               - Police : Arial, sans-serif
               - Centrer le contenu avec margin
            */
        }

        /* PARTIE 2 : Style de la carte */
        .carte-profil {
            /* À compléter :
               - Largeur : 300px
               - Couleur de fond : blanc
               - Bordure : 1px solid #ddd
               - Arrondir les coins : 10px
               - Ombre : 0 2px 8px rgba(0,0,0,0.1)
               - Centrer avec margin auto
               - Padding : 20px
            */
        }

        /* PARTIE 3 : Style de l'image */
        .photo-profil {
            /* À compléter :
               - Largeur : 100px
               - Hauteur : 100px
               - Arrondir complètement (cercle)
               - Bordure : 3px solid #3498db
               - Centrer l'image (display: block, margin auto)
            */
        }

        /* PARTIE 4 : Style du nom */
        .nom {
            /* À compléter :
               - Centrer le texte
               - Couleur : #2c3e50
               - Taille : 24px
               - Margin top et bottom
            */
        }

        /* PARTIE 5 : Style du titre */
        .titre {
            /* À compléter :
               - Centrer le texte
               - Couleur : #7f8c8d
               - Taille : 16px
               - Style italique
            */
        }

        /* PARTIE 6 : Style de la description */
        .description {
            /* À compléter :
               - Couleur : #34495e
               - Taille : 14px
               - Hauteur de ligne : 1.6
               - Margin top : 15px
               - Alignement : justifié
            */
        }

        /* PARTIE 7 : Style du bouton */
        .bouton-contact {
            /* À compléter :
               - Display : block
               - Couleur de fond : #3498db
               - Couleur du texte : blanc
               - Padding : 10px 20px
               - Bordure : aucune
               - Arrondir : 5px
               - Centrer : margin auto
               - Width : fit-content
               - Cursor : pointer
               - Margin top : 20px
            */
        }

        /* BONUS : Effet au survol */
        .bouton-contact:hover {
            /* À compléter :
               - Couleur de fond plus foncée : #2980b9
            */
        }
    </style>
</head>
<body>
    <div class="carte-profil">
        <img src="https://via.placeholder.com/100" alt="Photo de profil" class="photo-profil">
        <h2 class="nom">Marie Dupont</h2>
        <p class="titre">Développeuse Web</p>
        <p class="description">
            Passionnée par le développement front-end et le design d'interfaces utilisateur. 
            Spécialisée en HTML, CSS et JavaScript.
        </p>
        <button class="bouton-contact">Me Contacter</button>
    </div>
</body>
</html>

TP 4 : Introduction au CSS

Consignes de Travail

Code Source de l'Exercice