pascal.lafourcade
/
swish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

src/

Browse Source
Golfier
frperalde 5 years ago
parent 1f593d836c
commit bfdbd31620
2 changed files with 151 additions and 145 deletions
Show Stats Download Patch File Download Diff File

251
src/css/style.css
Unescape View File

@ -18,6 +18,7 @@ a {
body{ body{
background-color: var(--lightprima); background-color: var(--lightprima);
height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
/*Desactiver la selection*/ /*Desactiver la selection*/
@ -88,7 +89,7 @@ body{
#ContainBottom { #ContainBottom {
position: absolute; position: absolute;
margin-left: 25vw; margin-left: 18vw;
height: 25vw; height: 25vw;
width: auto; width: auto;
bottom: 0; bottom: 0;
@ -350,10 +351,11 @@ body{
/* PARTIE ANNEAU / ROND */ /* PARTIE ANNEAU / ROND */
.anneau{ .anneau{
box-sizing: border-box;
background-color: #DE3030; background-color: #DE3030;
border-radius: 3vw; border-radius: 3vw;
height: 5vw; height: inherit;
width: 5vw; width: inherit;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
@ -368,9 +370,9 @@ body{
} }
.containform{ .containform{
border-radius: 3vw; box-sizing: content-box;
height: 5vw; height: 6vw;
width: 5vw; width: 6vw;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
@ -387,8 +389,8 @@ body{
/* PARTIE CARRE */ /* PARTIE CARRE */
.carre{ .carre{
background-color: #30C0DE; background-color: #30C0DE;
height: 5vw; height: inherit;
width: 5vw; width: inherit;
display: table-cell; display: table-cell;
vertical-align: middle vertical-align: middle
} }
@ -411,17 +413,17 @@ body{
/* PARTIE TRIANGLE */ /* PARTIE TRIANGLE */
.triangle{ .triangle{
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent; border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent; border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430; border-bottom: 5vw solid #DEA430;
display: table-cell;
vertical-align: middle
} }
.trianglerinterieur{ .trianglerinterieur{
position: absolute; position: absolute;
left: 21.1vw; margin-left:-1.5vw;
bottom: 7.75vw; margin-top: 1.25vw;
border-left: 1.5vw solid transparent; border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent; border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca); border-bottom: 3vw solid var(--lightsedonca);
@ -430,130 +432,125 @@ body{
.ptriangle{ .ptriangle{
display: table; display: table;
margin: 0 auto; margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent; border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent; border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430; border-bottom: 3vw solid #DEA430;
} }
/* PARTIE PENTA*/ /* TRAPEZE */
.pentagone{ .trapeze{
bottom: 0px;
height: 0;
margin-top: 2.58vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vw solid #6FDE30;
}
.triangletrapeze{
padding-top: 0.1vw;
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 2.5vw solid #6FDE30;
}
.trapezeinte{
position: absolute; position: absolute;
width: 3vw; margin-top: 3vw;
box-sizing: content-box; margin-left: 1.25vw;
border-width: 3.15vw 1.2vw 0; width: 2vw;
border-style: solid; border-left: 0.75vw solid transparent;
border-color: #6FDE30 transparent; border-right: 0.75vw solid transparent;
} border-top: 1.5vw solid var(--lightsedonca);
.pentagone:before{ z-index: 15;
content: ""; }
position: absolute;
top: -5.3vw; .triangletrapezeinte{
left: -1.15vw; position: absolute;
border-width: 0 2.68vw 2.2vw; margin-top: 1.45vw;
border-style: solid; margin-left: 1.25vw;
border-color: transparent transparent #6FDE30; padding-top: 0.1vw;
} border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
.pentagoneinterieur{ border-bottom: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.trapezep{
display: table;
margin: 0 auto;
margin-top: 2vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid #6FDE30;
z-index: 15;
}
.triangletrapezep{
position: absolute;
margin-top: 0.55vw;
margin-left: 1.25vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
border-bottom: 1.5vw solid #6FDE30;
z-index: 15;
}
.losangephaut{
display: table;
margin: 0 auto;
margin-top: -6vh;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-bottom: 6vh solid #B130DE;
}
.losangepbas{
position: absolute;
border-left: 3vw solid transparent;
border-right: 3vw solid transparent;
border-top: 6vh solid #B130DE;
}
.losangephauti{
display: table;
margin: 0 auto;
margin-top: -3vh;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vh solid var(--lightsedonca);
}
.losangepbasi{
position: absolute;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vh solid var(--lightsedonca);
}
.losangephautc{
display: table;
margin: 0 auto;
margin-top: -3vh;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vh solid #B130DE;
}
.losangepbasc{
position: absolute; position: absolute;
width: 1.5vw; margin-left: 1.5vw;
box-sizing: content-box; border-left: 1.5vw solid transparent;
top: -2.75vw; border-right: 1.5vw solid transparent;
left: 0.25vw; border-top: 3vh solid #B130DE;
border-width: 1.5vw 0.5vw 0;
border-style: solid;
border-color: var(--lightsedonca) transparent;
}
.pentagoneinterieur:before{
content: "";
position: absolute;
top: -2.4vw;
left: -0.486vw;
border-width: 0 1.3vw 1vw;
border-style: solid;
border-color: transparent transparent var(--lightsedonca);
}
.ppentagone{
position: relative;
width: 1.5vw;
box-sizing: content-box;
top: 1vw;
left: 1vw;
border-width: 1.5vw 0.5vw 0;
border-style: solid;
border-color: #6FDE30 transparent;
}
.ppentagone:before{
content: "";
position: absolute;
top: -2.45vw;
left: -0.5vw;
border-width: 0 1.3vw 1vw;
border-style: solid;
border-color: transparent transparent #6FDE30;
}
/* PARTIE LOSANGE */
.losange {
width : 0;
height : 0;
border : 1.5vw solid transparent;
border-bottom : 2.25vw solid #B130DE;
position : relative;
top : -1.5vw;
}
.losange:after {
content : '';
position : absolute;
left : -1.53vw;
top : 2.2vw;
border : 1.5vw solid transparent;
border-top : 2.25vw solid #B130DE;
}
.losangeinterieur {
width : 0;
height : 0;
border : 0.75vw solid transparent;
border-bottom : 1.125vw solid var(--lightsedonca);
position : relative;
top : 0.45vw;
left: -0.74vw;
z-index: 2;
}
.losangeinterieur:after {
content : '';
position : absolute;
left : -0.75vw;
top : 1.1vw;
border : 0.75vw solid transparent;
border-top : 1.125vw solid var(--lightsedonca);
z-index: 2;
}
.plosange {
width : 0;
height : 0;
border : 0.75vw solid transparent;
border-bottom : 1.125vw solid #B130DE;
position : relative;
top : -0.5vw;
left: -0.74vw;
z-index: 2;
}
.plosange:after {
content : '';
position : absolute;
left : -0.75vw;
top : 1.1vw;
border : 0.75vw solid transparent;
border-top : 1.125vw solid #B130DE;
z-index: 2;
} }
.retourstp{ .retourstp{
position: absolute; position: absolute;
} }

45
src/index.html
Unescape View File

@ -57,52 +57,61 @@
<div id="ContainBottom"> <div id="ContainBottom">
<!-- Forme : rond--> <!-- Forme : rond-->
<div class="anneau"> <div class="containform">
<div class="rondinterieur inté"></div> <div class="anneau">
<div class="rondinterieur inté"></div>
</div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="rond"></div> <div class="rond"></div>
</div> </div>
<!-- Forme : carré--> <!-- Forme : carré-->
<div class="carre"> <div class="containform">
<div class="carreinterieur inté"></div> <div class="carre">
</div> <div class="carreinterieur inté"></div>
</div>
</div>
<div class="containform"> <div class="containform">
<div class="pcarre"></div> <div class="pcarre"></div>
</div> </div>
<!-- Forme : triangle--> <!-- Forme : triangle-->
<div class="triangle"> <div class="containform">
<div class="trianglerinterieur"></div> <div class="triangle">
</div> <div class="trianglerinterieur"></div>
</div>
</div>
<div class="containform"> <div class="containform">
<div class="ptriangle"></div> <div class="ptriangle"></div>
</div> </div>
<!-- Forme : pentagone--> <!-- Forme : pentagone-->
<div class="containform"> <div class="containform">
<div class="pentagone"> <div class="triangletrapezeinte"></div>
<div class="pentagoneinterieur"></div> <div class="trapezeinte"></div>
</div> <div class="triangletrapeze"></div>
<div class="trapeze"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="ppentagone"></div> <div class="triangletrapezep"></div>
<div class="trapezep"></div>
</div> </div>
<!-- Forme : losange --> <!-- Forme : losange -->
<div class="containform"> <div class="containform">
<div class="losange"> <div class="losangephaut"></div>
<div class="losangeinterieur"></div> <div class="losangepbas"></div>
</div> <div class="losangephauti"></div>
<div class="losangepbasi"></div>
</div> </div>
<div class="containform"> <div class="containform">
<div class="plosange"></div> <div class="losangephautc"></div>
<div class="losangepbasc"></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save