Skip to content
Submitted over 2 years ago

Pagina responsiva utilizando flex-box

Henrique dos Santos Galvim•10
@HenriqueGalvim
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Eu não tenho muita certeza da área responsiva, apenas utilizei o que estava no desafio mas estou ajustando para todas as telas no privado.

Se vcs puderem me falar sobre melhores praticas e meus erros ou mau habitos as quais mostrei no código

Community feedback

  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Hey it appears that their is a problem with your github pages deployment. I recommend rechecking it to make sure.

    In terms of your accessibility issues

    • Links must have discernible text, this means that you must specify text for your anchor tags in order to make it clickable.

    • <html> element must have a lang attribute, this is due to the document missing a language to be rendered for example ```html lang="en"``` would render the text in the document as english.

    • Your document is unable to identify the main content hence by wrapping all the tags within the body element in semantic main tags this issue is resolved since any content within this tag is indicated as the main content of the document.

    In terms of your validation errors

    • The attribute type is not needed on the style element.

    I hope this helps

    Cheers

    Marked as helpful
    1
    Henrique dos Santos Galvim•10
    @HenriqueGalvimPosted over 2 years ago

    @TheCoderGuru The problem was that I had forgotten to print the screen, friend, regarding the other problems, thanks for talking, I will study more and improve these parameters

    0
  • iago•400
    @iagohenrique2009Posted over 2 years ago

    Ola amigo!

    Aqui vai o meu feedback para voce:

    • O Seu site nao esta alinhado e nem no centro, e no seu main e nos cards voce usou posicao junto de display para tentar alinhar(para centralizr,alinhar escolhe o que voce acha mais facil:grid,flex ou position, caso nao conheça os 2 primeiros:https://dev.to/codecasts/grid-para-layout-flexbox-para-componentes-gb3#:~:text=O%20Flexbox%20apresenta%20uma%20lista,ser%20uma%20coluna%2C%20se%20quisermos.). Olhando o seu codigo eu fiz as seguintes alterações:

    body{

        background-color: var(--grey-color);

}

body main {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

}

    .secao {

        height: 450px;

    width: 266px;

    color: var(--grey-color);

    padding-left: 2rem;

    padding-top: 2rem;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

}

    e ajustei o valor top dos seus inputs para 20%;

    • Voce aplicou o background na main, nesse caso e melhor aplicar no body e remover o "*"
    • Para colocar hover no botoes, voce pode criar uma nova classe para ele e utlizar o seletor :hover( caso nao saiba como :https://www.w3schools.com/cssref/sel_hover.asp)
    1
    Henrique dos Santos Galvim•10
    @HenriqueGalvimPosted over 2 years ago

    @iagohenrique2009 Muito obrigado amigo

    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