Mon css ne s'applique pas totalement

fructueux97 -  
Bonjour,
j'ai fais une barre de progression css dans l'index de mon code mais depuis juste une partie du css réponds mais tout le reste ne marche plus. qui a une idée du pourquoi merci

5 réponses

  2. fructueux97 Auteur 
                    
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <title>ProgressBar</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="fr">



<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" >
    <meta name="author" content="Shreethemes">
    
    <link rel="shortcut icon" href="images/index.png">
   

    <title> AXA BANK</title>
<link href="css/style1.css" rel="stylesheet">


    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Magnificpopup Css -->
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">

    <!-- Bootstrap core CSS -->
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/fontawesome.css" rel="stylesheet">
    <link href="css/pe-icon-7-stroke.css" rel="stylesheet">

    <!--Slider-->
    <link rel="stylesheet" href="css/owl.carousel.min.css"/> 
    <link rel="stylesheet" href="css/owl.theme.css"/> 
    <link rel="stylesheet" href="css/owl.transitions.css"/>
    <link rel="stylesheet" href="css/slick.css"/> 
    <link rel="stylesheet" href="css/slick-theme.css"/>  

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/menu.css" rel="stylesheet">
    <link href="css/default.css" rel="stylesheet">
    
    
</head>

    <body>
        <!-- Loader -->
        <div id="preloader">
            <div id="status">
                <div class="spinner">
                    <div class="double-bounce1"></div>
                    <div class="double-bounce2"></div>
                </div>
            </div>
        </div>

        <!-- Navigation Bar-->
        <div class="tagline hidden-md">
            <div class="container">
                <div class="float-left">
                    <div class="phone">
                        <i class="fas fa-phone"></i> +1 123 456 78 90
                    </div>
                </div>
                <div class="float-right">
                    <ul class="top_socials">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                        <li><a href="#"><i class="fab fa-pinterest"></i></a></li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        
        <!-- Navigation Bar-->
        <header id="topnav" class="defaultscroll fixed-top navbar-sticky sticky">
            <div class="container">
                <!-- Logo container-->
                <div>
                    <!--<p><br><b><h2>AXA BANQUE</b></h2></p>-->
                    
                    <a href="#" class="logo">
                        <img src="images/logo.png" alt="missing_logo" height="20">
                    </a>
                    
                </div>
                <!-- End Logo container-->
                <div class="menu-extras">
                    <div class="menu-item">
                        <!-- Mobile menu toggle-->
                        <a class="navbar-toggle">
                            <div class="lines">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                        <!-- End mobile menu toggle-->
                    </div>
                </div>

                <div id="navigation">
                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">
                        <li class="has-submenu">
                            <a href="#">ACCUEIL</a><span class="menu-arrow"></span>
                                
                        </li>
                           

                        <li class="has-submenu">
                            <a href="javascript:void(0)">PROCESSUS</a><span class="menu-arrow"></span>
                            
                        </li>

                        <li class="has-submenu">
                            <a href="javascript:void(0)">CONTACT</a>
                            <span class="menu-arrow"></span>
                            
                        </li>
                          
                        <li class="dropdown d-none d-md-inline-block">
                            <a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
                                aria-haspopup="false" aria-expanded="false">
                                <i class="fas fa-search noti-icon"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-search">
                                <div>
                                    <form role="search" class="navbar-form">
                                        <input type="text" placeholder="Search..." name="s" class="form-control search-bar">
                                        <a href="#" class="btn-search"><i class="fa fa-search"></i></a>
                                    </form>
                                </div>

                            </div>
                        </li>
                    </ul>
                    <!-- End navigation menu-->
                </div>
            </div>
        </header>
        <!-- End Navigation Bar-->
        
        <!-- HOME START-->
   <section class="bg-home">
            <div class="bg-overlay"></div>
            <div class="home-center">
                <div class="home-desc-center">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="title-heading text-center">
                                    <p class="p-header">SUIVEZ VOTRE TRANSFERT EN LIGNE EN TOUTE SECURITE</p>
                                    <img src="images/welcome.gif">
                                    <p class="text-white-50 mx-auto">Ici, vous pouvez verifier en temps reel le statut de votre transfert en ligne</p>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        
       <section class="section-two bg-light">
            <div class="container">

                <div class="row">
                    <div class="col-md-12" >
                        <div class="feature">
                           
                            <div class="fe-head" style="text-align: center;">
                                <p>Montant du tranfert: </p>
                                <p>Nom et Prenom(s) du beneficiare</p>
                                <p>Nom de la banque beneficiaire</p>
                                <p>Numero du compte bancaire</p>
                                <p>BIC/SWIFT: </p>
                                <p>Destination:</p>
                                <p>IBAN</p>
                                <p>BIC/SWIFT:</p>
                                <p>Statut: <i style="color: blue">Validate</i></p>
                                <p>ETAT DE LA SURVEILLANCE DU TRANSFERT EN LIGNE</p>
                                                  
                            </div>

                            
                            

                        </div>
                    </div>
     
                </div>
  <souligne> <div class="meter animate">
  <span style="width: 90%"><span></span></span><i>90%</i>
