Help to make look material design

Hi there,m

What do you mean by material design?

Hi there,

Material design is a new approach to making things with shadows/layers etc.

There's good information on here, and all the big tech giants are pushing for material design all the time:

https://material.io/design

Sorry I'm not really sure what I'm looking at here.

Can you be a little more specific and let me know what exactly you'd like to add to the dark purple area here?

Adding shadows?

Hi Leo,
Sorry for being vague. I think the 'Material' design would include CSS on areas such as:

- Box shadows to show hierarchy. To shadows to show that the dark purple element is above the light purple area

- increase the length of the purple area so that the content wrapper appears above the dark purple area

I hope that makes sense?

Try this CSS for shadow:

.page-hero {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

https://www.cssmatic.com/box-shadow

That's the idea! But could it have a shadow around the whole of the dark purple element similar in style to how it is in the content wrapper?

Have you tried tweaking the shadow with the cssmatic website I linked above?

Or am I missing something?

Hi there,
I have thank you - the bottom looks good. However, for the top of the element and menu it does not have similar shadow?

Hmm I don't see a way to apply a shadow following that outline you've shown above unfortunately.

There is no way to include the shadow from the bottom of the menu link:
https://www.screencast.com/t/YdVBWUp2

Okay, thank you very much for helping anyway!

No problem :)