All solutions

Hello everyone, this is my solution to this challenge. Thank You.

Hey Guys, this is my solution for this challenge, Thank You!

Hey guys, this is my solution for this challenge. Thank You!

Hey guys, this is my solution for this challenge. Thank You!

Hey guys, this is my solution for this challenge. I had trouble positioning the icons in the cards and after googling I found a solution but I don't understand why the icons move outside the card when I comment out position: relative in .card. Full code can be found below. Thank You.

 .card {
  width: 100%;
  height: var(--mobile-card-height);
  background-color: white;
  margin-bottom: var(--card-margin-bottom);
  border-radius: 0.5rem;
  padding: 1.4rem;
  position: relative;
  box-shadow: 0px 0.875rem 1.25rem -0.313rem rgba(218, 228, 240, 1);
}

 .card img {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: inherit;
}

Hey guys, this is my solution for this challenge. I had a problem reducing the space between the name and status in the cards, is there anyway to do that? Thank You.

Hey guys, this is my solution to this challenge. Thank You.

Hey guys, this is my solution to this challenge. I noticed that the container expands a little when I hover over the button, is there a way to prevent that? Thank You.

Hey guys this is my solutions for this challenge. Thank YOu

Here is my solution to this challenge. Any improvements are welcome. Thank You.

Hi guys, I had a difficult time implementing the hover effect for the image. After googling I found some code which solved it but I didn't fully understand the code. I will appreciate it if you could explain it to me. code can be found below. Thank You.

// HTML

// CSS .image-container { width: 100%; border-radius: 0.6rem; position: relative; overflow: hidden; cursor: pointer; }

.image-container::after { content: url('images/icon-view.svg'); background: hsla(178, 100%, 50%, 0.5); position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.25s ease; }

.image-container:hover::after { opacity: 1; }

Hi guys, this is my solution to the challenge. I tried using ems and rems as recommended but I realized that when I was resizing the window, the words always overlap the window when getting close to the mobile break point so I used the px. I was wondering if you could give specific attributes I should use em and rems. Thank You.

Please can somebody help explain why when I comment out the "width: 100%;" property of .qr-image in the style.css, the image overlaps.