Blog Picentino by @PicentinoD - Codewith.it

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

Referenze

<aside>Definisce un contenuto separato dal testo perincipale
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<q>Indica una parte di testo come citazione breve
multipart/form-dataCodifica dei caratteri di un form
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
typeSpecifica la tipologia/funzione di un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Neon Flux - Visual Design in Motio

Nexa Digital - Web Design, AI Gene

Heads Or Tails Random Tally

26/01/2024 pagina html

Alice nel Paese delle Meraviglie

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">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Blog Picentino Davide
    </title>
    <style>
	.Libra {
  	background-color: #d9d9d9;
      text-align: center;
      font-style: italic;
      line-height: 100%;
	}
	.ResetEarth {
  	background-color: #d9d9d9;
      }
      h2 {
        color: #E7EAEF;
        background-color: #217074;
        text-align: center;
      }
      h3 {
        text-shadow: 0 0 5px rgba(13,13,13,1);
      }
      h4 {
        color: #FF0000;
      }
      #titolo-tabella {
        text-align: center;
        color: #217074;
      }
    </style>
  </head>
  <body bgcolor="#FFFFFF">
    <div class="header">
  <a href="#default" class="logo">Blog Picentino Davide</a>
  <div class="header-right">
    <a class="active" href="#Libra">Libra</a>
    <a href="#rEarth">rEarth</a>
    <a href="#titolo-tabella">Tabella</a>
  </div>
</div>
    <div class="content">
    <div id="Libra">
      <h2> Fintech Libra, la criptovaluta di Facebook
      </h2>
      <h6>17/11/2019
      </h6>
      <h4>La criptovaluta presentata da Facebook punta a creare un nuovo sistema finanziario globale.
      </h4>
      <p class="Libra"> Libra è una criptovaluta creata da un'associazione di aziende tra cui figura anche Facebook, che è l'artefice principale del progetto: la Libra Association raccoglie 28 membri fondatori, che potranno raccogliere ulteriori adesioni nei prossimi mesi. In quanto criptovaluta funziona sulla base di una piattaforma blockchain, i cui nodi validatori delle transazioni saranno i partecipanti all'associazione. Il suo valore sarà garantito dalla codi un paniere formato da valute internazionali e titoli di debito a breve termine, la cui composizione non è stata resa nota. Ma si candida a essere una valuta digitale globale.
      </p>
      <img src="https://i2.res.24o.it/images2010/Editrice/ILSOLE24ORE/ILSOLE24ORE/2019/06/24/Politica%20e%20societa/ImmaginiWeb/Ritagli/2019-06-21T100922Z_2137099395_RC141DEAAD20_RTRMADP_3_FACEBOOK-CRYPTO-kmHG--1020x533@IlSole24Ore-Web.JPG" alt="Libra Immagine"
           height = "300" class="center"/>
    </div>
    <div id="rEarth">
      <h2>Reset Earth, il videogioco Onu per insegnare a scuola la tutela dell’ambiente
      </h2>
      <h6>18/03/2021
      </h6>
      <h4>Il segretario Onu Megumi Seki all'evento del Corriere alla Digital Week per il lancio di CampBus 2021
      </h4>
      <p class="ResetEarth"> Un Ozono. Un Pianeta. Una possibilità. Con questo slogan si apre Reset Earth, il videogioco sviluppato dalle Nazioni Unite per portare nelle scuole una modalità differente per insegnare a ragazzi e ragazze l’importanza di vivere in modo sostenibile. L’idea è di imparare giocando, il motto latino ludendo docere che è alla base della filosofia di CampBus, il progetto educativo del Corriere della Sera che da settembre viaggerà nelle scuole italiane. «Utilizzare un videogame per insegnare temi così importanti come il rispetto dell’ambiente significa cercare di avvicinarci al linguaggio di quel target fondamentale che sono i ragazzi e le ragazze. La generazione di uomini e donne di domani», ha spiegato Megumi Seki, responsabile del Segretariato Onu per l’Ozono, ospite di «Io mi gioco il Pianeta», l’evento che ha dato il via alla nuova edizione del progetto che vuole portare la didattica digitale, per quanto possibile in presenza, nelle scuole. 
      </p>
      <img src="https://i0.wp.com/venti-trenta.it/wp-content/uploads/2021/02/venti-trenta_reset_earth.jpg?resize=1140%2C641&ssl=1" alt="Libra Immagine"
           height = "300" class="center"/>
      <h3 id="titolo-tabella">
        Classifica Serie A
      </h3>
      <table class="styled-table">
        <thead>
          <tr>
            <th>Posizione
            </th>
            <th>Squadra
            </th>
            <th>Punti
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="team-vincente">
            <td>1
            </td>
            <td>Napoli
            </td>
            <td>25
            </td>
          </tr>
          <tr>
            <td>2
            </td>
            <td>Lazio
            </td>
            <td>23
            </td>
          </tr>
          <tr>
            <td>3
            </td>
            <td>Milan
            </td>
            <td>20
            </td>
          </tr>
          <tr>
            <td>3
            </td>
            <td>Juve
            </td>
            <td>18
            </td>
          </tr>
          <tr>
            <td>4
            </td>
            <td>Cremonese
            </td>
            <td>17
            </td>
          </tr>
          <tr>
            <td>5
            </td>
            <td>Udinese
            </td>
            <td>16
            </td>
          </tr>
        </tbody>
      </table>
    </div>
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
    </div>
  </body>
