footer is footing
This commit is contained in:
parent
b74b4afe26
commit
c95d9b2893
@ -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 {
|
||||
width: 40px;
|
||||
margin-left: 0.8vw;
|
||||
margin-right: 0.8vw;
|
||||
filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
|
||||
brightness(100%) contrast(100%);
|
||||
opacity: 20%;
|
||||
transition: 0.3s;
|
||||
.footer__links_ul_li {
|
||||
padding: 0px;
|
||||
margin: 20px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__links_svg:hover {
|
||||
opacity: 50%;
|
||||
.footer__links_ul_li_a {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__links_ul_li_svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
|
||||
brightness(100%) contrast(100%);
|
||||
opacity: 30%;
|
||||
transition: 0.3s;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user