Built using React, React Router Dom, and Tailwind CSS.
For some reason, when I open the site locally the crew images do not cause the crew page to scroll past the max height which is 100% of the viewport, but when I do open the site as a deployed project, the crew site is scrollable past max height.
I tried setting fixed height to the crew images and erased any top margins, but the problem continues to persist. Let me know how to fix this. Thanks!
Disregard my message about the stated issue. It's fixed now.
Nice job. I also have a solution to this project which is right here (https://github.com/ronaldlamdev/easybank) where I used React Router Dom and Tailwind CSS.
One thing I would add is make the h2s in your footer have hover animations to make it more user-friendly and interactive even if this isn't a real website.
I struggled a lot with the classList.toggle('active') to remove the classes, I think there is a much better way to do this but I did it with active, what would you use ?
Nice job. I also finished this project today. I hope you don't mind me looking at your code to see how you got the cart to show quantity added.
One issue I have is whenever I click on the thumbnail images, it opens the modal. I think this would be better if the open modal function was for when you click on the larger image, but that's just me.
Abierto a sugerencias
Very nice job. Just to make your buttons seemingly more functional, I would add to each button "cursor : pointer". This will give your buttons that typical finger pointing icon like when you hover over a link on an actual website. This won't give your links a destination of course, but this is just for aesthetic purposes.
The one thing I had trouble with is the background. I got pretty close, but if you look closely, you'll see that it doesn't smoothly repeat, but instead has a column that visibly clips itself. You can partially see this column and then the background restarts. If anyone has any clues as to how I can fix this, I am all ears! Thanks 😊
Try to add in @media (min-width: 1000px) a background image: url('images/bg-intro-desktop.png'). Hopefully this removes the column that you are talking about.
Hi there
I just finished this project, the desktop media queries are for 1024px computer. Also where is best seen the mobile version is on Firefox (iPhone 11 Pro).
Any feedback is welcome :)
Thanks!
Great job on coding this challenge. There is one thing I would change with your email form. I would change the input for your email to text in your HTML. For example, I would change <input type="email"/> to <input type="text"/>. This will remove the default error message (not the red error message), but it'll make your form error cleaner and easier to read. Having two error messages is kinda redundant.
I would also start using more id attributes in your HTML instead of repeatedly using class to name your tags. The benefit of this is that id attributes allow links to navigate to other sections of your code. For example, instead of class = "features", use id = "features". As for <li> features </li>, use <li href="#features"> features </li>. This way, the site itself will automatically scroll to the feature section of your site instead of having the user manually scroll to the site.
What is the best way to display the hero image for this webpage?
I would set the overflow of the body to hidden so that it removes the little white space underneath the hero image when in desktop view. => body { overflow: hidden; }
Quite enjoyed this one as I thought design was quite simple and got me to focus on client side form validation with JavaScript.
I would make your button more dynamic by adding a a hover pseudo class. For example, I would add #button:hover { cursor: pointer; background-color: #77e2b4; box-shadow: 0px 4px 0px 0px rgba(109,204,162,1); } to your styles.css .
