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

Added Icons to the Footer links #552

Merged
merged 6 commits into from
Aug 9, 2024
Merged

Added Icons to the Footer links #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1d5df8f
Update Footer.css
MastanSayyad Aug 8, 2024
ef2b41f
Update Footer.jsx
MastanSayyad Aug 8, 2024
f623e9f
Update
MastanSayyad Aug 8, 2024
426a0fa
Merge branch 'HimanshuNarware:main' into main
MastanSayyad Aug 9, 2024
2da233b
Update
MastanSayyad Aug 9, 2024
81e81be
Update Footer.jsx
PSS2134 Aug 9, 2024
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
37 changes: 37 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

67 changes: 31 additions & 36 deletions src/Component/Footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.footer {
background-color: #000;
color: #fff;
padding: 40px 20px;
padding: 20px 0;
}

.footer-wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
gap: 0;
max-width: 1200px;
margin: 0 auto;
}
Expand All @@ -29,7 +29,7 @@
padding: 2px;
margin-right: 5px;
width: 30px;
border: 2px solid;
border: 2px solid #8a2be2; /* Ensure border color matches theme */
border-radius: 20px;
}

Expand All @@ -41,12 +41,12 @@

.footer-section-links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px; /* Added spacing between links */
}

.footer-subsection {
flex: 1;
margin-left: 5%;
}

.footer-heading {
Expand All @@ -56,7 +56,7 @@
}

.footer-links {
list-style-type: none;
list-style: none;
padding: 0;
}

Expand All @@ -68,9 +68,10 @@
.footer-links li a,
.footer-links li span {
position: relative;
color: white;
color: #fff;
text-decoration: none;
display: inline-block;
display: flex;
align-items: center;
transition: color 0.3s ease-in-out;
}

Expand All @@ -82,8 +83,8 @@
height: 2px;
bottom: -5px;
left: 0;
background-color: white;
transition: all 0.3s ease-in-out;
background-color: #8a2be2;
transition: width 0.3s ease-in-out;
}

.footer-links li:hover a,
Expand All @@ -94,7 +95,6 @@
.footer-links li:hover a::after,
.footer-links li:hover span::after {
width: 100%;
background-color: #8a2be2;
}

.footer-social-icons {
Expand All @@ -104,7 +104,7 @@
}

.footer-social-icons a {
color: white;
color: #fff;
font-size: 24px;
transition: transform 0.3s, color 0.3s;
}
Expand All @@ -117,7 +117,7 @@
.footer-qr {
width: 90px;
margin: 0 auto;
display: block;
margin-left: 49px;
}

.footer-rate-us {
Expand All @@ -128,7 +128,7 @@
}

.footer-rate-us a {
color: white;
color: #fff;
font-size: 20px;
text-decoration: none;
transition: color 0.3s, transform 0.3s;
Expand Down Expand Up @@ -166,7 +166,15 @@
border-top: 1px solid #333;
font-size: 0.9em;
font-style: italic;
max-height: 10px;
}

.footer-link-icon {
font-size: 16px;
color: #8a2be2;
background: none;
border: none;
padding: 0;
margin-right: 8px;
}

@media screen and (max-width: 768px) {
Expand All @@ -178,51 +186,38 @@
.footer-section-links {
flex-direction: column;
align-items: center;
gap: 10px; /* Adjusted gap for better alignment */
}
.footer-title{
justify-content: center;

.footer-title {
justify-content: center;
}

.footer-pera{
.footer-pera {
max-width: 450px;
margin: 0 auto;
text-align: center;
margin-top: 3px;
}

.footer-subsection {
margin-left: 0;
margin-bottom: 20px;
text-align: center;
}

.footer-qr-section {
text-align: center;
}

.footer-qr {
margin: 0 auto 10px;
}

.footer-rate-us {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}

.footer-star-icon {
display: inline-flex;
align-items: center;
}

.rate-us {
margin-top: 5px;
margin-left: -1rem !important;
margin-left: 0;
}
}


@media screen and (max-width: 600px) {
.footer-title {
font-size: 1.5em;
Expand All @@ -237,15 +232,15 @@
}

.footer-links li {
font-size: 16px;
font-size: 14px; /* Reduced size for smaller screens */
}

.footer-social-icons a {
font-size: 20px;
}

.footer-qr {
width: 80px; /* Adjust width for smaller screens */
width: 80px;
margin-left: 2px;
}

Expand Down
27 changes: 16 additions & 11 deletions src/Component/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import { FaGithub, FaLinkedin, FaStar } from 'react-icons/fa';
import { FaXTwitter } from "react-icons/fa6";
import { FaGithub, FaLinkedin, FaStar, FaTwitter, FaFacebook, FaInstagram, FaFileAlt, FaLock, FaGavel, FaCode } from 'react-icons/fa';
import favicon from "../image/footer/favicon.png";
import img from "../image/footer/footer-qr.jpg";
import './Footer.css';
import { FaXTwitter } from "react-icons/fa6";


function Footer() {
const currentYear = new Date().getFullYear();
Expand All @@ -21,26 +22,30 @@ function Footer() {
</div>
<div className="footer-section footer-section-links">
<div className="footer-subsection">
<h4 className="footer-heading">Documentation</h4>
<h4 className="footer-heading">
Documentation
</h4>
<ul className="footer-links">
<li onClick={() => window.open('https://opensource.com/resources/what-open-source')}>
<span>What is Open-Source</span>
<span> 📄 What is Open-Source</span>
</li>
<li onClick={() => window.open('https://opensource.guide/how-to-contribute/')}>
<span>What is Git and GitHub</span>
<span> 📄 What is Git and GitHub</span>
</li>
<li onClick={() => window.open('https://docs.github.com/en/get-started/using-git/about-git')}>
<span>How to start contributing to Open-Source</span>
<span> 📄 How to start contributing to Open-Source</span>
</li>
</ul>
</div>
<div className="footer-subsection">
<h4 className="footer-heading">Legal</h4>
<h4 className="footer-heading">
Legal
</h4>
<ul className="footer-links">
<li><span><a href="/privacypolicy">Privacy Policy</a></span></li>
<li><span><a href="/terms">Terms and Conditions</a></span></li>
<li><span><a href="/licensing">MIT License</a></span></li>
<li><span><a href="/codeofconduct">Code of Conduct</a></span></li>
<li><span><a href="/privacypolicy"><FaLock className="footer-link-icon" /> Privacy Policy</a></span></li>
<li><span><a href="/terms"><FaGavel className="footer-link-icon" /> Terms and Conditions</a></span></li>
<li><span><a href="/licensing"><FaCode className="footer-link-icon" /> MIT License</a></span></li>
<li><span><a href="/codeofconduct"><FaFileAlt className="footer-link-icon" /> Code of Conduct</a></span></li>
</ul>
</div>
<div className="footer-subsection">
Expand Down