changement image fond canopee et détails
This commit is contained in:
parent
05d4edffcd
commit
361eac5728
3 changed files with 10 additions and 4 deletions
|
@ -1,5 +1,7 @@
|
||||||
# Laboratoire du futur site web de Deuxfleurs
|
# Laboratoire du futur site web de Deuxfleurs
|
||||||
|
|
||||||
|
Les tests graphiques sont dans `/lab`, une page HTML par idée à développer. N'hésitez pas à ajouter la vôtre !
|
||||||
|
|
||||||
## Objectifs techniques
|
## Objectifs techniques
|
||||||
|
|
||||||
* Responsive mobile-first design.
|
* Responsive mobile-first design.
|
||||||
|
@ -10,6 +12,8 @@
|
||||||
|
|
||||||
* **Branches et canopée** : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
|
* **Branches et canopée** : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
|
||||||
|
|
||||||
|
* `ronce/feuille brush.abr` contient la brosse Photoshop utilisée par Ronce pour les feuilles d'arbre au premier plan. On pourrait l'utiliser pour faire des bordures de fond.
|
||||||
|
|
||||||
* **Parallax** : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).
|
* **Parallax** : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).
|
||||||
* S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
|
* S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
|
||||||
* Couleurs : Ronce a proposé quelques couleurs dans `/lab/gimp/branches-et-canopee`.
|
* Couleurs : Ronce a proposé quelques couleurs dans `/lab/gimp/branches-et-canopee`.
|
||||||
|
@ -22,7 +26,7 @@
|
||||||
|
|
||||||
Il semblerait qu'Element utilise du [Fira Sans](https://fonts.google.com/specimen/Fira+Sans)... Hm.
|
Il semblerait qu'Element utilise du [Fira Sans](https://fonts.google.com/specimen/Fira+Sans)... Hm.
|
||||||
|
|
||||||
* [Bordures de `<code>` comme dessinées à la main](https://stackoverflow.com/a/6402175) ?
|
* [Bordures « dessinées à la main »](https://stackoverflow.com/a/6402175) ?
|
||||||
|
|
||||||
## Inspirations
|
## Inspirations
|
||||||
|
|
||||||
|
@ -40,7 +44,7 @@
|
||||||
|
|
||||||
Utiliser des bannières qui donnent du sens au contenu.
|
Utiliser des bannières qui donnent du sens au contenu.
|
||||||
|
|
||||||
* [Semantic CSS] (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
|
* [Semantic CSS](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
|
||||||
|
|
||||||
Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique.
|
Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique.
|
||||||
|
|
||||||
|
|
|
@ -38,7 +38,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-page {
|
#main-page {
|
||||||
background-color: var(--bg-secondary-color);
|
background-color: var(--bg-ternary-color);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
# Illustration de Ronce
|
# Illustration de Ronce
|
||||||
|
|
||||||
**Ces images ne sont pas libres de droit.**
|
**These images are not free of rights.
|
||||||
|
|
||||||
|
Ces images ne sont pas libres de droit.**
|
||||||
|
|
||||||
Janvier 2021
|
Janvier 2021
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue