Clipboard landing page

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Fala João Pedro, tudo bem? Parabéns pelo desafio!

  O design da sua solução ficou perfeito, mas ainda não está centralizado, tenta abrir em uma tela maior ou dar zoom out pra vc ver. Pra centralizar o todas as sections vc vai ter que delimitar o tamanho do container com max-width: 1110px e colocar margin: 0 auto pra forçar o alinhamento.

  Minha dica é vc criar uma classe de container com o tamanho do container e a margem pra fazer esse alinhamento, vou te deixar o link de uma solução que eu apliquei esse conceito pra vc entender melhor: https://skilled-e-learning-landing-page-three.vercel.app/ pode ver que o header e o footer e todo resto estao alinhados, isso é devido a classe de container.

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0

  ---

  

  João Pedro Fernandes•170

  @JPbytePosted about 2 years ago

  @correlucas vlw Lucas, pelas dicas

  1
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi João, well done here in this project! I think you did many thing well here; I just wasn't too clear on what you meant by "animation in the bar", but yes, I do see the animation in various places! 🙂For the animation in the buttons, I probably would make the transition duration a bit faster (shorter), just so it doesn't seem like there's a lag. That's the only comment I have about animation!

  One suggestion I have is about the background image; right now I'm viewing this on a large screen, and the background image has some white space to the right because it's at its max width. You can add a background-size: cover; to the body to fix that, and the image should be able to stretch across the page afterwards!

  Well done, and keep going! 😊💪‍

  Marked as helpful

  0

  ---

  

  João Pedro Fernandes•170

  @JPbytePosted about 2 years ago

  @elaineleung thanks Elaine

  0
• 

  Ziyad ghobashi•180

  @ziy-egPosted about 2 years ago

  I just love your project, and I love adding the animation too:

  body header img {
    width: 100px;
    margin-top: 84px;
    margin-bottom: 46px;
    -webkit-animation: flutuar 3s infinite;
     animation: flutuar 3s infinite;
  }
  

  -however, -this is just me- I like the short time animation: try using only 1s for the whole time. it would be much better.

  also

  -I reviewed your live site on a large screen, and I had a white space column on the right side of your header.

  try this one:

  header {
    background-image: url(../images/bg-header-desktop.png) no-repeat;
    background-size: cover;
    background-position: top;
    width: 100vw;
  }
  

  and for mobile devices - just change the background url;

  Honestly I enjoyed your project.

  0