Skip to content
OverviewSolutions
11
Comments
21

Jefferson V. F.

@JorggyhTaubaté, SP, Brazil330 points

Aprendendo programação, cursando Análise e Desenvolvimento de Sistemas.

Latest solutions

View more solutions

Latest comments

  • Jefferson V. F.•330
    @Jorggyh

    To add the font, you can go to Google Fonts https://fonts.google.com/specimen/Red+Hat+Display?query=red+hat

    Add the fonts and weights, and copy the link, there is a link that can be added in the html file, and another for the css file, just use one, the link for you to add in the css:

    @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');

    And finally add in the desired selectors, for example:

    body,
button {
     font-family: 'Red Hat Display', sans-serif;
}

    Another thing, it is highly recommended that all css be in the css file, not inside the html (but I don't know if you did it that way because of the bootstrap, I've never used it so if that's the case, disregard.)

  • Jefferson V. F.•330
    @Jorggyh

    Well done!

    You used only the desktop image?

    You can use two different images, one for mobile and one for desktop, and that's the idea, you can do it with the picture tag, something like this:

    <picture>
     <source media='(max-width: 799px)' srcset='images/image-product-mobile.jpg' type='image/jpg'>
     <img alt=' ' images/image-product-desktop.jpg'>
</picture>

    Or adding the images as background in the css, in mine I did the following, the mobile version:

    #img {
   background: no-repeat center center/cover url("../img/image-product-mobile.jpg");
   height: 24rem;
   border-radius: 0.8rem 0.8rem 0 0;
}

    and the desktop version, inside the media query:

       #img {
     background: no-repeat center center/cover url("../img/image-product-desktop.jpg");
     width: 30rem;
     height: 100%;
     border-radius: 0.8rem 0 0 0.8rem;
   }
  • Jefferson V. F.•330
    @Jorggyh

    @siduki I downloaded your project on my machine to find the issues:

    The problem with the right margin was the following, the width inside the .rating-container inside the media query was at 95%, I just changed it to 100%

    and to give a side margin I added inside the .main-rating-container inside the media query:

    padding-left: 25px;
padding-right: 25px;

    speaking of .rating-container inside the media query, all these attributes are unnecessary, you are repeating:

    display: flex;
align-items: center;
background-color: var(--light-grayish-magenta);
font-weight: 700;
color: var(--very-dark-magenta);
height: 3,125rem;
margin-top: 0.9375rem;
border-radius: 0.625rem;

    You've already defined this before, you can just add something new or change something that has already been defined, making the code much leaner:

    .rating-container {
  flex-direction: column;
  justify-content: center;
  width: 100%; /* was 95% */
  padding-left: 0rem;
}

    the card margin is easy to solve, in your code you have:

    .card-two {
  margin-top: 0.9375rem;
}

.card-three {
  margin-top: 1,875rem;
}

    Just add inside the media query, to change in the mobile version:

    .card-three {
  margin-top: 0.9375rem;
}

    If you got confused, here is the css file with the changes: https://github.com/Jorggyh/test/blob/master/CSS/style.css

    This solves the 2 problems, now 2 details that I particularly prefer, if you don't like it that's ok, it's not a rule:

    I like to add at the top of the css file:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 62.5%; /* 10px = 1rem */
}

    This 62.5% font-size makes it simpler to calculate and more readable measurements with rem

    And I also find it simpler to code the mobile version first, and then add a media query for the desktop version, for example:

    @media screen and (min-width: 768px) {
  
}
  • Jefferson V. F.•330
    @Jorggyh

    Well done!

    Some things I noticed, your rating-container is not centered, it seems to have a right margin but I didn't find it, try centering.

    Your card container is more spaced between the second and third, I imagine it's because of the desktop version, you can try to change it in the mobile version and leave it like this in the desktop version.

    https://i.postimg.cc/6pCJKCmY/some-points.png

    The exchange point between the mobile and desktop version is 501px, but with 501px there is not enough space to show the desktop version, I would change it to 1024px which is where the design fits on the screen, or 768px if you adapt to tablets in the future.

    Marked as helpful
  • Jefferson V. F.•330
    @Jorggyh

    Just separate them with comma

    background: top left no-repeat url('img1.svg'), bottom right no-repeat url('img2.svg');

    You can add that line with a border top in your div .data

    Marked as helpful
  • Jefferson V. F.•330
    @Jorggyh

    Boa tarde brother, beleza?

    Sobre o efeito hover, não sei se é a única maneira, mas eu fiz da seguinte forma, no html, antes da tag img eu adicionei o seguinte:

    <div class="overlay">
    <img alt="Eye view icon" src="img/icon-view.svg" />
</div>

    E no CSS eu adicionei:

    .overlay {
	position: absolute;
	background-color: rgba(0, 255, 247, 0.6);
	width: 30rem;
	height: 30rem;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: 0.15s ease-in-out;
}

/* define o tamanho do ícone do olho */
.overlay img {
	height: 4rem;
	width: 4rem;
}

.overlay:hover {
	cursor: pointer;
	opacity: 1;
}

    Explicação: esse overlay está sobrepondo a imagem, estão no mesmo lugar, isso isso com o position: absolute, mas ele não está aparecendo, porque está com opacidade 0, quando passo o mouse aí a opacidade muda para 1, aparecendo o overlay, a transparência eu consegui com rgba, que permite colocar transparência.

    Tenta adaptar no seu código, depois me fala se deu certo, ou se não deu.

    Marked as helpful
View more comments