How to change the look in Quark as in the demo?

Hi. This is my first post.
I have installed GRAV and I created a small website to test it. I use the default Quark theme, which shows 4 different layouts in the screenshots. But I have failed to reproduce anything but the first. I switch the page type to "Blog", the photo background appears, and then the text is just overlaid on top.
http://aethse.ha.uth.gr/
Are there instructions for how to change the appearence? I suppose there are CSS classes that will do the trick, but I although I tried the ones in the documentation, I did not manage to change the appearence to the "Say hello wtih Grav" look.

@TGD,

I use the default Quark theme, which shows 4 different layouts in the screenshots.

Not sure what you mean with "screenshots".

I switch the page type to “Blog”, the photo background appears, and then the text is just overlaid on top.

Do you mean you changed the name of file user/pages/01.home/default.md into user/pages/01.home/blog.md? That won't work...

I suggest you take a step back and start reading the documentation.

I am sorry I was not clear. This is the page from:
https://github.com/getgrav/grav-theme-quark/blob/master/README.md

What I would like is a tutorial that will lead me from the first layout on the left to the more advance layout to the right. I tried the CSS parameters mentioned in the page, but at the most I got something resembling layout #2. Is the necessary CSS included in the quark theme? Is there an actual page of this layout so I can study the way it is built?

Thank you. I feel more confident now!