Mario-Block.html by @connor.halde - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<th>Definisce una cella di intestazione di una tabella HTML.
<table>Tag primario per la creazione di tabelle
minlengthDetermina il numero minimo di caratteri per un elemento input
getDefinisce un metodo di invio di dati al server
<b>Formatta il testo in grassetto

Users

Log in to search for users

Explore

Find inspiration

TEST COLSPAN ROWSPAN

“esercitazione4.html”

informatica 13/10

calcola peso in byte

Banner_cercatutto

Esercizio 1 3ASC

Heads Or Tails Random Tally

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario Black</title>
</head>
<body>
<div class="mario-block mario-block--question">
    <label for="3">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </label>
</div>
<div class="rectangle-1"</div> 
<div class="rectangle-2"</div> 
<div class="rectangle-3"</div> 
<div class="rectangle-4"</div> 
<div class="rectangle-5"</div> 
<div class="rectangle-6"</div>  
</body>

.mario-block label {
    background: #F88D2E;
    border: 10px solid #070000;
    box-shadow: inset -4px -4px 0 #965117, inset 4px 4px 0 #FAB89B;
    display: block;
    height: 1000px;
    position: relative;
    width: 1000px;
}
.mario-block .dot {
    background: #844516;
    border: 4px solid #070000;
     border-radius: 30px 30px;
    height: 55px;
    position: absolute;
    width: 55px;
}
.mario-block .dot:nth-child(1) {
    left: 4px;
    top: 4px;
}
.mario-block .dot:nth-child(2) {
    right: 4px;
    top: 4px;
}
.mario-block .dot:nth-child(3) {
    bottom: 4px;
    left: 4px;
}
.mario-block .dot:nth-child(4) {
    bottom: 4px;
    right: 4px;
}
.rectangle-1{
      background: #ffffff;
    border: 4px solid #070000;
    box-shadow: inset -4px -4px 0 #3a3735, inset 4px 4px 0 #7e726d;
    display: block;
    height: 120px;
    position: relative;
    width: 70px;
    top: -750;
    right: -385px;
}
.rectangle-2{
  background: #ffffff;
    border: 4px solid #070000;
    box-shadow: inset -4px -4px 0 #3a3735, inset 4px 4px 0 #7e726d;
    display: block;
    height: 60px;
    width: 250px;
    position: absolute;
    top: -4px;
    left: -4px;
}
.rectangle-3{
 background: #ffffff;
    border: 4px solid #070000;
    box-shadow: inset -4px -4px 0 #3a3735, inset 4px 4px 0 #7e726d;
    display: block;
    position: absolute;
    height: 270px;
    width: 70px;
    right: -4px;
    top: -4px;
}
.rectangle-4{
   background: #ffffff;
    border: 4px solid #070000;
    box-shadow: inset -4px -4px 0 #3a3735, inset 4px 4px 0 #7e726d;
    display: block;
    position: absolute;
    height: 65px;
    width: 250px;
    bottom: -4px;
    left: -184px;
}
.rectangle-5{
   background: #ffffff;
    border: 4px solid #070000;
    box-shadow: inset -4px -4px 0 #3a3735, inset 4px 4px 0 #7e726d;
    display: block;
    position: absolute;
    height: 135px;
    width: 70px;
    left: -4px;
    top: -4px;
}
.rectangle-6{
  background: #ffffff;
    border: 4px solid #070000;
    box-shadow: inset -4px -4px 0 #3a3735, inset 4px 4px 0 #7e726d;
    display: block;
    position: absolute;
    width: 70px;
    height: 60px;
    bottom: -125px;
    left: -4px;
}