All comments

• 

  Shiv• 350

  @undrthegraveyard

  Submitted 4 months ago

  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

  50

  

  imad• 3,330

  @imadvv

  Posted 4 months ago

  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

  1

  This comment has received 1 replyShow
• 

  Hanem Naga• 20

  @hanemNaga

  Submitted 11 months ago

  i made this website with desktop first media query for responsive,I want to use mobile first could you suggest free tutorials for me

  

  responsive huddle landing page

  1

  30

  

  imad• 3,330

  @imadvv

  Posted 11 months ago

  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

  0

  This comment has received 1 replyShow
• 

  Diana Jordan• 20

  @dee-jordan

  Submitted 12 months ago

  Completed this NFT Preview challenge. I always seem to have issues with hovering and span functions. If anyone has any tips and resources of the thought process or good practice tips, I would like to be able to determine how to use these functions on my own.

  

  NFT Preview

  1

  40

  

  imad• 3,330

  @imadvv

  Posted 12 months ago

  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

  0
• 

  Mohammed• 10

  @Osmosis-Jones

  Submitted over 1 year ago

  i had rouble removing the background color from the parent div below the qr image.

  

  HTML and CSS

  1

  40

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

  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

  0
• 

  timidij• 220

  @timidij

  Submitted over 1 year ago

  Please I need help on this project, I am having a challenge trying to position the background balls at the top and bottom...

  

  Profile card

  2

  50

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

  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!

  0
• 

  Abhiram• 150

  @abhiram-s21

  Submitted over 1 year ago

  please give feedback

  

  single place grid component (grid)

  2

  40

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

  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

  1
• 

  Igor• 230

  @MIU-cz

  Submitted over 1 year ago

  please help! how can i do transparency on image like at template design? my way:

  1. add opacity on div - 0.65;
  2. add opacity on img - 0.45; but it non like on template!!

  

  Stats preview card component solution Flex + SCSS

  1

  40

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

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

  Have you considered using mix-blend-mode instead of opacity?

  you can try something like this,

  .card__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity: 0.45; */
  mix-blend-mode: multiply;
  }
  

  Overall, your attempt was really good. Keep up the great work!

  Marked as helpful

  0

  This comment has received 3 repliesShow
• 

  Ross Porter• 10

  @porter-s-ross

  Submitted over 1 year ago

  I don't think that my project really transfers very well to mobile. I wanted to make this component as simple as possible, so without getting into things like media queries, are there some ways that would help to create responsive designs?

  

  QR Component using HTML/CSS only

  2

  80

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

  Greeting Ross Porter!! Congratulations for completing your first challenge, 👏👏👏.

  you did great job using flex, you can just use max-width instead to fix width on the card, and also it's a good idea to use rem instead of percentage, something like so

  .card {
  	
  max-width: 19rem;
  	
  }
  

  Overall good attempt, keep it up, and have a good day/night

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  P

  CJ Cameron• 350

  @CJCameron13

  Submitted over 1 year ago

  Having the cyan overlay display over the image didn't work the way I thought it would. However I did figure out how to get it to work. It's a little glitchy when hovering though. Any suggestions? Thanks!

  

  NFT Preview Card Component

  2

  70

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

  Greeting CJ Cameron!! Congratulations for completing your challenge, 👏👏👏.

  I have made some improvements to your code based on your feedback. Here are the updated HTML and CSS sections:

  html line 18

  <a href="#"id="cube-image" aria-label="cube-image">
  <img  alt="cube-image" src="images/image-equilibrium.jpg">
  </a>
  

  css line 35

  #cube-image {
  display: flex;
  border-radius: 15px;
  margin-bottom: 20px;
  background-color: var(--cyan);
  position: relative;
  justify-content: center;
  align-items: center
  }
  
  #cube-image::after {
  content: url(./images/icon-view.svg);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 200ms ease-in-out, scale 300ms ease-in-out;
  scale: 0;
  }
  
  #cube-image img {
  max-width: 100%;
  display: block;
  opacity: 1;
  border-radius: 10px;
  transition: opacity 200ms ease-in-out;
  }
  
  #cube-image:hover::after {
  opacity: 1;
  scale: 1;
  }
  #cube-image img:hover {
  opacity: .5;
  }
  
  

  I hope these changes help resolve the issue with the cyan overlay display. It's worth mentioning that there are multiple approaches to achieve a hover effect on an image, and your solution looks great! Happy coding!

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Alexander Hergert• 710

  @alexander-hergert

  Submitted over 1 year ago

  I had a hard time to find the right way to let the image look like it should. I can't match the dark tones. If you have an advice for me feel free to help out :D Ofcourse any feedback is welcome.

  

  stats preview card component

  1

  80

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

  Greetings Alexander Hergert! Congratulations on completing this challenge! 👏👏👏

  You did a great job on this task! I have a suggestion that might make it even better. Have you considered using mix-blend-mode? It's a CSS property that can enhance your design. You can learn more about it on the Mozilla Developer Network website: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.

  Additionally, instead of using a solid background color, you can experiment with gradients. Here's an example of how you could implement it:

  .section-image::before {
  /* background-color: var(--soft-violet) */
  background: linear-gradient(320deg, #ff61f3 0, #b86ffb 100%);
  }
  
  .section-image img {
  mix-blend-mode: multiply;
  }
  

  Feel free to play around with the values and see what works best for you!

  Overall, your attempt was really good. Keep up the great work!

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  HeroLeam• 30

  @HeroLeam

  Submitted over 1 year ago

  In my view it was a simple project to start my career, I had no difficulties, the project is visibly close to the challenge, I can't say if I did the development correctly and not to say the patterns in question of typing the codes.

  If you can evaluate and mention points that I can improve, thank you!

  

  3-Column Preview Card Ccomponent

  3

  80

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

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

  you did great, and you can also add cursor: pointer; to the buttons, as you may notice that buttons doesn't have a cursor pointer by default,

  button {
  cursor:pointer;
  }
  

  overall good attempt, keep it up and have a good day/night

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  ASM• 100

  @ahmed-sabbah-mohamed

  Submitted over 1 year ago

  i hope that my coding is good, but if you found duplicate in code or errors tell me to improve my skills.

  

  3-column-preview-card-component-main

  1

  40

  

  imad• 3,330

  @imadvv

  Posted over 1 year ago

  Greeting Ahmed! Congratulations for completing your challenge, 👏👏👏.

  I take a moment to look at your code, and you did great job, moreover I have some tips for you that may help improve your solution,

  for the body is a good idea to change the fix height: 100vh to min-height: 100vh let the body grow with the contents, if you look at devtools on the browser and hove over body element you will notice that body not wrapping up all the page, you can check this also by changing background-color in the body, as for the cards if each of them well have a h1 it's better to change from the div to section element for more semantically meaning, and you can take advantage for that to reduce duplication on css and use nth-child pseudo-class.

  example

  <section class="card">
  </section>
  
  <section class="card">
  </section>
  
  <section class="card">
  </section>
  

  css

  .cards {
  display: inline-block;
  padding: 35px;
  width: 300px;
  }
  
  .cards::nth-child(1) {
  background-color: hsl(184deg, 100%, 22%);
  }
  .cards::nth-child(2) {
  background-color: hsl(184deg, 100%, 22%);
  }
  
  .cards::nth-child(3) {
  background-color: hsl(184deg, 100%, 22%);
  }
  
  

  and to solve border-radius issue you can simply put it on the container itself,

  .container {
  border-radius : 10px;
  }
  

  Hope this give you some hints Overall you did great, have a great day/night, and keep coding 👍.

  Marked as helpful

  0

  This comment has received 3 repliesShow