Affichage Footer #210
5 changed files with 64 additions and 22 deletions
38
public/css/footer.css
Normal file
38
public/css/footer.css
Normal file
|
@ -0,0 +1,38 @@
|
|||
.pageFooter {
|
||||
background: #f3f3f7;
|
||||
/*Gris pâle*/
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
ul.footerElementList {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
list-style: none;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.footerElement {
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
/*semi-bold*/
|
||||
font-size: 0.5rem;
|
||||
/*8px*/
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.footerElement {
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
/*semi-bold*/
|
||||
font-size: 0.75rem;
|
||||
/*12px*/
|
||||
text-align: center;
|
||||
}
|
||||
}
|
|
@ -15,6 +15,7 @@ img {
|
|||
body {
|
||||
margin: 0;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
@ -24,6 +25,7 @@ ul {
|
|||
a {
|
||||
color: #FF563C;
|
||||
text-decoration: none;
|
||||
font-family: "Poppins";
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
{{ define "footer-html" }}
|
||||
<footer class="pageFooter">
|
||||
<small>
|
||||
<ul>
|
||||
<li><a href="/public/images/header_agecem.png">en-tête de documents</a></li>
|
||||
<li><a href="/admin">panneau d'administration</a></li>
|
||||
<div class="wrapper">
|
||||
vlbeaudoin marked this conversation as resolved
|
||||
<ul class="footerElementList">
|
||||
<li><a class="footerElement" href="/public/images/header_agecem.png">En-tête de documents</a></li>
|
||||
<li><a class="footerElement" href="/admin">Panneau d'administration</a></li>
|
||||
</ul>
|
||||
</small>
|
||||
</div>
|
||||
</footer>
|
||||
{{ end }}
|
|
@ -2,6 +2,7 @@
|
|||
<link rel="stylesheet" href="/public/css/general.css">
|
||||
<link rel="stylesheet" href="/public/css/fonts.css">
|
||||
<link rel="stylesheet" href="/public/css/header.css">
|
||||
<link rel="stylesheet" href="/public/css/footer.css">
|
||||
<script>
|
||||
function onToggleNav() {
|
||||
var menu = document.querySelector(".headerMenuMobile");
|
||||
|
|
|
@ -39,6 +39,7 @@
|
|||
src="/public/icones/instagram-icon.svg"></img></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
vlbeaudoin marked this conversation as resolved
vlbeaudoin
commented
Pourquoi une nouvelle fermeture de div ici? Pourquoi une nouvelle fermeture de div ici?
Alexel
commented
Parce que certains divs de la page index n'étaient pas fermés, ce qui fuckait avec l'affichage du footer. Parce que certains divs de la page index n'étaient pas fermés, ce qui fuckait avec l'affichage du footer.
|
||||
<!-- {{ template "snackbar-html" }} -->
|
||||
{{ template "footer-html" }}
|
||||
</body>
|
||||
|
|
Loading…
Reference in a new issue
Pourquoi une classe qui s'appelle juste
wrapper
?Pour que le contenu du footer aie les mêmes contraintes que le contenu de la page, et permettre que le background du footer prenne toute la largeur.