Responsive and Flex Box

Hello there👋! Congratulations on completing this challenge!

There are no major problems with the code, but there are some minor issues that need to be addressed for best practices and correct functionality:

It's recommended to use units when setting margins, such as margin-bottom: 10%; in the main selector.

The .hover selector has a height property with a value of 300px, but it's also overridden in the same selector with a height of 0px. The same selector also has an opacity property set to 0, which makes the element initially invisible. The height and opacity properties are animated on hover, which makes the .color element appear.

The .card-img:hover selector has a z-index property set to 12, which is a high value that may cause overlapping issues if other overlapping elements use values above 12.

The CSS declarations in the media queries could be grouped together to avoid repeating the same body font-size property.

Here's the revised code with these issues fixed:

body {
  background-color: hsl(217, 54%, 11%);
  color: white;
  font-family: 'Outfit', sans-serif;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  margin-bottom: 10vh;
}

.container {
  width: 300px;
}

.flex {
  display: flex;
  justify-content: space-between;
  margin: 3px;
}

.foot {
  display: flex;
  padding: 7px;
}

.card {
  background-color: hsl(216, 50%, 16%);
  padding: 20px;
  border-radius: 15px;
  width: 300px;
}

.hover {
  position: relative;
  height: 300px;
  width: 100%;
}

.first {
  color: hsl(178, 100%, 50%);
}

p,
.second span {
  color: hsl(215, 51%, 70%);
  font-size: 18px;
  line-height: 2rem;
}

.foot img {
  width: 50px;
  margin-right: 5px;
  border: 1px solid white;
  border-radius: 50%;
}

.foot span {
  padding-top: 20px;
  color: white;
}

#line {
  color: hsl(215, 32%, 27%);
}

h2 {
  font-weight: 530;
}

.foot span:hover,
h2:hover {
  cursor: pointer;
  color: hsl(178, 100%, 50%);
}

.color {
  background-color: hsla(178, 100%, 50%, 50%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  transition: ease-in-out;
}

.hover:hover .color {
  height: 300px;
  opacity: 1;
}

.color img {
  margin: 42%;
}

.card-img:hover {
  cursor: pointer;
  z-index: 2;
}

.card-img {
  width: 100%;
}
@media (max-width: 450px), (max-width: 375px) {
  .container {
    width: 80%;
    margin: 10%;
  }
  
  body {
    font-size: 0.8rem;
  }
}

Anyway, your solution is great. Hope you will find this helpful. Happy coding!

Hello,

Good job completing the project. The design looks good.

• Avoid using the <hr> tag. While these tags can be used to create line breaks and horizontal rules, they are generally considered outdated and not recommended. You can use the border bottom property of the previous div and add color and border thickness to the same.

• Kindly avoid using <br> tags. The <br> tag can also affect accessibility, as it can disrupt the flow of content for screen readers and other assistive technologies.

• For your media query, the max-width is set to 450px, which means it will only be applied for screens with width less than 450px(It works well for iphoneSE but not for iphoneXR :). For mobile devices, you can set it to 640px(https://tailwindcss.com/docs/screens).

• Hope this helps. Happy coding!!