Crafto Spa Salon - Ressources

Pour voir le site complet en action, rends-toi ici : Site démo. Attention, ne prends pas peur, on va y aller petit à petit ! Pour commencer, on va se concentrer sur la page d’accueil et la structure de base. Les parties plus complexes, comme les animations, les sliders ou les éléments nécessitant des plugins externes, viendront plus tard.

Maquettes graphiques :

Je te joins les maquettes pour les 3 formats responsives (desktop, tablette et mobile). À noter que la première section d’introduction est un slider, donc c’est normal que son aspect change avec le temps.

Fonts :

Pour les titres, exergues et éléments mis en avant, on utilise la police Rufina. : Rufina sur Google Fonts

Pour le texte courant, utilise la police Jost, disponible ici : Jost sur Google Fonts

Voici le code CSS pour importer ces polices dans ton projet :

/* font */
@import url('https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap');

Si tu veux zieuter le site complet c'est ici...mais attention à ne pas prendre peur, on va y aller petit à petit. Pour commencer on va se concentrer sur la page d'accueuil et sur la structure de base. La suite avec les animations et les éléments de slider ou qui nécessites des plugins externe. On le fera par la suite. Site demo : https://craftohtml.themezaa.com/demo-spa-salon.html

Maquette graphique :

Je vous joints les maquettes pour les 3 formats responsive (desktop, tablette et mobile). À noter que la première section d'introduction est un slider, c'est donc normale que l. Desktop, Mobile et iPad --> à télécharger ici

Fonts :

Pour la font à empatement (titre, exergue, élément mis en avant) on utilise : Rufina

Pour le texte courant on utilise : Jost

/* font */
@import url('https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap');

Palette de couleurs :

Voici les couleurs à utiliser dans ton projet :

    --accent-color: #fb7d61;
    --very-light-gray: #f8f3f0;
    --light-gray: #EEE8E6;
    --medium-gray: #858181;
    --dark-gray: #36332e;

    --accent-color: rgb(251, 125, 97);
    --very-light-gray: rgb(248, 243, 240);
    --light-gray: rgb(238, 232, 230);
    --medium-gray: rgb(133, 129, 129);
    --dark-gray: rgb(54, 51, 46);