Skip to content
OverviewSolutions
14
Comments
8
Jarlei Sassi
@jarleisassi

All comments

  • Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    Sugiro tambem voce resetar o css antes de tudo. Esse site aqui ja te da tudo pronto. E' so copiar e colar no inicio do seu estilo css https://meyerweb.com/eric/tools/css/reset/

    1
  • Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    Para centralizar podes fazer o seguinte:

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


.container {
width: 100vw;
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

    e a parte do html podes por a div class "attribution" toda dentro da div "container" entao fica o container pai da div com a classe"qrcode" e a div com a classe "attribution"

    2
  • Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    Hi. Congratulation finishing your first component. Although It is too big compared to the design

    Here's what I do: first I set up the body to align the component in the center of the screen:

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

    Then I create a container as reference and I use the screenshot that I am going to code:

    .container-reference{
background: url("design/desktop-design.jpg") no-repeat;
background-size: contain;
background-repeat: no-repeat;
width: "the width of the reference design";
height: the height of the reference design;
display:flex;
justify-content:center;
align-items:center;
}

    than inside the reference-container I start to code my component. It's a very accurate method that I like to use. After you finish you can get rid of these container and references.

    0
  • Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    If you need to align your component to the center of the scree try to do this

    body {
background-color: hsl(212, 45%, 89%);
font-family: Outfit, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
    0
  • Erick_Gabriel•160
    @ErickGabriel2023Submitted over 1 year ago

    O que você achou difícil ao construir o projeto?

    • Eu achei mais difícil a parte dos efeitos de sombra e o gradiente de cores

    Quais áreas do seu código você não tem certeza?

    • Na parte do responsividade do site

    Você tem alguma dúvida sobre as melhores práticas?

    • Se tiver melhorias em meu site, poderia me ajudar ?

    Sumário do Resultado Geral

    4
    Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    Cara o efeito de sombras e gradiente tu consegues atraves dessa ferramenta online : https://www.cssmatic.com/box-shadow Fica mole mole chegar no resultado que queres. Valeu :D

    Marked as helpful
    2
  • Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    Ta bem bom teu componente. Teu paragrafo nao confere com o layout disponibilizado porem quando fui ver no site ele ta certo. Acredito que arrumasse depois do site ter dado o screeshot. Do mais ta bem fiel ao design.

    0
  • Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    Just had a look at your validation form. Seems like it's not validating february. It allows me to put days >= 30. It suppose to be , considering leap year, up to 29, normal years only 28.

    0
  • Jarlei Sassi•170
    @jarleisassiPosted over 1 year ago

    Next step is fix those reports generated by the website. Some semantic issues. I still don't know if I can do a more lean/clean javascript code to validate the form.

    0