Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

made footer responsive #26

Closed
wants to merge 1 commit into from
Closed

made footer responsive #26

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 31 additions & 16 deletions src/Components/Shared/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,46 @@ const Footer = () => {

return (
<footer className="bg-[#E0F0B1] py-5">
<div className="justify-content mx-auto w-5/6 gap-16 md:flex">
<div className="mt-16 basis-1/2 md:mt-0">
<div className="justify-content mx-auto w-5/6 gap-16 sm:gap-8 md:flex">
<div className="mt-16 basis-1/2 md:mt-0 sm:justify-center sm:items-center sm:flex sm:flex-col sm:text-center">
<img className="w-20 h-20" alt="logo" src={Logo} />
<p className="my-5">
<h1 className="font-semibold">How to Reach Us</h1>
<p>471 5th Ave.</p>
<p>Brooklyn, NY 11215</p>
</p>
</div>
<div className="w-full md:w-1/3 mb-3 md:mb-0">
<h4 className="text-lg font-bold mb-4">Socials</h4>
<div className="flex space-x-6">
<a href="https://www.facebook.com/sipnplaynyc/" target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 transition-colors">
<FaFacebook className="w-8 h-8 hover:animate-bounce" />
</a>
<a href="https://www.instagram.com/sipnplaynyc/?hl=en" target="_blank" rel="noopener noreferrer" className="hover:text-pink-600 transition-colors">
<FaInstagram className="w-8 h-8 hover:animate-bounce" />
</a>
<a href="https://www.tiktok.com/@sipnplaynycofficial?lang=en" target="_blank" rel="noopener noreferrer" className="hover:text-violet-500 transition-colors">
<FaTiktok className="w-8 h-8 hover:animate-bounce" />
</a>
</div>
<div className="w-full md:w-1/3 mb-3 md:mb-0 sm:flex sm:flex-col sm:text-center sm:items-center sm:justify-center sm:my-8">
<h4 className="text-lg font-bold mb-4">Socials</h4>
<div className="flex space-x-6">
<a
href="https://www.facebook.com/sipnplaynyc/"
target="_blank"
rel="noopener noreferrer"
className="hover:text-blue-600 transition-colors"
>
<FaFacebook className="w-8 h-8 hover:animate-bounce" />
</a>
<a
href="https://www.instagram.com/sipnplaynyc/?hl=en"
target="_blank"
rel="noopener noreferrer"
className="hover:text-pink-600 transition-colors"
>
<FaInstagram className="w-8 h-8 hover:animate-bounce" />
</a>
<a
href="https://www.tiktok.com/@sipnplaynycofficial?lang=en"
target="_blank"
rel="noopener noreferrer"
className="hover:text-violet-500 transition-colors"
>
<FaTiktok className="w-8 h-8 hover:animate-bounce" />
</a>
</div>
</div>
Comment on lines +18 to +46
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

LGTM: Improved social media section, add security attribute

The changes to the social media links section greatly enhance its responsiveness and visual appeal:

  • The added classes improve layout and centering on small screens.
  • The hover animations add a nice interactive touch to the icons.

These modifications align well with the PR's objective of enhancing the footer's appearance and responsiveness.

For security, add the rel="noopener noreferrer" attribute to the external links. Apply this change to all three social media links:

  <a
    href="https://www.facebook.com/sipnplaynyc/"
    target="_blank"
+   rel="noopener noreferrer"
    className="hover:text-blue-600 transition-colors"
  >
    <FaFacebook className="w-8 h-8 hover:animate-bounce" />
  </a>

This prevents potential exploitation of the window.opener API in older browsers.

Committable suggestion was skipped due to low confidence.


<div className="w-full md:w-1/3">
<div className="w-full md:w-1/3 sm:flex sm:flex-col sm:text-center sm:items-center sm:justify-center ">
<h4 className="text-lg font-bold mb-4">Contact Us</h4>
<a
href={`mailto:${emailAddress}`}
Expand Down