Skip to content

Commit

Permalink
Merge pull request /feature/footer
Browse files Browse the repository at this point in the history 
Footer reworked with flexbox
  • Loading branch information
@Pyments
Pyments authored Jan 4, 2024
2 parents 91cf75e + e85d103 commit 8a6ef01
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 71 deletions.
92 changes: 57 additions & 35 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,68 @@
import { Link } from "react-router-dom";
import "../style/components/Footer.scss"
import "../style/components/Footer.scss";

import facebookIcon from "/AVASUS/src/assets/feather/facebook.svg";
import intagramIcon from "/AVASUS/src/assets/feather/instagram.svg";
import twitterIcon from "/AVASUS/src/assets/feather/twitter.svg";

function Footer() {
return (
<>
<footer className="main-footer">
<div className="footer-realizacao">
<span>Realização</span>
<img src="/AVASUS/src/assets/images/logo-avasus-footer-v.png" alt="" />
<img src="/AVASUS/src/assets/images/logo-avasus-footer-v.png" alt="" />
</div>
<div className="footer-lais">
<div>IMG LAIS esquerda</div>
<p>Laboratório de Inovação Tecnológica em Saúde</p>
</div>
<div className="footer-links-uteis">
<h2>Links Úteis</h2>
<ul>
<Link to="/AVASUS/">
<li className="navbar-group-item">Início</li>
</Link>
<Link to="/AVASUS/sobre">
<li className="navbar-group-item">Sobre Nós</li>
</Link>
<Link to="/AVASUS/cursos">
<li className="navbar-group-item">Cursos</li>
</Link>
<Link to="/AVASUS/parceiros">
<li className="navbar-group-item">Parceiros</li>
</Link>
<Link to="/AVASUS/transparencia">
<li className="navbar-group-item">Transparência</li>
</Link>
</ul>
<div className="footer-realizacao">
<span className="footer-title">Realização</span>
<img
src="/AVASUS/src/assets/images/logo-avasus-footer-v.png"
alt=""
/>
<img
src="/AVASUS/src/assets/images/logo-avasus-footer-v.png"
alt=""
/>
</div>
<div className="footer-redes">
<span>Redes Sociais</span>
<div>icone facbook</div>
<div>icone twitter</div>
<div>icone instagram</div>
<div className="footer-lower">
<div className="footer-lais">
<div>IMG LAIS esquerda</div>
<p>Laboratório de Inovação Tecnológica em Saúde</p>
</div>
<div className="footer-links-uteis">
<span className="footer-title">Links Úteis</span>
<ul>
<Link to="/AVASUS/">
<li className="navbar-group-item">Início</li>
</Link>
<Link to="/AVASUS/sobre">
<li className="navbar-group-item">Sobre Nós</li>
</Link>
<Link to="/AVASUS/cursos">
<li className="navbar-group-item">Cursos</li>
</Link>
<Link to="/AVASUS/parceiros">
<li className="navbar-group-item">Parceiros</li>
</Link>
<Link to="/AVASUS/transparencia">
<li className="navbar-group-item">Transparência</li>
</Link>
</ul>
</div>
<div className="footer-redes">
<span className="footer-title">Redes Sociais</span>
<div>
<a href="https://www.facebook.com/sgtes" target="_blank">
<img src={facebookIcon} alt="Ícone Facebook" />
</a>
<a href="https://twitter.com/laishuol" target="_blank">
<img src={twitterIcon} alt="Ícone Facebook" />
</a>
<a href="https://www.instagram.com/laishuol/" target="_blank">
<img src={intagramIcon} alt="Ícone Facebook" />
</a>
</div>
</div>
</div>
<div className="footer-direitos">2023 @ LAIS (HUOL). Todos os direitos reservados</div>
<div className="footer-direitos">
2023 @ LAIS (HUOL). Todos os direitos reservados
</div>
</footer>
</>
);
Expand Down
82 changes: 46 additions & 36 deletions src/style/components/Footer.scss
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,68 @@
@import "../variables";

.footer-title {
font-weight: 600;
font-size: 1.7rem;
letter-spacing: $letter-spacing-max;
}

.main-footer {

width: 100%;
color: $ui-lightest;
display: grid;
grid-template-columns: repeat(3, 1fr);

.footer-realizacao {
width: 100%;

grid-area: 1 / 1 / 1 / 4;
background-color: $red-dark;
display: flex;
flex-wrap: wrap;
padding: 1.6rem;
padding: 1.8rem;
background-color: $red-ligh;
span {
display: block;
width: 100%;
font-size: 1rem;
font-weight: 400;
}
img {
max-width: 30%;
margin: 0 auto;
width: 15rem;
}
}
.footer-lais {
width: 100%;
background-color: $ui-darker;
padding: 1.3rem;
}
.footer-links-uteis {
width: 100%;
.footer-lower {
display: flex;
background-color: $ui-darker;
padding: 1.3rem;
ul {
list-style: none;
padding-left: 0px;
a {
text-decoration: none;
color: $ui-lightest;
padding: 1rem;
padding-top: 3rem;
.footer-lais {
p {
padding-top: 1.3rem;
width: 13rem;
}
}
.footer-links-uteis {
ul {
list-style: none;
padding: 1rem;
width: 12rem;
a {
text-decoration: none;
}
li {
text-align: left;
padding: 0.4rem;
color: $ui-lighter;
}
}
}
}
.footer-redes {
width: 100%;
background-color: $ui-darker;
padding: 1.3rem;
}
.footer-direitos {
width: 100%;
grid-area: 4 / 1 / 4 / 4;
background-color: $ui-dark;
color: $ui-light;
padding: 0.7rem;
color: $ui-lighter;
padding: 1.2rem;
}
.footer-redes {
div {
padding-top: 1.5rem;
display: flex;
width: 8rem;
filter: invert(100%);
a {
padding: 0.35rem;
}
}
}
}

0 comments on commit 8a6ef01

Please sign in to comment.