Submitted over 2 years ago

Order Summary Component Challenge

Mochimooo•50

@mochimooo

A solution to the Order summary component challenge

Preview Code

Solution retrospective

Hi Frontend Mentor peers:

Is there a better way to write the hover effect than how I wrote it in my code?

.button:is(:hover,:focus){
    background-color:hsl(245, 75%, 52%, 80%);
    cursor: pointer;
}

.hover:is(:hover,:focus){
    cursor:pointer;
    color:hsl(228, 45%, 44%);
    font-weight: var(--fw-bold);
}

.hover-1:is(:hover,:focus){
    cursor:pointer;
    color: black;
    font-weight: var(--fw-bold);
}

How can I anchor the footer note to the bottom of the page? I tried using `.bottom{position: fixed; bottom: 5px;' and it would cause the footer note to overlap onto the summary card. 🤷‍♀️

Thank you.

Code

Please log in to post a comment

Community feedback

P
Dave Quah•650
@Milleus
Posted over 2 years ago
👋 Hello!

I think using :is is fine, but I would probably move the cursor: pointer to the base element (non-hover) instead.

More importantly though, it would be a lot better if the proper interactive HTML elements, i.e. <button> or <a>, were used instead of <div>, <u> and <b>. Using the proper elements would help with accessibility greatly - able to navigate on with keyboard, pressing "Space" or "Enter" triggers the element, screen reader would announce that it is a clickable button or link, etc.

As for how to anchor the footer note, my approach was to use CSS grid. I'd declare 3 rows (1fr, auto, 1fr) and have the <main> in row 2 and <footer> in row 3. Row 1 is an empty row to help keep <main> centered perfectly (thus why it is 1fr, similar to row 3).

I hope this helps and happy coding!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord