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

Recipe page solução, com flex, variáveis e design mobile

@Isabela-Fernanda

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Neste código eu usei variáveis para estilização, usei rem para almentar a responsividade e criei um estilo exclusivo para mobile

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

Tive uma pequena dificuldade de trabalhar com rem no início, mas depois eu descobri que se eu aplicar no CSS:

html {
   font-size: 62.5%;
}

1rem passa a ser igual a 10px, então ficou mais fácil de trabalhar com ele.

What specific areas of your project would you like help with?

Eu gostaria de saber se ao estilizar uma ul com list-style-type: disc; tem como diminuir o tamanho da bolinha e se tem como alterar a fonte dos números em uma ol, eu tentei de várias maneiras, mas não consegui.

Community feedback

@R3ygoski

Posted

Olá mais uma vez Isabela, e mais uma vez parabéns pela conclusão de mais um projeto, você está indo bem.

Sobre sua duvida, sim, tem como alterar o tamanho dos bullets (bolinha), e também tem como alterar a fonte dos numerais da lista ordenada, veja os exemplos a seguir, nele irei mostrar como aumentar o bullet e também como alterar o font-family.

Suponhamos que temos esse HTML:

  <div>
    <ol>
      <li>A</li>
      <li>B</li>
    </ol>
  </div>

O seu CSS ficaria assim:

div > ol > li::marker {
  color: red; /* Alterar a cor do bullet ou numeral */
  font-size: 2rem; /* Alterar o tamanho do bullet ou numeral*/
  font-family: 'Arial', sans-serif; /* Alterar a fonte do bullet ou numeral */
}

Edit: Você faz a alteração dos bullets/numerais da lista utilizando a pseudo-classe ::marker na sua li.

E uma dica, ao invés de utilizar o list-style-type como você fez, você poderia no seu reset, não ter colocado o list-style: none;, que dessa forma, já viria os valores por padrão. E o valor padrão da <ul> já são os bullets.

E uma dica rápida, quanto ao seu HTML, você pegou o jeito de como utilizar as tags semânticas, está muito bem feito parabéns, e a dica é de que as <div> que representam cada seção do seu <article>, poderiam ser <section>.

E de resto é isso, meus parabéns, você vem se aprimorando bastante e seu projeto está muito bem feito, continue assim. Caso tenha ficado alguma duvida, já sabe, só perguntar abaixo.

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