Skip to content
OverviewSolutions
42
Comments
14
Milos Djordjevic
@milosshomy

All comments

  • Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey Alseny, congratulation on solution. You need to set height to 100% on your article tag and on your image. When something is not how you wanted I highly recommend to use developer tool, that way you can find what is missing.

    Keep coding! :)

    1
  • Attrams•130
    @AttramsSubmitted about 2 years ago

    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

    <div class="image-container"> <img src="images/image-equilibrium.jpg" alt="nft image" class="image-nft"> </div>

    // 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; }

    Responsive site built with FlexBox

    2
    Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey Attrams, congratulation on solving this challenge. The code you provided basically says that you are creating another div using pseudo element with the same width and height and giving him a background-color and a content which is a icon and that icon is centered using flexbox. That created div is hided with opacity: 0 and on hover it is set back to be visible. You can find more about pseudo elements here, they are really useful.

    https://www.youtube.com/watch?v=zGiirUiWslI&t=25s

    Keep coding!

    Marked as helpful
    0
  • David Magalhães•130
    @davidwilliamxSubmitted about 2 years ago

    I had trouble with the background image in the tag body, the image didn't stay in the center of the page. Comments are welcome!

    Order summary card

    1
    Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey David, congratulation on solution. Your path towards image is wrong you need to use dots to exit css file then go into images file and find desired image, like this. background-image: url(..images/pattern-background-desktop.svg);

    Keep coding!

    1
  • Gora Indiraja Shafa•140
    @goraindirajaSubmitted about 2 years ago

    I am still confused about how to set the height of the main image in media queries. if I don't set any heights on the image in the media query, it will be full height so it won't look like as the example shown.

    Product Preview Card using HTML, CSS

    3
    Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey Gora, congratulation on solution. This challenge provides two images one for desktop and one for mobile. You can switch images based on screen size.

    Keep coding! :)

    0
  • Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey Divakar, congratulations on solution. I have few tips for you. You can use display: flex on your .rating-item div, that way the starts and the span will be next to each other like on design. You can translate your .rating-item:nth-child(2) , .rating-item:last-child so they move a little bit to the right like on design.

    I hope this helps. Keep coding!

    Marked as helpful
    0
  • Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hello Noureddine , congratulations on this solution. Here are some advices. You can center your .container with a flexbox just set min-height: 100vh to your body. You can apply those background images with a background-image property on body and position them where you want. https://developer.mozilla.org/en-US/docs/Web/CSS/background

    I hope this helps you. Keep coding!

    Marked as helpful
    0
  • Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey Itaro, congratulations on finishing this challenge. As I can see your HTML is fine, but you can improve it by using proper tags. For example your <div> with a class of ".deck" could be an <article> and your <p> tag with a class of ".description" could be a <blockquote> tag. https://www.w3schools.com/tags/tag_article.asp https://www.w3schools.com/tags/tag_blockquote.asp

    I hope this helps!

    Marked as helpful
    1
  • codinci•180
    @codinciSubmitted about 2 years ago

    I'd like to receive feedback on explicitly sizing the card. Is this a best practice when it comes to responsive web design?

    Responsive product preview card

    2
    Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey! Good job on completing this challenge. As what I can see from your code , use min-height:100vh; on your container , that way card will be centered properly. And one more thing avoid fixed height unless you really need to do it , instead use min-height , that way it will be responsive. Happy coding!

    Marked as helpful
    0
  • Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey, good job on finishing this challenge. Try to avoid fixed height, instead use min-height, that way it will be responsive. Keep coding! :D

    Marked as helpful
    1
  • King-Lemuel Alpha•20
    @Galahad-pySubmitted about 2 years ago

    Couldn't figure out how to change the icon color to white, tried using color, still didnt work.

    Also couldn't figure out how to add space in span.....error = >ofjules wyvern>

    Original files

    2
    Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    Hey , good job on finishing this challenge. You can use fillter: brigthness(100) to change image color to white and for the space try to not wrap image and text in h4 , wrap it with div and then use image with two spans. Keep coding! :D

    Marked as helpful
    0
  • Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    You can use <span> tag instead of <p> tag on prices, that way they will be aligned next to each other. Good job on solution. Keep coding! :D

    1
  • Arturo Gonzalez•30
    @Arthur-GnzSubmitted about 2 years ago

    Could you give me feedback? (Anything is accepted)

    flexbox

    4
    Milos Djordjevic•990
    @milosshomyPosted about 2 years ago

    You can use min-height instead of height on div with a class wrapper. That way the text won't be outside of the wrapper. Good job, keep coding! :D

    Marked as helpful
    0