@Subhadip757
Submitted
@JlordS32
@Subhadip757
Submitted
@JlordS32
Posted
Hi Subhadip,
Congrats on finishing this challenge. This must have given you enough challenge to learn a lot of things and I hope you continue in doing so. To answer your question about the problem. Due to me not being to directly see the code (please add the github repo source code).
I can see that you might have some javascript going that toggles container
to none
when rating is submitted, however because you set it to block
when Rate Again is clicked, it puts the container at the top left of the page.
What you can do in this scenario is to adjust the javascript to adjust from none
to flex
, instead of none
to block
. I hope that helps.
Marked as helpful
@Hibi4
Submitted
I didn't get to make the height divide the button in the middle like what was on the design picture. **Any help is welcome. **
For the rest, everything works correctly.
@JlordS32
Posted
Congrats on completing this challenge Hibi4. A couple of suggestions that I can maybe add to your solution:
You can try adding padding: 0 30px
for your div_advice
just so it looks a little nicer and also add 'box-shadow: 0px 0px 30px -3px #52FFA8;' for the class .dice_icon_logo
to give that green shadow effect as the design suggested and make sure that it only happens on hover.
I have also noticed that the quote never loads on page reload, you can maybe try invoking the function you've created generateAdvice()
at the bottom of your main.js, make sure to wrap it in DOMContentLoaded listener so it only calls the function on page reload. It should look something like this:
document.addEventListener('DOMContentLoaded', () => {
generateAdvice()
})
Overall, you're doing pretty great! You're off in a good start my friend. Happy coding!
Marked as helpful
@GitDbR
Submitted
Actually I should have used column-start, column-end for spanning the grid columns but I also wanted to try grid-templete-areas. So I have used that.
Any feedback is welcomed....
@JlordS32
Posted
Your project looks absolutely awesome. Congrats for finishing this challenge, I hope you enjoyed your time while doing this.
There is no problem in using column-start
/column-end
or row-start
/row-end
. This all comes down to preference, grid-template-areas
is just a shorthand for writing column/row-start/end for shorter code, if you feel more comfortable and maybe you find it easier to read column/row-start/end, then go for it.
Overall, your code looks all good to me, I can suggest to maybe remove margin: 6rem auto auto
for your testimonial.container
, just so the container is centered. Nicely done!
Marked as helpful
@mericcintosun
Submitted
Hello Frontend Mentor community!
In this project, I tackled Frontend Mentor's Responsive Web Design Challenge and I'd like to share my solution with you all. This project was a learning experience aimed at improving my HTML and CSS skills.
Technologies and Tools Used:
HTML5 CSS3 (Using Flexbox and Grid) Visual Studio Code Google Chrome Developer Tools
Objectives: While working on this project, I aimed to achieve the following goals:
Learn and apply the fundamental concepts of responsive web design. Gain a better understanding and usage of CSS Flexbox and Grid.
Challenges and Learning Experience: I encountered some challenges during the project, particularly the intricacies of responsive design kept me engaged. However, overcoming these challenges significantly enhanced my skills, making me a better frontend developer.
Thank you for taking the time to review my project. I welcome any feedback and suggestions. Your input is invaluable as I strive to further my learning journey.
I'm also looking forward to seeing your projects on the Frontend Mentor platform. Let's continue learning and growing together!
Thanks, [Meric Cintosun]
@JlordS32
Posted
Here's some suggestions to make it a little better:
before
and after
pseudo classes to give the image that purple filter effect. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: COLOROFYOURCHOICE
Marked as helpful
@ABidhasan134
Submitted
I have found many difficulties in this project like an array or for each loop working, selecting a number value in times and sending the value of this to a new js file. My thanking page is unsure. How could I improve my for each (array) logic?
@JlordS32
Posted
You should try looking up localStorage
. It may solve your problem.
@jennurayen
Submitted
@JlordS32
Posted
you may need to work a little with the image, maybe some issue with linking it
@JlordS32
Submitted
Can't seem to figure out the background bit. Tips and feedback are appreciated!
@JlordS32
Posted
Thanks to that random guy who did the same challenge. I figured out background without going through so much complexity like I did previously.
@YASHAKETAN
Submitted
@JlordS32
Posted
You're a legend for that background. I couldn't figure it out until I looked at yours.