1
1
Fork 1

.box-jaune design cohérent avec le menu

Dieser Commit ist enthalten in:
Guillaume Joffre 2022-04-17 16:18:38 +02:00
Ursprung 1094f50d7f
Commit a6c40157ad
10 geänderte Dateien mit 135 neuen und 52 gelöschten Zeilen

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

@ -48,36 +48,101 @@ a.linkmail:hover {
-webkit-text-stroke: 1px white;
}
#boxjaune {
/** START BOX JAUNE **/
.box-jaune {
display: inline-block;
background-color: #FFDC00;
position: relative;
padding: 10px;
box-shadow: 10px 10px 15px 5px rgba(0,0,0,0.61);
border: 3px solid black;
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;
}
#title_in_box {
padding: 25px;
color: black;
.circles-top {
top: 3em;
}
.circle {
width: 10px;
height: 10px;
border-radius: 5px;
background: black;
.circles-bottom {
bottom: 3em;
}
#circle_l {
float: right;
.circles::after,
.circles::before {
content: "";
position: absolute;
display: block;
width: 2em;
height: 2em;
top: inherit;
bottom: inherit;
border-radius: 100%;
background: black;
opacity: .9;
}
#circle_r {
float: left;
.circles::before {
left: 3em;
}
.circles::after {
right: 3em;
}
/** END BOX JAUNE **/
.menu_space_bottom {
position: sticky;
width: 100%;

Datei anzeigen

@ -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>
<li>Décore ta blouse selon le thème des <strong>INSA Games</strong> et de ton équipe.</li>
</ul>
<b><strong>Mais attention ! Tu ne peux pas faire nimporte quoi, il y a des règles à respecter si tu
<p><strong>Mais attention ! Tu ne peux pas faire nimporte quoi, il y a des règles à respecter si tu
ne veux pas rester coincé à laéroport !</strong></p>

Datei anzeigen

@ -3,15 +3,15 @@ ob_start(); // Start reading html
?>
<main>
<section>
<div id="boxjaune">
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div>
<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>
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div>
</div>
<div class="box-jaune">
<span class="corners corners-top"></span>
<span class="corners corners-bottom"></span>
<div class="title"><a href="https://amicale-insat.fr/clubs" target="_NEWWWWW" class="link_in_yellow_box">amicale-insat.fr/clubs</a></div>
<span class="circles circles-top"></span>
<span class="circles circles-bottom"></span>
</div>
</section>
<section>
<iframe src="https://amicale-insat.fr/clubs" class="iframe_amicale" allow="fullscreen" scrolling="auto"></iframe>

Datei anzeigen

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

Datei anzeigen

@ -3,14 +3,16 @@ ob_start(); // Start reading html
?>
<main>
<div id="boxjaune">
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div>
<div id="title_in_box">Semaine d'Accueil INSA Toulouse 2022</div>
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div>
<div class="box-jaune">
<span class="corners corners-top"></span>
<span class="corners corners-bottom"></span>
<div class="title">Semaine d'Accueil INSA Toulouse 2022</div>
<span class="circles circles-top"></span>
<span class="circles circles-bottom"></span>
</div>
<div id="msg_acc">
<p>
Bienvenue à l'INSA Toulouse jeune aventurier, pour ta magnifique semaine d'accueil.

Datei anzeigen

@ -2,13 +2,16 @@
ob_start(); // Start reading html
?>
<main>
<div id="boxjaune">
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div>
<div id="title_in_box">Informations (contact, crédits, vie privée)</div>
<div id="circle_l" class="circle"></div>
<div id="circle_r" class="circle"></div>
</div>
<div class="box-jaune">
<span class="corners corners-top"></span>
<span class="corners corners-bottom"></span>
<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 id="main_content">
<section>

Datei anzeigen

@ -6,7 +6,7 @@ if(!isset($relativepath)) {
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class="tuyau" id="parent"
viewBox="0 0 44 78">
viewBox="0 0 44 76">
<!-- espace de définition -->
<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"];
for($i = 0; $i <= 10; $i++) {
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"/>
<svg id="btn10" width="47" height="17" x="'.$co_y_1[$i].'" y="17.85">
<text x="50%" y="50%">

Datei anzeigen

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