Discussion :

[rizcolais]

Bonjour les amis!

Je reviens vers vous, pour vous demandez une petite aide... voici la maquette que j'aimerais réaliser en code

voici mon code pour l'instant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!-- Formations
    ==========================================-->
 
 <section class="container-fluid forma-images"></p></section>
 
 
 
<div class="formations container-fluid">
 
<div class="icon-forma">
 
<div class="col-md-3 col-12"> <center><img src="images/icon001.png" alt="icon 01" > <br><br> Créer un compte</center> </div>
<div class="col-md-3 col-12"> <center><img src="images/icon002.png" alt="icon 02" > <br><br>Découvrir et choisir</center></div>
<div class="col-md-3 col-12"> <center><img src="images/icon004.png" alt="icon 04" > <br><br>Acheter</center></div>
<div class="col-md-3 col-12"> <center><img src="images/icon003.png" alt="icon 03" > <br><br>Apprendre</center></div>
</div><!-- /.icon-forma -->
 
 
<div class="formations-text">
<p>Health aliment vous propose de créer un compte pour avoir accès à toutes les fonctionnalités du site web. Ensuite vous pourrez découvrir les trois formations que nous vous proposons ci-dessous. Choisissez celle qui vous convient le mieux et vous pourrez acheter l'une d'entre elles. Nous espérons que cela vous apporte un plus lors de votre expérience de cuisine.  </p></div><!-- /.formations-text -->
 
<div class="topic"></div><!-- /.topic -->
 
<div class="container formations-three">
 
<div class="row">
<div class="col-md-3 col-12 firstcol"> <h1> L'offre </h1></div>
<div class="col-md-3 col-12 ling01"> <h2> Formations débutantes </h2></div>
<div class="col-md-3 col-12 ling01"> <h2> Formations confirmée </h2></div>
<div class="col-md-3 col-12 ling01"> <h2> Formations confirmé </h2></div>
 
</div> <!-- /.row -->
 
<div class="row">
 
<div class="col-md-3 col-12 firstcol"> <h1> Le prix </h1> </div>
<div class="col-md-3 col-12"> </div>
<div class="col-md-3 col-12"> </div>
<div class="col-md-3 col-12"> </div>
 
  </div>
 
  <div class="row">
 
<div class="col-md-3 col-12 firstcol"> <h1> Le contenu du pack </h1> </div>
<div class="col-md-3 col-12"> </div>
<div class="col-md-3 col-12"> </div>
<div class="col-md-3 col-12"> </div>
 
  </div>
 
</div> <!-- /.container -->
</div> <!-- /.formations -->

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/*********************************************************************************/
/* FORMATIONS                                                                    */
/*********************************************************************************/
 
 
.forma-images{  background: url("../images/formation001.png") no-repeat top right; 
 
    height: 50px;
    background-position: bottom center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover; 
    min-height: 500px; 
 
}
 
/* -------------------- Iphone 6 */
@media (max-width: 400px)  {
  .forma-images{
    background: url("../images/formation002.png") no-repeat top right;
 
  }
  }
 
  .formations {background-color: white;
    height: 100%
    width:100%;
    margin: 40px 0 60px 0;}
 
.formations-text p {
  text-align: justify;
  padding: 200px 320px 20px  320px;
  font-size: 17px;
}
 
/* -------------------- Iphone 6 */
@media (max-width: 400px)  {
  .formations-text p{
    padding: 20px 0 0 0px;
 
  }
  }
 
.formations-three {
margin: 40px 0 0 100px; 
}
 
.formations-three h1 {  text-align: center;
font-size: 20px; }
 
.formations-three h2 {  text-align: center;
font-size: 25px; }
 
.firstcol {background-color: #a5a4a4;
padding: 20px 0px 20px 0px;}
 
.ling01 {background-color: #d8d6d6;
padding: 10px 0 10px 5px;}

Mon problème est que je voudrais que la div de première ligne (à part celle de la première colonne) soit plus haute que celle de la première colonne? Je ne sais pas si c'est compréhensible.. Si oui avez-vous une solution? Merci d'avance!

[NoSmoking]

Bonjour,

Je ne sais pas si c'est compréhensible

à vrai dire pas franchement

Si oui avez-vous une solution?

Je me hasarde à proposer une ligne d'entête décorative pour simuler les hauteurs.

[Invité]

Bonjour,

1- <center> est obsolète.

2- il manque une classe row autour des col-xx (icon-forma)

3- pour ta problématique :
Ajouter un margin-top à la 1ere colonne, et un padding-top de même valeur aux 3 autres (?)