profil_eleve.html

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

Other

Author Anonymous

Tailwind v3.4 683 2

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

chart
to chart on your family and

Nishimwe Jeanine

1 year ago

1.1k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Kirsten F

1 year ago

1.5k
random design

QQ-VVN

1 year ago

1.2k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Bonimater

1 year ago

1.2k
re schedule

Anonymous

17 hours ago

7
invoice 02
product invoice

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Coastal UI

1 year ago

1.5k
Play, Pause and Stop buttons

Lukas Müller

3 years ago

12.1k
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

nejaa badr

1 year ago

2.3k
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

nejaa badr

1 year ago

2.3k
Drag & Drop File Upload with Progress & Image Preview

JUGENDRA GANGWAR

1 month ago

110
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:

ishimwe shadad

1 year ago

1.5k