Blog Picentino by @PicentinoD - Codewith.it

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

References

_selfApre collegamenti ipertestuali nella stessa pagina del browser
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
<option>Serve ad inserire una voce in un menu di selezione.
<pre>Indica una parte di testo preformattato
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>

Users

Log in to search for users

Explore

Find inspiration

Costruzione di tabella con html5

Twitchpage1confirm

esercitazione simona

Tabella Marcatori Serie A 20

un casino pazzesco

PROVE SI SPERA SERIE

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