1. contact@mathilderivoire.fr . 01 45 86 20 53 . www.mathilderivoire.fr
CHARTE GRAPHIQUE SITE ÉLYSÉE MONTMARTRE
LIST EFFECTS
Fichiers indesign + jpeg. Hover effects are in mockups layers.
TYPOGRAPHY
Google : montserrat 400 et 700
TITLE H1
TITLE H2
TITLE H3
“Parce que le bois est un matériau
durable, programmes construits en
”Paragraphe : Le bois empilé (rondins madrier…). Première
technologie constructive en bois. Apparu à partir du 5ème siècle.
link in text bold + hover effect red (avec tous ses dérivés, poteaux-
poutres, panneaux ossature….), à partir du 12ème siècle, notamment
avec les maisons à ...
R É S E R V E R
2. contact@mathilderivoire.fr . 01 45 86 20 53 . www.mathilderivoire.fr
27Mars 16
TRIKY
Home and programme : Overlays KELP 15%. The user can choose the opacity.
When mouse over, the overlay becomes in the color choosen for the «page-détail», opa-
city 60%.
WEBSITE STRATING EFFECT & SCROLLING FOR LIST IMAGE
http://www.sismodesign.com/fr/voir/
Starting page effect & Bounce scrolling effect
ANIMATION LOGO ONLY ON HOME, WHEN YOU ARRIVE ON WEBSITE
We’ll send you a keynote mockup to precise what we want.
ANIMATION HOVER LOGO
Style URPI
http://tympanus.net/Development/TextStylesHoverEffects/
3. contact@mathilderivoire.fr . 01 45 86 20 53 . www.mathilderivoire.fr
COLORS OVERLAYS
The user can choose the opacity; by default 0.15 :
Kelp
#1D1D1B
29, 29, 27
When mouse over , opacity 0.6 :
Wild Watermelon
#FF6177
255, 97, 119
Vista Blue
#89D9B5
137, 217, 181
Wattle
#D2DE48
210, 222, 72
Supernova
#FFD000
255, 208, 0
Wild Blue Yonder
#616AB3
97, 106, 179
ALL THE COLORS
Kelp
#1D1D1B
29, 29, 27
Dorado
#594C4C
89, 76, 76
Spicy Pink
#7A6F71
122, 111, 113
Bon Jour
#DFD3D4
223, 211, 212
Hint of Red
#F8F3F3
248, 243, 243
Wild Watermelon
#FF6177
255, 97, 119
Vista Blue
#89D9B5
137, 217, 181
Silver Tree
#77BF9F
119, 191, 159
Wattle
#D2DE48
210, 222, 72
Supernova
#FFD000
255, 208, 0
Wild Blue Yonder
#616AB3
97, 106, 179
4. contact@mathilderivoire.fr . 01 45 86 20 53 . www.mathilderivoire.fr
ANIMATION MENUS ACCOUNT, CART AND SEARCH
http://www.jqueryscript.net/demo/Creative-Morphing-Menu-with-jQuery-CSS3/
Bulb effect for the 3 top menu on the right
HOVER LINKS FOR THE INTRERACTIV TEXTE AND CONTENT
The color changes.
HOVER BUTTONS
Animation, the button becomes red
Style Quidel (third line of the quidel effect)
http://tympanus.net/Development/ButtonStylesInspiration/
HOVER CONCERTS
Like latest news, here :
http://conrad.thememountain.com/one-page/
Same with overlays with several colors
ANIMATION WITH ROUNDS
On clic, the small round become big and displays informations or form
http://bmoca.org/
PAGE TRANSITION (between the grid of home, programme, and page-détail)
http://tympanus.net/Development/3DGridEffect/
FORM INPUT TEXT EFFECT
Just a change of color on click and write
5. contact@mathilderivoire.fr . 01 45 86 20 53 . www.mathilderivoire.fr
Submit button animation :
fill horizontal, with «merci» in the button after
http://tympanus.net/Development/ProgressButtonStyles/
ICÔNES
In the mockup
PAGINATION
Infinite scroll
PAGE CONTACT
Google map customized
https://snazzymaps.com/style/54567/montmartre
[{«featureType»:»administrative»,»elementType»:»labels.text.fill»,»stylers»:[{«color»:»#4
44444»}]},{«featureType»:»landscape»,»elementType»:»all»,»stylers»:[{«color»:»#f2f2f2
»}]},{«featureType»:»landscape.man_made»,»elementType»:»geometry.fill»,»stylers»:[{«
color»:»#d9e974»}]},{«featureType»:»landscape.man_made»,»elementType»:»geometry.
stroke»,»stylers»:[{«color»:»#d9e974»}]},{«featureType»:»landscape.man_
made»,»elementType»:»labels.icon»,»stylers»:[{«visibility»:»on»}]},{«featureType»:»po
i»,»elementType»:»all»,»stylers»:[{«visibility»:»off»}]},{«featureType»:»road»,»elemen
tType»:»all»,»stylers»:[{«saturation»:-100},{«lightness»:45}]},{«featureType»:»road.high
way»,»elementType»:»all»,»stylers»:[{«visibility»:»simplified»}]},{«featureType»:»road.
arterial»,»elementType»:»labels.icon»,»stylers»:[{«visibility»:»off»}]},{«featureType»:»transi
t»,»elementType»:»all»,»stylers»:[{«visibility»:»off»}]},{«featureType»:»transit.station.rail»,»
elementType»:»labels»,»stylers»:[{«visibility»:»on»}]},{«featureType»:»water»,»elementTyp
e»:»all»,»stylers»:[{«color»:»#2b14ff»},{«visibility»:»on»}]},{«featureType»:»water»,»elemen
tType»:»geometry.fill»,»stylers»:[{«color»:»#616ab3»}]},{«featureType»:»water»,»elementT
ype»:»geometry.stroke»,»stylers»:[{«color»:»#ff0000»}]},{«featureType»:»water»,»element
Type»:»labels.text.stroke»,»stylers»:[{«color»:»#ffffff»}]}]
MOBILE
Dropdown menu with animation on hamburger like here :
Style squeeze
https://jonsuh.com/hamburgers/
LOADER
http://tobiasahlin.com/spinkit/
