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

265

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

Upvote downvote buttons

Author:
Lucas Martinez

3 years ago

11.7k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

9 months ago

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

Author:
INGRIDE MUZIRANENGE

8 months ago

642
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

7 months ago

972
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

826
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.6k
Background image section

Author:
Marc

2 years ago

6.5k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

9 months ago

1.3k
Apple Dock Navigation Bar

Author:
Cristian

1 year ago

1.9k
Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

2 years ago

7.5k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1.2k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components