Modèle HTML de la banque ORABANC : portails utilisateurs et CSS

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

6 May 2024

Confrontation des métamorphes

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ORABANC - Votre Banque de Confiance</title>
    <meta name="description" content="Bienvenue chez ORABANC, votre partenaire financier pour tous vos besoins bancaires.">
    
    <style>
        /* Styles CSS de base pour une présentation sommaire.
           Dans un projet réel, ces styles seraient organisés dans un fichier 'style.css'. */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }
        header {
            background-color: #0056b3; /* Bleu foncé, couleur principale d'ORABANC */
            color: white;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        header .logo {
            font-size: 2rem;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }
        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        nav ul li {
            margin-left: 30px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }
        nav ul li a:hover {
            color: #ffc107; /* Jaune or, couleur secondaire */
        }
        .hero {
            background: linear-gradient(to right, #007bff, #0056b3); /* Dégradé de bleu */
            color: white;
            text-align: center;
            padding: 5rem 2rem;
            margin-bottom: 2rem;
            border-radius: 0 0 15px 15px;
        }
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .hero p {
            font-size: 1.3rem;
            max-width: 800px;
            margin: 0 auto 2.5rem;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        .section-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
            margin-bottom: 4rem;
        }
        .card {
            background-color: white;
            padding: 2.5rem;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        }
        .card h2 {
            color: #0056b3;
            font-size: 1.8rem;
            margin-bottom: 1.2rem;
        }
        .card p {
            font-size: 1rem;
            margin-bottom: 1.8rem;
            color: #555;
        }
        .btn {
            display: inline-block;
            background-color: #28a745; /* Vert pour les actions positives */
            color: white;
            padding: 0.9rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .btn:hover {
            background-color: #218838;
            transform: translateY(-2px);
        }
        .btn-primary {
            background-color: #007bff; /* Bleu pour les accès client/commun */
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .btn-employee {
            background-color: #ffc107; /* Jaune pour les employés */
            color: #333;
        }
        .btn-employee:hover {
            background-color: #e0a800;
            color: #333;
        }
        .btn-admin {
            background-color: #dc3545; /* Rouge pour les administrateurs */
        }
        .btn-admin:hover {
            background-color: #c82333;
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        form input[type="text"],
        form input[type="password"] {
            padding: 0.9rem 1.2rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            width: calc(100% - 2.4rem); /* Adjust for padding */
        }
        form button[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 0.9rem 1.5rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
        form button[type="submit"]:hover {
            background-color: #0056b3;
        }
        footer {
            background-color: #222;
            color: white;
            text-align: center;
            padding: 2.5rem 2rem;
            margin-top: 4rem;
            border-radius: 15px 15px 0 0;
            font-size: 0.9rem;
        }
        footer a {
            color: #ffc107;
            text-decoration: none;
            margin: 0 10px;
            transition: color 0.3s ease;
        }
        footer a:hover {
            color: white;
        }
        .disclaimer {
            font-size: 0.75em;
            color: #bbb;
            margin-top: 1.5rem;
        }
    </style>
</head>
<body>

<header>
        <a href="#" class="logo">ORABANC</a>
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">À Propos</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Actualités</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

<section class="hero">
        <div class="container">
            <h1>Bienvenue chez ORABANC</h1>
            <p>Votre partenaire financier de confiance, offrant des solutions bancaires innovantes et sécurisées pour les particuliers, les entreprises et les institutions.</p>
            <a href="#customer-portal" class="btn btn-primary">Accéder à mon Espace Client</a>
        </div>
    </section>

<main class="container">
        <section class="section-grid">
            
            <div class="card" id="customer-portal">
                <h2>Espace Client</h2>
                <p>Gérez vos comptes, effectuez des virements, consultez vos relevés, demandez des prêts et accédez à tous nos services bancaires en ligne, 24h/24 et 7j/7.</p>
                
                <form action="/api/login/customer" method="POST">
                    <input type="text" name="username" placeholder="Identifiant Client" required>
                    <input type="password" name="password" placeholder="Mot de passe" required>
                    <button type="submit">Se connecter</button>
                </form>
                <p style="margin-top: 1.5rem; font-size: 0.9rem;">
                    Pas encore client ? <a href="/signup" style="color: #007bff; text-decoration: none;">Ouvrir un compte</a>
                </p>
            </div>

<div class="card">
                <h2>Portail Employé</h2>
                <p>Accès sécurisé pour le personnel d'ORABANC. Gérez les dossiers clients, accédez aux outils internes, aux ressources humaines et aux communications d'entreprise.</p>
                
                <a href="/employee/login" class="btn btn-employee">Accès Employé</a>
                <p style="margin-top: 1.5rem; font-size: 0.85rem; color: #888;">
                    (Accès restreint aux employés d'ORABANC - Authentification requise)
                </p>
            </div>

<div class="card">
                <h2>Espace Administratif</h2>
                <p>Tableau de bord de gestion pour les administrateurs et la direction. Supervisez les opérations, gérez les utilisateurs, configurez les services et accédez aux rapports d'activité.</p>
                
                <a href="/admin/login" class="btn btn-admin">Accès Administrateur</a>
                <p style="margin-top: 1.5rem; font-size: 0.85rem; color: #888;">
                    (Accès très restreint - Pour le personnel de direction et IT)
                </p>
            </div>
        </section>

<section style="text-align: center; margin-bottom: 4rem;">
            <h2>Nos Engagements</h2>
            <p style="max-width: 800px; margin: 0 auto 2rem;">
                Chez ORABANC, nous nous engageons à offrir une expérience bancaire exceptionnelle, basée sur l'innovation, la sécurité et un service client irréprochable.
            </p>
            <div class="section-grid">
                <div class="card">
                    <h3>Sécurité Maximale</h3>
                    <p>Protection avancée de vos données et transactions grâce aux dernières technologies de chiffrement.</p>
                </div>
                <div class="card">
                    <h3>Innovation Continue</h3>
                    <p>Des services numériques modernes et intuitifs pour simplifier votre gestion financière au quotidien.</p>
                </div>
                <div class="card">
                    <h3>Accompagnement Personnalisé</h3>
                    <p>Des conseillers dédiés à votre écoute pour vous guider dans vos projets financiers.</p>
                </div>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <p>© 2023 ORABANC. Tous droits réservés.</p>
            <p>
                <a href="#">Politique de Confidentialité</a> |
                <a href="#">Conditions Générales</a> |
                <a href="#">Mentions Légales</a>
            </p>
            <p class="disclaimer">
                Ce code HTML est une maquette front-end. Les fonctionnalités dynamiques (connexion, gestion des rôles, bases de données, transactions)
                nécessitent une implémentation back-end complète (ex: avec Node.js, Python/Django, PHP/Laravel, Java/Spring, etc.).
            </p>
        </div>
    </footer>

</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Site Dynamique et Professionnel</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    
    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animated-section > * {
            animation: fadeIn 1s ease-out forwards;
            opacity: 0; /* Masque l'élément au départ */
        }
        /* Délais pour les éléments de la section hero */
        .hero-content h1 { animation-delay: 0.3s; }
        .hero-content p { animation-delay: 0.6s; }
        .hero-content .btn { animation-delay: 0.9s; }

/* Délais pour les cartes de service */
        .service-card:nth-child(1) { animation-delay: 0.2s; }
        .service-card:nth-child(2) { animation-delay: 0.4s; }
        .service-card:nth-child(3) { animation-delay: 0.6s; }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">Mon Site Qualité</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#accueil">Accueil</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<header id="accueil" class="py-5 bg-primary text-white text-center d-flex align-items-center" style="min-height: 70vh;">
        <div class="container animated-section hero-content">
            <h1 class="display-4 fw-bold">Bienvenue sur Notre Site Dynamique</h1>
            <p class="lead mt-3">Découvrez des solutions innovantes et un design professionnel pour vos projets.</p>
            <a href="#services" class="btn btn-light btn-lg mt-4">Nos Services</a>
        </div>
    </header>

<section id="services" class="container my-5 py-5">
        <h2 class="text-center mb-5 animated-section">Nos Services Professionnels</h2>
        <div class="row text-center animated-section">
            <div class="col-md-4 mb-4 service-card">
                <div class="card shadow-sm h-100">
                    <div class="card-body">
                        <h5 class="card-title">Design Web Moderne</h5>
                        <p class="card-text">Création d'interfaces utilisateur intuitives et esthétiques, optimisées pour tous les appareils.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4 service-card">
                <div class="card shadow-sm h-100">
                    <div class="card-body">
                        <h5 class="card-title">Développement Robuste</h5>
                        <p class="card-text">Des solutions techniques solides et performantes pour votre site, basées sur les dernières technologies.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4 service-card">
                <div class="card shadow-sm h-100">
                    <div class="card-body">
                        <h5 class="card-title">Optimisation SEO</h5>
                        <p class="card-text">Augmentez votre visibilité en ligne grâce à nos stratégies d'optimisation pour les moteurs de recherche.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="portfolio" class="bg-light py-5">
        <div class="container">
            <h2 class="text-center mb-5 animated-section">Notre Portfolio</h2>
            <div class="row animated-section">
                <div class="col-md-6 mb-4">
                    <div class="card shadow-sm">
                        <img src="https://via.placeholder.com/600x400/007bff/ffffff?text=Projet+1" class="card-img-top" alt="Projet 1">
                        <div class="card-body">
                            <h5 class="card-title">Application Web Interactive</h5>
                            <p class="card-text">Développement d'une application web sur mesure avec une interface utilisateur dynamique.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="card shadow-sm">
                        <img src="https://via.placeholder.com/600x400/28a745/ffffff?text=Projet+2" class="card-img-top" alt="Projet 2">
                        <div class="card-body">
                            <h5 class="card-title">Site E-commerce Responsive</h5>
                            <p class="card-text">Conception et développement d'une boutique en ligne optimisée pour le mobile.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="contact" class="container my-5 py-5">
        <h2 class="text-center mb-5 animated-section">Contactez-nous</h2>
        <div class="row justify-content-center animated-section">
            <div class="col-lg-8">
                <form>
                    <div class="mb-3">
                        <label for="nom" class="form-label">Nom</label>
                        <input type="text" class="form-control" id="nom" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <input class="form-control" id="message" rows="5" required/>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg">Envoyer</button>
                </form>
            </div>
        </div>
    </section>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlco6FVem0zK5kK4rHNzVjQpLMUjNyeKa9YbcFqPrDVfwpd" crossorigin="anonymous"></script>
</body>
</html>

Modèle HTML de la banque ORABANC : portails utilisateurs et CSS

Recommandé

Bouton de survol au néon

SIMULATEUR DE BANQUE

Confrontation des métamorphes

HTML

CSS

JS

Recommandé

Bouton de survol au néon

SIMULATEUR DE BANQUE

Confrontation des métamorphes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS