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{
background-color: var(--lightprima);
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
/*Desactiver la selection*/
@ -88,7 +89,7 @@ body{
#ContainBottom {
position: absolute;
margin-left: 25vw;
margin-left: 18vw;
height: 25vw;
width: auto;
bottom: 0;
@ -350,10 +351,11 @@ body{
/* PARTIE ANNEAU / ROND */
.anneau{
box-sizing: border-box;
background-color: #DE3030;
border-radius: 3vw;
height: 5vw;
width: 5vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
}
@ -368,9 +370,9 @@ body{
}
.containform{
border-radius: 3vw;
height: 5vw;
width: 5vw;
box-sizing: content-box;
height: 6vw;
width: 6vw;
display: table-cell;
vertical-align: middle;
}
@ -387,8 +389,8 @@ body{
/* PARTIE CARRE */
.carre{
background-color: #30C0DE;
height: 5vw;
width: 5vw;
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle
}
@ -411,17 +413,17 @@ body{
/* PARTIE TRIANGLE */
.triangle{
display: table;
margin: 0 auto;
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
display: table-cell;
vertical-align: middle
}
.trianglerinterieur{
position: absolute;
left: 21.1vw;
bottom: 7.75vw;
margin-left:-1.5vw;
margin-top: 1.25vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
@ -430,130 +432,125 @@ body{
.ptriangle{
display: table;
margin: 0 auto;
margin-top: 0.75vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* PARTIE PENTA*/
.pentagone{
/* TRAPEZE */
.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;
width: 3vw;
box-sizing: content-box;
border-width: 3.15vw 1.2vw 0;
border-style: solid;
border-color: #6FDE30 transparent;
}
.pentagone:before{
content: "";
position: absolute;
top: -5.3vw;
left: -1.15vw;
border-width: 0 2.68vw 2.2vw;
border-style: solid;
border-color: transparent transparent #6FDE30;
}
.pentagoneinterieur{
margin-top: 3vw;
margin-left: 1.25vw;
width: 2vw;
border-left: 0.75vw solid transparent;
border-right: 0.75vw solid transparent;
border-top: 1.5vw solid var(--lightsedonca);
z-index: 15;
}
.triangletrapezeinte{
position: absolute;
margin-top: 1.45vw;
margin-left: 1.25vw;
padding-top: 0.1vw;
border-left: 1.75vw solid transparent;
border-right: 1.75vw solid transparent;
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;
width: 1.5vw;
box-sizing: content-box;
top: -2.75vw;
left: 0.25vw;
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;
margin-left: 1.5vw;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-top: 3vh solid #B130DE;
}
.retourstp{
position: absolute;
}

45
src/index.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save