Skip to content
OverviewSolutions
11
Comments
8
Felipe Chaves
@loopchaves

All comments

  • Felipe Chaves•240
    @loopchavesPosted about 2 years ago

    Iae, Micael Santiago. Parabéns pela solução, ficou realemnte muito boa.

    Uma dica pro seu layout é usar a propriedade transition. Essa propriedade faz uma tansição mais suave da aparencia do elemento quando o usuário interage.

    Se você adicionar transition: 0.5s; no CSS da classe ".view", do elemento "h1" e do elemento "a" vai ter uma transição da cor de maneira mais suave quando passar o mouse por cima.

    Outra dica é diminuir a opacidade no :hover da classe ".view" pra ela ficar levemente transparente, assim vai dar pra ver a imagem do cubo atrás. Experimenta opacity: 0.6;.

    Marked as helpful
    0
  • Felipe Chaves•240
    @loopchavesPosted about 2 years ago

    Iae, Joseph Matheus. Mandou bem nessa solução.

    Você pode usar a tag <q></q> invés de de <p></p> na citação, assim ela fica entre aspas duplas usando aspas mais elegantes.

    Outra dica é que no Firefox, o botão pra gerar uma nova citação, só funciona uma vez porque a primeira requisição fica caheada. Pra resolver esse problema você pode usar fetch(url, {cache: "no-store"}). Dessa maneira as requisições não ficaram em cache e será feita uma nova resquisição em cada clique.

    Marked as helpful
    0
  • Bruno Luiz•20
    @thenrybrunoSubmitted about 2 years ago

    Boa tarde galera, gostaria de se possível que me dessem dois feedback: 1- Se na visão de vocês ficou bom e parecido com o exercício proposto.

    2- Tive dificuldade apenas em fazer o efeito do hover na imagem, a dificuldade em si não foi nem fazer o hover, mas sim fazer a imagem do olho aparecer. Se alguém puder me dar um feedback quanto a isso, ficarei agradecido.

    Card NFT feito com HTML e SASS

    2
    Felipe Chaves•240
    @loopchavesPosted about 2 years ago

    Iae, Bruno. O layout ficou muito bom!

    Você colocou o link errado do repositório. Tá o repositório da solução do QR-Code, mas ancontrei o reposiotrio certo no seu GitHub.

    Em relação a imagem do olho, você pode fazer assim no CSS em .container-imagem:

    background: url('../img/icon-view.svg') no-repeat;
background-position: center;
    0
  • Mbahkingsley•20
    @MbahkingsleySubmitted about 2 years ago

    i had issues aligning the two price tags and also aligning the cart icon with text in the button. I could not figure out why the font fraunces was not working.

    flex box, media queries

    1
    Felipe Chaves•240
    @loopchavesPosted about 2 years ago

    Hi, Mbahkingsley!

    You can use flexbox to do this. In the parent element's CSS put:

    display: flex;
align-itens: center;

    In your code you would put these options in the "price-container" and in the "button".

    There are many other options that can help you with alignment using flexbox. See the link below with a complete guide to flexbox:

    A Complete Guide to Flexbox

    0
  • Alvin•140
    @alvyynmSubmitted about 2 years ago

    A little additional functionality is needed. I want to close an open accordion when I open another automatically. My current situation is that I can open all accordions by individually clicking on each. Can someone help me with this?

    Responsive accordion using HTML, Vanilla CSS and JS

    2
    Felipe Chaves•240
    @loopchavesPosted about 2 years ago

    Hi, Alvin!

    You can use the <details> tag instead of <button> to make the accordion. When you click on a <details>, the "open" attribute is added, which means that <details> is open. Just remove the "open" attribute from the rest of the <details> using JavaScript.

    See more about details tag in this link.

    Marked as helpful
    0
  • a-woodworth•290
    @a-woodworthSubmitted about 2 years ago

    Hi everyone! 👋

    Just finished this API challenge. Used async, await for the fetch api call. For the styles, used CSS Flexbox with Grid for my container.

    Happy Coding!

    Advice Generator App - JavaScript API

    1
    Felipe Chaves•240
    @loopchavesPosted about 2 years ago

    Hi bro, nice job!

    Clicking the button only loads a new advice once because the first request is cached. To solve this problem you can use fetch(url, {cache: 'no-store'}), so when the button is clicked it will load a new advice without caching.

    1
  • Felipe Chaves•240
    @loopchavesPosted over 2 years ago

    Como vai, Luciano! Seu layout ficou muito bom.

    Em relação ao seu código, você pode usar o flex no body pra centralizar todo o conteúdo na tela. Precisa definir o tamanho do elemento pai (nesse caso o body) porque o flex vai centralizar de acordo com esse valor.

    body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Nesse exemplo 100vw e 100vh vai ocupar todo o espaço da tela, "vw" e "vh" siginifiam "view width" e "view height" respectivamente.

    Outra dica é usar a tag <main> invés de <section>. Isso optimiza seu site para recursos de acessibilidade.

    Por último, evite usar <br> para espaçar os elementos. Você pode substituir isso por margin ou padding no CSS.

    Marked as helpful
    1
  • Felipe Chaves•240
    @loopchavesPosted over 2 years ago

    Nice job, bro!

    Marked as helpful
    1