iago

Latest comments

• 

  rubah86•20

  @rubah86Submitted almost 3 years ago

  

  3-column preview card with grid

  1

  20
  

  iago•400

  @iagohenrique2009Posted almost 3 years ago

  hi @rubah86 the best way of making the design for mobile are using @media (max-width: 500px)

  and using the following properties

  .container{ display:flex; flex-direction:column; }

  and

  body{ padding:2rem; }

  if this dont works you could see how i made my design in my solution:

  https://github.com/iagohenrique2009/FrontendMentorChallenges/blob/main/3-column-preview-card-main/media.css;

  0
• 

  DJ•70

  @Desi-JSubmitted almost 3 years ago

  

  Profile Card Component (HTML, CSS)

  1

  30
  

  iago•400

  @iagohenrique2009Posted almost 3 years ago

  the best of inserting are using the background: url and background position;

  use theses sites https://www.w3schools.com/cssref/css3_pr_background.asp and https://www.w3schools.com/cssref/pr_background-position.asp to give a deep read and understand how these CSS properties works

  1
• 

  Ariel•110

  @ArielNyanSubmitted almost 3 years ago

  

  Interactive Rating Component

  #sass/scss

  2

  60
  

  iago•400

  @iagohenrique2009Posted almost 3 years ago

  Hi friend!

  You could add the property cursor:pointer to yours button to make him looks like more a button;

  and in your html code you have in blank(i think you has forget to remove);

  1
• 

  Mpho Mamphoke•10

  @Sayfo1809Submitted almost 3 years ago

  

  Interactive rating component

  #bem#sass/scss

  1

  30
  

  iago•400

  @iagohenrique2009Posted almost 3 years ago

  Hi friend!

  There yes another way of doing the inputs using a loop to add an event listener to each button instead of hard coding each one. If you not sure exactly how to do this you could look at my solution (https://github.com/iagohenrique2009/FrontendMentorChallenges/tree/main/Interactive-rating-main)

  or if you whant a deep read:https://softauthor.com/javascript-for-loop-click-event-issues-solutions/

  Marked as helpful

  0
• 

  Henrique dos Santos Galvim•10

  @HenriqueGalvimSubmitted almost 3 years ago

  

  Pagina responsiva utilizando flex-box

  2

  20
  

  iago•400

  @iagohenrique2009Posted almost 3 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
• 

  Danilo Barolo Martins de Lima•110

  @danilobmlSubmitted about 3 years ago

  

  Responsive with Flexbox and JavaScript.

  2

  20
  

  iago•400

  @iagohenrique2009Posted about 3 years ago

  hi bro nice work!

  my tips for you are add some transitions to yours buttons to make him more smooth on hover and focus.See these article is very helpful https://css-tricks.com/almanac/properties/t/transition/

  Marked as helpful

  1