Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
20
Comments
17
Thiago Morais
@thirraz

All comments

  • Leonardo Viana•30
    @leveau10
    Submitted almost 2 years ago

    Base Apparel cooming soon

    1
    Thiago Morais•420
    @thirraz
    Posted almost 2 years ago

    Opa! Primeiro, parabéns por ter completado o desafio! Acredito que posso ajudar a melhorar a resolução com algumas sugestões

    • O site pode estar congelando por conta do evento keyup. Tente usar keypress para ver se resolve o problema
    • Quando o usuário clicar no botão de enviar o e-mail e estiver tudo certo, adicione uma mensagem de sucesso (não esqueça da função preventDefault)
    • A keyword "var" não é mais usada por ser mais antiga, além de agora termos melhores opções como "let" "const"

    E é isso! Qualquer coisa me dá um toque que eu ajudo em mais alguma coisa

  • Lorenzo Casa•40
    @LxLorenzo
    Submitted almost 2 years ago

    Newsletter SignUp with Success Message

    1
    Thiago Morais•420
    @thirraz
    Posted almost 2 years ago

    a sua resolução tá quente, mas vou deixar duas dicas aqui que acredito serem úteis:

    • Tente se aprofundar no CSS Grid. Muitos devs têm medo da complexidade mas é muito melhor do que flex em diversos casos

    • Tente usar a pseudo-classe ::marker para customizar os bullets da lista, pois assim você usará <ul> e não <p>, o que melhorará a semântica . Vou deixar um link caso se interesse. Marker Pseudoclass

  • Gustavo Simplício Bernardo•10
    @simplicibr
    Submitted almost 2 years ago

    HTML CSS and JS

    1
    Thiago Morais•420
    @thirraz
    Posted almost 2 years ago

    meu mano você tentou fazer esse botão da forma mais criativa possivel, o que é bom, mas não deu o resultado esperado.

    tenta só usar essas propriedades aqui:

    1. padding => para dar espaçamento nas laterais, em cima e embaixo. Ex: padding: 1rem 4rem;
    2. background => para definir a cor do botão;
    3. color => para definir a cor da fonte;
    4. border-radius => para defiinir o arredondamento das bordas. Ex: border-radius: 8px.

    qualquer coisa me dá um retorno para eu saber se certo

  • David Iván Cabello•110
    @davidicabello
    Submitted over 2 years ago

    Advice generator app

    #firebase
    1
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    firstly, congratulations for complete this challenge!

    you can use the <q> tag to add quotes 😎👍

    Marked as helpful
  • Valery Djanya•210
    @ketchanji
    Submitted over 2 years ago

    Fylo landing page with dark theme and features grid

    1
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    I used Tailwind CSS to make this challenge, and for some reason has bugged during development, and I discovered it 3 hours later, so I kept trying, and the width and height of the components didn't work on desktop because of this bug. Basically, I was tricked by my code

  • Saubhagya•80
    @Saubhagya111
    Submitted over 2 years ago

    Advice generator app

    2
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    To add quotes you may use the <q> tag, and to show advice you may fetch the API with js. If you have questions you can ask 😎👍

  • Anthony Nanfito•120
    @ananfito
    Submitted over 2 years ago

    Mobile friendly solution using CSS flexbox

    #styled-components
    2
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    firstly, congratulations on completing this challenge!

    I have 2 tips:

    1. I think it's better uses width: 100vh on the body tag, to adjust at any screen size, but if you prefer to use the min and max width it's okay too.

    2. try to use semantic HTML (<article>, <main>, <section>, etc). Here a link to you: Semantic HTML

    sorry if my English is bad =)

    Marked as helpful
  • kaled molina•50
    @kaledmolina
    Submitted over 2 years ago

    profile-card-component-main

    #vanilla-extract
    1
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    firstly, congratulations for complete this challenge!

    I have two tips that can improve your code:

    1. Try to use Semantic HTML (<main>, <section>, <article>, etc). I'll leave this link if you want saber mais: Semantic HTML

    2. You can use flex to centralize the card component:

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

    Marked as helpful
  • Vishal•260
    @vishal-singh5128
    Submitted over 2 years ago

    HTML AND BASIC CSS

    2
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    firstly, congratulations for complete the challenge!

    besides @Renzorr tip, you could use semantic tags for turn your code more legible. Here is a link about it and may help you Semantic HTML

  • agyemang•100
    @Owura-56
    Submitted over 2 years ago

    Order Summary Component

    1
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    firstly, congratulation for complete this challenge! It's very good!

    I have 2 tips for improve your code:

    1. Try use semantic tags to make your code more legible: ex: <main>, <article> , <section>, and more others. This link may help you Semantic HTML

    2. You can centralize the card using flex: body{ width:100vw; height: 100vh; display: flex; align-items: center; justify-content: center;}

    my english isn't good, sorry🙂

  • Have-Samuel•390
    @Have-Samuel
    Submitted over 2 years ago

    Git, Gitflow, HTML/CSS, Flexbox, and Positioning

    2
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    Firstly, your solution is very good! My only tip is to use semantic HTML. That way you won't have multiple <div> in your code. This link may help you 😎👍

    • https://developer.mozilla.org/en-US/docs/Glossary/Semantics
    Marked as helpful
  • Yasi•30
    @jassminellaa
    Submitted over 2 years ago

    CSS HTML

    2
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    Firstly, congratulations for complete the challenge! I would like to give some suggestions for imrove your code:

    • You didn't use flexbox to positioning your elements, if you chose this it's okay, but if you don't know about I'll share this link to you: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ For example: you could align the main section with this: body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center;

    • To have better HTML code, you can use semantic HTML. Instead of using <div class="main" you can use <main> tag

    sorry for my bad english

    Marked as helpful
  • Asaph Mano•50
    @AsaphHenriqueMano
    Submitted over 2 years ago

    card 2

    4
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    Opa irmão, tranquilo? Você pode tentar deixar a imagem rosada colocando uma <div> que sobreponha a imagem (que tenha a mesma largura e altura), colocando a cor e diminuindo a opacidade. Tente isso, e se houver alguma dúvida é só dar um toque 😎👍

    Marked as helpful
  • Gabriel Tavares Barsani•40
    @g-Barsani
    Submitted over 2 years ago

    Product preview card component

    2
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    just try to centralize the card trying this (after delete the margin property)=> body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

    with flexbox align items is easier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • Coldxx•10
    @Coldrainxx
    Submitted over 2 years ago

    Product preview card component

    3
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago
    • you can try to make a better separation of the sections. Try to separate all you see you can, example: you put the button within the card-text section, try to separate it better;

    • the container isn't centralized, try this (after that, delete "margin: 0 auto") => body{ width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }

    sorry for my bad english, if you have some question, you can ask

    Marked as helpful
  • Thiago Morais•420
    @thirraz
    Submitted over 2 years ago

    tats Preview Card Component

    1
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    For some reason the screenshot is not the real solution :/

  • jolly-rolypoly•10
    @jolly-rolypoly
    Submitted over 2 years ago

    QR component using margins

    2
    Thiago Morais•420
    @thirraz
    Posted over 2 years ago

    the card can be centralized using this:

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

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub