Aller au contenu

bekhan

Membre
 Afficher le profil  Parcourir son contenu

  • Compteur de contenus

    2

  • Inscrit(e) le

  • Dernière visite

 Type de contenu 

Messages postés par bekhan

    Comment réaliser la même présentation

    dans (X)HTML et CSS

    Posté

    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>

     

×
×
  • Créer...