Skip to content
OverviewSolutions
50
Comments
136

imad

@imadvvMorocco3,330 points

Technologist, enjoy solving challenges and learning about real world applications.

I’m currently learning...

#CSS #JavaScript #Golang #Linux

Latest solutions

View more solutions

Latest comments

  • Shiv•350
    @undrthegraveyard
    What are you most proud of, and what would you do differently next time?

    Turned out quite well, so happy happy! 😊

    What challenges did you encounter, and how did you overcome them?

    While adding a hover interaction in the hero image of that neon background color and view icon. I took the help of my custom GPT. ✌🏻

    What specific areas of your project would you like help with?

    Just one very specific part:

    In styles.css, there is a particular section of .nft__overlay, along with its hover interaction code.

    I would love to hear your thoughts on how that interaction could have been implemented more efficiently. 😃

    💰 Responsive NFT Card Preview 💰

    1
    imad•3,330
    @imadvv

    greeting Shiv,

    There are many ways to implement the hover effect. Your implementation works, but from an accessibility standpoint, there are some notes and improvements that can make it better.

    Currently, the overlay is a focusable element while the div element is not!. "You can make it, of course, but it will require adding some specific data attributes." The more stand-fore way to improve this, is by changing the div to either a link (a) or a button. This will allow users to interact with the NFT in its active state.

    For the nft__overlay class, you can take advantage of CSS pseudo-classes to implement the view icon, as it is just a decorative icon and does not need to be included in the HTML structure. I made some changes to the nft__overlay to demonstrate this:

    html line 25

               <!-- <img src="images/icon-view.svg" alt="View icon" class="view-icon"/> -->

    css

    .nft__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(178, 100%, 50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.nft__overlay::after {
    content: url(./images/icon-view.svg);
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

/* Hover Interation */
.nft__overlay:hover,
.nft__overlay:focus {
    background-color: hsla(178, 100%, 50%, 0.5);
}

.nft__overlay:hover::after,
.nft__overlay:focus::after {
    opacity: 1;
}

    These changes will make your overlay more accessible and maintain a clean HTML structure.

    Hope this give you some hints , Keep up the good work!

    Marked as helpful
  • imad•3,330
    @imadvv

    Greeting Hanem Naga! Congratulations for completing this challenge!, 👏👏👏.

    this https://web.dev/learn/design is a great resource for Learning Responsive Design!
    also I take a look at your code and you did great job, but you may want to add cursor: pointer; to the buttons, because for some reason buttons don't have cursor pointer by default.

    button {
  cursor: pointer;
}

    but overall good attempt, Happy Codding

    Marked as helpful
  • imad•3,330
    @imadvv

    Greeting Diana Jordan! Congratulations for completing your challenge!, 👏👏👏.

    they is a lot of ways to archive this overly effect, this is good resource from w3school, and also this blog post has some good information, but I did some changes to your code to make it function,

    html

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

    css

    
main .images{
    position: relative;
    background-color: rgb(139, 213, 218);
    border-radius: 10px;
    z-index: 1;
    overflow: hidden;
}

.image-first{
    max-width: 100%;
    transition: opacity 200ms ease-in-out;
}
.images::after{
  content: "";
  position: absolute;
  background-image: url("./images/icon-view.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 250ms ease-in-out;
}

.images:hover .image-first{
  opacity: .2;
}
.images:hover::after {
  opacity: 1;
  visibility: visible;
  scale: 1;
}

    this implementation uses css pseudo-elements, I Hope this give you some hints or tricks after all good attempt, keep coding

    Marked as helpful
  • imad•3,330
    @imadvv

    Hello Mohammed! Congratulations on successfully completing the challenge! 👏👏👏

    I have reviewed your code and have a few suggestions to further enhance it. The main issue I found was with the width: 10% property in the .qr-container class. To resolve this, I recommend changing it to max-width: 16rem;. Additionally, removing the height attribute from the image and setting the width to 100% will improve the image display.

    Here's the updated code:

    body {
min-height: 100vh;
display: grid;
place-content: center;
}

.qr-container {
background-color: #fff;
margin: auto;
max-width: 16rem;
padding: 20px;
align-items: center;
border-radius: 15px;
}

.qr-image img {
width: 100%;
margin: auto;
padding-bottom: 20px;
background-color: #fff;
}

    Overall, your attempt is commendable. Keep up the good work, and welcome to the Frontend Mentor community!

    Marked as helpful
  • imad•3,330
    @imadvv

    Greeting timidij!! Congratulations for completing your challenge!, 👏👏👏. well done

    this background a litter bit tricky, but they are many ways to archive it, one of the easy-it way to archive it is pseudo-elements,

    this snippet for example should works,

    body {
min-height: 100vh;
max-width: 1440px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Kumbh Sans", sans-serif;
color: var(--Very-dark-desaturated-blue);
background-color: var(--Dark-cyan);
position: relative;
z-index: 1;
overflow: hidden;
}

body::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50vh;
width: 50vw;
  
background-image: url("./images/bg-pattern-top.svg");
background-position: bottom right;
background-repeat: no-repeat;
z-index: -1;
}
  
body::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 50vh;
width: 50vw;
  
background-image: url("./images/bg-pattern-bottom.svg");
background-position: top left;
background-repeat: no-repeat;
z-index: -1;
}

    Hope this helps or give you some hints,

    Happy Codding!

  • imad•3,330
    @imadvv

    Greetings Abhiram! Congratulations on completing this challenge! 👏👏👏

    you did great job using grid, and you can also use media query to make it responsive, something like so

    .container {
display: grid;
max-width: 43rem;
margin: 1rem;
border-radius: 8px;
overflow: hidden;
    
}

@media (min-width: 35rem) {
.container {
grid-template-columns: repeat(2 , 1fr);
grid-template-rows: repeat(2 , 1fr);
}

    also notice that I changing the width to max-width and rem instead of percentage helps width responsivity, as percentage doesn't give the accepted result ,

    but over all good attempt, Keep it up, and Happy Codding!

    Marked as helpful
View more comments