Skip to content
OverviewSolutions
12
Comments
29

Maksim

@MaxTarasevichMinsk, Belarus590 points

Exploring Frontend Development.

Latest solutions

View more solutions

Latest comments

  • Maksim•590
    @MaxTarasevichPosted over 2 years ago

    The max-width property sets the maximum width of the container.

    In this case, if you remove the width value from the product-card block, then its width will be calculated automatically by the browser, depending on the content.

    Try this code for image:

    .chanel-photo {
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}

    Image is inline element and so you have to specify its width and height in css to always get the expected result. Read this article on mozilla about images

    Marked as helpful
    0
  • Maksim•590
    @MaxTarasevichPosted over 2 years ago

    Hello, Antonio!

    Good job! But there is still work to be done!

    The product-card block needs to be given a maximum width, in order to round the corners use the properties:

         border-radius: 10px
     overflow: hidden;

    If you find it difficult to deal with flexbox, I advise you to play with this game!.

    And of course MDN! - This is the best resource!

    Next, the card image needs a container to enclose it, and with the object-fit : cover property, you can stretch it across the parent box without losing proportion!

    I hope my feedback will help you!

    Marked as helpful
    0
  • Maksim•590
    @MaxTarasevichPosted over 2 years ago

    Hello! Congratulations on completing the challenge!

    I think you should pay more attention to the correspondence of your design to the original layout! In particular, the differences in indentation and different font sizes in the heading are striking. Also a background image, with it this layout looks much more fun!

    Tailwind has built-in animations, why not use them for hover effects like icons!? That would be great!

    On a screen resolution of 1440px and up to 1024px, you have almost no padding to the left and right of the content, the icons and the picture are pressed to the edge of the screen.

    I hope my feedback helps you!

    Marked as helpful
    0
  • Maksim•590
    @MaxTarasevichPosted over 2 years ago

    Hi Anthony!

    You can easily solve your problem by setting the property background-color as rgba(0, 255, 247, 0.65);.

    The opacity property when hovering over the .Card Image _wrapper block should be 1, respectively.

    .Card_image__wrapper__MClPi:hover .Card_overlay__3i7Lc {
    opacity: 1.0;
}

    You can't make the value of the opacity property of a child element greater than that of the parent element. Less - you can, no more!

    Also add a display: block property to the image, as it has a smaller height than the parent, and it's noticeable on hover!

    .Card_image__sWcC9 {
    display: block;
}

    I hope my feedback was helpful!

    Marked as helpful
    1
  • Maksim•590
    @MaxTarasevichPosted over 2 years ago

    Hi Nicolas!

    Great job! The animations look great! Especially on the CREW page.

    Add a background color for the body - dark, due to the fact that the default body has a white background, and it takes time to load background pictures - a characteristic flashing appears, not very pleasing to the eye!

    It's great that you decided to build your pages dynamically with JavaScript!

    But, you have a lot of repetition in the code, for example: you create an element, assign a class to it, insert text content, and so many, many times!

    Try to create a function that will do this! For example:

    function createElement (el = 'div', className='',text=''){
  let element = document.createElement(el)
  element.classList.add(className)
  element.innerText = text
  return element
}

    Then you can call this function as much as you like, creating the elements you need

       const main = createElement('main')
      const h3 = createElement('h3', 'title', ' title text')
      const strong = createElement('strong', 'classForStrong', 'text')

    I hope my feedback was helpful!

    Marked as helpful
    0
  • Maksim•590
    @MaxTarasevichPosted over 2 years ago

    Hi Bill!

    Good job!

    I think you need to work on some more styling to get your layout closer to the original!

    In particular, the cardContent block needs padding at the top and bottom, the heading and paragraph blocks - the text in them is centered, but must be left-aligned, and the width of these blocks must be limited, use the max-width property.

    At screen resolutions between 900px and 750px, your Stats preview card is pressed against the left edge of the screen.

    I hope my feedback was helpful!

    Marked as helpful
    0
View more comments