Skip to content

Commit

Permalink
Merge pull request #78 from Hemashree21/main
Browse files Browse the repository at this point in the history 
Updated Footer
  • Loading branch information
@AbhiDiva96
AbhiDiva96 authored Jun 9, 2024
2 parents 8f83e9c + 72c3224 commit b870b96
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 111 deletions.
178 changes: 90 additions & 88 deletions src/pages/footer.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
/* body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
} */

.footer{
position: fixed;
bottom:0;
width: 100%;

}

.fram{
display: flex;
justify-content: space-around;
background-color: #f8f8f8;
bottom: 0;
position: relative;
box-shadow:
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: lavender;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
Expand All @@ -28,83 +12,101 @@
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
border-radius: 10px;
}

.footer-content {
padding: 1rem;
}

.github{
display: flex;
.footer-text {
font-size: 10px;
}

.footer-flex-container {
display: flex;
justify-content: space-evenly;
}

@media (min-width: 560px) {
.footer-flex-container {
flex-direction: row;
/* justify-content: space-between; */
justify-content: space-evenly;
gap: 0;
}

.footer-icons .icon {
cursor: pointer;
margin-right: 1rem;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 5px;
width: 2rem !important;
height: 2rem !important;
}

position: relative;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001,
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
border-radius: 10px;
.footer-text {
font-size: 2rem !important;
}

.github:hover{
background: radial-gradient(circle, #0ff 0%, #e0e5ec 60%);
color: rgba(65, 78, 143, 0.5);
animation: colorchange 3s linear infinite;
}
.github:active{
box-shadow: 4px 4px 6px 0 rgba(98, 90, 155, 0.5),
-4px -4px 6px 0 rgba(10, 75, 154, 0.2),
inset -4px -4px 6px 0 rgba(4, 124, 145, 0.842),
inset 4px 4px 6px 0 rgba(35, 102, 185, 0.3);
}

@keyframes colorchange {
to {filter: hue-rotate(360deg);}
}

.founder{
justify-content: center;
text-align: center;
.footer-item.footer-copyright {
font-size: 1.5rem !important;
display: flex;
justify-content: center;
align-items: center;
}

.footer-icons {
gap: 1rem !important;
}
}

.footer-item {
text-align: left;
}

.footer-item.footer-copyright {
text-align: left;
font-weight: 600;
color: black;
font-size: 1rem;
}

.footer-item .footer-text {
font-size: 1rem;
font-weight: 600;
color: black;
margin: 1rem 0;
}
.linkedin{

@media (min-width: 1024px) {
.footer-item.footer-copyright {
font-size: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}

.footer-icons {
gap: 1rem !important;
}
}

.footer-icons {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}

.footer-icons .icon {
cursor: pointer;
padding: 10px;
margin: 5px;
position: relative;
box-shadow:
-7px -7px 20px 0px rgba(255, 255, 255, 0.6),
-4px -4px 5px 0px rgba(255, 255, 255, 0.6),
7px 7px 20px 0px rgba(18, 158, 233, 0.133),
4px 4px 5px 0px rgba(0, 162, 255, 0.067),
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px rgba(7, 164, 255, 0.067),
inset 0px 0px 0px 0px rgba(255, 255, 255, 0.6), inset 0px 0px 0px 0px rgba(0, 0, 0, 0.067);
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
border-radius: 10px;
margin-right: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
}

.linkedin:hover{
background: radial-gradient(circle, #0ff 0%, #e0e5ec 60%);
color: rgba(65, 78, 143, 0.5);
animation: colorchange 3s linear infinite;
}
.linkedin:active{
box-shadow: 4px 4px 6px 0 rgba(98, 90, 155, 0.5),
-4px -4px 6px 0 rgba(10, 75, 154, 0.2),
inset -4px -4px 6px 0 rgba(4, 124, 145, 0.842),
inset 4px 4px 6px 0 rgba(35, 102, 185, 0.3);
}

@keyframes colorchange {
to {filter: hue-rotate(360deg);}
}
.footer-icons .icon:last-child {
margin-right: 0;
}
46 changes: 23 additions & 23 deletions src/pages/footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
import React from "react";
import "./footer.css";
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import './footer.css';

const Footer = () => {

import GitHubIcon from "@mui/icons-material/GitHub";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
function footer() {
const currentYear = new Date().getFullYear();
return (
<div className="footer">
<div className="fram">
{/* <div className="github">
<a href="https://github.com/AbhiDiva96/75per ">
<GitHubIcon/>
</a>
</div> */}

<div className="founder">
<h4>
made by{" "}
<div className="footer-content">
<div className="footer-flex-container">
<div className="footer-item">
<span className="footer-text">
75%
</span>
</div>
<div className="footer-item footer-copyright">
Copyright @ 75%
</div>
<div className="footer-item footer-icons">
<a href="https://github.com/AbhiDiva96/75per">
<GitHubIcon className="icon"/>
</a>
<a href="https://www.linkedin.com/in/abhishek-kumar-062231198/">
@AbhiDiva{" "}
</a>{" "}
</h4>
<h4>
Copyright &copy; {currentYear} 75percent - All rights reserved.{" "}
</h4>
<LinkedInIcon className="icon"/>
</a>
</div>
</div>
</div>
</div>
);
}

export default footer;
export default Footer;

0 comments on commit b870b96

Please sign in to comment.