Skip to content
OverviewSolutions
20
Comments
6
Lucas Costa
@LucasNCosta

All comments

  • Brice THIBAULT•100
    @DarkjuliusSubmitted almost 2 years ago

    Hi there.

    I did not encounter any difficulties in particular on the challenge itself. It's general in the sense that I have a lack of practice in HTML & CSS. For example: semantics and responsiveness.

    I have a big doubt precisely about the responsive. What do you think ? Does he respond to the challenge? The code can definitely be improved. I am open to opinions.

    I encountered a problem on the site URL. That is, the CSS was not taken into account with Google Chrome. I tested it on Edge, Opera and Firefox. It's functional. I tested it on Google Chrome in guest mode: It works. It must probably be from my Google account.

    Thank you and have a good day.

    Responsive page with Flexbox

    1
    Lucas Costa•350
    @LucasNCostaPosted almost 2 years ago

    Olá, primeiramente, parabéns por concluir o desafio!

    Vou dar algumas dicas, espero que eu consiga te ajudar. Os dois "figure" que usou podem ser substituídos por:

    <div class="imagem"> <picture> <source media="(min-width: 1000px)" srcset="imagens/image-product-desktop.jpg" type="image/jpg"> <img src="imagens/image-product-mobile.jpg" alt="Gabrielle-Essence-Eau-De-Perfum-by-CHANEL"> </picture> </div>

    Deverá fazer as devidas adaptações no CSS para ser bem efetivo, ajustar os ".img-desktop" e ".img-mobile". Recomendo usar "px" no lugar de "rem" no "media-querie", pois se ajusta melhor em diversos aparelhos.

    No mais, está de parabéns, continue os estudos! para eventuais consultas pode usar meu repositório: https://github.com/LucasNCosta/projetos/tree/main/pratica/product-preview-card

    0
  • Lucas Costa•350
    @LucasNCostaPosted almost 2 years ago

    Olá, meus parabens por ter concluído o desafio. Agora vamos as dicas.

    (<img src="img/barcode.png" width="250px" height="" alt="">) --> pode substituir por (<img src="img/barcode.png" alt="">) --> o "height" pode pagar e o "width" pode escrever no CSS.

    O "h2" pode substituir por "h1", se enquadraria melhor na situação.

    @media only screen and (max-width: 375px) and (min-width:1440px) --> o "max" e o "min" estão aplicados de maneira errada -- @media screen and (min-width:1440px) -- tente isso, creio que ira funcionar.

    <div class="main"> -- pode simplesmente usar o "main" substituindo a "div" e a classe pode nomear ela de acordo -- class="card"-- ou --class="container"--

    recomendo também a criação do "box-shadow" no ".main" pra dar uma sensação de sobreposição.

    para consultas pode utilizar: https://github.com/LucasNCosta/html-css/tree/main/treinar/qr-code-component

    Marked as helpful
    0
  • Success Daniel•60
    @RexbrainzSubmitted almost 2 years ago

    Hi. Please go through, your feedback is appreciated. I struggles with background image positioning. please help explain how to fix it to fit. Thank you.

    Profile card with html/css

    1
    Lucas Costa•350
    @LucasNCostaPosted almost 2 years ago

    primeiramente, meus parabéns por concluir o desafio! agora vamos as dicas:

    "Body" é toda a área do site, "Main" é onde o conteúdo principal ficará, o fundo de circulos você deve aplicar no "body", recomendo usar "div" pra cada uma das imagens, não aplique dois "backgrounds" na mesma área pois fica difícil para posicionar. Pode deixar apenas o perfil dentro do "main".

    O nome você pode aplicar em um "h1" e a idade em um "p", juntamente com "display: inline-block;" nos dois parâmetros. irá facilitar na identificação (caso tenha problema no posicionamento pode usar "top" e "left" aplicando um "position: absolute;", pra funcionar tem que aplicar "position: relative;" no "body")

    A mesma técnica pode aplicar no restante do código.

    Pode usar o pacote inicial que o Frontend Mentor disponibiliza, lá tem instruções de fonte, cor, tamanho de fonte e tamanho de conteúdo.

    Tente usar outros parâmetros além de "p" e "span", também tente treinar posicionamento, isso ajudará bastante.

    Boa sorte e continue os estudos!

    Para aconcelhamento entre em: https://github.com/LucasNCosta/html-css/tree/main/treinar/profile-card

    0
  • Lucas Costa•350
    @LucasNCostaPosted almost 2 years ago

    Olá, primeiramente parabéns por concluir o desafio.

    Recomendo retirar os "p" de dentro dos "h3,h4 e h5", os "h3, h4 e h5" podem ser substituídos por "h1" ter a mesma formatação do nome.

    A idade você pode colocar em um "p" em vez de um "span" dentro do "h1" e adicionar "display: inline-block;" pra ele.

    O "background" do "body" pode manter a cor sólida do "Cyan", os "svg's" pode colocar cada como "background" de uma "div" pra posicionar no local certo, a cor de "background" das "div" pode manter o "Cyan".

    para consultar como fazer use meu repositório: https://github.com/LucasNCosta/html-css/tree/main/treinar/profile-card

    0
  • William•190
    @tuaPuan83Submitted almost 2 years ago

    This is my first project after I have learned HTML/CSS from udemy. Please check my code and leave some advise. Thank you

    Product preview card by MaskCoder

    2
    Lucas Costa•350
    @LucasNCostaPosted almost 2 years ago

    First, congratulations on the challenge.

    you can change the image to: "<picture> <source media="(min-width: 1200px)" srcset="imagens/image-product-desktop.jpg" type="image/jpg"> <img src="imagens/image-product-mobile.jpg" alt="Gabrielle-Essence-Eau-De-Perfum-by-CHANEL"> </picture>" This will change the image depending on the screen size.

    you can change the button's SVG to a "span" or "i" that you can import from Google Icons: https://fonts.google.com/icons

    Ever heard of the "Mobile First" method? I highly recommend it, it will make it easier when creating the Media Query.

    to serve as a tip: https://github.com/LucasNCosta/html-css/tree/main/treinar/product-preview-card

    Marked as helpful
    1
  • Askan Ken•60
    @askan-kenSubmitted almost 2 years ago

    How to change images on hover properly? I tried my best, but still looks bad

    Also, how to put line below the price, I tried using border-bottom but yeah it looks bad

    NFT preview card

    3
    Lucas Costa•350
    @LucasNCostaPosted almost 2 years ago

    the line below you can put through the HTML using <hr> in place of "class:border", In "Julius Wyvern" you can replace the "a" with a "span", in CSS just change the color of the "span", "<div class="nft-main-container">" can replace with "main", it will be more organized, you use a lot of "a" unnecessarily, which ends up messing up your code, try to use only when necessary.

    some help to clear some doubts: https://github.com/LucasNCosta/html-css/tree/main/treinar/nft-preview-card

    Marked as helpful
    0