Adel• 820
@Adel-Harrat
Submitted
I struggled with placing the images, I need to study more about it 😟😓
FrontendBy-GJ
@FrontendBy-GJ
All comments
- FrontendBy-GJ• 410
@FrontendBy-GJ
Posted
Looks great, well done! 👍
1 - Kenny Ng• 400
@kennylun123
Submitted
This is my first exercise using React. I tried to keep elements tidy and separated into tiny components. I would love to hear any comment on my page or coding. Thanks for your help.
What I learned:
- CSS Grid and Flexbox. Use
grid-template-column: 1fr 1fr 1frto keep columns or rows in same ratio. - Responsive image using
<picture>to switch imgage source. - Use the silbling selector (~) to link up the active state of navigation button and the following classes. (When a nav button is activated, the related CSS should be followed)
.nav-menu.active { transform: translateX(0); transition: all 200ms ease-in-out; } .nav-menu.active ~ .background { width: 100%; opacity: 0.5; }FrontendBy-GJ• 410@FrontendBy-GJ
Posted
Well done! Did you enjoy using React?
1 - CSS Grid and Flexbox. Use
- EniolaBakare• 230
@Eniola-Bakare
Submitted
This was a challenging challenge! I enjoyed every bit of working on this project. Reviews are appreciated.
FrontendBy-GJ• 410@FrontendBy-GJ
Posted
Looks awesome!
Not sure if you're aware, but your site doesn't function on Safari browser. I tried others browsers and they work fine.
0 - Engineer Providence• 270
@EngProvidence
Submitted
hello there! the little problem I faced on this challenge was to reverse the grid items on small screen and this caused me to learn a new bootstrap property called ( flex-row-reverse) and I it's great power.
please I any contributions to improve this code will be appreciated.
FrontendBy-GJ• 410@FrontendBy-GJ
Posted
Your footer is not centered, do...
.attribution { text-align: center; }If you want to center the card, you can do...
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }also change your div with attribution class to footer.
0 Any feedback will be appreciated!
FrontendBy-GJ• 410@FrontendBy-GJ
Posted
Looks good!
1- Manish Patel• 730
@savvystrider
Submitted
I had a lot of fun with this challenge, despite it being, well, challenging...
I am having a bit of a problem with the image overlay leaving behind an outline after being clicked. I tried setting its background color to transparent and that doesn't seem to help.
I would appreciate any feedback whatsoever on this project. I'm still fairly new to coding and have a lot to learn.
FrontendBy-GJ• 410@FrontendBy-GJ
Posted
Hey Manish, the outline you speak of only appears in safari browser. No other browser leaves an outline. Don't know if this will fix the problem, but try giving the image container border-style: none or outline-style: none. If that doesn't work, apply the border/outline styles and set them to none to the images.
Marked as helpful
1 - Svato• 210
@SVBSH
Submitted
I will appreciate the feedback.
FrontendBy-GJ• 410@FrontendBy-GJ
Posted
Great work on the layout! You seem to have forgotten to add alternate text for some of your images. You shouldn't leave them empty, if the image doesn't load properly, the alternate text would then be used telling the user what the image is, like a description almost. Also, your index.html file has some commented code you aren't using like the attributions and the style for that piece of code. If I were you, I would uncomment that code and use it, place it at the bottom (footer). I should be doing the same :)
0 - quanber123• 100
@quanber123
Submitted
I think it's still not good.
FrontendBy-GJ• 410@FrontendBy-GJ
Posted
I think it looks pretty good! Some things you can do to improve is change the font, it looks like you didn't use the same font the project has. I would also move the "Challenge by... Coded by..." towards the bottom. Other than that, well done!
0
