Wireframe à réaliser html/css

Créateur

Sujet
novembre 11, 2023 à 5:53 pm #33077

paulinho
Participant

Bonjour, je suis débutant en html/Css et je dois réaliser cette wireframe pour ordinateur (pièce jointe). Je dois utiliser l’attribut flex pour la mise en page et non le grid. Voici mon code html, j’aimerais que quelqu’un me fasse un css correspondant au wireframe car je n’y arrive pas. J’ai volontairement pas encore mis les images correspondantes.

HTML : »

<!DOCTYPE html>

<html lang= »en »>

<head>

<meta charset= »UTF-8″>

<meta name= »viewport » content= »width=device-width, initial-scale=1.0″>

<link rel= »stylesheet » href= »./style/global.css »>

<title>Page d’ acceuil</title>

</head>

<body>

<header>

<img src= » »>

</header>

<main>

<section>

<article>

<img src= » »>

<h1>La rénovation du Spotify Camp Nou</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque tempora voluptate praesentium, qui quae possimus explicabo quis hic laboriosam sed dolor natus atque vitae minus mollitia. Quisquam, blanditiis perferendis. Velit?

Architecto enim asperiores quia nesciunt earum sint eius doloremque, quas repellendus? Illum nobis aut totam saepe possimus repudiandae soluta quam facilis, dicta explicabo fugiat fuga neque. Distinctio rerum ex soluta.

</p>

</article>

<article>

<img src= » »>

<h2>IUT MMI</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod et porro eos molestias cumque, illum minima dolorem aspernatur obcaecati deleniti doloremque maxime velit. Voluptatum quod commodi, quibusdam tempore ipsum tempora!</p>

</article>

<article>

<img src= » »>

<h2>IUT MMI</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod et porro eos molestias cumque, illum minima dolorem aspernatur obcaecati deleniti doloremque maxime velit. Voluptatum quod commodi, quibusdam tempore ipsum tempora!</p>

</article>

<article>

<img src= » »>

<h2>IUT MMI</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod et porro eos molestias cumque, illum minima dolorem aspernatur obcaecati deleniti doloremque maxime velit. Voluptatum quod commodi, quibusdam tempore ipsum tempora!</p>

</article>

</section>

</main>

<footer> </footer>

</body>

</html> »
Créateur

Sujet