Commit ec488d70 authored by Ferry Jérémie's avatar Ferry Jérémie

premier jet

parent a1167c2b
html {
height: 100%;
}
body {
font-family: "Arial", "Helvetica", sans-serif;
font-size: 0.8em;
background-color: #e0cba1;
width: 100%;
height: 98%;
background-color: #439c43ff;
margin:0;
padding:0;
}
p {
margin: 5px 10px 5px 10px;
}
#consignes {
height: 5%;
}
#commandes {
text-align: center;
height: 5%;
}
img#poubelle {
/* text-align: center;
margin-left: auto;
margin-right: auto;
width: 90px;*/
#zone-exercice {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 90%;
font-family: "Arial", "Helvetica", sans-serif;
background-image: url("img/fond.svg");
background: url(https://www.de-bric-et-de-broc.fr/test/applis/alacampagne/img/fond.svg) center center;
margin: 0;
padding: 0;
background-size: contain;
background-repeat: no-repeat;
}
.ligne {
.action {
position: absolute;
width: 100%;
height: 100%;
}
#reserve {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 5%;
height: 100%;
position: absolute;
}
.ligne {
height: 35%;
position: relative;
width: 100vh;
left: 50%;
margin-left: -50vh;
}
#ligne1 {
top: 15%;
background: red;
opacity: .5;
}
#ligne2 {
top: 10%;
}
.pre {
font-size: .9em;
font-family: "MS Sans Serif", sans;
/* height: 170px;*/
height: 100%;
width: 49%;
position: relative;
width: 40%;
position: absolute;
}
#pre1 {
left: 5%;
background: blue;
}
#pre2 {
left: 55%;
background: blue;
}
#pre3 {
left: 5%;
}
#pre4 {
left: 8%;
}
@media screen and (orientation:portrait) {
.ligne {
height: 17%;
width: 100%;
margin: 0;
left: 0;
}
#ligne1 {
top: 30%;
}
#ligne2 {
top: 32%;
}
.pre {
width: 38%;
}
#pre1 {
left: 11%;
}
#pre2 {
left: 53%;
}
#pre3 {
left: 5%;
}
#pre4 {
left: 8%;
}
}
.modele {
font-family: "MS Sans Serif", sans;
float: left;
width: 100px;
height: 35px;
font-size: 3em;
background-size: 100% 100%;
width: 25%;
height: 18%;
font-size: 2vw;
}
.modele img {
float: left;
margin-left: 5%;
width: 50%;
height: 75%;
}
.modele img.lapin-mini {
max-width: 35px;
max-height: 33px;
}
.modele img.mouton-mini {
max-width: 27px;
max-height: 33px;
}
.modele img.vache-mini {
max-width: 33px;
max-height: 37px;
}
.modele img.poule-mini {
max-width: 19px;
max-height: 32px;
}
.erreur {
......@@ -53,43 +174,59 @@ img#poubelle {
}
.enclos {
border: solid 1px blue;
background: green;
display: flex;
flex-wrap: wrap;
height: 85%;
width: 100%;
width: 85%;
position: relative;
}
#enclos1, #enclos2, #enclos3, #enclos4 {
left: 8%;
}
#reserve {
position: absolute;
}
#reserve img.animal {
width: 100%;
}
.enclos img.animal {
width: 10%;
height: 25%;
}
.enclos img.animal1 {
height: 51px;
width: 54px;
max-height: 51px;
max-width: 54px;
}
.enclos img.animal2 {
height: 54px;
width: 44px;
max-height: 54px;
max-width: 44px;
}
.enclos img.animal3 {
height: 54px;
width: 61px;
max-height: 54px;
max-width: 61px;
}
.enclos img.animal4 {
height: 52px;
width: 31px;
max-height: 52px;
max-width: 31px;
}
#reserve {
margin-top: 5px;
margin-bottom: 5px;
width: 205px;
#espacement {
width: 8%;
height: 12%;
top: 10%;
position: relative;
margin-left: auto;
margin-right: auto;
}
#espacement {
display: column;
display: block;
height: 80px;
text-align: center;
img#poubelle {
width: 100%;
height: 100%;
max-width: 90px;
max-height: 91px;
}
<!doctype html>
<html lang="fr">
<head>
<title>A la campagne </title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="height=device-height">
<meta name="viewport" content="height=device-height">
<link rel="stylesheet" type="text/css" media="screen" href="alacampagne.css" />
</head>
<body>
<p>Les animaux peuvent être ajoutés dans les différents enclos en les faisant glisser depuis les images au centre, ou bien en les déplaçant d'un enclos à l'autre.
On les supprime en les faisant glisser dans le trou du bas.</p>
<div id="consignes">
<p>Les animaux peuvent être ajoutés dans les différents enclos en les faisant glisser depuis les images à gauche, ou bien en les déplaçant d'un enclos à l'autre.
On les supprime en les faisant glisser dans le trou du bas.</p>
</div>
<div id="commandes">
<button id="Niveau1" type="button" value="Niveau1" autocomplete="off">Nombres de 1 à 10</button>
......@@ -18,44 +21,44 @@ On les supprime en les faisant glisser dans le trou du bas.</p>
<button id="newExo" type="button" disabled>Commencer</button>
<button id="verifier" type="button" disabled>Vérifier</button>
</div>
<div id="ligne1" class="ligne">
<div id="pre1" class="pre">
<div id="modele1" class="modele"></div>
<div id="erreur1" class="erreur"></div>
<div id="enclos1" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div id="pre2" class="pre">
<div id="modele2" class="modele"></div>
<div id="erreur2" class="erreur"></div>
<div id="enclos2" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
<div id="reserve">
<img src="img/lapin.png" id="animal1" class="animal1" alt="animal1" draggable="true" ondragstart="drag(event)">
<img src="img/mouton.png" id="animal2" class="animal2" alt="animal2" draggable="true" ondragstart="drag(event)">
<img src="img/vache.png" id="animal3" class="animal3" alt="animal3" draggable="true" ondragstart="drag(event)">
<img src="img/poule.png" id="animal4" class="animal4" alt="animal4" draggable="true" ondragstart="drag(event)">
<div id="zone-exercice">
<div class="action">
<div id="ligne1" class="ligne">
<div id="pre1" class="pre">
<div id="modele1" class="modele"></div>
<div id="erreur1" class="erreur"></div>
<div id="enclos1" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div id="pre2" class="pre">
<div id="modele2" class="modele"></div>
<div id="erreur2" class="erreur"></div>
<div id="enclos2" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
<div id="ligne2" class="ligne">
<div id="pre3" class="pre">
<div id="modele3" class="modele"></div>
<div id="erreur3" class="erreur"></div>
<div id="enclos3" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
<div id="pre4" class="pre">
<div id="modele4" class="modele"></div>
<div id="erreur4" class="erreur"></div>
<div id="enclos4" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
</div>
<div id="espacement">
<img src="img/trou.png" id="poubelle" ondrop="detruit(event)" ondragover="allowDrop(event)">
</div>
</div>
<div id="reserve" class="reserve enclos">
<img src="img/lapin.png" id="animal1" class="animal1 animal" alt="animal1" draggable="true" ondragstart="drag(event)">
<img src="img/mouton.png" id="animal2" class="animal2 animal" alt="animal2" draggable="true" ondragstart="drag(event)">
<img src="img/vache.png" id="animal3" class="animal3 animal" alt="animal3" draggable="true" ondragstart="drag(event)">
<img src="img/poule.png" id="animal4" class="animal4 animal" alt="animal4" draggable="true" ondragstart="drag(event)">
</div>
</div>
<div id="ligne2" class="ligne">
<div id="pre3" class="pre">
<div id="modele3" class="modele"></div>
<div id="erreur3" class="erreur"></div>
<div id="enclos3" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
<div id="pre4" class="pre">
<div id="modele4" class="modele"></div>
<div id="erreur4" class="erreur"></div>
<div id="enclos4" alt="enclos" class="enclos" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
</div>
</div>
<div id="espacement">
<img src="img/trou4.png" id="poubelle" ondrop="detruit(event)" ondragover="allowDrop(event)"></div>
</div>
<script src="alacampagne.js" type="text/javascript"></script>
</body>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment