Stato attuale delle acque
body{
background-color: #fefefef;
text-align: center;
font-family: 'Roboto', sans-serif;
}
.container{
display: grid;
grid-template-columns: 1fr , 2fr , 1fr;
grid-template-row: repeat(3, 1fr);
grid-gap: 10px 20px;
}
.semaforo1 {
width: px;
height: px;
background-color: #ef476f;
border-radius: 50%;
padding: 1rem;
align-self: center;
justify-self: center;
}
.semaforo2 {
width: 100px;
height: 100px;
background-color: #ffd166;
border-radius: 50%;
padding: 1rem;
align-self: center;
justify-self: center;
}
.semaforo3 {
width: px;
height: px;
background-color: #06d6a0;
border-radius: 50%;
padding: 1rem;
align-self: center;
justify-self: center;
}
function stage1(){
$(".semaforo1").css("background-color","black");
$(".semaforo2").css("background-color","black");
$(".semaforo3").css("background-color","##06d6a0");
}
function stage2(){
$(".semaforo1").css("background-color","#black");
$(".semaforo2").css("background-color","#ffd166");
$(".semaforo3").css("background-color","black");
}
function stage3(){
$(".semaforo1").css("background-color","#ef476f");
$(".semaforo2").css("background-color","black");
$(".semaforo3").css("background-color","black");
}
Commenti
Posta un commento