</html>

@keyframes logo {
  from {color: rgb(255,255,255);}
  to {color: rgb(0,0,0);}
}

.content {
  margin-top:80px;
  margin-left: -8px;
  margin-right: -8px;
}
/* Stile dell'header*/
.header {
  	height: 80px;
  	margin-left: -8px;
  	margin-right: -8px;
  	margin-top: -80px;
  	position: fixed;
  	overflow: hidden;
  	background-image: url("https://images.newscientist.com/wp-content/uploads/2020/09/16181027/credit_mohamed-khaki-eyeem-getty-images_web.jpg?crop=16:9,smart&width=1200&height=675&upscale=true");
  	background-size: cover;
  	background-position: 25% 60%;
	background-repeat: no-repeat;
   box-shadow: 0px 5px 8px 4px rgba(0,0,0,0.4);
  width:100%;
}
/* Stile dei link dell'header */
.header a {
  float: left;
  color: rgb(255,255,255);
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 56px;
}

/* Stile del "logo" */
.header a.logo {
  color: #E7EAEF;
  font-size: 25px;
  font-weight: bold;
  font-family: "Lucida Handwriting";
  text-shadow: 0 0 5px rgba(13,13,13,1);
  text-align:
}

/* cambio bg quando ci passa il mouse */
.header :hover {
  background-color: #00000050;
  color: black;
  text-shadow: 0 0 5px rgb(255,255,255);
  animation-name: logo;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
  animation-direction: normal;
}

/* stile del link attivo che pero' non funziona*/
.header a.active {
  background-color: rgba(0,0,0,0.75);
  color: #217074;
  font-family: "Lucida Handwriting";
  text-shadow: 0 0 5px rgba(13,13,13,1);
}

/* sposta la sezione dei link sulla destra */
.header-right {
  float: right;
}

.styled-table {
      	
    	border-collapse: collapse;
    	margin-left: auto;  
		margin-right: auto; 
    	font-size: 0.9em;
    	font-family: sans-serif;
    	min-width: 400px;
    	box-shadow: 0 0 20px rgba(13,13,13,0.5);
	}
	.styled-table thead tr {
    	background-color: #217074;
      	color: #ffffff;
   	 	text-align: left;
	}
	.styled-table th,
	.styled-table td {
    	padding: 12px 15px;
	}
	.styled-table tbody tr {
    	border-bottom: thin solid #000000;
	}

	.styled-table tbody tr:nth-of-type(even) {
    	background-color: #f3f3f3;
	}

	.styled-table tbody tr:first-of-type {
    	border-bottom: 3px solid #217074;
	}
	.styled-table tbody tr.team-vincente {
    font-weight: bold;
    color: #217074;
}
	.center {
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: auto;
	}

$(".header").click(function() {
    if ($(".active").removeClass("active")) {
        $(this).removeClass("active");
    }
    $(this).addClass("active");
});