Amandine Alonso : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(→‎HTML)
(Balise : Remplacé)
 
(4 révisions intermédiaires par le même utilisateur non affichées)
Ligne 2 : Ligne 2 :
 
== Note d'intention ==
 
== Note d'intention ==
  
−
== Code HTML/CSS ==
+
== CSS ==
 
<syntaxhightlight lang="css">
 
<syntaxhightlight lang="css">
  

Version actuelle datée du 17 décembre 2021 à 13:45

Poirot Investigate, Agatha Christie

Note d'intention

CSS

<syntaxhightlight lang="css">

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;800&family=Cormorant+Garamond:ital,wght@0,300;0,700;1,400&family=Mochiy+Pop+P+One&family=Philosopher:ital@0;1&family=Zen+Antique&display=swap');


body,html {

font-size: 10pt; text-align: left; font-family: 'Cormorant Garamond', serif; color: black; line-height: 4mm; }

/*#autrice { font-family: 'Cormorant Garamond'; color:white; font-size:10pt; text-align: left; }*/

  1. colofon{

font-family: 'Cormorant Garamond', italic; font-size: 10pt; text-align: center; break-before: page; margin-top: 170mm; line-height: 4mm; margin-left: 10mm; color: black; }


  1. contents2{
   font-size:15pt;
   
   }
  1. TITRE {
  font-family: 'Cormorant Garamond', serif;
  font-weight: bold;
   font-size:30pt;
   color: white; 
   text-align:left;
   line-height: 9mm;
   
   }

@page { 



background: linear-gradient(to right , rgba(0, 100,90, 0.5)  0%, rgba (0, 100,90,1)  100%);

size:110mm 210mm; margin-left:5mm; margin-right:5mm; margin-bottom: 10mm; margin-top:10mm; border: width style color; 


   @left-middle{
    
   transform: rotate(-90deg);



   }

}


@page:left{ background: white; margin-left: 5mm; margin-right: 15mm;

@bottom-left-corner { 

   content: counter(page);

   margin-left: 5mm;
   color: black;
   }

}

@page:right{ 

   text-align: right;

margin-left:15mm; margin-right:5mm;


background: white; 

  @bottom-right-corner {
   content: counter(page);

   margin-right: 5mm;
   color: black;
   }
   #rectangle {
       color: black;
       witdht:20mm;
       height: 190mm;
       }

}

  1. rectangle {
   margin-left: 40mm;

width: 20mm; height: 20mm; border: 3mm solid black; position: absolute; break-before: right; margin-left: -10mm; box-shadow: 10px 8px 10px black; 

    }


h1 { 

   font-size: 20pt;

text-align:left; 

   font-weight: normal;

color:red; }


  1. titlepagemedium {

font-size: 40pt;

text-align: left; color:black; margin-top: 110mm; margin-left:-5mm; position:absolute;


}

  1. CH1{
   text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

   font-size: 20pt;
   color: black;

position: absolute; 

   }
  1. CH2 {
     text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; 

   }
  1. CH3 {
        text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; 

   }
  1. CH4 {
        text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; }

  1. CH5 {
         text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; }

  1. CH6 {
         text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; }

  1. CH7 {
         text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; }

  1. CH8 {
        text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; }

  1. CH9 {
   text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; }

  1. CH10 {
   text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; }

  1. CH11 {
   text-align: center;
   margin-left: -5mm;

font-family: 'Cormorant Garamond', 

    font-size: 15pt;
   color: black;

position: absolute; } div.contents2 { 

   margin-top: 20mm;
   text-align: left; 
   font-size: 15pt; 
   font-family: 'Cormorant Garamond',
   font-weight: bold;
   color: white;
   line-height: 10mm;
   position: absolute;
   text-decoration : none;
   
   }
  1. TOC{
   text-align: center;
   margin-left; -10mm;
   font-size: 30pt;
   font-weight: normal;

font-family: 'Cormorant Garamond', serif; font-weight: bold; 

   font-weight: normal;

color:black;



}

h3 { font-size: 30pt; 

   font-weight: bold;

font-family: 'Philosopher'; 

   font-weight: normal;

color:white; color:pink;


}



i{ 

   margin-top: 30mm;
   font-family: 'Cormorant Garamond', Extra-bold;

font-size:30pt; color: black; line-height: 5mm;


}

div.dots { 

   font-size: 30pt;
   text-shadow: 4px 2px 4px black;
   
   }


div.chtitle {


margin-top:170mm;

font-size: 30pt; font-family: 'Cormorant Garamond', serif;

color: black; text-align: left; line-height: 12mm;


break-after : page; position: absolute;

/* border-width:1px 2px 3px 2px; 

border-style:solid ;
border-color:white;
padding:100px;*/



} @page : chtitle { 

     background: black;
   }

@page :first { background:black; 

   @right-middle {
       visibility: hidden;
   }
   @top-center {
       visibility: hidden;
   }
   @top-right-corner {
       visibility: hidden;
   }
     @bottom-right-corner {
        visibility: hidden; }

@top-left-corner { 

       visibility: hidden;

}

}


@page { 



/*background: linear-gradient(to right , rgba(0, 100,90, 0.5)  0%, rgba (0, 100,90,1)  100%);  */


size:110mm 210mm; margin-left:5mm; margin-right:5mm; margin-bottom: 10mm; margin-top:10mm; border: width style color; 


@left-middle{
    
   transform: rotate(-90deg);


   }



   @top-center {
   content: "The Poirot Investigate";
   text-size:9pt;
   margin-left: -5mm;
   color: white;
   }
/*   @bottom-right-corner {
   content: counter(page);
   color: white;
   
   padding-right: 8ch;
   }*/

}

  • /



</syntaxhighlight>

Récupérée de « https://designnumerique.be/w/index.php?title=Amandine_Alonso&oldid=3529 »