Profile Card Component | Pure HTML & CSS

Community feedback

• 

  Artur•145

  @arturpawlowski5Posted over 3 years ago

  Hi,

  I'm starting too with Dev Web but I already made this Challenge so hope can help a little bit.

  To make it super simple you can try like this

  With your background image, you can try to add 2 URLs with IMG to your one DIV or another container you use. Try to look at this code:

  #example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: left top, right bottom;
    background-repeat: no-repeat, repeat;
  }
  

  More here: w3schools

  With this code, you will have the same time 2 IMGs in the Background.

  Other way

  I made in my Challenge similar to this what you made but I used vh and vw units, not px. This way size of Circles changes when you Change the size of the Viewport.

  This is from my Challenge

  .circles .circle_01,
  .circles .circle_02 {
    position: absolute;
    -webkit-animation: 2s circles forwards;
            animation: 2s circles forwards;
    opacity: 0;
    overflow: hidden;
  }
  
  .circle_01 {
    top: -50vh;
    left: -20vw;
    -webkit-transform: translate(-30vh, -10vw);
            transform: translate(-30vh, -10vw);
    width: 50vw;
  }
  
  .circle_02 {
    bottom: -50vh;
    right: -20vw;
    -webkit-transform: translate(30vh, 10vw);
            transform: translate(30vh, 10vw);
    width: 70vw;
  }
  

  Hope this helps.

  2

  ---

  

  Matheus Ferreira•35

  @iammatheusPosted over 3 years ago

  @arturpawlowski5

  Thanks for the feedback!

  It sure helped me.

  About vw and vh, I tried to use it, however I found a bug where the size of the images exceeded the screen, but I will reorganize my code and try from scratch again, using your code as an aid.

  Thank you for your help! 😊

  0

  

  Artur•145

  @arturpawlowski5Posted over 3 years ago

  Try to use overflow: hidden when you have problems with IMG exceed Screen, DIV etc.

  More here w3school

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Olá, Matheus Ferreira! 👋

  Bem-vindo ao Frontend Mentor! 😀 Parabéns por completar seu primeiro desafio Frontend Mentor! 🎉 Acho que você fez um bom trabalho neste desafio! 👍

  Sugiro adicionar e posicionar as imagens de fundo neste desafio usando imagens de fundo CSS. Você não terá que adicionar essas imagens diretamente ao seu HTML, o que deixará o seu HTML mais limpo, e acho que é um pouco mais fácil gerenciar as imagens de fundo usando imagens de fundo CSS.

  Como dica, se você usar unidades de janela de exibição para posicionar as imagens de fundo, elas devem permanecer em seus lugares quando a tela for redimensionada. 😉

  Lamento se houver erros no meu feedback porque não falo português. Eu também usei o Google Translate para escrever isso! 😅

  Continue codificando (e feliz codificando também)! 😁

  2

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @ApplePieGiraffe

  Espero que fale português porque é o que usei no Google Translate. 😊

  1

  

  Matheus Ferreira•35

  @iammatheusPosted over 3 years ago

  @ApplePieGiraffe

  Thanks for the feedback!

  I tried to use the background-image, but I didn't get a good result, but I will keep trying until I get a result more similar to the challenge.

  I think I can gain broader knowledge by reading the code from people who have achieved a closer result.

  I will definitely continue coding and count on you and your comments! 😁

  1