Skip to content
OverviewSolutions
22
Comments
14
iago
@iagohenrique2009

All comments

  • iago•400
    @iagohenrique2009

    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;

  • iago•400
    @iagohenrique2009

    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

  • iago•400
    @iagohenrique2009

    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);

  • iago•400
    @iagohenrique2009

    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
  • iago•400
    @iagohenrique2009

    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)
  • iago•400
    @iagohenrique2009

    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
  • iago•400
    @iagohenrique2009

    Hello!! thanks for the help @OGShawnLee and @CyrusKabir

    i made a few changes like adding some transition and tried to make a loop for the btns

    PS: i tried to change px to rem but i think rem is hard for me

    I really, really appreciate yours help :)

  • iago•400
    @iagohenrique2009

    hi sir! your project is really nice!

    you could give a max-width: 50%; to make him more loyal to design

    and change theI< p>Improve your front-end skills by building projects</p> for

    <h1>Improve your front-end skills by building projects</h1>

    OBS: Every page should contain at least one header

    Marked as helpful
  • iago•400
    @iagohenrique2009

    HI... To change the background you can use 3 properties on the body of your work

    background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");

    background-position:-90% -500px, 170% 400px;

    background-repeat: no-repeat;

    I dont remember what are the exactly position so feel free to change it

    just remenbering the "," separate the first from the second

    Marked as helpful
  • iago•400
    @iagohenrique2009

    Hi...

    My OPINION and most of the overall people (i think) is because the h1 serves like an title for article. So its always nice having one, on these you could 3 without problems because each card have different content.

    OBS: You can it to anyway of what you want(or creating a div or changing the h1) in css

    And remenbering the project is yours so change only if you feel ok, because anyway thats don'sent affect the code base

    Marked as helpful
  • iago•400
    @iagohenrique2009

    Ola!

    Eu gostaria de deixar aqui minhas dicas de como te ajudar:

    1-Para mudar a cor da imagem aplique a propriedade filter do css,e preciso um pouco de trabalho ja que e necessario primeiro converter a cor em HEX e depois para filter.Os sites que eu usei foram esses aqui para fazer isso

    https://isotropic.co/tool/hex-color-to-css-filter/ https://htmlcolors.com/hsl-to-hex

    2-O seu H1 nao e necessario dar aquele salto de linha apos o <br> apenas deixe tudo na mesma linha

    3- O seu arquivo css do github nao funciona pois vc deu uma localidade que nao tinha no github apenas deixe src="estilo.css" e isso tambem se aplica a imagem.

  • iago•400
    @iagohenrique2009

    Hi!

    There are a few changes that you can do to make your work even better!

    1- Your css code is really really long , you can do it become more readable and easy to see just by using a 5 divs{1 to container, 1 to mid text ,1 to the icons, 1 to bottom}. give a read to this site if you get stuck (https://css-tricks.com/snippets/css/a-guide-to-flexbox/);

    2- You has given a unnecessary margin to body;

    3 - remove your div called linea and place an <hr> with the css properties: hr{ border:0; border-bottom:1 px solid hsl(215, 51%, 70%); width:80%}

    4- replace the ending span for a div and remove the spans of image and text and for the text create a <p> tag and only 1 span for " Jules Wyvern"

    Marked as helpful
  • iago•400
    @iagohenrique2009

    HI... 1- using * to change properties is a bad pratice and change everthing of your work, SO MY ADVICE is remove him, and if you want to center your work , you could use the flex-box property of css(if you want to give a deep read https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 2- create a main with a class named position in your html and put or card div on him, after that you could use the following properties to center .position{ display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; min-height: 100vh; }

    Marked as helpful
  • iago•400
    @iagohenrique2009

    Hi! My answers for yours question are: 1- The true size i think you can only get by being premium, but if you are unsure of that just resize it and give some border-radius to the card 2-The max-width is always the best choice for most of cases especially for when you want somenthing to have to center os sides(left,right). Obs:You could give some read here if https://developer.mozilla.org/en-US/docs/Web/CSS/min-width https://developer.mozilla.org/en-US/docs/Web/CSS/max-width