Bonjour, Bonsoir, j'ai un problème avec mon code, car quand je suis sur mon localhost mon site marche nickel, et pas sur mon site.
Le but soit que les notes apparaisse ici, suivant comment il ce note.
Pour l'instant, je fais une requête SQL sur ma base de données. Cela marche très bien en local mais pas sur mon site. J'ai cherché partout mais je n'ai rien trouvé
Merci d'avance.
Cordialement.
Code Page Principal :
My Artes
My Artes
Ponctualité
Engagement
Fiabilité
Réfléxion
Propreté
Adaptabilité
Anticipation
Autonomie
Communication
Créativité
Curiosité
Eco-responsablité
Economie
Initiative
Organisation
Précision
Rapidité
Respect
Sécurité
Vigilance
Code CSS (en php) :
$dbh = new PDO('mysql:host=localhost;dbname=myartes;', 'root', '');
$resultat = $dbh->query('SELECT id, ponctualite, engagement, fiabilite, reflexion,
`proprete`, `adaptabilite`, `anticipation`, `autonomie`, `communication`,
`creativite`, `curiosite`, `ecoresponsabilite`, `economie`, `initiative`,
`organisation`, `précision`, `rapidite`, `respect`, `securite`, `vigilance` FROM
`competance` WHERE 1');
header('Content-type: text/css; charset:UTF-8');
?>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: grid;
height: 100%;
place-items: center;
background: linear-gradient(-90deg, #f5ce62, #e85a19);
}
::selection{
color: #fff;
background: #6665ee;
}
.skill-bars{
margin-top: 100px;
margin-bottom: 100px;
padding: 25px 30px;
width: 600px;
background: #fff;
box-shadow: 0 15px 35px rgba(0,0,0,0.6);
border-radius: 10px;
}
.skill-bars .bar{
margin: 20px 0;
}
.skill-bars .bar:first-child{
margin-top: 0px;
}
.skill-bars .bar .info{
margin-bottom: 5px;
}
.skill-bars .bar .info span{
font-weight: 500;
font-size: 17px;
opacity: 0;
animation: showText 0.5s 1s linear forwards;
}
@keyframes showText {
100%{
opacity: 1;
}
}
.skill-bars .bar .progress-line{
height: 10px;
width: 100%;
background: #f0f0f0;
position: relative;
transform: scaleX(0);
transform-origin: left;
border-radius: 10px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
0 1px rgba(255,255,255,0.8);
animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.bar .progress-line span{
height: 100%;
position: absolute;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
background: linear-gradient(-90deg, #f5ce62, #e85a19);
animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
}
.bar .progress-line.p1 span{
width: 100%;
}
.bar .progress-line.p2 span{
width: 75%;
}
.bar .progress-line.p3 span{
width: 50%;
}
.bar .progress-line.p4 span{
width: 25%;
}
.bar .progress-line.p5 span{
width: 0%;
}
.bar .progress-line.p6 span{
width: 100%;
}
.bar .progress-line.p7 span{
width: 75%;
}
.bar .progress-line.p8 span{
width: 50%;
}
.bar .progress-line.p9 span{
width: 25%;
}
.bar .progress-line.p10 span{
width: 0%;
}
.bar .progress-line.p11 span{
width: 100%;
}
.bar .progress-line.p12 span{
width: 75%;
}
.bar .progress-line.p13 span{
width: 50%;
}
.bar .progress-line.p14 span{
width: 25%;
}
.bar .progress-line.p15 span{
width: 0%;
}
.bar .progress-line.p16 span{
width: 100%;
}
.bar .progress-line.p17 span{
width: 75%;
}
.bar .progress-line.p18 span{
width: 50%;
}
.bar .progress-line.p19 span{
width: 25%;
}
.bar .progress-line.p20 span{
width: 0%;
}
.progress-line span::before{
position: absolute;
content: "";
top: -10px;
right: 0;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-width: 0px;
border-right-width: 0px;
border-top-color: #000;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span::after{
position: absolute;
top: -28px;
right: 0;
font-weight: 500;
background: #000;
color: #fff;
padding: 1px 8px;
font-size: 12px;
border-radius: 3px;
opacity: 0;
animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
100%{
opacity: 1;
}
}
$rows = $resultat->fetch();
?>
.progress-line.p1 span::after{
content: "";
}
.progress-line.p2 span::after{
content: "";
}
.progress-line.p3 span::after{
content: "";
}
.progress-line.p4 span::after{
content: "";
}
.progress-line.p5 span::after{
content: "";
}
.progress-line.p6 span::after{
content: "";
}
.progress-line.p7 span::after{
content: "";
}
.progress-line.p8 span::after{
content: "";
}
.progress-line.p9 span::after{
content: "";
}
.progress-line.p10 span::after{
content: "";
}
.progress-line.p11 span::after{
content: "";
}
.progress-line.p12 span::after{
content: "";
}
.progress-line.p13 span::after{
content: "";
}
.progress-line.p14 span::after{
content: "";
}
.progress-line.p15 span::after{
content: "";
}
.progress-line.p16 span::after{
content: "";
}
.progress-line.p17 span::after{
content: "";
}
.progress-line.p18 span::after{
content: "";
}
.progress-line.p19 span::after{
content: "";
}
.progress-line.p20 span::after{
content: "";
}
.logo2{
width:200px;
float: right;
margin-top: 0px;
position: fixed;
right: 50px;
top: 30px;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
header .logo{
position: relative;
font-weight: 700;
color: #fff;
text-decoration: none;
font-size: 2em;
letter-spacing: 2px;
}