project by @Dan16 - Codewith.it

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

Referenze

<th>Definisce una cella di intestazione di una tabella HTML.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<tbody>Definisce il contenuto principale di una tabella.
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione esame

Supermercato si

Form Raccolta Segnalazioni Immobil

Documentazione Tecnica

Quando i bambini giocavano nei bos

esercizio tabella

Esercizio forse più giust

Modulo multi Processo

New Charter Page Test

JS Elementi del linguaggio es2

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