All solutions

Hola amigos,

I have built a full-stack app over this challenge.

The page is in Portuguese, but the documentation in Github is in English, so please check it. As I see it, the most challenging part of this design was to set the mockup illustration with responsivity as the width changes.

Because at the mobile media query it had a width:90svw and in the desktop: width:600px.

Also, it worked well using flex: 1 0 240px at the card's responsivity.

I'm glad to return to posting on the platform.

If you have any advice for me based on this project, please send it, and I'll be happy to learn from you.

Best regards from Brazil :)

Buenos días community would love suggestions on how to make the clsx classes better as I know there's code repetition but couldn't grasp how to make the following (written inside the Context):

const summaryClasses = clsx({
    flex: true,
    "space-between": true,
    "align-items-center": true,
    "details-gap": true,
    heading: true,
  });

  const summaryClassesBold = clsx({
    flex: true,
    "space-between": true,
    "align-items-center": true,
    "details-gap": true,
    heading: true,
    bold: true,
  });

Here's the code on the component. It should be bold if the condition is satisfied, if not it should have all the summaryClasses:

        <summary
          className={
            active[0] === item.id ? summaryClassesBold : summaryClasses
          }
        >

I tried to do the ternary inside the clsx (inside the Context) but then it bugged as the item.id is identified only in the component.

In one way or the other, glad to finish it, as it took more time than expected.

Saludos from Brazil :)

Hola community :)

Glad to figure out a way to make the position: absolute element on the hero section of the desktop width centered using a grid on the parent div and a large gap making each children align end and start respectively:

<div
class="lg: grid lg: gap-[16rem] absolute
lg:grid-cols-[1fr,1fr] lg:left-[0] lg:right-0 lg:top-[11.5rem] "
>
<h1  class="lg:justify-self-end">MODERN <br/> ART GALLERY</h1>
<div  class="lg:justify-self-start">
<p>The arts in the collection...</p>
<button></button>
</div>

Beyond that, I wonder if there's a better way to switch between images on TailwindCSS depending on the screen's width. I put all the options of each image type and swapped them with display: none and display: block though I believe there's a better way to do so. Can you help me out on that, please?

"Buenas tarde mi gente" good afternoon everyone :)

I had difficulty changing the svg color on the hover. First, I wanted to create all of them using the pseudoelement::before, but couldn't switch their colors on the hover state. So I tried using background-image , but through that option, I could only change the SVG color using filter(at least as far as I researched.) So I inserted all of them on the HTML, and the change in the SVG's fill was successful.

A part of the code I'm not 100% satisfied with is to add the "user not found" of the DOM.

I did do using the parentNode, as follows:

const container = document.querySelector("section.container");

const invalid = document.createElement("p");
invalid.id = "invalid-input";
invalid.innerHTML = `The user <em>${lostUser}</em> was not found :(`;

if (container.childNodes.length

Hey there (from 🇧🇷 ) :),

I will appreciate feedback on how you manage the placement of the image ( app inside the cellphone) along with the red card, as I had a hard time changing them from desktop-tablet-phone.

Also, I took a lot of time to do the top right illustration, as I started using only flex, than switched to only Grid, to only then mixed them both. If you can please share ways to identify and quickly execute a illustration like this one will be of great value for me.

Thanks for the advice :)

How to switch images from desktop to mobile(or vice-versa) properly?

I put the first in the HTML and, when it hit width>40rem I hide it, showing the mobile version with a :beforepseudo-element.

Though I know it's not good because, on the mobile, the image won't be accessible to screen-readers.

Can you give me a review related to that, please?

Best regards from Brazil :)

I had the goal to build the user card using only JS, since I started to learn it a couple of weeks and want to absorb the concept of creating tags on it.

So I translated the given HTML base code to arrays on JS, which was quite challenging.

I want to learn more about how to categorize the data arrays. If you can help me with that, it will be a treat.

It would also be great to know if it's readable and if the variable names are understandable since I had difficulties naming them while working.

Best regards from Brazil 🇧🇷

Hola Frontend Mentor community,

I would be delighted if you regard how I made the elements change their appearance on hover. I used a few: .container: hover>.item {} and wonder if there's a better alternative.

It's the third challenge I completed, and that's the one I think the design is more interesting.

Best regards from Curitiba, Brazil 🇧🇷

Hello, front-end Mentors from all over the globe, :)

• I use nothing but rough css and HTML.
• Thus far, all I know about web development comes from the terrific courses made by Jad Joubran, and they include no library or framework;

The feedback I would love to read about:

• I had a hard time with the background-image. Please tell me, if you feel like it, the best practices to make one of them (the desktop version) horizontal and the other one vertical;

• I put the Huddle Logo in the same div as the illustration. How did you organize this part of the code? Has someone thought it was better to employ display: grid?

• The width of the text is set with char. Are there better practices than that?

Well, be it as it may, I'm glad to finish my second solution and continue building front-end skills with you.

Greetings from Curitiba, Brazil :)

I set the text under the QR Code with:

/* parent */
.card { 
    position: relative;
}
/* child */
#text {
    position: absolute;
    bottom: 0;

I wonder if there's a more flexible way to position the #text inside the parent.