Comment réaliser la même présentation

nass01 · 14 Avril 2018

Bonjour,
j'espère que tout le monde va bien
je suis sur WordPress depuis un an maintenant mais je ne m'y connaît pas tellement en langage html et css, j'ai quelques connaissances fragile mais insuffisante pour réaliser mon objectif qui est de reproduire exactement la même présentation que cette image :
https://zupimages.net/up/18/15/z3gz.png
vous voyez que l'image est assez simple :
une bande en arrière plan qui traverse l'écran de gauche à droite d'une hauteur de 10.5 centimètre
avec en premier plan trois rectangle aligné sur la même ligne de 6.5 cm (largeur) x 7 cm (hauteur) avec 0.4cm d'espace entre eux
dont la bas (des rectangles) dépasse de 1.6 cm le bas de la bande en arrière plan

PotatoesJunky · 14 Avril 2018

Bonjour,

Déjà, n'utilise pas les cm : sur le Web, on parle en pixels.

Ensuite, si tu es sous Wordpress, pourquoi ne pas chercher un thème (= design pour Wordpress) qui corresponde à cette présentation ?

bekhan · 31 Mai 2018

Hello,

Je rejoins l’avis de PotatoesJunky, si tu utilise WordPress il y a énormément de plugins payants/gratuits qui te permettent de réaliser ce genre de "briques". Mais si tu souhaites vraiment le faire par HTML/CSS, voici un petit aperçu, tu pourras te baser dessus :

La partie HTML :

<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
</head>
<body>
  <div class="background">
    <div class="container">
    <div class="block1">
    Texte du block 1
    </div>
    <div class="block2">
    Texte du block 2
    </div>
    <div class="block3">
    Texte du block 3
    </div>
    </div>
  </div>
</body>
</html>

La partie CSS :

body {background-color: #000000;}
.background {height: 250px; width: 100%; background-color: #FF0000;}
.container {margin: auto; width: 50%; padding-top: 150px;}
.block1 {height: 150px; width: 150px; background-color: #FFFFFF; float: left; margin-right: 15px;}
.block2 {height: 150px; width: 150px; background-color: #FFFFFF; float: left;margin-right: 15px;}
.block3 {height: 150px; width: 150px; background-color: #FFFFFF; float: left;margin-right: 15px;}

Ou alors, si ton site utilise la bibliothèque Bootstrap c'est encore plus simple, il suffit juste de modifier le style (couleur et compagnie) en rajoutant un class dans chaque div :

<div class="col-md-12"> <!-- et tu mets le style que tu veux -->
	<div class="col-md-4">
      Block 1
	</div>
	<div class="col-md-4">
      Block 2
	</div>
	<div class="col-md-4">
      Block 3
	</div>
</div>

Connexion

Comment réaliser la même présentation

Sujets conseillés

nass01

PotatoesJunky

bekhan

Veuillez vous connecter pour commenter

Parcourir

Activité