</div>

       <!-- <label for="file">Downloading progress:</label>
        <progress  value="90" id="file" max="100">90% </progress><i>90%</i>-->
               
            </div>
                
        </section>

       

  

        <!-- Back to top -->    
        <a href="#" class="back-to-top" id="back-to-top"> 
            <i class="mdi mdi-chevron-up"> </i> 
        </a>
        <!-- Back to top --> 

        <!-- js placed at the end of the document so the pages load faster -->
        <script src="js/jquery.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!-- Portfolio -->
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/isotope.js"></script>
        <script src="js/portfolio-filter.js"></script> 
        <!-- Carousel -->
        <script src="js/owl.carousel.min.js"></script>
        <script src="js/owlcarousel.init.js"></script>
        <script src="js/slick.min.js"></script> 
        <script src="js/slick.init.js"></script> 
        <!-- VIDEO ICON -->
        <script src="js/magnific.init.js"></script>
        <!-- COUNTER -->
        <script src="js/counter.init.js"></script>
        <!--custom script-->
        <script src="js/app.js"></script>



    </body>


<!--  42:23-->
</html>




    
.meter { 
  height: 20px;  <em>/* Can be anything */</em>
  position: relative;
  background: #555;
  border-radius: 25px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}


.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}


.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}


.meter > span:after, .animate > span > span {

}



@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}



.meter > span::after, .animate > span > span {
  animation: move 2s linear infinite;
}

    </code>
    0
    1. jordane45 Modérateur
      Ok
      et donc, en quoi ton css ne s'applique pas ?
      As tu bien vidé le cache de ton navigateur ?
      As tu essayé avec un autre navigateur ?
      Quel navigateur as tu essayé ?
      0
  3. fructueux97 Auteur
    oui j'ai bien vider le cash
    oui oui
    j'ai essayé avec chrome et opéra
    0
    1. jordane45 Modérateur
      et donc, en quoi ton css ne s'applique pas ?
      0
  6. fructueux97 Auteur
    le css que j'ai envoyé doit agir sur la barre de progression mais ce qui n'est pas le cas juste une partie a agir deçu cest ça qui a donné ce rendu
    0

    Discussions similaires

    "Cette application ne peut pas s'exécuter sur votre PC"
    Pacotillle

    5 réponses
    indice et exposant en css ?
    yiv

    19 réponses
    Cette application ne peut pas s'exécuter sur votre pc
    Mornvor

    14 réponses
    Probleme "Cette application ne peut pas s'exécuter sur votre PC"
    MetalSin

    3 réponses
    Comment aligner des éléments html css
    eligame

    1 réponse