project by @Dan16 - Codewith.it

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

References

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
formSpecifica a quale form appartiene un elemento.
formnovalidateImpedisce la convalida di un singolo elemento input
<iframe>Crea un frame all'interno di una pagina HTML.
multipart/form-dataCodifica dei caratteri di un form
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Users

Log in to search for users

Explore

Find inspiration

inserimento immagini in un testo

Grafico a torta

“esercitazione4.html”

Lista con ricerca

Suono musicista 09/02/24

Convertitore doppio

Calcolatrice Pitagora

Esercizi 01/03/2024 es2

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>
    <title>Projwct Az</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
      
  </head>
  <body>
    <div class="grid">
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
            Button Button Button Button Button Button 
            
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
            Button Button Button Button Button Button 
            
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
			Button Button Button Button Button Button             
          </div>
      </div>
      <div class="container">
        <div class="image">
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" width="100%">
          </div>
        <div class="button">
            Button Button Button Button Button Button 
            
          </div>
      </div>
    </div>
    
  </body>
</html><link rel="stylesheet" type="text/css" href="style895.css"><script type="text/javascript" src="script895.js"></script>

body{
  
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: bold;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  grid-gap: 10px;
  height:100vh;
  width:100%;
}


.container{
  padding:10px;
  background-color:#0073e5;  align-items:center;
}

.image{
  width:150px;
  transform: translateX(-50%);
  margin-left:50%;
  padding:10px
}

.button{
  padding: 18px 28px;
  background: #7ddc1f;
  color:#000000;
  display: inline-block;
  border-radius:4px;
  transform: translateX(-50%);
  margin-left:50%;
  width:80%;
  text-align: center;

  
}


@media(max-width:800px){
  .grid{
  display:grid;
  grid-template-columns:1fr ;
  grid-gap: 10px;
  height:100vh;
  width:100%;
}
}