Set a layout with grid-templates-area
Hi everyone
I want realise a simple page but don't understand what is going wrong
my html:
my CSS:
Thanks by advance.
I want realise a simple page but don't understand what is going wrong
my html:
<body>
<div class="context">
<div class="zero">
<p>we</p>
</div>
<div class="un">
<p>create</p>
</div>
<div class="deux">
<p>digital</p>
</div>
<div class="trois">
<p>solutions</p>
</div>
</div>
</body><body>
<div class="context">
<div class="zero">
<p>we</p>
</div>
<div class="un">
<p>create</p>
</div>
<div class="deux">
<p>digital</p>
</div>
<div class="trois">
<p>solutions</p>
</div>
</div>
</body>my CSS:
.content{
height: 100vh;
display: grid;
grid-template-areas: ". first . . . . . ."
"un . . . . . . ."
". . . . . . . deux"
". . trois . . . . .";
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.zero{
grid-area:first;
}
.un{
grid-area: un;
}
.deux{
grid-area: deux;
}
.trois{
grid-area: trois;
}
p{
font-size: 6em;
text-transform: uppercase;
font-family: verdana;
}.content{
height: 100vh;
display: grid;
grid-template-areas: ". first . . . . . ."
"un . . . . . . ."
". . . . . . . deux"
". . trois . . . . .";
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.zero{
grid-area:first;
}
.un{
grid-area: un;
}
.deux{
grid-area: deux;
}
.trois{
grid-area: trois;
}
p{
font-size: 6em;
text-transform: uppercase;
font-family: verdana;
}Thanks by advance.
