project by @Dan16 - Codewith.it

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

References

<h4>Titolo di intestazione di quarto livello
valueValore alfanumerico o booleano contenuto in un elemento
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<caption>Definisce didascalie all'interno di una tabella
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.

Users

Log in to search for users

Explore

Find inspiration

Caps Lock Checker

26/01/2024 pagina html

Calcolatrice JavaScript

pagina prova sara

ESERCIZIO: LE REGIONI ITALIANE E

Il Mago e Frondavale.html

esercizio 3 esame

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