added current events section to home page #493
Conversation
There was a problem hiding this comment.
The section looks great! Just have some minor changes for you to fix, let me know if you run into trouble with anything 👍
Also, be sure to resolve any conflicts with main-- there have been some updates on that branch :)
# Get the newest changes from main
git checkout main
git pull
# Apply the changes to your local branch
git checkout kayla/currEventsSection
git merge main
# At this point, you'll probably have to resolve the conflicts in the merge conflict editor. You should see some stuff indicating whether you need to accept the incoming or accept the current.
# After making your changes, repush your branch
git add .
git commit
git push
| import '../../styles/Events.css'; | ||
| import '../../styles/Home.css'; | ||
| import hfamimg from '../../images/hack-fam-insta.png'; | ||
| import schoolimg from '../../images/hack-school-insta.jpg'; |
There was a problem hiding this comment.
Rename hfamimg and schoolimg to something along the lines of "img1" and "img2" respectively-- this is just so there's more reusability in the future.
| padding: 1rem; | ||
| border-radius: 8px; | ||
| } | ||
|
|
There was a problem hiding this comment.
Let's add a CSS selector here for .event-img (which you've already defined in CurrEvents.jsx). We should make sure that the two images are the same size.
| .event-title:hover { | ||
| background-position: 100% center; | ||
| transition: background-position 2s ease; | ||
| } |
There was a problem hiding this comment.
At the bottom of this file, we should have a section for media queries to make sure that the images are centered when the screen enters a smaller window size. I've recorded a Loom here to explain better how you can test this locally, if you need some more context:
Fixes #480
Changes
Created a current events section on the home page to summarize events. Played around with a gradient and hover effect for the title to add some color, but the shine hover effect could probably be improved.
Type of change