Live Repo

Hometown Solo Project

The task was to create something like this without any teacher's help:

How I built my website:

1. It's pretty clear that the website above consists of 3 sections. So firstly I created 3 sections by using semantic elements such as header, main, footer, and a section in each of them.
2. I gave them classes and placed them in a flex container for centering the whole page content.
3. I created a hero section, activities, and a card using flexbox, too.
4. I made the activities section responsive by using flex-wrap:wrap.
5. I made a background image responsive with background-size and background-position properties. The key was to hide an overflow on the x-axis so it can adjust to smaller screen sizes.
6. I made the code DRYer by creating a utility class for padding.
7. I created a colors palette on coloors.
8. I checked a contrast.

Going above and beyond:

1. I learned how to create wavy backgrounds with CSS and SVG. For that I used https://www.shapedivider.app/
2. I created an animation effect on hover by scaling img elements and a card, changing their transition time.
3. I found out how to create a border with a gradient and to be able to use a border-radius at the same time.

Here is how: