frperalde
4 years ago
parent
5543757c8d
commit
c1453b3412
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="fr">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>SwishGame</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Forme : rond-->
|
||||
<div class="containform">
|
||||
<div class="anneau">
|
||||
<div class="rondinterieur inté"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="rond"></div>
|
||||
</div>
|
||||
|
||||
<div class="containform2">
|
||||
<div class="rond2"></div>
|
||||
</div>
|
||||
|
||||
<div class="containform">
|
||||
<div class="rond"></div>
|
||||
</div>
|
||||
|
||||
<div class="containform2">
|
||||
<div class="anneau2"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
<div class="containform">
|
||||
<div class="carre">
|
||||
<div class="carreinterieur inté"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="pcarre"></div>
|
||||
</div>
|
||||
|
||||
<div class="containform">
|
||||
<div class="triangle">
|
||||
<div class="trianglerinterieur"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="ptriangle"></div>
|
||||
</div>
|
||||
|
||||
<div class="containform">
|
||||
<div class="triangletrapezeinte"></div>
|
||||
<div class="trapezeinte"></div>
|
||||
<div class="triangletrapeze"></div>
|
||||
<div class="trapeze"></div>
|
||||
</div>
|
||||
|
||||
<div class="containform">
|
||||
<div class="triangletrapezep"></div>
|
||||
<div class="trapezep"></div>
|
||||
</div>
|
||||
|
||||
<div class="containform">
|
||||
<div class="losangephaut"></div>
|
||||
<div class="losangepbas"></div>
|
||||
<div class="losangephauti"></div>
|
||||
<div class="losangepbasi"></div>
|
||||
|
||||
</div>
|
||||
<div class="containform">
|
||||
<div class="losangephautc"></div>
|
||||
<div class="losangepbasc"></div>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,82 @@
|
||||
:root{
|
||||
--x : 6vw;
|
||||
--d : calc(var(--x)/2);
|
||||
--e : calc(var(--x)/4);
|
||||
}
|
||||
|
||||
.containform {
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.anneau {
|
||||
background-color: #FFD100;
|
||||
border-radius: var(--x);
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.anneau2 {
|
||||
background-color: white;
|
||||
border-radius: var(--x);
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rondinterieur {
|
||||
background-color: white;
|
||||
height: var(--d);
|
||||
width: var(--d);
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
border-radius: var(--d);
|
||||
}
|
||||
.rond {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: #FFD100;
|
||||
height: var(--d);
|
||||
width: var(--d);
|
||||
border-radius: var(--d);
|
||||
}
|
||||
|
||||
.containform2{
|
||||
height: var(--x);
|
||||
width: var(--x);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
background-color: #FFD100;
|
||||
}
|
||||
|
||||
.rond2 {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
height: var(--d);
|
||||
width: var(--d);
|
||||
border-radius: var(--d);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue