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

Fix Hover effect in About Section #502

Merged
merged 5 commits into from
Jul 31, 2024
Merged

Fix Hover effect in About Section #502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9bf064
Fix Hover effect in About Section
KomalSrivastava Jul 27, 2024
790d6ad
Removed problematic e-commerce_website submodule configuration
KomalSrivastava Jul 27, 2024
6d94e3e
Added .gitmodules file with submodule configuration
KomalSrivastava Jul 27, 2024
5fc3f61
Fix Hover effect in About Section
KomalSrivastava Jul 28, 2024
1e23fc1
About hover
KomalSrivastava Jul 28, 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
3 changes: 3 additions & 0 deletions .gitmodules
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "e-commerce_website"]
path = e-commerce_website
url = https://github.com/MAVRICK-1/e-commerce_website.git
1 change: 1 addition & 0 deletions e-commerce_website
Open in desktop
Submodule e-commerce_website added at 2e74fb
1,747 changes: 1,522 additions & 225 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@emailjs/browser": "^4.3.3",
"@emailjs/browser": "^4.4.1",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@fortawesome/react-fontawesome": "^0.2.2",
Expand Down Expand Up @@ -38,7 +38,6 @@
"react-range-slider-input": "^3.0.7",
"react-redux": "^9.1.2",
"react-router-dom": "^6.24.0",
"react-scripts": "5.0.1",
"react-scroll-to-top": "^3.0.0",
"react-slick": "^0.29.0",
"react-toastify": "^10.0.5",
Expand Down Expand Up @@ -100,7 +99,8 @@
"eslint-plugin-react": "^7.34.1",
"husky": "^9.0.11",
"lint-staged": "^15.2.5",
"prettier": "3.0.1"
"prettier": "3.0.1",
"react-scripts": "^5.0.1"
},
"description": "<img src=\"./Images/WebsiteImg.png\">",
"main": "index.js",
Expand Down
286 changes: 70 additions & 216 deletions src/components/footer/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,289 +1,143 @@
.footerWrapper {
padding: 45px 0px;
padding: 45px 0;
width: 100%;
background-color: #3bb77e;
}

.footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.footerWrapper .footerBoxes .box {
background: #f4f6fa;
padding: 25px 25px;
border-radius: 15px;
position: relative; /* Added to position the gradient overlay */
overflow: hidden; /* Ensure the gradient overlay does not extend outside the box */
transition: all 0.2s ease-in-out; /* Smooth transition for hover effects */
}

.footer-grid h3 {
font-size: 22px;
color: #fff;
/* Added hover effect with gradient overlay */
.footerWrapper .footerBoxes .box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Gradient from black to transparent */
opacity: 0;
transition: opacity 0.3s ease-in-out; /* Smooth transition for overlay appearance */
pointer-events: none; /* Prevent interaction with the overlay */
}

