Commit e035c16f authored by Dorian's avatar Dorian
Browse files

rubric web 22

parent 7015fd6c
......@@ -18,21 +18,28 @@
<div class="page">
<div class="main">
<div class="bloc l-1 t-1 r-1 b-1 fond"></div>
<div class="bloc x0 t-1 w6 flow-slug"></div>
<div class="bloc x0 t0 w9 h2 flow-title"></div>
<div class="bloc x0 t2 w5 h1 flow-lead" style="margin-top: 24pt;"></div>
<div class="bloc x0 t0 w9 h2 flow-title" style="margin-top: 12pt;"></div>
<div class="bloc x5 t0 w5 h1 flow-lead" style="margin-top: 36pt; margin-left: -9pt;"></div>
<!-- <div class="bloc x0 w3 t3 b13 flow-main" style="margin-top: 0pt; margin-bottom: 24pt;"></div>
<div class="bloc x3 w3 t3 b13 flow-main" style="margin-top: 0pt; margin-bottom: 24pt;"></div>
<div class="bloc x6 w3 t3 b13 flow-main" style="margin-top: 0pt; margin-bottom: 36pt;"></div> -->
<div class="bloc l0 walf t3 b13 flow-main" style="margin-top: 0pt; margin-bottom: 12pt;"></div>
<div class="bloc r0 walf t3 b13 flow-main" style="margin-top: 0pt; margin-bottom: 36pt;"></div>
<!-- <div class="bloc x6 w3 t3 b13 flow-main" style="margin-top: 0pt; margin-bottom: 36pt;"></div> -->
<!-- textbox -->
<!-- use height or margin (multiple of 12) to make a bloc the desired heigh-->
<!-- negative margin disaligned the text, don't use that -->
<!-- use padding (multiple of 12) to push the text and make place for images -->
<div class="bloc l0 y4 b0 web-rounded c1 flow-main"></div>
<div class="bloc r0 y1 b12 web-rounded c1 flow-main" style="height: 240pt;"></div>
<div class="bloc r0 y6 b0 web-squared c2 flow-main" style="margin-top: 12pt; padding-bottom: 48pt;"></div>
<!-- use negative top or bottom margin (multiple of 12) to make a bloc the desired heigh-->
<!-- use padding top or bottom (multiple of 12) to push the text and make place for images -->
<div class="bloc l0 y5 b0 web-squared bleuclaire flow-main" style="margin-top: 0pt; margin-bottom: -12pt;"></div>
<div class="bloc r0 y4 b0 web-rounded vertpale flow-main" style="margin-top: 24pt; margin-bottom: -24pt;"></div>
<!-- illus -->
<div class="bloc x1 y3 w2 h1 flow-fig1"></div>
<div class="bloc x5 y11 w1 h1 flow-fig2"></div>
<!-- <div class="bloc x5 y11 w1 h1 flow-fig2"></div> -->
</div>
</div>
</div>
......@@ -42,10 +49,13 @@
<div class="page">
<div class="main">
<div class="bloc l-1 t-1 r-1 b-1 fond"></div>
<div class="bloc x0 y10 w5 h5 flow-fig1"></div>
<div class="bloc x5 y0 w5 h5 flow-fig2"></div>
<!-- textbox -->
<div class="bloc l0 y0 web-rounded b7 c4 flow-main" style="margin-bottom: 12pt;"></div>
<div class="bloc r0 y1 web-rounded b2 c3 flow-main" style="padding-top: 60pt;"></div>
<div class="bloc l0 y8 web-squared b0 c1 flow-main" style="height: 216pt;"></div>
<div class="bloc l0 y0 web-rounded b6 orange flow-main" style="margin-bottom: -48pt;"></div>
<div class="bloc r0 y3 web-squared b0 jaune flow-main" style="margin-top: 36pt; margin-bottom: -12pt;"></div>
</div>
</div>
</div>
......
......@@ -30,30 +30,58 @@
// background
.fond{
background-color: #056dea;
background-color: #FCF9F9;
z-index: 0;
}
// titres
header{
color: white;
.headline{
// background: #FEED55;
}
.body > p:last-of-type::after{
display: none;
}
.body > p:nth-of-type(5)::after{
font: 6.5pt 'Belogodor';
content: '\00A0\E887';
}
// retirer num page / titres courants
.no-footer(1);
.no-footer(2);
// couleurs
.c1 {
background-color: #d5f8ff;
// prise du site web -> à tester
.orange {
background-color: #ff8766;
}
.jaune {
background-color: #FEED55;
}
.vert {
background-color: #93B77B;
}
.c2 {
background-color: purple;
.vertpale{
background-color: #D1EAC2;
}
.c3 {
background-color: #FF754E;
.turquoise{
background-color: #9AE2C3;
}
.c4 {
background-color: #FF69B4;
.mauve{
background-color: #6D81C4;
}
.noir {
background-color: #171216;
}
.rose{
background-color: #E3C4E5;
}
.bleu{
background-color: #01385E;
}
.bleuclaire{
background-color: #C2E8FD;
}
//___ illus ___
......@@ -64,15 +92,26 @@ figure img {
figure figcaption {
display: none;
}
figure:nth-of-type(1){
.trans(-6deg,0,center,center);
width: 85pt;
top: -18pt;
left: 48pt;
.trans(-5deg,0,center,center);
img{
width: 180pt;
border: 2pt solid black;
}
top: -54pt;
left: 0pt;
}
figure:nth-of-type(2){
.trans(8deg,0,center,center);
width: 120pt;
top: 0;
left: 24pt;
.trans(0deg,0,center,center);
img{
z-index: 1;
border-radius: 50%;
width: 156pt;
// width: 180pt;
// border: 2pt solid black;
}
top: 6pt;
left: 0pt;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment