Skip to content
OverviewSolutions
17
Comments
10
Jonah Ssegawa
@devjhex

All comments

  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    Great work @eduardotejeda, congrats on completing your challenge. And without doubt an answer to your question. I built this project twice. First with HTML and CSS and second with Tailwind CSS and to be honest with plain CSS, it was a pain for me especially when dealing with the gradients of the results circle in the component yet I was still looking for perfection. But it's so great that you managed to complete it. Happy coding 👌👌

    1
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    @judgemongcal Congratulations on completing this challenge, it really shows that you put a lot of effort into it, keep it up and keep on practicing. On the side of suggestions though I just wanted to talk about the position of the component itself which could be centered more like the design by adding the following lines to your body styles.

    body{
padding: 0;
font-family: 'Outfit', sans-serif;
background-color: #0D192C;
/*Add the following lines to your code*/
displaty:flex;
justify-content:center;
align-items:center;
flex-direction:column;
height:100vh;
}

    Otherwise to be honest, You really did a great job. Happy coding👌👌👌

    0
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    Hello @7Wall you've really done an excellent job on this challenge it really show that you push in a lot of effort into it, Great work. As a suggestion, in your HTML instead of using a div for the container class it is recommended to use more accessible elements like the article element which will be so helpful for accessibility most especially screen readers to understand how your code is structured, other than that you have really done it well. Happy coding!!

    Marked as helpful
    0
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    @Edmiro-Cacoma This is a well-built solution, you really put in the effort to make it excellent, Keep it up. I just hoped that this would also be helpful. To center the preview card vertically also.

    body {
  display: flex;
  align-items: center;
  font-family: "Inter", sans-serif;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--main-bg);
  justify-content: center;  /*Add this to the body styles of the preview card*/
}

    Otherwise, you really did an excellent job on this solution. Hope this is helpful to you. Happy coding!

    Marked as helpful
    1
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    Hello @Scazee, you have done a really great job with this solution. Thanks for putting in the effort until it's completed. Hope these suggestions will help in your solutions too! In your code, I think it's better to use tags that are more accessible like <section> and <article> which increases its availability to your audience.

         <section class="flex-container"> instead of <div class="flex-container">   
     <article class="qr-container"> instead of <div class="qr-container">

    This makes it accessible to screen readers hence so that they know what the elements mean Hope this helps, otherwise Great solution and Keep it up!

    0
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    @Algka You have done a very great job on this component, It shows that you put in a lot of effort completing it, Well done. I hope this suggestion would help in the positioning of the component in the center of the page.

    body{
     background-color: var(--Very-dark-blue1);
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     height: 100vh;
}

    Otherwise, you have done an excellent job. Keep up with the code!!

    0
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    Your solution is perfect, you've really done an excellent job well done! As a suggestion though to make the component responsive even on a higher range of devices and to make your width more reliable, I just thought it would be better to use the max-width property instead of width for the component because it reduces the lines in the long run and many other benefits concerning responsiveness. Otherwise, Seriously you've done extremely well. Keep up with the code.

    Marked as helpful
    0
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    @Richlee-demo According to your code it would be better to make the body element a display of flex and the other properties below so as to center the card easily as shown below.

    body {
      display:flex;
      justify-content:center;
      align-items:center;
      flex-direction:column;
}

    Hope you would find this helpful.

    Happy coding and keep up with the spirit.

    Marked as helpful
    1
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    Really looks excellent, How do you make your designs so perfect?

    2
  • Jonah Ssegawa•240
    @devjhexPosted almost 2 years ago

    A suggestion regarding your code that could be of interest to you to get the hover effect on the image to work:

    First of all, we need to have an element that will overlay the image element.

    • To do this you may need to create a div element inside the the image container that contains the icon
    <div class="nftimagecontainer">
        <img
          class="nftimage"
          src="images/image-equilibrium.jpg"
          alt="Equilibrium"
        />
         <div class="imageOverlay">
           <img src="/*location of the icon*/"/>
          </div>
      </div>

    Second, we need to make the newly created div be located in the same position as the image and give it the (light blue) color.

    • To do this, you need to give the new div a position of absolute and its image container a position of relative so that the new div can be put anywhere in the image container
    .nftImageContainer{
    position:relative;
}
.imageOverlay{
        position:absolute;
        background-color:/*the color you want (use rgba or hsla to give the color a little opacity e.g (rgba (0, 255, 247,0.6)*/ 
        /*styles to make the div in the same position as the image*/
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
       /*this is to give the div the same border radius as the image (to make it look the same */
        border-radius: /*Same border radius as the image*/;
 }
       /*this should also be done to position the icon in the middle*/
.icon-view{
        /*the absolute value should also be put on the icon too*/
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
    }
/*then make the overlay disappear by adding this style to the imageOverlay styles*/
.imageOverlay{
            .....
            ......(other styles written previously)
           display:none;
}

    Lastly make the imageOverlay element show when the image has been hovered over

    .nftImageContainer:hover .imgOverlay{
            display: block;
        }
    Marked as helpful
    1