All comments

• 

  Prajwal Dhuli• 360

  @Prajwal-88

  Submitted about 1 year ago

  I faced no difficulties

  

  responsive nft card

  1

  70

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  the :hover pseudo-class is missing:

  h1:hover, strong:hover{
  color: aqua;
  }
  

  to make your span more aligned with the image, try to put the values ​​of width and height:

  .image-section span {
      position: absolute;
      z-index: 100;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      cursor: pointer;
      border-radius: 15px;
      width: 100%;
      height: 98%;
      transition: background-color 0.25s ease;
  }
  

  0
• 

  Chibuzo Franklin Odigbo• 50

  @Franklivania

  Submitted about 1 year ago

  

  Responsive Result Summary with HTML & CSS

  1

  40

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  tips:

  • create a div.container and inside it create two more div to make it easier to style and make your code better, leave all this inside your main
  • for the main container, its main in this case:

  main{
      width: 738px;
      height: 514px;
      display: flex;
      border: none;
      border-radius: 35px;
      box-shadow: 5px 5px 5px 2px #00000021;
  
  }
  

  Marked as helpful

  1
• 

  Marius• 130

  @Idksomany

  Submitted about 1 year ago

  

  Result Score Frontend Mentor

  1

  40

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  there are points in the style that you can try to make it more similar to the design:

  • card

  .card{
      width: 738px;
      height: 514px;
      display: flex;
      border: none;
      border-radius: 35px;
      box-shadow: 5px 5px 5px 2px #00000021;}
  

  • and adjust the color of the texts on both cards

  1
• 

  Ranadheerm6• 60

  @Ranadheerm6

  Submitted about 1 year ago

  Javascript newbie here. This is the first js challenge that I have completed all by myself. I know the code looks crude and less sophisticated but I managed to finish this challenge without looking at anyone's code. However I will keep optimising the code as I get better. Till then please do take some time out to review and give me pointers as to how I can make it less dry. Thanks :)

  

  Interactive rating component solution using dom manipulation

  1

  50

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  • to improve the code and not need to store each button in a variable it would be interesting to create a form and for each button to have an input type: radio this would make your code smaller, and adding a functionality to the buttons, the checked that would leave the selected button with a different color so that the user can see which option he selected
  • to make the card more like the original, try:

  .card{
      width: 400px;
      height: 415px;
      position: absolute;
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items: center;
      border-radius: 35px;
      background-color: #1F2630;
      color: #ffffff;
  }
  

  • And you are to be congratulated for being able to do this code without needing help

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Olamide_Prodigy• 70

  @OlamideAfunsho

  Submitted about 1 year ago

  I'd appreciate any feedback

  

  NFT-card component using HTML and CSS

  1

  40

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  to make the container more like the design, try:

  .container{
      width: 350px;
      height: 595px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgb(20, 37, 61);
      border-radius: 15px;
      box-shadow: 0px 20px 50px #00000080;
  }
  

  to make the container aligned try to use flexbox to make your project more responsive, using position would be more suitable for other functionalities

  Marked as helpful

  0

  This comment has received 3 repliesShow
• 

  Eduardo Reis• 40

  @EduardoReisMS

  Submitted about 1 year ago

  Tive problemas para conseguir alterar o a cor da imagem ao passar o mouse e adicionar o icon svg. Agradeço aqueles que puderem ajudar de alguma forma.

  

  Desafio NFT preview

  1

  31

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  opa eai mano, para solucionar esse problema do hover é simples:

  • da uma conferida no meu projeto
  • criar uma div para colocar dentro a imagem da NFT e um container ou span onde dentro teria o svg, vai ficar algo assim no HTML:

  
  <div class="view"> [div para agrupar tudo]
  
    <span class="view-content"> [span para o svg, onde vai ser da cor ciano de fundo]
         <img id="img-eye" src="images/icon-view.svg" alt="view">  [o svg em forma de olho]
    </span>
  
    <img class="img-nft" src="images/image-equilibrium.jpg" alt="image NFT">  [a imagem NFT]                 
  
  </div>
  

  • e a partir dai você aplica os estilos, para poder sobrepor e ficar um em cima do outro vai ter que usar o position; absolute no span.viewcontent e um position: relative na div pai dessa, na div.view e ai mexer no css usando hover e opacity :

  view {
      position: relative;
      width: 300px;
      height: 300px;
  }
  
  .img-nft {
      width: 300px;
      border-radius: 8px;
  }
  
  .img-nft:hover {
      opacity: 50%;
  }
  
  .view-content {
      opacity: 0%;
      position: absolute;
      background-color: #00e8e461;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
  }
  
  .view-content:hover{
      opacity: 100%;
  

  espero ter ajudado

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  nathan• 200

  @Hardcore01

  Submitted about 1 year ago

  La parte dificil es como controlar los botones dentro de un div. en este caso son hijos del div. para crear eventos de los botones al momento de hacer click y cambiar el backgraund color de los botones.

  

  css: GRID, FLEXBOX

  1

  30

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  • hay un bug en tu proyecto, cuando apertar el submit sin escojer ningun numero la pagina se cambia, tenias que primero escojer la calificacion para asi el submit sea activado, para eso puedes cambiar los buttons por inputs type="radio" y poner estos en uno form
  • cuando es marcado un numero en la calificacion solo el numero uno se cambia la color, mismo marcando otro numero

  CSS:

  • card:

  .card{
      width: 400px;
      height: 415px;
      position: absolute;
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items: center;
      border-radius: 35px;
      background-color: #1F2630;
      color: #ffffff;
  }
  

  • button

  .btn__calificacion{
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      background-color: #262F38;
      font-size: 1rem;
      color: hsl(217, 12%, 63%);
  }
  

  • font:

  @import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap');
  
   font-family: 'Overpass', sans-serif
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Susan Wafula• 50

  @Blackwidow8

  Submitted about 1 year ago

  

  Interactive rating component using html, css and javascript,

  1

  20

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  • I can't access your code through github
  • your project has a small bug, what happens if you click Submit without checking anything?Bug
  • for the css it would be interesting to use the same colors as the challenge, try:

  .container{
     width: 400px;
     height: 415px;
     background-color: #1F2630;
     border-radius: 35px;
  }
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Anuj Yadav• 90

  @ajishere07

  Submitted about 1 year ago

  Checkout this, do share some suggestions which I could have implemented.

  

  Basic html css card

  2

  40

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  good code! pay attention to the dimensions of your <main> it would be interesting to wrap the 2 <section> in 1 container to make it easier to manipulate the spacing, try using this for the containeror to apply it to the <main> :

  .container {
      width: 738px;
      height: 514px;
      display: flex;
      border: none;
      border-radius: 35px;
      box-shadow: 5px 5px 5px 2px #00000021;
  }
  

  together with that create a class for the sides of the content to make them look like:

  .side {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  

  your HTML will look like this

  <div class='container'> 
  	<section class='side main_scoreSection'> </section>
  	<section class='side main_summarySection'>
   </section>
  </div>
  

  Marked as helpful

  1
• 

  yash-15-d• 40

  @yash-15-d

  Submitted about 1 year ago

  1.What did you find difficult while building the project?

  • I think the submit button part has some issues although it works fine but it still not absolutely correct .

  

  Interactive_Rating_Component_FrontEndMentor

  1

  40

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  your code is fine, it's functional and without apparent bugs, but there are points in the css that can be improved:

  • img

     .icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #262F38;
      }
  

  • main

  main{
      width: 400px;
      height: 415px;
      display: flex;
      justify-content: center;
      flex-direction: row;
      align-items: center;
      border-radius: 35px;
      background-color: #1F2630;
      color: #ffffff;
  }
  

  and you can try using flexbox to make the spacing part of the elements inside the divs easier

  Marked as helpful

  0
• 

  kahkashan shaik• 90

  @kahkashanshaik

  Submitted about 1 year ago

  I have completed a task of Frontend Mentor, building a Summary Card using a combination of HTML, CSS, and JavaScript. The task involved designing and coding a dynamic summary card that displays key information in an attractive and user-friendly format. Frontend mentor community feedback on JavaScript code optimization will give me the improvise my JavaScript much better.

  

  Result Summary Page #html #css #javascript

  2

  40

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  • font-family is wrong, try using it in your code:

  @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap');
  
  body{
       font-family: 'Hanken Grotesk', sans-serif;
  }
  

  • to make the container more faithful to the project try using px:

  .card-container{
      width: 738px;
      height: 514px;
      display: flex;
      border: none;
      border-radius: 35px;
      box-shadow: 5px 5px 5px 2px #00000021;
  }
  

  • for button add gradient in hover pseudo class

  .btn{
      width: 288px;
      height: 56px;
      margin-top: 40px;
      border-radius: 30px;
      background-color: #303B59;
      color: white;
      border: none;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
  }
  	.btn:hover{
      background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
  }
  

  Marked as helpful

  0
• 

  Likithsreenivasa• 140

  @Likithsreenivasa

  Submitted about 1 year ago

  

  Interactive Rating Component using media queries and basic javascript

  1

  50

  

  Anderson Fernandez• 350

  @anderson-fndz

  Posted about 1 year ago

  your JS code is very good, the thank you page lacked style, you could leave the container ready and not add everything in the JS, and from there put display none to be able to override the first container

  1