.footer-grid li a {
font-weight: 700;
font-size: 18px;
color: #000;
opacity: 0.8;
transition: all 0.2s ease-in-out;
/* Show gradient overlay on hover */
.footerWrapper .footerBoxes .box:hover::before {
opacity: 1;
}

.footer-grid li a:hover {
opacity: 1;
text-decoration: underline;
/* Optional scaling effect for the image */
.footerWrapper .footerBoxes .box:hover img {
transform: translateY(-5px) scale(1.05); /* Move image up and scale slightly on hover */
}

.footerWrapper .footerBoxes .box {
background: #f4f6fa;
padding: 25px;
border-radius: 15px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.footerWrapper .footerBoxes .box .info {
padding-left: 25px;
}

.footerWrapper .footerBoxes .box img {
max-width: 80px;
margin-bottom: 15px;
position: relative;
transition: all 0.2s ease-in-out;
}

.footerWrapper .footerBoxes .box .info h4 {
font-size: 22px;
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}

.footerWrapper .footerBoxes .box .info p {
font-size: 16px;
opacity: 0.8;
margin-bottom: 0;
font-size: 20px;
opacity: 0.8;
}

.footerWrapper .footerBoxes .box:hover img {
transform: translateY(-5px);
footer p,
footer a {
font-size: 18px;
}

footer {
width: 100%;
padding: 60px 40px 0;
background-color: #3bb77e;
color: #fff;
padding: 60px 0;
padding-bottom: 0;
}

footer h3 {
font-weight: 600;
font-size: 36px;
margin-bottom: 20px;
}

footer h3:hover {
color: #087066;
text-shadow:
0 0 10px #2ed688,
0 0 20px #3bb77e,
0 0 40px #fff,
0 0 80px #fff;
transition: all 0.2s ease-in-out;
}

footer .part1 h4 {
font-size: 24px;
margin-bottom: 20px;
}

footer .part1 h5,
footer .part1 h6 {
font-size: 18px;
margin-bottom: 15px;
}

footer .part2 ul {
list-style: none;
padding: 0;
footer .part1 svg {
color: #3bb77e !important;
}

footer .part2 h3 {
font-size: 28px;
footer h3 {
color: #000;
font-weight: 600;
margin-bottom: 20px;
}

footer .part2 ul li {
margin-bottom: 10px;
list-style: none;
margin-bottom: 13px;
}

footer .part2 ul li a {
font-size: 16px;
color: #000;
opacity: 0.8;
font-size: 500;
transition: all 0.2s ease-in-out;
}

footer .part2 ul li a:hover {
color: #fff;
text-decoration: none;
color: #3bb77e !important;
opacity: 1;
text-decoration: underline;
}

footer .part3 {
text-align: center;
}

footer .part3 h3 {
font-size: 28px;
margin-bottom: 20px;
}

footer .part3 h6 {
font-size: 18px;
margin-bottom: 15px;
padding-left: 5px;
}

footer .lastStrip {
padding: 15px 0;
background-color: #2e8b57;
color: #fff;
}

footer .lastStrip .part_1,
footer .lastStrip .part_2,
footer .lastStrip .part_3 {
text-align: center;
margin-bottom: 20px;
}

footer .lastStrip .part_1 h6,
footer .lastStrip .part_1 h5 {
font-size: 18px;
margin-bottom: 10px;
}

footer .lastStrip .part_2 .phNo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
.phNo svg {
font-size: 45px !important;
opacity: 0.8;
}

footer .lastStrip .part_2 .phNo h3 {
font-size: 24px;
margin: 0;
.phNo h3 {
font-size: 32px !important;
line-height: 35px !important;
}

footer .lastStrip .part_2 .phNo p {
font-size: 16px;
margin: 0;
.phNo p {
font-size: 16px !important;
opacity: 0.8;
}

footer .lastStrip .part_3 ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
footer .lastStrip .part3 h5 {
margin-bottom: 0;
}

footer .lastStrip .part_3 ul li {
margin: 0 10px;
footer .lastStrip .part3 ul {
margin-bottom: 0;
padding-left: 25px;
}

footer .lastStrip .part_3 ul li a {
footer .lastStrip .part3 ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #3bb77e;
border-radius: 50%;
transition: all 0.2s ease-in-out;
}

footer .lastStrip .part_3 ul li a svg {
color: #fff;
}

footer .lastStrip .part_3 ul li a:hover {
background-color: #2e8b57;
transform: scale(1.1);
}

.scroll-down-btn {
position: fixed;

bottom: 4px;
right: 139px;
background-color: #28a745;
color: white;

border: none;
background: #3bb77e;
border-radius: 50%;
width: 70px;
height: 70px;
font-size: 24px;
cursor: pointer;

z-index: 9999;
justify-content: center;

}

.scroll-down-btn:hover {
background-color: #2e8b57;
}

@media (max-width: 1200px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
transition: all 0.2s ease-in-out !important;
}

@media (max-width: 992px) {
.footer-grid {
grid-template-columns: 1fr;
}

.footerWrapper .footerBoxes .box {
width: 100%;
height: auto;
padding: 20px;
}

.footer-grid li a:hover {
color: #fff;
opacity: 1;
text-decoration: underline;
transition: all 0.2s ease-in-out;
}

.footerWrapper .footerBoxes .box:hover {
transform: translateY(-5px);
transition: transform 0.3s ease-in-out;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

footer .part1 h4 {
font-size: 22px;
}

footer .part2 h3 {
font-size: 24px;
}

footer .part2 ul li a {
font-size: 14px;
}
footer .lastStrip .part3 ul li a svg {
color: #fff !important;
}

@media (max-width: 768px) {
.scroll-down-btn {
display: none;
}
}
@media only screen and (min-width: 320px) and (max-width: 992px) {
.phNo h3 {
font-size: 20px;
}

footer .part2 h3 {
font-size: 20px;
}

footer .part2 ul li a {
font-size: 18px !important;
}
footer .lastStrip .part3 ul li a:hover {
background: rgb(51, 51, 51);
}
Loading