rebillar/site-accueil-insa
1
1
Fork 1
forked from vergnet/site-accueil-insa
Code Issues Pull requests Releases Wiki Activity

.box-jaune design cohérent avec le menu

Browse source
This commit is contained in:
Guillaume Joffre 2022-04-17 16:18:38 +02:00
parent 1094f50d7f
commit a6c40157ad
10 changed files with 135 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
assets/css/menu.css
View file

@ -1,6 +1,6 @@
.menu { .menu {
position: fixed; position: fixed;
bottom: 0; bottom: -2px;
left: 0; left: 0;
width: 100%; width: 100%;
height: auto; height: auto;
@ -12,9 +12,10 @@
.tuyau { .tuyau {
position: fixed; position: fixed;
bottom: 0; bottom: -2px;
right: 3vw; right: 3vw;
width: 8%; width: 8%;
min-width: 6.3vmax;
height: auto; height: auto;
z-index: 2; z-index: 2;
@ -26,6 +27,10 @@
transform-origin: center; transform-origin: center;
} }
.menu-link.menu-bottom-line use {
transform-origin: bottom;
}
.menu-link text { .menu-link text {
transition: transform 50ms; transition: transform 50ms;
} }

4
assets/css/page/coms.css
View file

@ -3,8 +3,8 @@ body {
background-color: white; background-color: white;
} }
#boxjaune h1 { .box-jaune h1 {
margin: 0; margin: 0 0 0.5em;
padding: 0; padding: 0;
} }

95
assets/css/template.css
View file

