Aller au contenu
nass01

Comment réaliser la même présentation

Noter ce sujet :

Recommended Posts

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
 
 
 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

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 ?

Partager ce message


Lien à poster
Partager sur d’autres sites

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>

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

×