I did it, but i would like if someone help me, because if i open more than 1 option the text overextend the card itself, and i think that if i could create a function that make just one option avaiable to open at time, but i dont know how to do it, can someone helps me with it?
Maria Valentinova Ivanova
@MariaValentinovaAll comments
- @VidottizzzSubmitted 10 months ago@MariaValentinovaPosted 10 months ago
Hi, there! I personally took advantage of all the default functionalities of Bootstrap to create the accordion and control its behavior. You can look at my code in case it is helpful to you. You can achieve closing the previously opened item when opening a new one by keeping track of the currently opened item and closing it before opening the new one. Here are some suggestions to implement this in your code: 1.Create a global variable to track the currently opened item. You can initialize it with null initially since no item is open at the beginning. Like: let currentItem = null; 2.Modify the showhide and hideshow functions: When opening an item, check if there is currently an open item (currentItem is not null). If there is one, close it before opening the new item. When closing an item, update the currentItem variable to null.
0 - @EugeniaAntonovaSubmitted 11 months ago
Would love to have feedback on my script and markup.
I have tried to match all the requirements including accesability using keyboard only.
Let me know if i could have done something better!
@MariaValentinovaPosted 11 months agoHi there! I don´t see the assets/images/icon-star.svg that should be before the FAQ´s title.
Marked as helpful1 - @mhykah-webdevSubmitted 11 months agoWhat are you most proud of, and what would you do differently next time?
Wasn't too hard!
What challenges did you encounter, and how did you overcome them?I had to review how to change images based on media queries
What specific areas of your project would you like help with?Semantic html, best practices that I might be missing.
@MariaValentinovaPosted 11 months agoGreat job! Did you do this with access to figma? It's just excellent 👌 I think you could merge this part: /*
- Use a more-intuitive box-sizing model. */ *, *::before, *::after { box-sizing: border-box; }
/* 2. Remove default margin */
- { margin: 0; } or you didn't want to get margin: 0 to after and before? If you adjust the margin you have in the card and the button "Add to card" it will be exactly the same as the design.
1 - @andreaskdkSubmitted 11 months ago@MariaValentinovaPosted 11 months ago
Hi there! The image is not displaying, nor is it centered. I experienced this too and had to adjust the paths.
Marked as helpful1 - @Abbassher55Submitted 11 months ago
Finished this challenge and it was my first here . The main problem i face while converting the design is that often the website didnt match with the design. I have use tailwind css for this project. Kindly review and give me suggestions if there are any , your suggestions are welcomed.
Thanks
@MariaValentinovaPosted 11 months agoHi there! I find this to be very well executed. Perhaps a few minor details could be fine-tuned, such as the yellow background being cropped when scaled below 320px, and in my opinion, the font-weight needs adjustment. For someone starting, I think this is excellent work! It's been challenging for me to pinpoint areas for improvement. This showcases the work of someone with a promising future, in my opinion.
Marked as helpful0 - @vcgmuseSubmitted 11 months ago
Please take a look and let me know how it reads on your end. Let me know if there are issues with font-size or margins and paddings.
Do transitions from one screen size to another make sense, or is there something you would recommend?
@MariaValentinovaPosted 11 months agoI think you could optimize your code. I don't understand why you're accommodating so many screen size options. In the documentation, it says it's intended for mobile screens of 375px and desktops of 1440px, I believe. This way, there would be much less code. You should pay more attention to proportions: border-radius, and margins. Good use of the CSS flex property!
Marked as helpful0 - @amirhossein-peyvandSubmitted about 1 year ago@MariaValentinovaPosted 11 months ago
I think it is a great job! Your SASS code looks solid, but there's always room for improvements and optimizations. Here are some suggestions to enhance your code: 1.Font Imports Organization: You can group font imports for better readability: @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"), url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); 2.It's a good practice to move scripts to the bottom of the HTML body to enhance page load times. Nevertheless, it is much better crafted than the code I would write myself, and I'd love to use it as a reference to improve my skills.
Marked as helpful1 - @ronitzdevSubmitted 11 months ago@MariaValentinovaPosted 11 months ago
Hi! First of all I think you have done a wonderful job! I would like to share my impressions about the project 'Huddle landing page with curved sections'. Overall, I found the project excellent. The structure and arrangement of the sections are very well done, and the user experience is pleasant.
However, I noticed that perhaps the space in the side margins could be improved for better adaptation to the overall design. I believe this would contribute to a more balanced presentation and stay true to the original prototype.
In summary, the project is well-structured and has great potential. I think adjusting the side margins could be an additional step to perfect the visual appearance and fidelity to the original design.
0