Bonjour,
Je rencontre un problème dans le développement de la page d’accueil de mon site web.
Voici mon code :
<!DOCTYPE html>
<html>
<head>
<title>Christian Goux</title>
<script src="https://cdn.tailwindcss.com"></script>
<meta name = "description" content = "Bienvenue sur le site du dessinateur Christian Goux ! Découvrez les fabuleuses bandes dessinees">
<meta charset = "utf-8">
</head>
<body class = "flex flex-col justify-items-between bg-blue-300">
<header class = "bg-blue-500 flex items-center flex-row justify-items-between rounded-full my-10 mx-20">
<div class = "grid grid-cols-1 justify-items-start h-min-full basis-1/3">
<h2 class = "text-4xl text-white mx-10 my-20" style = "font-family : cursive;">Christian Goux</h2>
</div>
<div class = "grid grid-cols-1 justify-items-center h-min-full basis-1/3">
<h2 class = "text-7xl text-white mx-10 my-20" style = "font-family : cursive;">Bienvenue !</h2>
</div>
<div class = "grid grid-cols-1 justify-items-end basis-1/3 mx-10">
<img class = "rounded-full w-1/3" src = "https://static.vecteezy.com/system/resources/previews/000/626/977/original/education-book-logo-template-vector-illustration.jpg" alt = "logo de livre">
</div>
</header>
<section class = "bg-blue-300 p-10 h-screen basis-1/2">
<?php
$urls = array("https://bdi.dlpdomain.com/album/9782505009184-couv.jpg","https://i.pinimg.com/originals/31/2b/66/312b66b0c568d4923fd26a0c80153499.png","https://i.pinimg.com/originals/d5/7b/00/d57b006e00e8d0c0e11332f50e5a27e3.jpg",);
function show_images($urls)
{
echo '<div class = "basis-1/2 m-10">';
echo '<div class = "grid justify-items-center grid-cols-'.count($urls).' gap-4">';
foreach($urls as $url)
{
echo '<div class = "grid justify-items-center grid-cols-1">';
echo '<img src ="'.$url.'"class = "w-2/3" alt = "couverture de BD">';
echo '</div>';
}
echo '</div>';
echo "</div>";
}
show_images($urls);
5 ?>
<div class = "grid justify-items-center grid-cols-1">
<h1 class = "text-5xl text-white mb-6 m-0" style = "font-family : cursive;">Découvrez l'oeuvre du dessinateur Christian Goux !</h1>
<a href = "#"><button class = "bg-blue-500 hover:bg-blue-500 text-white font-bold py-2 px-4 border-b-4 border-blue-800 hover:border-blue-800 rounded-full m-5 hover:m-4 text-2xl hover:px-5 hover:py-3" style = "font-family : cursive;">Accéder à la collection complète</button></a>
<?php
show_images($urls);
?>
</section>
<footer class = "h-min-full bg-blue-600 basis-1/4">
<div class = "grid justify-items-center grid-cols-1">
<p class = "text-lg text-white pt-10 pb-5" style = "font-family : cursive;">Ce site donne accès à une synthèse des ouvrages du brillant dessinateur Christian Goux. Profitez bien ! </p>
</div>
<div class = "grid grid-cols-2 justify-items-center">
<div class = "grid grid-cols-1">
<h3 class = "text-white p-3 underline" style = "font-family : cursive;">Ce site a été réalisé grâce à :</h3>
<ul>
<a href = "https://www.apachefriends.org/fr/index.html"><li class = "text-white p-2" style = "font-family : cursive;">XAMPP</li></a>
<a href = "https://tailwindcss.com/"><li class = "text-white p-2" style = "font-family : cursive;">Tailwind CSS</li></a>
</ul>
</div>
<div class = "grid grid-cols-1">
<h3 class = "text-white p-3 underline" style = "font-family : cursive;">Contributeurs : </h3>
<ul>
<li class = "text-white p-2" style = "font-family : cursive;"></li>
<li class = "text-white p-2" style = "font-family : cursive;"></li>
<li class = "text-white p-2" style = "font-family : cursive;"></li>
</ul>
</div>
</div>
</footer>
</div>
</body>
</html>
Quand je passe par file:// pour afficher ma page web, le style fonctionne parfaitement (même si le PHP n’est pas interprété), mais dès que je passe par le localhost (j’utilise XAMPP) le style est complètement défiguré…
Je ne comprends absolument pas d’où vient le problème…
Merci d’avance pour votre aide,
+0
-0
