@PDineshMuruganSubmitted 1 day ago
Saul Gustavo A. S.
@saul-gustavoAll comments
- @saul-gustavoPosted about 14 hours ago
Hello, I saw your code and I understand what you were trying to do, I recommend that you do not put html and body twice, since these will be modified, what I recommend is that you put the display flex properties in the body, so the display will be centered. container:
Like this:
.container { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }For the main-container, do not give it a height, as it will be centered and look bad. I recommend that you put padding in px, rem, em, so that it can look like the design image
.main-container{ width: 100% padding: 1rem; border-radius: 10px; }Practice a lot, good job!! Happy Code!!
0 - @EnrikeOmarFariasSubmitted 2 days ago@saul-gustavoPosted 1 day ago
Hola, revise tu código html y css y se entiende lo que intentaste hacer, pero te recomiendo que para tener un diseño como el de la imagen, uses CSS Grid Áreas, con estas podrás poner cada card en una posición especifica para que te de un buen diseño.
Aqui te doy un ejemplo:
.container { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "card-one card-one card-two card-three" "card-four card-five card-five card-three"; gap: 20px; }Lo anterior me funciono a mi, su gustas puedes ver mi solución para este desafió.
¡Buen trabajo amigo!
Marked as helpful0 - @EderProcopioSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
As my first solo project on Frontend Mentor, I found it quite satisfying. I had some issues using Flexbox because, along with Grid, it’s exactly what I’m studying at the moment. However, it wasn't too difficult to achieve the desired result. In the next challenges, I will try to use Grid as well.
What challenges did you encounter, and how did you overcome them?Centering the components was the challenge of this first project. I would rate it as a 5/10 difficulty. Getting the correct dimensions without using Figma was the biggest challenge.
What specific areas of your project would you like help with?The part where I had to refer to my notes was the positioning of the elements using Flexbox.
- @devkhrmnturkSubmitted about 1 month ago@saul-gustavoPosted about 1 month ago
Hello, I saw your html and css code and it looks very good, it is understandable when reading it.
Good job!
0 - @EnrikeOmarFariasSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Hola! ahora si pude subir el archivo para que se vea correctamente en sitio, disculpen
What challenges did you encounter, and how did you overcome them?Mi desafío fue centrar los elementos y que cambio la imagen de acuerdo a la pantalla en la que se este viendo la pagina
What specific areas of your project would you like help with?Centrar los elementos
@saul-gustavoPosted about 1 month agoHola vi tu código y se entiende lo que querías hacer, te sugiero que pongas los media querys en el mismo archivo css, así será más fácil de leer tu código, También te recomiendo que para centrar adecuadamente un container, en este caso el main principal, uses lo siguiente:
.contenedor-principal { display: flex; justify-content: center; align-content: center; width: 100%; min-height: 100vh; }Esto hará que el main se centre de manera adecuada, y en el .contenedor-secundario, puedes usar lo siguiente:
.contenedor-secundario { width: 100%; max-width: 500px; }Esto hará que el contenedor abarque el 100% pero que no pase de los 500px, puedes usar más pixeles para darle la forma adecuada como esta en la imagen del diseño.
También te recomiendo mucho que veas otras soluciones dentro de la plataforma de frontendmentor para que te des una idea de como hacer los diferentes desafios.
¡Happy Coding!
Marked as helpful0 - @j124kloSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I made good looking side. I even added this small blinking animation. Next time i would try to make better text (when you open the page on a phopne, h1 gets folded into next line instead of decreasing font size to ajust).
What challenges did you encounter, and how did you overcome them?I had to learn how to use "@font-face".
What specific areas of your project would you like help with?How can i make my code look more professional.
@saul-gustavoPosted about 1 month agoHello, I saw your html and css code and it is clear what you wanted to do, I recommend using the following:
*, *::before ,*::after { margin: 0; padding: 0; box-sizing: border-box; }this way you will eliminate all the margins and padding by default, in the animation section you can only put a hover effect on the text, like this:
text:hover {color: yellow;}1 - @giovannagaravagliaSubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
To be honest, it was my first time coding javascript. The code is not perfect and I wanna do this challenge again next month and do better
@saul-gustavoPosted about 2 months agoHello, I saw your HTML and CSS code, and it’s clear what you did. I checked the JS code and noticed you use a lot of functions and variables. I highly recommend you check out other solutions here on the Frontend Mentor platform, so you can get an idea of how to better structure your code and follow good practices. In this challenge, I used an addEventListener to submit the email from the form. You can take a look at my solution to get an idea of how to implement the code.
Happy coding!!
0 - @EnrikeOmarFariasSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Hola! se que me falta mucho por aprender para optimizar el sitio pero queria compartir el grado de avance que voy teniendo, gracias
What challenges did you encounter, and how did you overcome them?Al principio me costo todo pero como veran me falta ajustar para que quede centrado el qr
@saul-gustavoPosted 2 months agoHola, vi tu código y se entiende lo que querías hacer, pero te recomiendo que para centrar este único elemento del proyecto uses flexbox en el body, con un min-height de 100vh y con eso se pondrá en el centro. Tu puedes, practica constantemente, ve otras soluciones aquí en la plataforma, te darás una idea de como puedes mejorar cuando hagas otro desafió.
¡Mucha suerte, Happy Code!
0 - @RogerTito455Submitted 2 months ago@saul-gustavoPosted 2 months ago
Hello, I saw your CSS code, and I understand what you wanted to do, I advise you to use grid areas, to do this challenge, with this property you can specify the order and position of each card, good job,
Marked as helpful0 - @Taio725Submitted 3 months ago@saul-gustavoPosted 3 months ago
Hello, I saw your HTML code, I recommend using semantic HTML, with section, article, main tags, this way it will give a better view to your project.
In your CSS code you can use Flexbox to center the container, so it will have a better view.
Keep it up
1 - @waithakanSubmitted 3 months ago@saul-gustavoPosted 3 months ago
Hello, I saw your HTML code, it is easy to understand, but I recommend that you use semantic HTML, with section, main, article tags, it will make your code easier to understand.
In the CSS styles of the image and the main div, you can give a max-width so that it has a max width. You can do it my friend, keep practicing
0 - @MohamedAbdelBAQIMoSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Visit Site to See this isnt real
@saul-gustavoPosted 3 months agoHello, I saw your HTML tags and it is understandable, but I recommend that you use a semantic tag structure, that way it will look better.
In your CSS code, you use many margin properties, you can center the container with Flexbox directly from the body tag, so you can have centered content. I also recommend using the colors indicated in the styles guide, so you can have a better design in your project.
You can do it!!
Marked as helpful1
