Home
Anonymous
profil_eleve.html

profil_eleve.html

This tailwind example is contributed by Anonymous, on 21-Oct-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Anonymous

271

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Étudiant Pro - Collège Catts Pressoir</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* ---------------------------------------------------- */
        /* 1. CSS PUR pour le Mode Sombre (Variables CSS)       */
        /* ---------------------------------------------------- */
        :root {
            --bg-color: #f8fafc; /* light: gray-50 */
            --text-color: #0f172a; /* light: slate-900 */
            --card-bg: #ffffff;
            --primary-color: #4f46e5; /* indigo-600 */
            --primary-hover: #4338ca; /* indigo-700 */
            --border-color: #e2e8f0; /* slate-200 */
        }
        [data-theme="dark"] {
            --bg-color: #1e293b; /* dark: slate-800 */
            --text-color: #f1f5f9; /* dark: slate-100 */
            --card-bg: #334155; /* dark: slate-700 */
            --primary-color: #6366f1; /* indigo-500 */
            --primary-hover: #4f46e5; /* indigo-600 */
            --border-color: #475569; /* slate-600 */
        }

/* Styles de base pour la transition du Mode Sombre */
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.4s, color 0.4s;
        }
        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            transition: background-color 0.4s, border-color 0.4s;
        }
        .text-color-primary {
            color: var(--primary-color);
        }

