Workit Landing Page (with SCSS)

What are you most proud of, and what would you do differently next time?

The detail I'm most proud of is something most people probably won't notice. The Figma design file indicates that the primary button has an outline that is a pixel wide when it's in a hover/focus state, and said outline has angled corners. I'm not too familiar with using clip-path, but I was able to replicate this outline (with the following code playing a part in that):

.button__primary {
    &:hover, &:focus {
        clip-path: polygon(
            -1px 0px, 
            0px -1px,
            100% -1px,
            calc(100% + 1px) 0px,
            calc(100% + 1px) 100%,
            100% calc(100% + 1px),
            0px calc(100% + 1px),
            -1px 100%
        );
        outline: 1px solid var(--green);
    }
}

(If you zoom in really far, you might see it!)

I'm not sure that my methods for positioning the background patterns and for creating the rounded ornamental borders were the best. I also think there must be a better way to set the positions of the ordered list. If I were to try this challenge again, I would give those aspects more consideration.

What challenges did you encounter, and how did you overcome them?

Creating the different layouts for the value list took some time. Since it uses display: flex, custom list item numbers were inserted using :before, which wasn't new. However, generating the numbers for the list items involved some CSS I hadn't used before: counter values.

.value__list {
    //Initializes the counter named "value"
    counter-reset: value;
}

.value__list_item {
    //Increments the counter named "value" with each list item
    counter-increment: value;

    &:before {
        //Provides the counter to the list item
        content: counter(value);
    }
}

Near the end of making this solution, I found that the text-decoration shorthand is not as widely supported as I thought, and the way a text underline is displayed can vary from browser to browser, so I made sure to set all relevant values explicitly and separately:

text-decoration-color: var(--green);
text-decoration-line: underline;
text-decoration-thickness: 3px;
text-underline-offset: 0.375rem;

What specific areas of your project would you like help with?

I would like to know what the best method is for creating the curved ornamental borders. I tried clip-path and ended up using border-bottom-left-radius / border-bottom-right-radius, but I found that any of those options seem a little too curved on the ends, compared to the requested design.