Skip to content
Submitted 3 months ago

another huddle using media queries and some other stuffs

Vinicius da Silva Moraes•190
@Viny-archer
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

it was so difficult about the background because i wanted max the experience in the mobile and desktop

Community feedback

  • Bernardo Poggioni•5,390
    @R3ygoskiPosted 3 months ago

    Olá Vinicius, parabéns pela conclusão do projeto.

    Vou começar dando uma dica quanto ao Frontend Mentor. Quando estiver postando o projeto no trecho de Repository URL coloque o link para o código, porque assim facilita na hora de encontrar seu projeto. Mas colocar direcionando para a pasta onde estão todos os projetos, não está errado.

    Vou começar pela parte dos ícones, se não me engano, esse projeto não entrega os ícones ao baixar o desafio correto? Se for isso, então você pode utilizar o font-awesome, e para instalá-lo no seu projeto, basta fazer o seguinte:

    No seu HTML, dentro da <head>, você deve fazer o link e daí você já poderá utilizar os ícones. Obs.: Você pode pegar o href do link nesse site: Font Awesome CDN

       Resto do HTML...
  <title>Frontend Mentor | Huddle landing page with single introductory section</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-house"></i>
</body>

    Uma dica, na sua <div> após a <main>, coloque um padding: 2rem; que assim você adicionará um espaçamento interno e não fará os elementos ficarem muito colados na lateral da tela. Ainda nessa mesma <div> troque o width:375px por width:100% que dessa forma, a página continuará responsiva em telas menores como de 320px.

    Na sua <main> utilize o height: 100vh, que dessa forma em telas de aproximadamente 500px, não irá ficar com a imagem cortada. E ainda na <main> no trecho da @media, adicione background-size: cover; que assim não fará com que a imagem também fique cortada.

    E sobre seu HTML, ele está muito bem-feito, o único ponto que poderia ser alterado é a <div> após o <main>, eu não acho que era necessário ter ela, você poderia ter utilizado a própria <main> para fazer o papel que a <div> está fazendo.

    E novamente parabéns pelo seu projeto, ele ficou muito bem-feito, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida quanto ao que eu falei, por favor comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord