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

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

background animation
background animation

Author:
Jayendra Madara

1 year ago

2.9k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

2 months ago

328
chart
to chart on your family and

Author:
Nishimwe Jeanine

4 months ago

429
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

4 months ago

661
Homepage event

Author:
Anonymous

3 months ago

340
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

414
Share button

Author:
Maxim

9 months ago

1.2k
Chat Bot

Author:
Md. Tofayel islam

3 months ago

324
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

6 months ago

587
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

8 months ago

1.2k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

5 months ago

590
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

Author:
INGRIDE MUZIRANENGE

4 months ago

320

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components