@ -48,36 +48,101 @@ a.linkmail:hover {
-webkit-text-stroke: 1px white; -webkit-text-stroke: 1px white;
} }
#boxjaune { /** START BOX JAUNE **/
.box-jaune {
display: inline-block; display: inline-block;
background-color: #FFDC00; position: relative;
padding: 10px; padding: 10px;
box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.61);
border: 3px solid black;
margin: 40px 10vw 0; margin: 40px 10vw 0;
font-size: 2.5px;
background-color: #efd21f;
border-top: solid 2em #fbf322;
border-left: solid 2em #a29013;
border-right: solid 2em #f7e31c;
border-bottom: solid 2em #73590b;
clip-path: polygon(
0 2.00em,1em 1em,2.00em 0,
calc(100% - 2.00em) 0,calc(100% - 1em) 1em,100% 2.00em,
100% calc(100% - 2.00em),calc(100% - 1em) calc(100% - 1em),calc(100% - 2.00em) 100%,
2.00em 100%,1em calc(100% - 1em),0 calc(100% - 2.00em)
);
}
.corners-top::before {
top: -2em;
left: -2em;
background-color: #bfa018;
}
.corners-top::after {
top: -2em;
right: -2em;
background-color: #fbfa87;
}
.corners-bottom::before {
bottom: -1.9em;
left: -2em;
background-color: #44350d;
}
.corners-bottom::after {
bottom: -1.9em;
right: -2em;
background-color: #967912;
}
.corners::before,
.corners:after {
content:"";
position: absolute;
display:block;
width: 2em;
height: 2em;
z-index: 2;
}
.box-jaune .title {
padding: 3vw 4.5vw;
color: black;
font-size: 1.5rem; font-size: 1.5rem;
} }
#title_in_box { .circles-top {
padding: 25px; top: 3em;
color: black;
} }
.circle { .circles-bottom {
width: 10px; bottom: 3em;
height: 10px; }
border-radius: 5px;
.circles::after,
.circles::before {
content: "";
position: absolute;
display: block;
width: 2em;
height: 2em;
top: inherit;
bottom: inherit;
border-radius: 100%;
background: black; background: black;
opacity: .9;
} }
#circle_l { .circles::before {
float: right; left: 3em;
} }
#circle_r { .circles::after {
float: left; right: 3em;
} }
/** END BOX JAUNE **/
.menu_space_bottom { .menu_space_bottom {
position: sticky; position: sticky;
width: 100%; width: 100%;

2
blouse.php
View file

@ -44,7 +44,7 @@ ob_start(); // Start reading html
à-dire, <strong>vert flamboyant si tu es <strong class="score-boo">BOOMIFLORE</strong> et violet intense pour <strong class="score-pek">PEKSUREAU</strong></strong> .</li> à-dire, <strong>vert flamboyant si tu es <strong class="score-boo">BOOMIFLORE</strong> et violet intense pour <strong class="score-pek">PEKSUREAU</strong></strong> .</li>
<li>Décore ta blouse selon le thème des <strong>INSA Games</strong> et de ton équipe.</li> <li>Décore ta blouse selon le thème des <strong>INSA Games</strong> et de ton équipe.</li>
</ul> </ul>
<b><strong>Mais attention ! Tu ne peux pas faire n’importe quoi, il y a des règles à respecter si tu <p><strong>Mais attention ! Tu ne peux pas faire n’importe quoi, il y a des règles à respecter si tu
ne veux pas rester coincé à l’aéroport !</strong></p> ne veux pas rester coincé à l’aéroport !</strong></p>

16
clubs.php
View file

@ -3,14 +3,14 @@ ob_start(); // Start reading html
?> ?>
<main> <main>
<section> <section>
<div id="boxjaune"> <div class="box-jaune">
<div id="circle_l" class="circle"></div> <span class="corners corners-top"></span>
<div id="circle_r" class="circle"></div> <span class="corners corners-bottom"></span>
<div id="title_in_box">
<a href="https://amicale-insat.fr/clubs" target="_NEWWWWW" class="link_in_yellow_box">amicale-insat.fr/clubs</a> <div class="title"><a href="https://amicale-insat.fr/clubs" target="_NEWWWWW" class="link_in_yellow_box">amicale-insat.fr/clubs</a></div>
</div>
<div id="circle_l" class="circle"></div> <span class="circles circles-top"></span>
<div id="circle_r" class="circle"></div> <span class="circles circles-bottom"></span>
</div> </div>
</section> </section>
<section> <section>

16
coms.php
View file

@ -2,13 +2,17 @@
ob_start(); // Start reading html ob_start(); // Start reading html
?> ?>
<main> <main>
<div id="boxjaune">
<div id="circle_l" class="circle"></div> <div class="box-jaune">
<div id="circle_r" class="circle"></div> <span class="corners corners-top"></span>
<div id="title_in_box"><h1>Les Com's</h1><br>La liste des responsables (les meilleurs, objectivement ^^)</div> <span class="corners corners-bottom"></span>
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div> <div class="title"><h1>Les Com's</h1>La liste des responsables (les meilleurs, objectivement ^^)</div>
<span class="circles circles-top"></span>
<span class="circles circles-bottom"></span>
</div> </div>
<div id="main_content"> <div id="main_content">
<section> <section>
<div class='title_com'>Le Bureau</div> <div class='title_com'>Le Bureau</div>

14
index.php
View file

@ -3,12 +3,14 @@ ob_start(); // Start reading html
?> ?>
<main> <main>
<div id="boxjaune"> <div class="box-jaune">
<div id="circle_l" class="circle"></div> <span class="corners corners-top"></span>
<div id="circle_r" class="circle"></div> <span class="corners corners-bottom"></span>
<div id="title_in_box">Semaine d'Accueil INSA Toulouse 2022</div>
<div id="circle_l" class="circle"></div> <div class="title">Semaine d'Accueil INSA Toulouse 2022</div>
<div id="circle_r" class="circle"></div>
<span class="circles circles-top"></span>
<span class="circles circles-bottom"></span>
</div> </div>
<div id="msg_acc"> <div id="msg_acc">

15
info.php
View file

@ -2,12 +2,15 @@
ob_start(); // Start reading html ob_start(); // Start reading html
?> ?>
<main> <main>
<div id="boxjaune">
<div id="circle_l" class="circle"></div> <div class="box-jaune">
<div id="circle_r" class="circle"></div> <span class="corners corners-top"></span>
<div id="title_in_box">Informations (contact, crédits, vie privée)</div> <span class="corners corners-bottom"></span>
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div> <div class="title">Informations (contact, crédits, vie privée)</div>
<span class="circles circles-top"></span>
<span class="circles circles-bottom"></span>
</div> </div>
<div id="main_content"> <div id="main_content">

4
structure/menu.php
View file

@ -6,7 +6,7 @@ if(!isset($relativepath)) {
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="tuyau" id="parent" class="tuyau" id="parent"
viewBox="0 0 44 78"> viewBox="0 0 44 76">
<!-- espace de définition --> <!-- espace de définition -->
<defs> <defs>
@ -147,7 +147,7 @@ if(!isset($relativepath)) {
$lien_y_1 = ["", "photos.php","lydia.php", "clubs.php", "prevs.php", "map_com_ville.php", "", "", "downloads.php", "coms.php", "info.php"]; $lien_y_1 = ["", "photos.php","lydia.php", "clubs.php", "prevs.php", "map_com_ville.php", "", "", "downloads.php", "coms.php", "info.php"];
for($i = 0; $i <= 10; $i++) { for($i = 0; $i <= 10; $i++) {
echo echo
'<a href="'.$lien_y_1[$i].'" class="menu-link"> '<a href="'.$lien_y_1[$i].'" class="menu-link menu-bottom-line">
<use xlink:href="#Brick" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85"/> <use xlink:href="#Brick" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85"/>
<svg id="btn10" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85"> <svg id="btn10" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85">
<text x="50%" y="50%"> <text x="50%" y="50%">

4
structure/template.php
View file

@ -61,6 +61,10 @@ $pagename = $infopage[4]; // nom de la page exact servant à appeler le css
</footer> </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 --> <!-- 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: 6.8vw">
</div>
</body> </body>
</html> </html>
<?php <?php