Hello community! I leave here my solution to this challenge. I started building it with Tailwind CSS because I wanted to learn how to use it, and unfortunately I didn't like the result. I started again but using SASS and I really like the organization that it gives you when working. Javascript is basic but does its job. Any tip or suggestion is welcome! Cheers!
Note that the dimensions of the form got a little out of hand. I'm already working on it!
The issue I had with this project had to do with the border-radius for the card. The border-radius only showed when I used the 'Overflow:hidden' property. How would I solve an issue like this if I encounter it again?
Hello Allys! Congratulations on finishing the challenge. It is very curious, I have not discovered why this happens, but if you place the border individually to the elements, for example:
.img { border-top-left-radius: border-top-right-radius: }
and
section { border-bottom-left-radius: border-bottom-right-radius: }
That's how it works strangely. It is a lot of code but it is an alternative, maybe it will be of some use to you. Good luck!
Please let me know if you have any suggestions for this project.
Hello! Mahmudul. Congratulations for finishing the challenge, the result was very good!
I love the animation when opening the page. One change I would make is to add a meadia query breakpoint around 900-1000px, since at this point your second container becomes too small and breaks your layout. You could in that instance already place the second container next to the bubble below and then move on to the final media query. I hope you understand me and this comment will be of some use to you! Good luck!
Gostaria de ajuda pra aprender a centralizar os ícones SVG com os textos.
Olá, Sarah! Parabéns à solução do seu desafio ficou muito bom!
O que você poderia fazer para centralizar os ícones e dar ao container que contém esses elementos estas propriedades:
display: flex; justify-content: space-between; align-items: center;
Voce pode testar elas, vao ficar bem centralizadas, boa sorte!
Hi .. I need you feedback's please!
Héctor, que tal?
La solución desafío quedo excelente, felicidades!
Talvez un cambio que yo le haría es colocar una propiedad background-repeat: no-repeat y un background-color del color que corresponda en el body para que quede igual al ejemplo. Es algo pequeño el cambio pero se va a ver mas bonito. Abrazo!
How do I make such a small component fully responsive? The entire div has a fixed width that is centered. It does not grow or shrink with browser window.
Hello! @dagimchi,
with max-width: 420px; and width: 100% you will be able to make the container adapt to any size but it will completely break the design. In the last media query you could decrease the width and increase the height of the container to make it look nice. I hope my comment helps you!
How's the build? Any shortcomings? If so, any advice will be appreciated. Thanks!
Great job!
An important change you should make is to remove the images as the background of the body and place it through css as background-image with a property background-size: cover, and background-repeat: no-repeat;
If you go through my solution of this challenge you will see how!
Cheers!
