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

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

Referenze

<h5>Titolo di intestazione di quinto livello
minImposta il valore numerico o temporale minimo per un elemento input
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<a>Inserisce link e collegamenti ipertestuali
multipleConverte in lista a selezione multipla

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Gesù nostro signore(2)

Bootstrap Basics

Esercizi 05/03/2024 es3

Young Corporate Lawyer - Experienc

Review of Functions I

Group 1 - Irregular Verbs

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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;
}