All solutions

Hi Everyone! 👋🏻 Found this layout to be interesting. I wanted to keep to the design as close a possible maintaining the dimension of the input at 426px by 56px but upon testing realized that it may be a little too small for longer email address. While keeping it's size, a dynamic width input (via js) would resolve this, but couldn't figure out how to shift the absolutely positioned button along the horizontal when the text overflows a given area and unshift when the text is deleted.

Any insight on how I can accomplish this would be greatly appreciated! 😄

Happy Coding! 👾

Hi Everyone! 👋🏻 This was a fun challenge but I had some difficulties with the hero image in this challenge. If you have any suggestions on how make the image responsive while limiting the number of media queries, I would love to hear your thoughts.

Thank you and happy coding! 👾

Hi Everyone! 👋🏻

Had some difficulty figuring out the optimal layout technique with the two versions of the image and placements of the logo without hiding elements from one version to another. Can anyone suggest the best practice for this layout?

Hi Everyone! 👋🏻 Your feedback is always much appreciated! 😄

Hi Everyone! 😄

I had some difficulty figuring out what to do at specific viewport sizes but ended up going with what I thought would work the best. Please provide me with some feedback with what I can do better.

👍🏻 Thanks!

Hi Everyone! 😄 Please take a look and provide me some feedback on what I could have done better.

Had some difficulty with background alignment but found a solution in the end. 😄 Any feedback always appreciated! 👍🏻

Hi Everyone! 👋🏻

I would like to know what the best practice is for positioning the profile picture.

I used a div that contains the card's background and profile image, positioned the parent relative and the child absolute and moved up the image using a negative margin, but don't quite know if this is the best method. What do you think would be a better solution?

   <div class="profile">
      <img src="./images/bg-pattern-card.svg" alt="">
      <picture>
        <img src="./images/image-victor.jpg" alt="Victor Crest's profile picture">
      </picture>
    </div>

	.profile { position: relative;}

	.profile  picture  img {
		border: 0.25rem  solid  var(--clr-white);
		border-radius: 50%;
		position: absolute;
		left: 50%;
		bottom: -3rem;
		transform: translateX(-50%);
	}

Any other feedback you can provide will be greatly appreciated! 😄

What's the best practice for creating an overlay on an image? I replicated the effect with an outer div with a background image and an inner div with the overlay. Any other feedback will be much appreciated! 😄

Any feedback would be greatly appreciated 😄

Any feedback on improving would be much appreciated 😄