Affichage Footer #210
5 changed files with 56 additions and 22 deletions
30
public/css/footer.css
Normal file
30
public/css/footer.css
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
.pageFooter {
|
||||||
|
background: #394596;
|
||||||
|
/*Bleu AGECEM*/
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 20px;
|
||||||
|
bottom: 0;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.footerElementList {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
list-style: none;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
li.footerElement {
|
||||||
|
font-family: "Poppins";
|
||||||
|
font-weight: 400;
|
||||||
|
/*semi-bold*/
|
||||||
|
font-size: 0, 75rem;
|
||||||
|
/*12px*/
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
|
@ -15,6 +15,7 @@ img {
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
|
padding-bottom: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
@ -24,6 +25,7 @@ ul {
|
||||||
a {
|
a {
|
||||||
color: #FF563C;
|
color: #FF563C;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
font-family: "Poppins";
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
{{ define "footer-html" }}
|
{{ define "footer-html" }}
|
||||||
<footer class="pageFooter">
|
<footer class="pageFooter">
|
||||||
<small>
|
<div class="wrapper">
|
||||||
vlbeaudoin marked this conversation as resolved
|
|||||||
<ul>
|
<ul class="footerElementList">
|
||||||
<li><a href="/public/images/header_agecem.png">en-tête de documents</a></li>
|
<li><a class="footerElement" href="/public/images/header_agecem.png">En-tête de documents</a></li>
|
||||||
<li><a href="/admin">panneau d'administration</a></li>
|
<li><a class="footerElement" href="/admin">Panneau d'administration</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</small>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
{{ end }}
|
{{ end }}
|
|
@ -1,11 +1,12 @@
|
||||||
{{ define "general-html" }}
|
{{ define "general-html" }}
|
||||||
<link rel="stylesheet" href="/public/css/general.css">
|
<link rel="stylesheet" href="/public/css/general.css">
|
||||||
<link rel="stylesheet" href="/public/css/fonts.css">
|
<link rel="stylesheet" href="/public/css/fonts.css">
|
||||||
<link rel="stylesheet" href="/public/css/header.css">
|
<link rel="stylesheet" href="/public/css/header.css">
|
||||||
<script>
|
<link rel="stylesheet" href="/public/css/footer.css">
|
||||||
function onToggleNav() {
|
<script>
|
||||||
var menu = document.querySelector(".headerMenuMobile");
|
function onToggleNav() {
|
||||||
menu.classList.toggle('nav-is-active');
|
var menu = document.querySelector(".headerMenuMobile");
|
||||||
}
|
menu.classList.toggle('nav-is-active');
|
||||||
</script>
|
}
|
||||||
|
</script>
|
||||||
{{ end }}
|
{{ end }}
|
|
@ -39,8 +39,9 @@
|
||||||
src="/public/icones/instagram-icon.svg"></img></a>
|
src="/public/icones/instagram-icon.svg"></img></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- {{ template "snackbar-html" }} -->
|
</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 "footer-html" }}
|
<!-- {{ template "snackbar-html" }} -->
|
||||||
|
{{ template "footer-html" }}
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
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.