Jump to content
nass01

Comment réaliser la même présentation

Rate this topic

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
 
 
 

 

Share this post


Link to post
Share on other 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 ?

Share this post


Link to post
Share on other 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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...