I found it fun and challenging to get all the animations for the mobile menu and hamburger to work properly. Had some small issues with getting typography to match up perfectly, if anyone has tips on how to get line height/letter spacing to match up perfectly without the design files it would be good to hear. Any other suggestions/comments are also welcome!
I appreciate this so much man!
I'll use this to improve my design asap.
I found it fun and challenging to get all the animations for the mobile menu and hamburger to work properly. Had some small issues with getting typography to match up perfectly, if anyone has tips on how to get line height/letter spacing to match up perfectly without the design files it would be good to hear. Any other suggestions/comments are also welcome!
This is beautiful man, it really looks like you put your heart into it, I appreciate programmers that make their work clean and as close to perfect as possible.
Just one question though, I checked your design on mobile, and I have to ask how did you implement that animation on the menu button as it transforms to the close button? Did you use framer? Or is it from a NextJs animation library?
1.Well I'm having a issue in the desktop design. Whenever the user clicks on the input button all the CSS design breaks.
Is this because I've used percentage value instead of px or something else?
Any idea?
What's the best way to solve that?
To add the email to the success paragraph you can use this little code snippet in your js file
function convertToParagraph() {
// Get the value of the input data from the input element with Id 'text'
var inputData = document.getElementById("text").value;
// Create a new paragraph element
var paragraph = document.createElement("p");
// Set the text content of the paragraph element to the input data
paragraph.textContent = inputData;
// Get the span element where you want to add the email to
var outputEmail= document.getElementById("outputEmail");
// Clear any existing content in the output paragraph
outputParagraph.innerHTML = "";
// Append the new paragraph to the output paragraph element
outputParagraph.appendChild(paragraph);
}
This should work for you.
Hey there, great work but I noticed your design is only centered horizontally, if you want your element to be both vertically and horizontally centered, set the height of the body to 100vh, that's going to align the element vertically when you use align-items:center in the flex-box.
Nicely done👏
Work on the paddings, proper text width and colors and use flex-box layout, you could do better on this.
I faced problems when i moved towards media queries
If you struggle with media-queries, might I suggest you pickup tailwind css, it's a lot easier to create responsive designs, it's also much faster.
Great work!
Hi Frontend Mentor community!👋
This is my solution to the product preview card. Overall a quite nice and relaxing challenge. What do you think of my solution?
Thanks in advance for the feedback and the tips!😄
This project helped be consolidate my html and css skills in a motivative way, The difficult part was trying to make it responsive, I'm Not Sure if my code is well written or not,your feedbacks would be a valuable ressources to learn from in order to improve. Thank you all.
Learn Tailwind, it makes it so much easier
