1 pièce(s) jointe(s)
Grid colonnes différentes tailles bootstrap
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:
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:
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!
