forked from vergnet/site-accueil-insa
footer + trucs responsive
This commit is contained in:
Guillaume Joffre
parent
cddd56c763
commit
e7b9b0e666
5 changed files with 56 additions and 22 deletions
|
|
@ -85,6 +85,7 @@
|
||||||
width: 50%;
|
width: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
transform: translateY(10%);
|
transform: translateY(10%);
|
||||||
transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s;
|
transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s;
|
||||||
}
|
}
|
||||||
|
|
@ -108,10 +109,14 @@ span.close-mobile-menu {
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* IE10+/Edge */
|
||||||
|
user-select: none; /* Standard */
|
||||||
|
cursor: pointer;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
cursor: pointer;
|
transition: color 0.5s;
|
||||||
transition: color 0.5s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
span.close-mobile-menu:hover {
|
span.close-mobile-menu:hover {
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
.footer-text-area {
|
||||||
width: unset;
|
width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,11 @@ body {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
||||||
padding: 0; margin: 0;
|
padding: 0; margin: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
|
@ -153,19 +158,33 @@ a.linkmail:hover {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.complete-wrapper {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
display: block;
|
display: block;
|
||||||
background-color: rgba(255,255,255,0.3);
|
flex-shrink: 0;
|
||||||
width: 80%;
|
background-color: #f2d97f;
|
||||||
max-width: 800px;
|
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e4cb6e' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
|
||||||
margin-top: 30px;
|
border-radius: 20px 20px 0 0;
|
||||||
margin-left: auto;
|
-webkit-box-shadow: 0 0 8px -1px rgba(8, 10, 13, 0.64);
|
||||||
margin-right: auto;
|
box-shadow: 0 0 8px -1px rgba(8, 10, 13, 0.64);
|
||||||
|
margin-top: 60px;
|
||||||
|
width: 100%;
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer-text-area {
|
||||||
|
width: 80%;
|
||||||
|
max-width: 800px;
|
||||||
|
margin-top: 2vh;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* general purpose css */
|
/* general purpose css */
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,8 @@ function music($name, $link) {
|
||||||
|
|
||||||
<?= music("Sexion d'assaut - Wati by night", "https://www.youtube.com/embed/zD80w-mPrKw"); ?>
|
<?= music("Sexion d'assaut - Wati by night", "https://www.youtube.com/embed/zD80w-mPrKw"); ?>
|
||||||
|
|
||||||
|
<?= music("Si vous la connaissez, on vous offre un verre ! signé: Les Pascals", "https://www.youtube.com/embed/BbEL_9Pe9-A"); ?>
|
||||||
|
|
||||||
<?= music("Et pour terminer en beauté, on vous présente notre hymne", "https://www.youtube.com/embed/8Eapq5TOzn4"); ?>
|
<?= music("Et pour terminer en beauté, on vous présente notre hymne", "https://www.youtube.com/embed/8Eapq5TOzn4"); ?>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -48,23 +48,31 @@ $pagename = $infopage[4]; // nom de la page exact servant à appeler le css
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
|
||||||
<?php include $relativepath."structure/menu.php"; ?>
|
|
||||||
</header>
|
|
||||||
<?php
|
|
||||||
if (isset($pagecontent)) {
|
|
||||||
echo $pagecontent; //ici on appelle le contenu de la page
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<footer>
|
|
||||||
<?php include $relativepath."structure/footer.php"; ?>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<!-- TODO un espace qui permet de couvrir la surface sous le menu, pour l'instant on utilise la même image pour pas oublier que l'espace doit être de la même taille que le menu mais faudra changer ça -->
|
<div class="complete-wrapper">
|
||||||
<div style="height: 9vw">
|
|
||||||
|
<header>
|
||||||
|
<?php include $relativepath."structure/menu.php"; ?>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
if (isset($pagecontent)) {
|
||||||
|
echo $pagecontent; //ici on appelle le contenu de la page
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
<div class="footer-text-area">
|
||||||
|
<?php include $relativepath."structure/footer.php"; ?>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TODO un espace qui permet de couvrir la surface sous le menu, pour l'instant on utilise la même image pour pas oublier que l'espace doit être de la même taille que le menu mais faudra changer ça -->
|
||||||
|
<div style="height: 7vw"> </div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
<!-- Script nécessaire au fonctionnement du menu sur mobile -->
|
<!-- Script nécessaire au fonctionnement du menu sur mobile -->
|
||||||
<!-- To be charged at the end so that it doesn't slow the page loading -->
|
<!-- To be charged at the end so that it doesn't slow the page loading -->
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue