scarlett/ITR-Website
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

footer is footing

Browse Source
This commit is contained in:
scarlett kadan
2023-08-29 10:48:59 -05:00
parent b74b4afe26
commit c95d9b2893
2 changed files with 89 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/assets/stylesheets/footer.scss
View File

@@ -9,97 +9,93 @@
}
.footer {
position: relative;
background-color: #232323;
bottom: 0px;
width: 100%;
height: 150px;
overflow: hidden;
height: 100px;
border-top: 1px solid rgb(46, 46, 46);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 15px;
margin: 0px;
padding: 0px;
}
.footer__links {
margin-right: 0px;
width: 100vw;
height: 6vh;
overflow: hidden;
width: 80vw;
height: 50px;
padding: 0px;
margin: 0px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
}
.footer__links_ul {
margin: 0px;
padding: 0px;
width: 80vw;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.footer__links_svg {
.footer__links_ul_li {
padding: 0px;
margin: 20px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.footer__links_ul_li_a {
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.footer__links_ul_li_svg {
width: 40px;
margin-left: 0.8vw;
margin-right: 0.8vw;
height: 40px;
filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
brightness(100%) contrast(100%);
opacity: 20%;
opacity: 30%;
transition: 0.3s;
padding: 0px;
margin: 0px;
}
.footer__links_svg:hover {
opacity: 50%;
.footer__links_ul_li_svg:hover {
opacity: 70%;
}
.footer__toes {
display: flex;
width: 100vw;
height: 100px;
width: 80vw;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.footer__toes_logo {
color: rgb(197, 197, 197);
text-decoration: none;
font-size: 50px;
font-family: "itrFont";
transition: 0.3s;
.footer__toes__links {
display: flex;
}
.footer__toes__links_link {
text-align: center;
margin-left: 30px;
margin-right: 30px;
text-align: center;
padding-left: 5px;
}
.footer__toes_logo:hover {
color: white;
}
.footer__toes__links_left,
.footer__toes__links_right {
margin-bottom: 9px;
margin-bottom: 9px;
}
@media screen and (max-width: 650px) {
// Phones
.footer__links_svg {
width: 10vw;
background-color: transparent;
margin-left: -4vw;
margin-right: -4vw;
}
.footer__toes {
zoom: 80%;
}
.footer__toes_logo {
font-size: 40px;
font-family: "itrFont";
transition: 0.3s;
padding-left: 5px;
}
.footer__toes__links_left,
.footer__toes__links_right {
visibility: hidden;
}
width: 100px;
justify-content: center;
align-items: center;
display: flex;
height: 30px;
padding: 0px;
margin: 0px;
}

50
src/components/Footer.js
View File

@@ -11,73 +11,73 @@ export default class Footer extends Component {
return (
<div className="footer">
<div className="footer__links">
<ul>
<li>
<ul className="footer__links_ul">
<li className="footer__links_ul_li">
<a
href="https://discord.gg/GA6mvMEzSu"
target="_blank"
rel="noreferrer"
className="footer__links_ul_li_a"
>
<DiscordSVG className="footer__links_svg"></DiscordSVG>
<DiscordSVG className="footer__links_ul_li_svg"></DiscordSVG>
</a>
</li>
<li>
<li className="footer__links_ul_li">
<a
href="https://twitter.com/ILTech_Robotics"
target="_blank"
rel="noreferrer"
className="footer__links_ul_li_a"
>
<TwitterSVG className="footer__links_svg"></TwitterSVG>
<TwitterSVG className="footer__links_ul_li_svg"></TwitterSVG>
</a>
</li>
<li>
<li className="footer__links_ul_li">
<a
href="https://www.facebook.com/IllinoisTechRobotics/"
target="_blank"
rel="noreferrer"
className="footer__links_ul_li_a"
>
<FacebookSVG className="footer__links_svg"></FacebookSVG>
<FacebookSVG className="footer__links_ul_li_svg"></FacebookSVG>
</a>
</li>
<li>
<li className="footer__links_ul_li">
<a
href="https://www.instagram.com/illinoistechrobotics/"
target="_blank"
rel="noreferrer"
className="footer__links_ul_li_a"
>
<InstagramSVG className="footer__links_svg"></InstagramSVG>
<InstagramSVG className="footer__links_ul_li_svg"></InstagramSVG>
</a>
</li>
<li>
<li className="footer__links_ul_li">
<a
href="https://github.com/illinoistechrobotics"
target="_blank"
rel="noreferrer"
className="footer__links_ul_li_a"
>
<GithubSVG className="footer__links_svg"></GithubSVG>
<GithubSVG className="footer__links_ul_li_svg"></GithubSVG>
</a>
</li>
</ul>
</div>
<div className="footer__toes">
<ul className="footer__toes__links_left">
<li>
<a href="http://localhost:3000/about">About</a>
<ul className="footer__toes__links">
<li className="footer__toes__links_link">
<a href="http://localhost:3000/about" className="footer__toes__links_link_a">About</a>
</li>
<li>
<a href="http://localhost:3000/contact">Contact</a>
<li className="footer__toes__links_link">
<a href="http://localhost:3000/contact" className="footer__toes__links_link_a">Contact</a>
</li>
</ul>
<a className="footer__toes_logo" href="http://localhost:3000/">
ITR
</a>
<ul className="footer__toes__links_right">
<li>
<a href="http://localhost:3000/projects">Projects</a>
<li className="footer__toes__links_link">
<a href="http://localhost:3000/projects" className="footer__toes__links_link_a">Projects</a>
</li>
<li>
<a href="http://localhost:3000/gallery">Gallery</a>
<li className="footer__toes__links_link">
<a href="http://localhost:3000/gallery" className="footer__toes__links_link_a">Gallery</a>
</li>
</ul>
</div>