Skip to content
OverviewSolutions
8
Comments
15
Anderson Fernandez
@anderson-fndz

All comments

  • Anderson Fernandez•350
    @anderson-fndzPosted 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
  • Anderson Fernandez•350
    @anderson-fndzPosted 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
  • Anderson Fernandez•350
    @anderson-fndzPosted 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
    @Ranadheerm6Submitted 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
    Anderson Fernandez•350
    @anderson-fndzPosted 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
  • Anderson Fernandez•350
    @anderson-fndzPosted over 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
  • Eduardo Reis•40
    @EduardoReisMSSubmitted over 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
    Anderson Fernandez•350
    @anderson-fndzPosted over 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
  • nathan•200
    @Hardcore01Submitted over 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
    Anderson Fernandez•350
    @anderson-fndzPosted over 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
  • Anderson Fernandez•350
    @anderson-fndzPosted over 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
  • Anderson Fernandez•350
    @anderson-fndzPosted over 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
  • Anderson Fernandez•350
    @anderson-fndzPosted over 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
    @kahkashanshaikSubmitted over 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
    Anderson Fernandez•350
    @anderson-fndzPosted over 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
  • Anderson Fernandez•350
    @anderson-fndzPosted over 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