corrige ce site en prenant compte de mes exigences voici le code source html:<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expertise</title>
    <!-- Intégration de Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css"> <!-- Lien vers votre fichier CSS -->
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#"><img src="logo1.png" height="150" alt="logo"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Accueil</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="formation/Formatios.html">Formations</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Produits & Services
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Service 1</a>
                        <a class="dropdown-item" href="#">Service 2</a>
                        <a class="dropdown-item" href="#">Service 3</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">À propos</a>
                </li>
            </ul>
            <a href="#" class="cta btn btn-danger ml-2">Contactez-nous</a>
        </div>
    </nav>

    <div class="hero d-flex align-items-center justify-content-between py-5">
        <div class="image-container position-relative">
            <div class="background-shape"></div>
            <img src="profilv.png" alt="Personne en costume" class="img-fluid">
        </div>
        <div class="hero-text">
            <h1><span>Bienvenue</span> sur <span class="highlight">EXPERTISE !</span></h1>
            <h2>Transformez votre <span class="highlight">avenir grâce à</span> nos formations <br> de <span id="t2">pointe</span> et services <span id="t1">sur mesure.</span></h2>
            <p>Que vous soyez un professionnel en quête de nouvelles compétences ou une entreprise souhaitant développer le potentiel de son équipe, nous avons ce qu’il vous faut !</p>
            <div class="mb-3">
                <img id="flech_brisé" src="fleche-brisé.png" alt="fleche découvrir" width="30">
            </div>
            <a href="formation/Formatios.html" class="button btn btn-secondary">Découvrez nos formations</a>
            <div class="social-icons mt-3">
                <img src="facebook.png" alt="Facebook" class="mr-2" width="30">
                <img src="instagram-icone.png" alt="Instagram" class="mr-2" width="30">
                <img src="whatsapp-icone.png" alt="WhatsApp" class="mr-2" width="30">
                <img src="linkedln-icone.png" alt="LinkedIn" class="mr-2" width="30">
                <img src="youtube-icone.png" alt="YouTube" width="30">
            </div>
        </div>
    </div>

 

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>                                                                                                                                                                                                                                                                                                                                                                                                                voici les code css: body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #0a0c15;
    color: white;
}

.navbar ul {
    list-style: none;
    padding: 0;
}

.navbar a {
    text-decoration: none;
}

.cta {
    background-color: #C91C1C;
    padding: 10px 20px;
    border-radius: 20px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}


.hero {
    max-width: 1200px;
    margin: auto;
}

.hero-text {
    flex: 1; 
    max-width: 50%; 
}

.background-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #C91C1C;
    border-radius: 20px;
    z-index: -1;
    
    
}

.image-container {
    position: relative;
    overflow: hidden; 
}

.image-container img {
    width: 100%;
    height: auto; 
    border-radius: 20px; 
}

.hero h1 {
    font-size: 2.5em;
}

span {
    color: blue;
}

.highlight {
    color: red;
    font-weight: bold;
}

.button {
    background-color: #C91C1C;
    padding: 15px 30px;
    border-radius: 25px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.social-icons {
    margin-top: 20px;
}

.social-icons img {
    width: 30px; 
    margin-right: 10px; 
}                                                                                                                                                                                                                                                                                                                                                                                                                                              deplace se contenaire a droite pour ne pas empecher .background-shape les ecrit