Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sunnyside agency landing page | BEM, SASS

Eduardo 910

@KTrick01

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Adriano 34,090

@AdrianoEscarabote

Posted

Olá Parabéns pelo desafio! O resultado está ótimo, o layout ficou idêntico ao exemplo. Tenho algumas dicas que podem ser úteis:

1- A página deve conter um título de nível um clique aqui

2- Garante que os pontos de referência sejam únicos <nav class="nav"> clique aqui

Gostei muito do 'menu de hambúrguer' no cabeçalho. Esse é um desafio que ainda não fiz, confesso que após conferir seu projeto, fiquei com vontade de fazer 😂 O resto é ótimo!

Espero que ajude... não se esqueça de marcar como útil 👍

Marked as helpful

0

Eduardo 910

@KTrick01

Posted

@AdrianoEscarabote Thanks for your feedback! It is a really fun page to make!

0
Lucas 👾 104,420

@correlucas

Posted

👾Fala Eduardo, tudo bem? Parabéns pelo desafio!

Acabei de ver sua solução aqui em uma tela de 27'' e o site em si não ficou responsivo, dai verifiquei seu código e vi o motivo, foi porque você definiu o tamanho máximo pro container com max-width: 1440px; como nesse caso a tela é responsiva e tem que crescer o máximo que puder basta remover o max-width e deixar o container se ajustar sozinho

.page {
    box-shadow: 0 0 50px rgb(0 0 0 / 35%);
    background-color: hsl(0deg, 0%, 100%);
    margin: 0 auto;
    /* max-width: 1440px; */
}

👋 Espero ter ajudado e continue no foco!

0

Eduardo 910

@KTrick01

Posted

@correlucas Hi, thanks for your feedback! The reason that I put a max width there is because in the style guide says that: The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px

it's not a good practice doing it that way then? Thanks!

0
Lucas 👾 104,420

@correlucas

Posted

@KTrick01 The following screen sizes are there just to show the reference the size the design were created. You can follow these to build the solution, but note that you solution will be opened in many different screen sizes, if you set max-width: 1440px you make your solution fit only this kind of screen, for example a screen 1920 will not fit it good. Remember that you design solutions for multiple screens.

You can do a test, do zoom out in Google Chrome to see how you solution scales or try to open your solution in a bigger resolution screen than 1440px.

Marked as helpful

0
Eduardo 910

@KTrick01

Posted

@correlucas I see what you mean! I think now it's good, thanks for your help

0

Please log in to post a comment

Log in with GitHub
Discord logo

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