/* ---------------------------------------------------- */
        /* 2. Animation CSS (:hover - Code Fonctionnel 50%)     */
        /* ---------------------------------------------------- */
        .btn-primary {
            background-color: var(--primary-color);
            transition: background-color 0.3s ease-in-out, transform 0.2s ease-out, box-shadow 0.3s;
        }
        .btn-primary:hover, .btn-primary:focus {
            background-color: var(--primary-hover);
            transform: scale(1.02); /* Changement de taille fluide */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

/* Transition professionnelle pour les cartes de projet */
        .project-link {
            display: block; 
            transition: all 0.3s ease;
            cursor: pointer;
            border-radius: 0.75rem;
        }
        .project-link:hover, .project-link:focus {
            border: 1px solid var(--primary-color); 
            box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1); 
            transform: translateY(-5px); /* Mouvement de soulèvement */
            outline: none;
        }
        
        /* ---------------------------------------------------- */
        /* 3. Grille Réactive (CSS Grid - Code Fonctionnel 50%) */
        /* ---------------------------------------------------- */
        .grid-layout {
            display: grid;
            /* Mobile : 1 colonne */
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        @media (min-width: 1024px) { /* Desktop */
            .grid-layout {
                /* Desktop : 2 colonnes */
                grid-template-columns: 1fr 2.5fr;
            }
        }
    </style>
</head>
<body class="p-6 md:p-12">

<header class="mb-10 flex justify-between items-center border-b pb-4 border-border-color">
        <div class="flex items-center space-x-3">
            <svg class="w-8 h-8 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM4 10a6 6 0 1112 0 6 6 0 01-12 0zM10 12a2 2 0 100-4 2 2 0 000 4z"></path></svg>
            <h1 class="text-3xl font-extrabold tracking-tight">C.C.P. **Web Dev** Profil</h1>
        </div>
        
        <button id="theme-toggle" class="btn-primary text-white py-2 px-4 rounded-full text-sm font-medium shadow-lg hover:shadow-xl">
            Mode Sombre 🌙
        </button>
    </header>

<main class="grid-layout">
        
        <section class="space-y-6">
            <div class="card p-6 rounded-xl shadow-2xl border-t-4 border-indigo-600">
                <div class="text-center mb-6">
                    <img src="https://via.placeholder.com/150/4f46e5/ffffff?text=JD" alt="Photo de profil" class="rounded-full mx-auto mb-4 w-36 h-36 object-cover border-4 border-indigo-300 transform hover:scale-110 transition duration-500 shadow-md">
                    <h2 class="text-3xl font-bold">Jean Dupont</h2>
                    <p class="text-indigo-600 text-lg font-medium mt-1">Étudiant 9ème - T1 Front-end</p>
                </div>
                
                <div class="space-y-4 border-t pt-4">
                    <h3 class="text-xl font-semibold text-color-primary">Contact Pro</h3>
                    <p><span class="font-medium opacity-80">Email:</span> <a href="mailto:jean.dupont@ccp.edu" class="text-color-primary hover:underline transition duration-300">jean.dupont@ccp.edu</a></p>
                    <p><span class="font-medium opacity-80">Localisation:</span> Port-au-Prince, Haïti 🇭🇹</p>
                </div>

<a href="#projets" class="btn-primary w-full block text-center mt-6 text-white py-3 px-4 rounded-lg font-semibold no-underline shadow-lg">
                    Découvrir mes Projets
                </a>
            </div>

<div class="card p-6 rounded-xl shadow-lg">
                <h3 class="text-xl font-semibold mb-4 text-color-primary">Parcours</h3>
                <ul class="space-y-2">
                    <li class="p-2 border-l-4 border-green-500 hover:shadow-sm transition">
                        <h4 class="font-bold">Collège Catts Pressoir</h4>
                        <p class="text-sm opacity-80">9ème Année - 2024-2025</p>
                    </li>
                    <li class="p-2 border-l-4 border-yellow-500 hover:shadow-sm transition">
                        <h4 class="font-bold">Formation T1 Web Dev</h4>
                        <p class="text-sm opacity-80">Maîtrise du Responsive Design</p>
                    </li>
                </ul>
            </div>
        </section>

<div class="space-y-8">
            
            <section id="projets" class="card p-8 rounded-xl shadow-lg">
                <h2 class="text-2xl font-bold mb-6 border-b pb-2 text-color-primary">Projets Clés (Démos Interactives)</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    
                    <a href="https://github.com/votre_repo_grid" target="_blank" class="project-link p-5 card shadow-md hover:bg-gray-50 dark:hover:bg-slate-600">
                        <h3 class="font-bold text-xl text-color-primary">Grid Layout Réactif 🌐</h3>
                        <p class="text-sm opacity-80 mt-1">Démonstration de la puissance du **CSS Grid** pour les structures bidimensionnelles.</p>
                        <span class="text-xs mt-3 inline-block py-1 px-3 rounded-full bg-indigo-100 text-indigo-700 font-semibold">Voir le Code Source</span>
                    </a>
                    
                    <a href="#" onclick="alert('La fonctionnalité Mode Sombre est intégrée à cette page ! Essayez le bouton 🌙.'); return false;" class="project-link p-5 card shadow-md hover:bg-gray-50 dark:hover:bg-slate-600">
                        <h3 class="font-bold text-xl text-color-primary">Mode Sombre Dynamique 🌙💡</h3>
                        <p class="text-sm opacity-80 mt-1">Implémentation avec **Variables CSS** et **`localStorage`** pour la persistance du thème.</p>
                        <span class="text-xs mt-3 inline-block py-1 px-3 rounded-full bg-indigo-100 text-indigo-700 font-semibold">Tester sur cette Page</span>
                    </a>

</div>
            </section>
            
            <div class="card p-8 rounded-xl shadow-lg">
                <h3 class="text-2xl font-bold mb-4 text-color-primary">Compétences Techniques</h3>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full">HTML5</span>
                    <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full">CSS3</span>
                    <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full">Tailwind CSS</span>
                    <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full">CSS Grid</span>
                    <span class="bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full">Responsive Design</span>
                </div>
            </div>
        </div>
    </main>

// Fonction pour basculer et sauvegarder le thème
        function toggleTheme() {
            const currentTheme = htmlElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            // 1. Appliquer le thème et mettre à jour le bouton
            htmlElement.setAttribute('data-theme', newTheme);
            toggleButton.textContent = newTheme === 'dark' ? 'Mode Clair 💡' : 'Mode Sombre 🌙';
            
            // 2. Sauvegarder la préférence dans le localStorage (Fonctionnalité complexe)
            localStorage.setItem('theme', newTheme);
        }

// Charger la préférence au démarrage (avec vérification du système)
        function loadTheme() {
            const savedTheme = localStorage.getItem('theme');
            
            if (savedTheme) {
                htmlElement.setAttribute('data-theme', savedTheme);
                toggleButton.textContent = savedTheme === 'dark' ? 'Mode Clair 💡' : 'Mode Sombre 🌙';
            } else {
                // Vérification de la préférence système (UX Pro)
                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    htmlElement.setAttribute('data-theme', 'dark');
                    toggleButton.textContent = 'Mode Clair 💡';
                } else {
                    toggleButton.textContent = 'Mode Sombre 🌙';
                }
            }
        }

// Initialisation et écouteur
        loadTheme();
        toggleButton.addEventListener('click', toggleTheme);
    </script>
</body>
</html>

Related Examples

barbershop

Author:
Ishimwe Shadad

3 months ago

418
Homepage event

Author:
Anonymous

7 months ago

745
Simple layout

Author:
Edward Carandang

1 year ago

3.2k
machine
tell you how your MAC pc work

Author:
gidy

3 months ago

334
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

1 year ago

1.6k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Author:
Alif Bima Pradana

3 weeks ago

131
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

5 months ago

246
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

8 months ago

823
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.2k
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

10 months ago

907
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

21.7k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components