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

123

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

coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

5 months ago

793
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

576
Pricing Plans

Author:
ariaw

2 months ago

197
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

10 months ago

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

Author:
INGRIDE MUZIRANENGE

5 months ago

359
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
Anonymous

5 months ago

531
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.2k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

862
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

817
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

4 months ago

743
Login page

Author:
Reuben Enahoro

11 months ago

1.9k
Testimonial that What Client Says

Author:
Abdul Baset Bappy

4 months ago

514

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components