Blog Picentino by @PicentinoD - Codewith.it

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

Referenze

<video>Integra e controlla video in una pagina HTML
<tbody>Definisce il contenuto principale di una tabella.
<option>Serve ad inserire una voce in un menu di selezione.
selectedPre-seleziona un elemento di input
<h5>Titolo di intestazione di quinto livello
<p>Serve a definire paragrafi di testo

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione Informatica

Esercitazione STA 16/03

Heads Or Tails Random Tally

Web Design Final

ZacTour - Scopri la Puglia Autenti

Collegamenti ipertestuali

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");
});