I used HTML and CSS (flex)

Hey, great work on this one. Both desktop and mobile layout is good, the responsiveness could be better but still you did great considering you only learn it about 2 weeks!

Some suggestions would be:

• Adding a padding to all the sides of the body tag would be great to prevent the layout from touching the sides of the screen when it is being scaled down.
• On the hero image, on the .img-area selector, you don't really need to specify the width and height of it, since the img inside it will give the container the size it needs. Then you could just add the height: 100% and width: 100% to the img inside it so that it will scale when the browser get's resize and will not overlap the container.
• Also, just a tip. Avoid using height: 100vh on a container, like the body tag. When you use this, the body tag will only have a fixed height and that is the height of your screen. So when the content of your website is much greater than the height of your screen, technically, your body tag doesn't not captures them. Instead, a practice, use min-height: 100vh. This will use the full height of the screen, but it will expand if it needs to, like when the content is large in terms of height.

Other than that, you really did great in here.