Fylo dark theme landing page master - Second exercise using SASS

Hi @oliveiring. I share with you the following link where I make an example of how I did that part of the web page.

Greetings. https://codepen.io/luis08201/full/jOmXJzP

@luis08201 I was almost there, the only problem was 2 line of code, But I'm glad that I did try.

Thank you so much for help out.

That's right @oliveiring , this is practice. I'm learning too. I'm glad I could help you. Keep it up.

Regards.

@oliveiring Sure. I'm gonna use this link you've already shared me for seeing your exercise.

@oliveiring @oliveiring Hello, I attach in this link the code so you can check it. Greetings. https://www.mediafire.com/file/yq339uaxh9h63sc/fylo-dark.rar/file

@luis08201 thank you so much, but later I still need you help of course you do not mind.

@oliveiring Sure, tell me your concern.

@oliveiring It was. I had to create a div called wave inside the main container, in which I called the image using background-image. Then, to the wave div I set position: absolute.

.main__page .wave { position: absolute; top: -15%; z-index: -1; background-image: url(../img/bg-curvy-desktop.svg); width: 100%; height: 50vh; }

The problem was with the responsive, I had to use another div called rectangle to avoid the space between the wave image and the other section.

.main__page .rectangle { display: block; width: 100%; height: 55vh; position: absolute; top: -2%; z-index: -1; background-color: #181f2a; }

It is not the best way, but it was the way I solved it.