template grid by @dcalore - Codewith.it

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

Referenze

animationDefinisce i parametri dell'animazione di un elemento o selettore
autofocusAttiva un elemento al caricamento della pagina.
application-x-www-form-urlencodedCodifica dei caratteri di un form
<nav>Definisce un menu di navigazione
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
<object>Incorpora risorse varie nella pagina web.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Indovina il numero 1 a 10

esercizio riepilogativo 2

Countdown fine anno

Curriculum html

numeri primi e divisori pro

Chronē — Orologi d\'autore •

Tabella Landing page

Esercizi 05/03/2024 es4

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.

<body>
  <main class="wrapper">
    <section class="columns is-3 has-padding">
      <div class="column">
        <h2>
          <i class="fas fa-angry"></i>
          Titolo
        </h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
        </p>
      </div>
      <div class="column">
        <h2><i class="fas fa-camera"></i>Titolo</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
        </p>
      </div>
      <div class="column">
        <h2>Titolo</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
        </p>
      </div>
    </section>
    <section class="columns is-2 has-padding">
      <div class="column">
        <h2>Titolo</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
        </p>
      </div>
      <div class="column">
        <h2>Titolo</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
        </p>
      </div>
    </section>
    <section class="columns">
      <div class="column">
        <h2>Titolo</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
        </p>
      </div>
    </section>

    <section class="columns is-1_2">
        <div class="column">
          <h2>Titolo</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
          </p>
        </div>
        <div class="column">
          <div class="columns is-2">
            <div class="column">
              <h2>Titolo</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
              </p>
            </div>
            <div class="column">
              <h2>Titolo</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae leo et tortor consectetur mollis non eu leo. Aenean lacinia at lorem pharetra vehicula. Nulla venenatis faucibus dolor, vitae sollicitudin metus porta at. Praesent nec dolor non sapien maximus scelerisque. Quisque at nulla vitae nunc semper gravida lobortis vitae ante. Vestibulum ipsum mauris, lobortis vel nisi non, viverra consectetur massa. Proin sollicitudin elit eget lectus efficitur sollicitudin.
              </p>
            </div>
          </div>
        </div>
    </section>

  </main>
</body>

*{
	font-family: consolas,'courier new',monospace;
	color:#0F0F0F;
	}


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700;800&display=swap');

body {
  font-family: 'Open sans', sans-serif;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  max-width: 1024px;
  min-height: 1280px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
}

.columns {
  display: grid;
  grid-gap: 20px;
}
.columns.has-padding {
  padding: 20px;
}
.columns.is-2 {
  grid-template-columns: 1fr 1fr;
}
.columns.is-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.columns.is-1_2 {
  grid-template-columns: 1fr 2fr;
}

h2 {
  font-weight: 800;
}

p {
  font-weight: 300;
}