Répertoire de Contacts - Design Moderne

Bootstrap Contact Card Repertoire Html
Répertoire Bootstrap de cartes contact avec avatar, nom, pays et informations de contact (téléphone, email).
👁️ Aperçu
💻 Code source
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="copyright" content="MEZGANI Said" />
    <meta name="author" content="AngularForAll" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Répertoire de Contacts | Design Moderne | AngularForAll</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            padding: 50px 0;
        }

        .section-title {
            font-weight: 700;
            color: #1a1f36;
            margin-bottom: 40px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Card Style */
        .contact-card {
            border: none;
            border-radius: 15px;
            background: #fff;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            overflow: hidden;
            height: 100%;
        }

        .contact-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.1);
        }

        /* Avatar */
        .avatar-container {
            padding-top: 30px;
            display: flex;
            justify-content: center;
        }

        .contact-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #f8f9fa;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* Content */
        .contact-name {
            font-weight: 700;
            font-size: 1.2rem;
            color: #1a1f36;
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .contact-country {
            font-size: 0.85rem;
            color: #697386;
            font-weight: 600;
            text-transform: uppercase;
            display: block;
            margin-bottom: 20px;
        }

        .contact-info-list {
            background-color: #f8f9fa;
            padding: 20px;
            border-top: 1px solid #edf2f7;
        }

        .info-item {
            font-size: 0.9rem;
            color: #3c4257;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .info-item:last-child {
            margin-bottom: 0;
        }

        .info-item i {
            width: 25px;
            color: #4f46e5; /* Bleu indigo moderne */
            font-size: 1rem;
        }

        .info-item a {
            color: #3c4257;
            text-decoration: none;
            transition: color 0.2s;
        }

        .info-item a:hover {
            color: #4f46e5;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="text-center">
            <h2 class="section-title">Nos Contacts</h2>
        </div>

        <div class="row">
            
            <!-- Contact 1 -->
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="contact-card text-center">
                    <div class="avatar-container">
                        <img src="public/avatar.png" class="contact-avatar" alt="Photo de Jean Dupont">
                    </div>
                    <div class="p-3">
                        <h3 class="contact-name">Jean Dupont</h3>
                        <span class="contact-country"><i class="fas fa-map-marker-alt mr-1"></i> France</span>
                    </div>
                    <div class="contact-info-list text-left">
                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <a href="tel:+33123456789">+33 1 23 45 67 89</a>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:jean.dupont@email.com">jean.dupont@email.com</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact 2 -->
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="contact-card text-center">
                    <div class="avatar-container">
                        <img src="public/avatar.png" class="contact-avatar" alt="Photo de Sarah Smith">
                    </div>
                    <div class="p-3">
                        <h3 class="contact-name">Sarah Smith</h3>
                        <span class="contact-country"><i class="fas fa-map-marker-alt mr-1"></i> Canada</span>
                    </div>
                    <div class="contact-info-list text-left">
                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <a href="tel:+15149998877">+1 514 999 8877</a>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:s.smith@provider.ca">s.smith@provider.ca</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact 3 -->
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="contact-card text-center">
                    <div class="avatar-container">
                        <img src="public/avatar.png" class="contact-avatar" alt="Photo de Marc Lopez">
                    </div>
                    <div class="p-3">
                        <h3 class="contact-name">Marc Lopez</h3>
                        <span class="contact-country"><i class="fas fa-map-marker-alt mr-1"></i> Espagne</span>
                    </div>
                    <div class="contact-info-list text-left">
                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <a href="tel:+34912344556">+34 91 234 45 56</a>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:m.lopez@empresa.es">m.lopez@empresa.es</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact 4 -->
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="contact-card text-center">
                    <div class="avatar-container">
                        <img src="public/avatar.png" class="contact-avatar" alt="Photo de Elena Rossi">
                    </div>
                    <div class="p-3">
                        <h3 class="contact-name">Elena Rossi</h3>
                        <span class="contact-country"><i class="fas fa-map-marker-alt mr-1"></i> Italie</span>
                    </div>
                    <div class="contact-info-list text-left">
                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <a href="tel:+39061234567">+39 06 1234 567</a>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:elena.rossi@italia.it">elena.rossi@italia.it</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact 5 -->
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="contact-card text-center">
                    <div class="avatar-container">
                        <img src="public/avatar.png" class="contact-avatar" alt="Photo de Elena Rossi">
                    </div>
                    <div class="p-3">
                        <h3 class="contact-name">Mohammed samad</h3>
                        <span class="contact-country">
                            <i class="fas fa-map-marker-alt mr-1"></i> Maroc</span>
                    </div>
                    <div class="contact-info-list text-left">
                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <a href="tel:+39061234567">+212 06 1234 567</a>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:elena.rossi@italia.it">elena.rossi@italia.it</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact 6 -->
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="contact-card text-center">
                    <div class="avatar-container">
                        <img src="public/avatar.png" class="contact-avatar" alt="Photo de Elena Rossi">
                    </div>
                    <div class="p-3">
                        <h3 class="contact-name">Mohammed Issa</h3>
                        <span class="contact-country">
                            <i class="fas fa-map-marker-alt mr-1"></i> Maroc</span>
                    </div>
                    <div class="contact-info-list text-left">
                        <div class="info-item">
                            <i class="fas fa-phone"></i>
                            <a href="tel:+39061234567">+212 06 1234 567</a>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-envelope"></i>
                            <a href="mailto:elena.rossi@italia.it">elena.rossi@italia.it</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Scripts Bootstrap 4 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
📌 Voir aussi

📌 Snippets similaires

🏷️ Explorer par mot clé
